Merge "WebFonts integration with ULS display settings."

resources/js/ext.uls.displaysettings.js

@@ -19,30 +19,56 @@
 
 ( 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 template = '<div><h3>Display Settings</h3></div>'
+			+ '<div><h4>Select Language</h4></div>'
+			+ '<div class="row">'
+			+ '<button class="two columns toggle button down">English</button>'
+			+ '<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">'
+			+ '<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">'
+			+ '<div class="six columns">Fonts for English</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="four columns offset-by-one active blue button">Apply changes</button>'
+			+ '</div>'; // FIXME too much hardcoding.
 
 	var displaySettings = {
+		name: "Display",
+		description: "Set the fonts for languages",
+
 		render: function() {
 			return template;
 		},
-		name: "Display",
-		description: "Set the fonts for languages"
+
+		listen: function() {
+			var $webfonts = $( 'body' ).data( 'webfonts' );
+			var fonts = $webfonts.list( 'en' ); // FIXME
+			var $fontSelector = $( 'select.uls-font-select' );
+			$.each( fonts, function( key, font ) {
+				$fontSelector.append( $( "<option></option>" )
+					.attr( "value", font ).text( font ) );
+			} );
+			$( "button.toggle.button" ).click( function() {
+				$( "button.toggle.button" ).removeClass( "down" );
+				$( this ).addClass( "down" );
+			} );
+			// $( '#uls-more-languages' ).uls({
+			// });
+		}
 	};
 
 	$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {

resources/js/ext.uls.init.js

@@ -57,8 +57,12 @@
 		$.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
 			render: function() {
 				var $displaySettings = displaySettings();
+				var that = this;
 				this.$menu.find( "div#settings-block" ).append( $displaySettings );
 				$displaySettings.languagesettings();
+				$displaySettings.on( 'click', function() {
+					that.hide();
+				} );
 			}
 		} );
 

resources/js/ext.uls.languagesettings.js

@@ -21,7 +21,7 @@
 	"use strict";
 
 	var closeRow = '<div class="row" id="languagesettings-close">' +
-		'<span class="icon-close"></span>' +
+		'<span id="languagesettings-close" class="icon-close"></span>' +
 		'</div>';
 	var settingsMenu = '<div class="four columns">' +
 		'<h1>Language settings</h1>' + // TODO i18n
@@ -61,17 +61,17 @@
 			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 ) );
+			$( "#languagesettings-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;
+			var firstModule = modules[this.options.defaultModule];
 			for ( var moduleName in modules ) {
 				if ( modules.hasOwnProperty( moduleName ) ) {
-					if ( !firstModuleName ) {
-						firstModuleName = moduleName;
+					if ( !firstModule ) {
+						firstModule = modules[moduleName];
 					}
 					// Call render function on the current setting module.
 					this.renderModule( moduleName );
@@ -79,9 +79,8 @@
 			}
 
 			// Show the default module
-			$( "#languagesettings-settings-panel" ).html(
-				$.fn.languagesettings.modules[firstModuleName].render()
-			);
+			$( "#languagesettings-settings-panel" ).html( firstModule.render() );
+			firstModule.listen();
 		},
 
 		renderModule: function( moduleName ) {
@@ -95,7 +94,7 @@
 				.addClass( "settings-text" )
 				.text( module.description );
 			var $settingsLink = $( "<div>" )
-				.addClass( moduleName + "-settings-block" )
+				.addClass( moduleName + "-settings-block menu-section" )
 				.prop( "id", moduleName + "-settings-block" )
 				.data( "module", module )
 				.append( $settingsTitle )
@@ -104,7 +103,10 @@
 			$settingsMenuItems.append( $settingsLink );
 
 			$settingsLink.on( "click", function() {
-				$settingsPanel.html( $( this ).data( "module" ).render() );
+				var module = $( this ).data( "module" );
+				$settingsPanel.html( module.render() );
+				module.listen();
+				$( this ).addClass( 'active' );
 			} );
 		},
 
@@ -112,7 +114,17 @@
 			if ( !this.initialized ) {
 				this.render();
 				this.initialized = true;
+				var pos = $.extend( {}, this.$element.offset(), {
+					height: this.$element[0].offsetHeight
+				} );
+				// FIXME this is not exactly correct. position may not
+				// be relative to the trigger.
+				this.$window.css( {
+					top: pos.top + pos.height,
+					left: '25%'
+				} );
 			}
+
 			this.shown = true;
 			this.$window.show();
 		},

resources/js/ext.uls.webfonts.js

@@ -0,0 +1,33 @@
+/**
+ * ULS-Webfonts integration
+ *
+ * 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($, mw) {
+	"use strict";
+	$( document ).ready( function() {
+		// FIXME Dummy repository
+		$( 'body' ).webfonts( {
+			repository : {
+				base : '../data/fonts/',
+				fonts : {},
+				languages : {
+					'en' : [ 'Sans', 'Serif' ]
+				}
+			}
+		} );
+	} );
+} )( jQuery );