Add Language settings dialog

Change-Id: Ie3455f32ac6ceff3c52d79643a6f7f82106ab7f1

UniversalLanguageSelector.hooks.php

@@ -28,6 +28,8 @@ class UniversalLanguageSelectorHooks {
 	 */
 	public static function addModules( $out, $skin ) {
 		$out->addModules( 'ext.uls.init' );
+		$out->addModules( 'ext.uls.languagesettings' );
+		$out->addModules( 'ext.uls.displaysettings' );
 		return true;
 	}
 	/**

UniversalLanguageSelector.php

@@ -75,6 +75,22 @@ $wgResourceModules['ext.uls.init'] = array(
 	'position' => 'top',
 );
 
+$wgResourceModules['ext.uls.languagesettings'] = array(
+	'scripts' => 'resources/js/ext.uls.languagesettings.js',
+	'styles' => 'resources/css/ext.languagesettings.css',
+	'localBasePath' => $dir,
+	'remoteExtPath' => 'UniversalLanguageSelector',
+);
+
+$wgResourceModules['ext.uls.displaysettings'] = array(
+	'scripts' => 'resources/js/ext.uls.displaysettings.js',
+	'localBasePath' => $dir,
+	'dependencies' => array(
+		'ext.uls.languagesettings',
+	),
+	'remoteExtPath' => 'UniversalLanguageSelector',
+);
+
 $wgResourceModules['jquery.uls'] = array(
 	'scripts' => array(
 		'lib/jquery.uls/src/jquery.uls.core.js',

lib/jquery.uls/src/jquery.uls.core.js

@@ -91,7 +91,9 @@
 		},
 
 		listen: function() {
-			var that = this, lcd;
+			var lcd,
+				that = this;
+
 			// Register all event listeners to the ULS here.
 			that.$element.on( 'click', $.proxy( that.click, that ) );
 

resources/css/ext.languagesettings.css

@@ -0,0 +1,89 @@
+#uls-current-language-nav {
+	/* @embed */
+	background: url('../images/cog-16x16-ltr.png') no-repeat scroll right top transparent;
+	cursor: pointer;
+}
+
+#language-settings-dialog {
+	display: none; /* hidden initially */
+
+	/* XXX pretty random position values, just to make it visible */
+	bottom: 100px;
+	left: 200px;
+
+	/* From here on - from .uls-menu */
+	position: fixed;
+	z-index: 1000;
+	display: none;
+	min-width: 800px; /* changed */
+	margin-top: 1px;
+	width: 45%;
+	/* Styling */
+	background-color: #ffffff;
+	border: 1px solid #ccc;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	*border-right-width: 2px;
+	*border-bottom-width: 2px;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	-webkit-background-clip: padding-box;
+	-moz-background-clip: padding;
+	background-clip: padding-box;
+}
+
+/* From uls-menu, unchanged */
+#uls-current-language-nav a {
+	color: #0088CC;
+}
+#uls-current-language-nav h1 {
+	font-weight: normal;
+	padding-top: 1.25em;
+	border: none;
+	padding-bottom: 3px;
+	font-size: 18pt;
+	line-height: 1.25em;
+	padding-left: 15px;
+	color: #777;
+}
+#uls-current-language-nav h2 {
+	font-size: 16pt;
+	line-height: 1.5em;
+	padding-left: 6px;
+	margin-top: 0px;
+	margin-bottom: 15px;
+	border-bottom: none;
+	color: #777;
+}
+.uls-menu h3 {
+	font-size: 14pt;
+	line-height: 1.5em;
+	padding-left: 0px;
+	margin-top: 0px;
+	margin-bottom: 10px;
+	border-bottom: none;
+}
+
+.language-settings-buttons {
+	text-align: right;
+}
+
+/* Buttons in the selector panel */
+.menu-section {
+	color: #777;
+	padding: 5px 0 5px 50px;
+	border-left: 3px solid transparent;
+	display: block;
+	font-size: 12pt;
+	background: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-grey.png) no-repeat scroll 15px center transparent;
+}
+
+.menu-section.active{
+	color: black;
+	background-color: #F6F6F6;
+	border-left-color: #3366BB;
+	background-image: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-blue.svg);
+}

resources/js/ext.uls.displaysettings.js

@@ -0,0 +1,51 @@
+/**
+ * ULS-based display settings panel
+ *
+ * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
+ * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
+ * contributors. See CREDITS for a list.
+ *
+ * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
+ * have to do anything special to choose one license or the other and you don't
+ * have to notify anyone which license you are using. You are free to use
+ * UniversalLanguageSelector in commercial projects as long as the copyright
+ * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
+ *
+ * @file
+ * @ingroup Extensions
+ * @licence GNU General Public Licence 2.0 or later
+ * @licence MIT License
+ */
+
+( function( $ ) {
+	"use strict";
+	var template = '<div><h3>Display Settings</h3></div>' +
+		'<div><h4>Select Language</h4></div>' +
+		'<div>' +
+			'<button>English</button>' +
+			'<button>Deutsch</button>' +
+			'<button>עברית</button>' +
+			'<button class="uls-trigger">...</button>' +
+		'</div>' +
+		'<div><h4>Font Settings</h4></div>' +
+		'<div>' +
+			'<input type="checkbox" id="webfonts-enable-checkbox" />' +
+			'<label for="webfonts-enable-checkbox">Download fonts automatically when needed</label>' +
+		'</div>' +
+		'<div><h5>Select your preferred fonts to use</h5></div>' +
+		'<div>Fonts for English<select></select></div>' +
+		'<div>Fonts for Spanish<select></select></div>' +
+		'<div class="language-settings-buttons"><button>Cancel</button><button>Apply changes</button></div>';
+
+	var displaySettings = {
+		render: function() {
+			return template;
+		},
+		name: "Display",
+		description: "Set the fonts for languages"
+	};
+
+	$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
+		display: displaySettings
+	} );
+} ) ( jQuery );

resources/js/ext.uls.languagesettings.js

@@ -0,0 +1,161 @@
+/**
+ * ULS-based language settings dialog for MediaWiki.
+ *
+ * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
+ * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
+ * contributors. See CREDITS for a list.
+ *
+ * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
+ * have to do anything special to choose one license or the other and you don't
+ * have to notify anyone which license you are using. You are free to use
+ * UniversalLanguageSelector in commercial projects as long as the copyright
+ * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
+ *
+ * @file
+ * @ingroup Extensions
+ * @licence GNU General Public Licence 2.0 or later
+ * @licence MIT License
+ */
+
+( function( $ ) {
+	"use strict";
+
+	var closeRow = '<div class="row" id="languagesettings-close">' +
+		'<span class="icon-close"></span>' +
+		'</div>';
+	var settingsMenu = '<div class="four columns">' +
+		'<h1>Language settings</h1>' + // TODO i18n
+		'<div class="settings-menu-items">' +
+		'</div>' +
+		'</div>';
+	var settingsPanel = '<div id="languagesettings-settings-panel" class="eight columns">' +
+		'</div>';
+	var panelsRow = '<div class="row" id="languagesettings-panels">' +
+		settingsMenu +
+		settingsPanel +
+		'</div>';
+	var windowTemplate = '<div style="display: block;" id="language-settings-dialog" class="uls-menu">' +
+		closeRow +
+		panelsRow +
+		'</div>';
+
+	var LanguageSettings = function ( element, options ) {
+		this.$element = $( element );
+		this.options = $.extend( {}, $.fn.languagesettings.defaults, options );
+		this.$window = $( this.options.template );
+		this.shown = false;
+		this.initialized = false;
+		this.init();
+		this.listen();
+	};
+
+	LanguageSettings.prototype = {
+		constructor: LanguageSettings,
+
+		init: function(){
+			$( "body" ).append( this.$window );
+			this.hide();
+		},
+
+		listen: function() {
+			var that = this;
+			// Register all event listeners to the ULS here.
+			that.$element.on( "click", $.proxy( that.click, that ) );
+			$( ".icon-close" ).on( "click", $.proxy( that.click, that ) );
+		},
+
+		render: function() {
+			// Get the name of all registered modules and list them in left side menu.
+			var modules = $.fn.languagesettings.modules;
+			var firstModuleName = this.options.defaultModule;
+			for ( var moduleName in modules ) {
+				if ( modules.hasOwnProperty( moduleName ) ) {
+					if ( !firstModuleName ) {
+						firstModuleName = moduleName;
+					}
+					// Call render function on the current setting module.
+					this.renderModule( moduleName );
+				}
+			}
+
+			// Show the default module
+			$( "#languagesettings-settings-panel" ).html(
+				$.fn.languagesettings.modules[firstModuleName].render()
+			);
+		},
+
+		renderModule: function( moduleName ) {
+			var $settingsMenuItems = this.$window.find( ".settings-menu-items" );
+			var $settingsPanel = this.$window.find( "#languagesettings-settings-panel" );
+			var module = $.fn.languagesettings.modules[moduleName];
+			var $settingsTitle = $( "<div>" )
+				.addClass( "settings-title" )
+				.text( module.name );
+			var $settingsText = $( "<span>" )
+				.addClass( "settings-text" )
+				.text( module.description );
+			var $settingsLink = $( "<div>" )
+				.addClass( moduleName + "-settings-block" )
+				.prop( "id", moduleName + "-settings-block" )
+				.data( "module", module )
+				.append( $settingsTitle )
+				.append( $settingsText );
+
+			$settingsMenuItems.append( $settingsLink );
+
+			$settingsLink.on( "click", function() {
+				$settingsPanel.html( $( this ).data( "module" ).render() );
+			} );
+		},
+
+		show: function() {
+			if ( !this.initialized ) {
+				this.render();
+				this.initialized = true;
+			}
+			this.shown = true;
+			this.$window.show();
+		},
+
+		hide: function() {
+			this.shown = false;
+			this.$window.hide();
+		},
+
+		click: function( e ) {
+			e.stopPropagation();
+			e.preventDefault();
+			if ( !this.shown ) {
+				this.show();
+			} else {
+				this.hide();
+			}
+		}
+	};
+
+	$.fn.languagesettings = function( option ) {
+		return this.each( function() {
+			var $this = $( this ),
+				data = $this.data( "languagesettings" ),
+				options = typeof option === "object" && option;
+
+			if ( !data ) {
+				$this.data( "languagesettings", ( data = new LanguageSettings( this, options ) ) );
+			}
+			if ( typeof option === "string" ) {
+				data[option]();
+			}
+		} );
+	};
+
+	$.fn.languagesettings.modules = {};
+	$.fn.languagesettings.defaults = {
+		settings: {},
+		template: windowTemplate,
+		modules: {},
+		defaultModule: false
+	};
+
+	$.fn.languagesettings.Constructor = LanguageSettings;
+
+} )( jQuery );

tests/language_settings.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8"/>
+
+		<!--
+		Always force latest IE rendering engine (even in intranet) & Chrome Frame
+		Remove this if you use the .htaccess
+		-->
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+
+		<title>Universal Language Selector</title>
+		<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
+		<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> -->
+		<!-- <meta name="description" content=""/> -->
+		<meta name="author" content="Santhosh Thottingal"/>
+		<link href="../lib/jquery.uls/css/jquery.uls.grid.css" rel="stylesheet"/>
+		<link href="../lib/jquery.uls/css/jquery.uls.css" rel="stylesheet"/>
+		<link href="../resources/css/ext.uls.css" rel="stylesheet"/>
+		<!-- Libs -->
+		<script src="../lib/jquery.uls/examples/resources/jquery.js"></script>
+		<!-- Source -->
+		<link href="../resources/css/ext.languagesettings.css" rel="stylesheet"/>
+		<script src="../resources/js/ext.uls.languagesettings.js"></script>
+		<script src="../resources/js/ext.uls.displaysettings.js"></script>
+		<script>
+			$( document ).ready( function() {
+				$( '.uls-languagesettings-trigger' ).languagesettings();
+			} );
+		</script>
+	</head>
+
+	<body>
+		<a href="#" class="uls-languagesettings-trigger">Language Settings</a>
+	</body>
+</html>