Basic language selector

* uses setlang attribute in URL to switch language
* introduced a language filter widget by extending
  jquery.ui.autocomplete
* UI rendering is done by using SkinAfterContent hook

Change-Id: Ifa63a04ba1d060b6db8fba14bb868045cf6b97c3

UniversalLanguageSelector.hooks.php

@@ -48,5 +48,50 @@ class UniversalLanguageSelectorHooks {
 				) ) + $personal_urls;
 		return true;
 	}
-
+	/**
+	 * Add the template for the ULS to the body.
+	 * Hooks: SkinAfterContent
+	 * TODO: move to JavaScript side
+	 * TODO: hardcoded English
+	 */
+	public static function addTemplate( &$data, $skin ) {
+		global $wgContLang;
+		$languages = Language::fetchLanguageNames( $wgContLang->getCode() );
+		$languageData = htmlspecialchars( FormatJSON::encode( $languages ) );
+		$data .= "
+		<div class=\"uls-menu\">
+			<span class=\"icon-close\"></span>
+			<div class=\"uls-menu-header\">
+				<div class=\"uls-menu-header-left\">
+					<h1>" . wfMsgHtml( 'uls-select-content-language' ) . "</h1>
+				</div>
+				<div class=\"uls-menu-header-right\">
+					<div class='uls-worldmap'>
+						 <div class='uls-region' id='uls-region-1'>
+							<a>North America<br>Latin America<br>South America</a>
+						 </div>
+						 <div class='uls-region' id='uls-region-2'>
+							<a>Europe<br>Middle East<br>Africa</a>
+						 </div>
+						 <div class='uls-region' id='uls-region-3'>
+							<a>Asia<br>Australia<br>Pacific</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div style=\"clear: both\"></div>
+			<div class=\"uls-lang-selector\">
+				<form action=\"#\" class=\"filterform\">
+					<input type=\"text\" placeholder=\"Language search\" id=\"languagefilter\"
+						class=\"filterinput\" data-languages=\"" . $languageData . "\">
+					<span class=\"search-button\"></span>
+				</form>
+				<div class=\"uls-language-list\" >
+					<ul class=\"uls-language-filter-result\" >
+					</ul>
+				</div>
+			</div>
+		</div>";
+		return true;
+	}
 }

UniversalLanguageSelector.i18n.php

@@ -8,11 +8,21 @@
 
 $messages = array();
 
-/** English
+/**
+ * English
  * @author santhosh
  */
 $messages['en'] = array(
 	'UniversalLanguageSelector' => 'Universal Language Selector',
 	'uls-desc' => 'Universal Language Selector',
-	'uls-select-content-language'    => 'Select Content Language',
+	'uls-select-content-language' => 'Select language',
+);
+/**
+ * Message documentation
+ *  @author santhosh
+ */
+$messages['qqq'] = array(
+	'UniversalLanguageSelector' => 'Extension name',
+	'uls-desc' => 'Extension description',
+	'uls-select-content-language' => 'Main heading in the language selector popup.',
 );

UniversalLanguageSelector.php

@@ -1,7 +1,7 @@
 <?php
 /**
  * Universal Language Selector extension
- * https://www.mediawiki.org/wiki/UniversalLanguageSelector
+ * https://www.mediawiki.org/wiki/Universal_Language_Selector
  *
  * @file
  * @ingroup Extensions
@@ -24,7 +24,7 @@ $wgExtensionCredits['other'][] = array(
 	'descriptionmsg' => 'uls-desc',
 );
 
-$dir = dirname( __FILE__ );
+$dir = __DIR__ ;
 
 // Internationalization
 $wgExtensionMessagesFiles['UniversalLanguageSelector'] = "$dir/UniversalLanguageSelector.i18n.php";
@@ -34,6 +34,7 @@ $wgAutoloadClasses['UniversalLanguageSelectorHooks'] = "$dir/UniversalLanguageSe
 
 $wgHooks['BeforePageDisplay'][] = 'UniversalLanguageSelectorHooks::addModules';
 $wgHooks['PersonalUrls'][] = 'UniversalLanguageSelectorHooks::addTrigger';
+$wgHooks['SkinAfterContent'][] = 'UniversalLanguageSelectorHooks::addTemplate';
 
 $wgResourceModules['ext.uls.init'] = array(
 	'scripts' => 'resources/ext.uls.init.js',
@@ -44,15 +45,14 @@ $wgResourceModules['ext.uls.init'] = array(
 );
 
 $wgResourceModules['ext.uls.core'] = array(
-	'scripts' => array( 'resources/ext.uls.core.js' ),
+	'scripts' => array( 'resources/ext.uls.core.js', 'resources/ext.uls.languagefilter.js' ),
 	'styles' => 'resources/css/ext.uls.css',
 	'localBasePath' => $dir,
 	'remoteExtPath' => 'UniversalLanguageSelector',
 	'dependencies' => array(
 		'mediawiki.util',
-	),
+		'mediawiki.Uri',
-	'messages' => array(
+		'jquery.ui.autocomplete'
-		'uls-select-content-language',
 	),
 	'position' => 'top',
 );

resources/css/ext.uls.css

@@ -5,17 +5,15 @@
 }
 
 .uls-menu {
-	position: absolute;
+	position: fixed;
-	top: 100%;
-	left: 0;
 	z-index: 1000;
 	display: none;
-	float: left;
+	min-width: 600px;
-	min-width: 400px;
+	min-height: 500px;
-	min-height: 400px;
+	margin-top: 1px;
-	padding: 4px 0;
+	width: 50%;
-	margin: 1px 0 0;
+
-	list-style: none;
+	/* Styling */
 	background-color: #ffffff;
 	border: 1px solid #ccc;
 	border: 1px solid rgba(0, 0, 0, 0.2);
@@ -30,20 +28,109 @@
 	-webkit-background-clip: padding-box;
 	-moz-background-clip: padding;
 	background-clip: padding-box;
-	width: 50%
-}
-.uls-menu h2 {
-	float:left;
-}
-a.close{
-	float: right;
-	padding: 10px;
 }
 
-div#worldmap {
+.uls-menu-header {
+	margin: 2%;
+	margin-top: 20px;
+}
+
+.uls-lang-selector {
+	margin: 2%;
+}
+
+.uls-menu-header-left {
+	float: left;
+}
+
+.uls-menu-header-left h1 {
+	font-weight: bold;
+	padding-top: 12px;
+	border:none;
+	padding-bottom: 3px;
+}
+
+.uls-menu-header-right {
+	float: right;
+}
+
+.uls-worldmap {
 	/* @embed */
 	background: url('../images/world_map.png') no-repeat scroll left center transparent;
-	float: right;
 	width: 400px;
-	height: 200px;
+	height: 197px;
+}
+
+.uls-region {
+	float: left;
+	cursor: pointer;
+	text-align: center;
+	width: 133px;
+	padding: 0;
+	margin: 0;
+	height: 197px;
+}
+
+.uls-region:hover {
+	outline: 1px solid #0E90D2;
+	background: black;
+	opacity: 0.4;
+}
+
+.uls-region.active {
+	background: black;
+	opacity: 0.4;
+}
+
+.icon-close {
+	/* @embed */
+	background: url('../images/close.png') no-repeat scroll left center transparent;
+	float: right;
+	padding: 10px;
+	cursor: pointer;
+}
+
+/* Language list */
+.uls-language-list {
+	height: 300px;
+	overflow: auto;
+	margin-top: 2%;
+}
+
+.uls-language-list ul {
+	list-style: none;
+	margin-left: 0;
+	-moz-column-count: 3;
+	-webkit-column-count: 3;
+	column-count: 3;
+}
+
+.uls-language-list ul li {
+	font-weight: bold;
+}
+
+.uls-language-list strong {
+	text-decoration: underline;
+}
+
+.uls-language-list a {
+	color: #0645AD;
+}
+
+input#languagefilter {
+	height: 20px;
+	border: 1px solid #0E90D2;
+	border-right: none;
+	width: 95%;
+}
+
+span.search-button {
+	/* @embed */
+	background: url('../images/search.png') no-repeat scroll left center transparent;
+	cursor: pointer;
+	height: 22px;
+	border: 1px solid #0E90D2;
+	position: absolute;
+	width: 20px;
+	border-left: none;
 }

resources/ext.uls.core.js

@@ -1,14 +1,14 @@
-(function($) {
+(function ( $, mw ) {
 	"use strict";
 
 	var ULS = function( element, options ) {
 		this.$element = $( element );
 		this.options = $.extend( {}, $.fn.uls.defaults, options );
-		this.$menu = $( this.options.menu ).appendTo( 'body' );
+		this.$menu = $( this.options.menu );
 		this.shown = false;
 		this.render();
 		this.listen();
-	}
+	};
 
 	ULS.prototype = {
 		constructor: ULS,
@@ -24,6 +24,7 @@
 
 			this.$menu.show();
 			this.shown = true;
+
 			return this;
 		},
 		hide: function() {
@@ -32,17 +33,27 @@
 			return this;
 		},
 		render: function() {
-			// TODO : All UI construction code to go here.
+			// Rendering stuff here
-			var $heading = $("<h2>").text(mw.msg("uls-select-content-language"));
-			this.$menu.append($heading);
-			var $wordldMap = $("<div id='worldmap'>");
-			this.$menu.append($wordldMap);
 		},
 		listen: function() {
 			// Register all event listeners to the ULS here.
 			this.$element.on( 'click', $.proxy( this.click, this ) );
-			this.$menu.on( 'keyup', $.proxy( this.click, this ) )
+			$( ".icon-close" ).on( 'click', $.proxy( this.click, this ) );
-				.on( 'keypress', $.proxy( this.click, this ) );
+			$( "#languagefilter" ).languagefilter( {
+				$target: $( 'ul.uls-language-filter-result' ),
+				clickhandler: function( item ) {
+					// TODO: dependency on MediaWiki
+					var uri = new mw.Uri( window.location.href );
+					uri.extend( { setlang: item.value } );
+					window.location.href = uri.toString();
+				}
+			} );
+			$( '.uls-region' ).live( 'click', function () {
+				$( this ).parent().find( '.uls-region' ).removeClass( 'active' );
+				$( this ).addClass( 'active' );
+			} );
+			// trigger a search for all languages.
+			$( "#languagefilter" ).autocomplete( "search" );
 		},
 		keyup : function(e) {
 			switch(e.keyCode) {
@@ -53,13 +64,13 @@
 					}
 					break;
 			}
-
 			e.stopPropagation();
 			e.preventDefault();
 		},
 		keypress: function( e ) {
-			if (!this.shown )
+			if ( !this.shown ) {
 				return;
+			}
 
 			switch( e.keyCode ) {
 				case 27:
@@ -78,7 +89,7 @@
 				this.hide();
 			}
 		},
-	}
+	};
 
 	/* ULS PLUGIN DEFINITION
 	 * =========================== */
@@ -86,18 +97,19 @@
 	$.fn.uls = function( option ) {
 		return this.each( function() {
 			var $this = $( this ), data = $this.data( 'uls' ), options = typeof option == 'object' && option;
-			if (!data )
+			if ( !data ) {
 				$this.data( 'uls', ( data = new ULS( this, options ) ) );
-			if ( typeof option == 'string' )
+			}
+			if ( typeof option === 'string' ) {
 				data[option]();
-		} )
+			}
+		} );
 	};
 
 	$.fn.uls.defaults = {
-		// FIXME  Menu template. Can it come from PHP?
+		menu : '.uls-menu',
-		menu : '<div class="uls-menu"><a class="close button">x</a></div>',
 	};
 
 	$.fn.uls.Constructor = ULS;
 
-} )( jQuery );
+} )( jQuery, mediaWiki );

resources/ext.uls.init.js

@@ -3,12 +3,6 @@
  */
 ( function( $ ) {
 	$( document ).ready( function() {
-		/* Create a trigger somewhere in the page.
-		$trigger = $("<a href='#'>")
-			.addClass( 'uls-trigger' )
-			.text("English"); // FIXME proper trigger text to go here.
-		$('#mw-head').append( $trigger );*/
-		// Bind ULS to the trigger.
 		$( '.uls-trigger' ).uls();
 	} );
 } )( jQuery );

resources/ext.uls.languagefilter.js

@@ -0,0 +1,83 @@
+/*
+ * @author Santhosh Thottingal
+ * jQuery autocomplete based language filter widget
+ * Usage: $('inputbox').languagefilter();
+ * The values for autocompletion is from the data-languages of the element.
+ * the data is in the format of languagecode:languagename format.
+ * Credits: http://jqueryui.com/demos/autocomplete
+ */
+jQuery( function( $ ) {
+	"use strict";
+
+	$.widget( "ui.languagefilter", {
+		options: {
+			$target: null, // where to append the results
+			languages: null, // languages as code:name format. default values is from data-languages
+			clickhandler: null
+		},
+		_create: function() {
+			var self = this.element,
+			options = this.options;
+			$( self ).autocomplete( {
+				delay: 0,
+				minLength: 0,
+				// Move the default dropdown for suggestions to somewhere
+				// where it is not visible, since we don't use it.
+				position: { offset: "-10000 -10000" },
+				source:  function( request, response ) {
+					var term = request.term;
+					var matcher = new RegExp( $.ui.autocomplete.escapeRegex( term ), 'i' );
+					var languages = options.languages;
+
+					if ( languages === null ) {
+						// Apparently .data automatically parses valid looking JSON
+						languages = $( self ).data( 'languages' );
+					}
+
+					response( $.map( languages, function ( name, code ) {
+						if ( matcher.test( name ) ) {
+							return {
+								label: name.replace(
+									new RegExp(
+									"(?![^&;]+;)(?!<[^<>]*)(" +
+									$.ui.autocomplete.escapeRegex( term ) +
+									")(?![^<>]*>)(?![^&;]+;)", "gi"
+									), "<strong>$1</strong>" ),
+								value: code
+							};
+						}
+					} ) );
+				},
+				search: function ( event, ui ) {
+					if ( options.$target ){
+						options.$target.empty();
+					}
+				}
+			} ); // /autocomplete
+
+			$( self ).data( "autocomplete" )._renderItem = function ( ul, item ) {
+				var $target = ul;
+				if ( options.$target ) {
+					$target = options.$target;
+				} else {
+					return;
+				}
+				var $li = $( "<li>" )
+					.data( "item.autocomplete", item )
+					.append( $( "<a>" ).prop( 'href', '#' ). html( item.label ) )
+					.appendTo( $target );
+				if ( options.clickhandler ) {
+					$li.click( function() {
+						options.clickhandler.call( this, item );
+					} );
+				}
+				return $li;
+
+			};
+		}, // End of _create
+
+		destroy: function() {
+			$.Widget.prototype.destroy.call( this );
+		}
+	} );
+} );