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

README

@@ -0,0 +1,12 @@
+== Copying ==
+See http://www.gnu.org/licenses/gpl2.html
+
+== Installation ==
+For very very quick start add the following to LocalSettings.php:
+
+include("$IP/extensions/UniversalLanguageSelector/UniversalLanguageSelector.php");
+
+More documenation is at
+ http://www.mediawiki.org/wiki/Universal_Language_Selector
+
+== Change log ==

UniversalLanguageSelector.hooks.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Hooks for UniversalLanguageSelector extension
+ *
+ * @file
+ * @ingroup Extensions
+ */
+
+class UniversalLanguageSelectorHooks {
+
+	/**
+	 * BeforePageDisplay hook handler.
+	 * @param $out OutputPage
+	 * @param $skin Skin
+	 * @return bool
+	 */
+	public static function addModules( $out, $skin ) {
+		$out->addModules( 'ext.uls.init' );
+		return true;
+	}
+	/**
+	 * ResourceLoaderTestModules hook handler.
+	 * @param $testModules: array of javascript testing modules. 'qunit' is fed using tests/qunit/QUnitTestResources.php.
+	 * @param $resourceLoader object
+	 * @return bool
+	 */
+	public static function addTestModules( array &$testModules, ResourceLoader &$resourceLoader ) {
+		$testModules['qunit']['ext.uls.tests'] = array(
+			'scripts' => array( 'tests/qunit/ext.uls.tests.js' ),
+			'dependencies' => array( 'ext.uls.init' ),
+			'localBasePath' => dirname( __FILE__ ),
+			'remoteExtPath' => 'UniversalLanguageSelector',
+		);
+		return true;
+	}
+	/**
+	 * Add some tabs for navigation for users who do not use Ajax interface.
+	 * Hooks: SkinTemplateNavigation, SkinTemplateTabs
+	 */
+	static function addTrigger( array &$personal_urls, &$title ) {
+		global $wgLang;
+		$tabindex = 2;
+		$personal_urls = array( 'uls'=> array(
+					'text' =>  $wgLang->getLanguageName( $wgLang->getCode() ),
+					'href' => '#',
+					'class' => 'uls-trigger',
+					'active' => true
+				) ) + $personal_urls;
+		return true;
+	}
+
+}

UniversalLanguageSelector.i18n.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Internationalisation file for extension UniversalLanguageSelector.
+ *
+ * @file
+ * @ingroup Extensions
+ */
+
+$messages = array();
+
+/** English
+ * @author santhosh
+*/
+$messages['en'] = array(
+	'UniversalLanguageSelector' => 'Universal Language Selector',
+	'uls-desc'    => 'Universal Language Selector',
+	'uls-select-content-language'    => 'Select Content Language',
+);

UniversalLanguageSelector.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Universal Language Selector extension
+ * https://www.mediawiki.org/wiki/UniversalLanguageSelector
+ *
+ * @file
+ * @ingroup Extensions
+ * @author Santhosh Thottingal
+ * @copyright © 2012 Santhosh Thottingal
+ * @licence GNU General Public Licence 3.0 or later
+ */
+
+if ( !defined( 'MEDIAWIKI' ) ) {
+	echo( "This file is an extension to the MediaWiki software and cannot be used standalone.\n" );
+	die( -1 );
+}
+
+$wgExtensionCredits['other'][] = array(
+	'path'           => __FILE__,
+	'name'           => 'UniversalLanguageSelector',
+	'version'        => '0.1',
+	'author'         => array( 'Santhosh Thottingal' ),
+	'url'            => 'https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector',
+	'descriptionmsg' => 'uls-desc',
+);
+
+$dir = dirname( __FILE__ );
+
+// Internationalization
+$wgExtensionMessagesFiles['UniversalLanguageSelector'] = "$dir/UniversalLanguageSelector.i18n.php";
+
+// Register auto load for the page class
+$wgAutoloadClasses['UniversalLanguageSelectorHooks'] = "$dir/UniversalLanguageSelector.hooks.php";
+
+$wgHooks['BeforePageDisplay'][] = 'UniversalLanguageSelectorHooks::addModules';
+$wgHooks['PersonalUrls'][] = 'UniversalLanguageSelectorHooks::addTrigger';
+
+$wgResourceModules['ext.uls.init'] = array(
+	'scripts' => 'resources/ext.uls.init.js',
+	'localBasePath' => $dir,
+	'remoteExtPath' => 'UniversalLanguageSelector',
+	'dependencies' => 'ext.uls.core',
+	'position' => 'top',
+);
+
+$wgResourceModules['ext.uls.core'] = array(
+	'scripts' => array( 'resources/ext.uls.core.js' ),
+	'styles' => 'resources/css/ext.uls.css',
+	'localBasePath' => $dir,
+	'remoteExtPath' => 'UniversalLanguageSelector',
+	'dependencies' => array(
+		'mediawiki.util',
+	),
+	'messages' => array(
+		'uls-select-content-language',
+	),
+	'position' => 'top',
+);

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 );

tests/phpunit/Makefile

@@ -0,0 +1,2 @@
+default:
+	php ../../../tests/phpunit/phpunit.php .

tests/qunit/ext.uls.tests.js

@@ -0,0 +1,18 @@
+/**
+ * QUnit tests for ULS
+ *
+ * @file
+ * @author Santhosh Thottingal
+ * @copyright Copyright © 2012 Santhosh Thottingal
+ * @license http://www.gnu.org/copyleft/gpl.html GNU General Public License 2.0 or later
+ */
+( function () {
+
+module( "ext.uls", QUnit.newMwEnvironment() );
+
+test( "-- Initial check", function() {
+	expect( 2 );
+	ok( $.fn.uls, "$.fn.uls is defined" );
+} );
+
+}());