Skeleton extension for Universal Language Selector

* Basic extension code with i18n
* Adds a link to personal links to trigger ULS
* Core uls javascript code, to plug to the given trigger.
* Qunit, PHPUnit framework in place.
* and lot of TODOs and FIXMEs

Patch set 2:
* A tiny whitespace fix.

Change-Id: I300647a21e0b7f65b7d9dc6101014ea9389c9f2a

resources/css/ext.uls.css

@@ -0,0 +1,49 @@
+.uls-trigger {
+	/* @embed */
+	background: url('../images/icon-language.png') no-repeat scroll left center transparent;
+	padding-left: 36px;
+}
+
+.uls-menu {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	z-index: 1000;
+	display: none;
+	float: left;
+	min-width: 400px;
+	min-height: 400px;
+	padding: 4px 0;
+	margin: 1px 0 0;
+	list-style: none;
+	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;
+	width: 50%
+}
+.uls-menu h2 {
+	float:left;
+}
+a.close{
+	float: right;
+	padding: 10px;
+}
+
+div#worldmap {
+	/* @embed */
+	background: url('../images/world_map.png') no-repeat scroll left center transparent;
+	float: right;
+	width: 400px;
+	height: 200px;
+}

resources/ext.uls.core.js

@@ -0,0 +1,103 @@
+(function($) {
+	"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.shown = false;
+		this.render();
+		this.listen();
+	}
+
+	ULS.prototype = {
+		constructor : ULS,
+		show : function() {
+			var pos = $.extend( {}, this.$element.offset(), {
+				height : this.$element[0].offsetHeight
+			} );
+
+			this.$menu.css( {
+				top : pos.top + pos.height,
+				left : '25%' //pos.left // FIXME
+			} );
+
+			this.$menu.show();
+			this.shown = true;
+			return this;
+		},
+		hide : function() {
+			this.$menu.hide();
+			this.shown = false;
+			return this;
+		},
+		render: function(){
+			// TODO : All UI construction code to go 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 ) )
+				.on( 'keypress', $.proxy( this.click, this ) );
+		},
+		keyup : function(e) {
+			switch(e.keyCode) {
+				case 27:
+					// escape
+					if (!this.shown ) {
+						return this.hide();
+					}
+					break;
+			}
+
+			e.stopPropagation();
+			e.preventDefault();
+		},
+		keypress : function(e) {
+			if (!this.shown )
+				return;
+
+			switch(e.keyCode) {
+				case 27:
+					// escape
+					e.preventDefault();
+					break;
+			}
+			e.stopPropagation();
+		},
+		click : function(e) {
+			e.stopPropagation();
+			e.preventDefault();
+			if ( !this.shown ) {
+				this.show();
+			} else {
+				this.hide();
+			}
+		},
+	}
+
+	/* ULS PLUGIN DEFINITION
+	 * =========================== */
+
+	$.fn.uls = function(option) {
+		return this.each( function() {
+			var $this = $( this ), data = $this.data( 'uls' ), options = typeof option == 'object' && option;
+			if (!data )
+				$this.data( 'uls', ( data = new ULS(this, options)) );
+			if ( typeof option == 'string' )
+				data[option]();
+		} )
+	};
+
+	$.fn.uls.defaults = {
+		// FIXME  Menu template. Can it come from PHP?
+		menu : '<div class="uls-menu"><a class="close button">x</a></div>',
+	};
+
+	$.fn.uls.Constructor = ULS;
+
+} )( jQuery );

resources/ext.uls.init.js

@@ -0,0 +1,14 @@
+/**
+ * ULS startup script
+ */
+( 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 );