More UI code

Not all functionalities are added.

Change-Id: I37007a8dedce6bcb055a9d6d79376f40868fd6dd

UniversalLanguageSelector.php

@@ -89,7 +89,8 @@ $wgResourceModules['ext.uls.webfonts'] = array(
 	'localBasePath' => $dir,
 	'remoteExtPath' => 'UniversalLanguageSelector',
 	'dependencies' => array(
-		'jquery.webfonts'
+		'jquery.webfonts',
+		'ext.uls.webfonts.repository',
 	),
 );
 
@@ -138,7 +139,7 @@ $wgResourceModules['jquery.webfonts'] = array(
 );
 
 $wgResourceModules['ext.uls.webfonts.repository'] = array(
-	'scripts' => 'resources/js/jquery.webfonts.repository.js',
+	'scripts' => 'resources/js/ext.uls.webfonts.repository.js',
 	'localBasePath' => $dir,
 	'remoteExtPath' => 'UniversalLanguageSelector',
 );

resources/css/ext.languagesettings.css

@@ -39,6 +39,13 @@
 	border-bottom: none;
 }
 
+.languagesettings-menu h1 {
+	font-size: 18pt;
+	line-height: 20pt;
+	margin-top: 0;
+	padding-top: 15px;
+}
+
 .language-settings-buttons {
 	text-align: right;
 }
@@ -58,37 +65,36 @@
 	border-left-color: #3366BB;
 }
 
-button.toggle.button {
+button.button {
-	background: #eee;
+	background-color: #E6E6E6;
-	color: black;
+	background-image: -moz-linear-gradient(center top, #F0F0F0, #E6E6E6);
+	border: 1px solid #C9C9C9;
+	border-radius: 3px 3px 3px 3px;
+	color: #252525;
 	cursor: pointer;
-	border-top: solid 2px #eaeaea;
+	display: inline-block;
-	border-left: solid 2px #eaeaea;
+	font: bold 0.813em/1 Arial, sans-serif;
-	border-bottom: solid 2px #777;
+	padding: 0.4065em 1.2195em;
-	border-right: solid 2px #777;
-	padding: 5px 5px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
 	text-align: center;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 }
 
-button.toggle.button.down {
+button.button:active,
-	background: #bbb;
+button.button.down {
-	border-top: solid 2px #777;
+	background-color: #D8D8D8;
-	border-left: solid 2px #777;
+	background-image: -moz-linear-gradient(center top, #D3D3D3, #D8D8D8);
-	border-bottom: solid 2px #eaeaea;
+	border-color: #C9C9C9;
-	border-right: solid 2px #eaeaea;
 }
 
 .language-settings-buttons {
-	border-top: solid 2px #aaa;
+	border-top: 1px solid #F0F0F0;
-	padding: 10px;
+	margin-top: 15px;
-	margin-top: 10px;
+	padding: 15px;
+	width: auto;
 }
 
 label.checkbox input[type="checkbox"] {
 	padding-left: -20px;
 	float: left;
+	color: #777777;
 }

resources/js/ext.uls.displaysettings.js

@@ -19,59 +19,164 @@
 
 ( function( $ ) {
 	"use strict";
-	var template = '<div><h3>Display Settings</h3></div>'
+
-			+ '<div><h4>Select Language</h4></div>'
+	var template = '<div class="row"><h3>Display Settings</h3></div>'
-			+ '<div class="row">'
+			+ '<div><h4>Language used for menus</h4></div>'
-			+ '<button class="two columns toggle button down">English</button>'
+			+ '<div class="uls-ui-languages row">'
-			+ '<button class="two columns offset-by-one toggle button">Deutsch</button>'
-			+ '<button class="two columns offset-by-one toggle button">עברית</button>'
-			+ '<button id="uls-more-languages" class="two columns offset-by-one toggle button"">...</button>'
 			+ '</div>'
 			+ '<div class="row"><h4>Font Settings</h4></div>'
-			+ '<div  class="row">'
+			+ '<div class="row">'
 			+ '<label class="checkbox"><input type="checkbox" checked id="webfonts-enable-checkbox" />'
 			+ '<b>Download fonts automatically when needed</b> '
 			+ 'Web fonts will be downloaded when text in special scripts is displayed. '
 			+ '<a href="#">More Information</a>'
 			+ '</span></label>'
 			+ '</div>'
-			+ '<div class="row"><h5>Select your preferred fonts to use</h5></div>'
+			+ '<div class="row"><h5>Set your preferred fonts to use</h5></div>'
 			+ '<div class="row">'
-			+ '<div class="six columns">Fonts for English</div>'
+			+ '<div class="six columns"><label id="font-selector"></label></div>'
 			+ '<select class="three columns end uls-font-select"></select></div>'
 			+ '</div>'
 			+ '<div class="row"></div>'
 			+ '<div class="row language-settings-buttons">'
-			+ '<button class="three columns offset-by-three blue button">Cancel</button>'
+			+ '<button class="three columns offset-by-three button uls-settings-close">Cancel</button>'
-			+ '<button  class="four columns offset-by-one active blue button">Apply changes</button>'
+			+ '<button class="four columns offset-by-one active blue button">Apply changes</button>'
-			+ '</div>'; // FIXME too much hardcoding.
+			+ '</div>'; // FIXME i18n and too much hardcoding.
 
-	var displaySettings = {
+	var DisplaySettings = function () {
-		name: "Display",
+		this.name = "Display";
-		description: "Set the fonts for languages",
+		this.description = "Set the languages of menus and fonts";
+		this.$template = $( template );
+		this.language = this.currentLanguage();
+		this.$webfonts = null;
+	};
 
-		render: function() {
+	DisplaySettings.prototype = {
-			return template;
+
+		Constructor: DisplaySettings,
+
+		/**
+		 * Render the module into a given target
+		 * @param $target
+		 */
+		render: function ( $target ) {
+			$target.empty();
+			this.$webfonts = $( 'body' ).data( 'webfonts' );
+			$target.append( this.$template );
+			this.prepareLanguages();
+			this.prepareFonts();
+			this.listen();
 		},
 
-		listen: function() {
+		/**
-			var $webfonts = $( 'body' ).data( 'webfonts' );
+		 * Prepare the UI language chooser
-			var fonts = $webfonts.list( 'en' ); // FIXME
+		 */
+		prepareLanguages: function () {
+			var $languages = $( 'div.uls-ui-languages' );
+			$languages.empty();
+			var previousLanguages = this.previousLanguages();
+			var languages = [this.language];
+			$.merge( languages, previousLanguages);
+			$.unique( languages );
+			for ( var i = 0; i < 3; i++ ) {
+				var language = languages[i];
+				var $button = $( '<button>' )
+					.addClass( 'two columns button' )
+					.text( $.uls.data.autonym( language ) );
+				if ( language === this.language ) {
+					 $button.addClass( 'down' );
+				}
+				if ( i > 0 ) {
+					 $button.addClass( 'offset-by-one' );
+				}
+				$button.data( 'language', language );
+				$languages.append( $button );
+				$button.on ( 'click', function () {
+					this.language = $( this ).data( 'language' );
+				} );
+			}
+			var $moreLanguagesButton = $( '<button>' )
+				.prop( 'id', 'uls-more-languages' )
+				.addClass( 'two columns offset-by-one button' )
+				.text( '...' );
+			$languages.append( $moreLanguagesButton );
+		},
+
+		/**
+		 * Get previous languages
+		 * @returns {Array}
+		 */
+		previousLanguages: function () {
+			// FIXME
+			return [ $.cookie( 'uls-previous-language' ) || 'he', 'hi', 'ml', 'ta'];
+		},
+
+		/**
+		 * Get the current language.
+		 * @returns String Current language
+		 */
+		currentLanguage: function () {
+			if ( !window.mw ) {
+				return navigator.language || navigator.userLanguage;
+			}
+			return mw.config.get( 'wgUserLanguage' );
+		},
+
+		/**
+		 * Prepare the font chooser.
+		 */
+		prepareFonts: function () {
+			var fonts = this.$webfonts.list( this.language );
 			var $fontSelector = $( 'select.uls-font-select' );
-			$.each( fonts, function( key, font ) {
+			$fontSelector.find( 'option' ).remove();
+			$.each( fonts, function ( key, font ) {
 				$fontSelector.append( $( "<option></option>" )
 					.attr( "value", font ).text( font ) );
 			} );
-			$( "button.toggle.button" ).click( function() {
+			var $fontLabel = $( 'label#font-selector' );
-				$( "button.toggle.button" ).removeClass( "down" );
+			$fontLabel.text( "Select font for " + $.uls.data.autonym( this.language ) );
+		},
+
+		/**
+		 * Register general event listeners
+		 */
+		listen: function () {
+			var that = this;
+			$( "button.button" ).click( function () {
+				$( "button.button" ).removeClass( "down" );
 				$( this ).addClass( "down" );
+				that.language = $( this ).data( 'language' ) || that.language;
+				that.prepareFonts();
 			} );
-			// $( '#uls-more-languages' ).uls({
+		},
-			// });
+
+		/**
+		 * Change the language of wiki using setlang URL parameter
+		 * @param {String} language
+		 */
+		changeLanguage: function ( language ) {
+			$.cookie( 'uls-previous-language', this.currentLanguage() );
+			var uri = new mw.Uri( window.location.href );
+			uri.extend( {
+				setlang: language
+			} );
+			window.location.href = uri.toString();
+		},
+
+		/**
+		 * Handle the apply button press
+		 */
+		apply: function () {
+			var $fontSelector = $( 'select.uls-font-select' );
+			var font = $fontSelector.find( 'option:selected' ).val();
+			this.$webfonts.apply( font );
+			if ( this.language !== this.currentLanguage() ) {
+				this.changeLanguage( this.language );
+			}
 		}
 	};
 
 	$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
-		display: displaySettings
+		display: new DisplaySettings()
 	} );
 } ) ( jQuery );

resources/js/ext.uls.init.js

@@ -20,7 +20,7 @@
 ( function( $, mw ) {
 	"use strict";
 
-	$( document ).ready( function( ) {
+	$( document ).ready( function() {
 		var $ulsTrigger = $( '.uls-trigger' ),
 			previousLang = $.cookie( 'uls-previous-language' ),
 			currentLang = mw.config.get( 'wgUserLanguage' );

resources/js/ext.uls.languagesettings.js

@@ -23,7 +23,7 @@
 	var closeRow = '<div class="row" id="languagesettings-close">' +
 		'<span id="languagesettings-close" class="icon-close"></span>' +
 		'</div>';
-	var settingsMenu = '<div class="four columns">' +
+	var settingsMenu = '<div class="four columns languagesettings-menu">' +
 		'<h1>Language settings</h1>' + // TODO i18n
 		'<div class="settings-menu-items">' +
 		'</div>' +
@@ -59,9 +59,10 @@
 
 		listen: function() {
 			var that = this;
-			// Register all event listeners to the ULS here.
+			// Register all event listeners to the ULS language settings here.
 			that.$element.on( "click", $.proxy( that.click, that ) );
-			$( "#languagesettings-close" ).on( "click", $.proxy( that.click, that ) );
+			$( '#languagesettings-close' ).on( "click", $.proxy( that.click, that ) );
+			$( '.uls-settings-close' ).on( "click", $.proxy( that.click, that ) );
 		},
 
 		render: function() {
@@ -79,13 +80,12 @@
 			}
 
 			// Show the default module
-			$( "#languagesettings-settings-panel" ).html( firstModule.render() );
+			firstModule.render( $( "#languagesettings-settings-panel" ) );
-			firstModule.listen();
 		},
 
 		renderModule: function( moduleName ) {
+			var that = this;
 			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" )
@@ -104,8 +104,8 @@
 
 			$settingsLink.on( "click", function() {
 				var module = $( this ).data( "module" );
-				$settingsPanel.html( module.render() );
+				var $settingsPanel = that.$window.find( "#languagesettings-settings-panel" );
-				module.listen();
+				module.render( $settingsPanel );
 				$( this ).addClass( 'active' );
 			} );
 		},

resources/js/ext.uls.webfonts.js

@@ -19,15 +19,11 @@
 ( function($, mw) {
 	"use strict";
 	$( document ).ready( function() {
-		// FIXME Dummy repository
+		var mediawikiFontRepository = $.webfonts.repository;
+		mediawikiFontRepository.base = mw.config.get( 'wgExtensionAssetsPath' )
+			+ '/UniversalLanguageSelector/data/fontrepo/fonts/';
 		$( 'body' ).webfonts( {
-			repository : {
+			repository: mediawikiFontRepository
-				base : '../data/fonts/',
-				fonts : {},
-				languages : {
-					'en' : [ 'Sans', 'Serif' ]
-				}
-			}
 		} );
 	} );
-} )( jQuery );
+} )( jQuery, mediaWiki );