WebFonts integration with ULS display settings.

This does not add much functionality. That will come in
future commits.

This commit has many cleanup, refactoring on the display settings,
language settings code.

Change-Id: I7fbc3ebb9b67c1afd80f159c2d82cd2a1c6bea74

UniversalLanguageSelector.hooks.php

@@ -108,7 +108,7 @@ class UniversalLanguageSelectorHooks {
 		$data .= "
 		<div class='uls-menu' data-languages=\"" . $languageData . "\">
 			<div class='row'>
-				<span class='icon-close'></span>
+				<span id='uls-close' class='icon-close'></span>
 			</div>
 			<div class='row'>
 				<div class='four columns'>

UniversalLanguageSelector.php

@@ -71,7 +71,7 @@ $wgResourceModules['ext.uls.init'] = array(
 		'mediawiki.Uri',
 		'jquery.tipsy',
 		'jquery.uls',
-		'ext.uls.languagesettings',
+		'ext.uls.displaysettings',
 	),
 	'position' => 'top',
 );
@@ -83,12 +83,21 @@ $wgResourceModules['ext.uls.languagesettings'] = array(
 	'remoteExtPath' => 'UniversalLanguageSelector',
 );
 
+$wgResourceModules['ext.uls.webfonts'] = array(
+	'scripts' => 'resources/js/ext.uls.webfonts.js',
+	'localBasePath' => $dir,
+	'remoteExtPath' => 'UniversalLanguageSelector',
+	'dependencies' => array(
+		'jquery.webfonts'
+	),
+);
+
 $wgResourceModules['ext.uls.displaysettings'] = array(
 	'scripts' => 'resources/js/ext.uls.displaysettings.js',
 	'localBasePath' => $dir,
 	'dependencies' => array(
 		'ext.uls.languagesettings',
-		'jquery.webfonts'
+		'ext.uls.webfonts'
 	),
 	'remoteExtPath' => 'UniversalLanguageSelector',
 );

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

@@ -98,7 +98,7 @@
 			that.$element.on( 'click', $.proxy( that.click, that ) );
 
 			// Handle click on close button
-			$( ".icon-close" ).on( 'click', $.proxy( that.click, that ) );
+			$( "#uls-close" ).on( 'click', $.proxy( that.click, that ) );
 
 			// Handle key press events on the menu
 			that.$menu.on('keypress', $.proxy(this.keypress, this) )

resources/css/ext.languagesettings.css

@@ -1,44 +1,14 @@
-#uls-current-language-nav {
+#uls-current-language-nav { /* @embed */
-	/* @embed */
+	background: url('../images/cog-16x16-ltr.png') no-repeat scroll right
-	background: url('../images/cog-16x16-ltr.png') no-repeat scroll right top transparent;
+		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;
@@ -49,6 +19,7 @@
 	padding-left: 15px;
 	color: #777;
 }
+
 #uls-current-language-nav h2 {
 	font-size: 16pt;
 	line-height: 1.5em;
@@ -58,6 +29,7 @@
 	border-bottom: none;
 	color: #777;
 }
+
 .uls-menu h3 {
 	font-size: 14pt;
 	line-height: 1.5em;
@@ -78,12 +50,45 @@
 	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);
+}
+
+button.toggle.button {
+	background: #eee;
+	color: black;
+	cursor: pointer;
+	border-top: solid 2px #eaeaea;
+	border-left: solid 2px #eaeaea;
+	border-bottom: solid 2px #777;
+	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);
+}
+
+button.toggle.button.down {
+	background: #bbb;
+	border-top: solid 2px #777;
+	border-left: solid 2px #777;
+	border-bottom: solid 2px #eaeaea;
+	border-right: solid 2px #eaeaea;
+}
+
+.language-settings-buttons {
+	border-top: solid 2px #aaa;
+	padding: 10px;
+	margin-top: 10px;
+}
+
+label.checkbox input[type="checkbox"] {
+	padding-left: -20px;
+	float: left;
 }

resources/css/ext.uls.css

@@ -2,6 +2,7 @@ div#settings-block {
 	border-left: 1px solid #C9C9C9;
 	padding-left: 10px;
 }
+
 div#display-settings-block { 
 	/* @embed */
 	background: url('../images/display.png');
@@ -9,11 +10,72 @@ div#display-settings-block {
 	background-size: 20px auto;
 	padding-left: 25px;
 	cursor: pointer;
+	background-color: #F6F6F6;
 }
+
 .settings-title {
 	font-size: 11pt;
 }
+
 .settings-text {
 	color: #555555;
 	font-size: 9pt;
 }
+
+button.button {
+	display: inline-block;
+	padding: 0.4065em 1.2195em 0.4065em;
+	font: bold 0.813em Arial, sans-serif;
+	line-height: 1;
+	color: black;
+	text-align: center;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	cursor: pointer;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+}
+
+button.button.blue {
+	background-color: #3366bb;
+	color: white;
+	background-image: -moz-linear-gradient(top, #3670c8, #3366bb);
+	background-image: -ms-linear-gradient(top, #3670c8, #3366bb);
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3670c8),
+		color-stop(100%, #3366bb) );
+	background-image: -webkit-linear-gradient(top, #3670c8, #3366bb);
+	background-image: linear-gradient(#3670c8, #3366bb);
+	border: 1px #33589f solid;
+	-ms-filter:
+		"progid:DXImageTransform.Microsoft.gradient(startColorstr='#3670c8', endColorstr='#3366bb', GradientType=0)";
+	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3670c8',
+		endColorstr='#3366bb', GradientType=0 );
+}
+
+button.button.blue:hover {
+	background-color: #3f77d7;
+	background-image: -moz-linear-gradient(top, #4c84da, #3f77d7);
+	background-image: -ms-linear-gradient(top, #4c84da, #3f77d7);
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c84da),
+		color-stop(100%, #3f77d7) );
+	background-image: -webkit-linear-gradient(top, #4c84da, #3f77d7);
+	background-image: linear-gradient(#4c84da, #3f77d7);
+	-ms-filter:
+		"progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c84da', endColorstr='#3f77d7', GradientType=0)";
+	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c84da',
+		endColorstr='#3f77d7', GradientType=0 );
+}
+
+button.button.blue:active {
+	background-color: #2a549c;
+	background-image: -moz-linear-gradient(top, #2d5ea9, #2a549c);
+	background-image: -ms-linear-gradient(top, #2d5ea9, #2a549c);
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d5ea9),
+		color-stop(100%, #2a549c) );
+	background-image: -webkit-linear-gradient(top, #2d5ea9, #2a549c);
+	background-image: linear-gradient(#2d5ea9, #2a549c);
+	-ms-filter:
+		"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d5ea9', endColorstr='#2a549c', GradientType=0)";
+	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2d5ea9',
+		endColorstr='#2a549c', GradientType=0 );
+}

resources/js/ext.uls.displaysettings.js

@@ -19,30 +19,56 @@
 
 ( function( $ ) {
 	"use strict";
-	var template = '<div><h3>Display Settings</h3></div>' +
+	var template = '<div><h3>Display Settings</h3></div>'
-		'<div><h4>Select Language</h4></div>' +
+			+ '<div><h4>Select Language</h4></div>'
-		'<div>' +
+			+ '<div class="row">'
-			'<button>English</button>' +
+			+ '<button class="two columns toggle button down">English</button>'
-			'<button>Deutsch</button>' +
+			+ '<button class="two columns offset-by-one toggle button">Deutsch</button>'
-			'<button>עברית</button>' +
+			+ '<button class="two columns offset-by-one toggle button">עברית</button>'
-			'<button class="uls-trigger">...</button>' +
+			+ '<button id="uls-more-languages" class="two columns offset-by-one toggle button"">...</button>'
-		'</div>' +
+			+ '</div>'
-		'<div><h4>Font Settings</h4></div>' +
+			+ '<div class="row"><h4>Font Settings</h4></div>'
-		'<div>' +
+			+ '<div  class="row">'
-			'<input type="checkbox" id="webfonts-enable-checkbox" />' +
+			+ '<label class="checkbox"><input type="checkbox" checked id="webfonts-enable-checkbox" />'
-			'<label for="webfonts-enable-checkbox">Download fonts automatically when needed</label>' +
+			+ '<b>Download fonts automatically when needed</b> '
-		'</div>' +
+			+ 'Web fonts will be downloaded when text in special scripts is displayed. '
-		'<div><h5>Select your preferred fonts to use</h5></div>' +
+			+ '<a href="#">More Information</a>'
-		'<div>Fonts for English<select></select></div>' +
+			+ '</span></label>'
-		'<div>Fonts for Spanish<select></select></div>' +
+			+ '</div>'
-		'<div class="language-settings-buttons"><button>Cancel</button><button>Apply changes</button></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 ) {
+					if ( !firstModule ) {
-						firstModuleName = moduleName;
+						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(
+			$( "#languagesettings-settings-panel" ).html( firstModule.render() );
-				$.fn.languagesettings.modules[firstModuleName].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 );

tests/language_settings.html

@@ -19,10 +19,12 @@
 		<link href="../resources/css/ext.uls.css" rel="stylesheet"/>
 		<!-- Libs -->
 		<script src="../lib/jquery.uls/examples/resources/jquery.js"></script>
+		<script src="../lib/jquery.webfonts.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 src="../resources/js/ext.uls.webfonts.js"></script>
 		<script>
 			$( document ).ready( function() {
 				$( '.uls-languagesettings-trigger' ).languagesettings();