Merge "WebFonts integration with ULS display settings."

UniversalLanguageSelector.hooks.php

@@ -115,7 +115,7 @@ class UniversalLanguageSelectorHooks {
 		$data .= "
 		<div class='uls-menu'>
 			<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

@@ -72,7 +72,7 @@ $wgResourceModules['ext.uls.init'] = array(
 		'mediawiki.Uri',
 		'jquery.tipsy',
 		'jquery.uls',
-		'ext.uls.languagesettings',
+		'ext.uls.displaysettings',
 	),
 	'position' => 'top',
 );
@@ -84,12 +84,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',
 );
@@ -129,7 +138,7 @@ $wgResourceModules['jquery.webfonts'] = array(
 );
 
 $wgResourceModules['ext.uls.webfonts.repository'] = array(
-		'scripts' => 'resources/js/jquery.webfonts.repository.js',
+	'scripts' => 'resources/js/jquery.webfonts.repository.js',
-		'localBasePath' => $dir,
+	'localBasePath' => $dir,
-		'remoteExtPath' => 'UniversalLanguageSelector',
+	'remoteExtPath' => 'UniversalLanguageSelector',
 );

lib/jquery.uls/examples/index.html

@@ -50,7 +50,7 @@
 		<div class="container">
 			<div class="uls-menu">
 				<div class="row">
-					<span class="icon-close"></span>
+					<span id="uls-close" class="icon-close"></span>
 				</div>
 				<div class="row">
 					<div class="four columns">

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{
+.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,18 +2,80 @@ div#settings-block {
 	border-left: 1px solid #C9C9C9;
 	padding-left: 10px;
 }
-div#display-settings-block {
+
+div#display-settings-block { 
 	/* @embed */
 	background: url('../images/display.png');
 	background-repeat: no-repeat;
 	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();