Provide a base ULS RL module and seperate UI language selection

ULS is disabled for anonymous users on WMF projects. But to provide
rest of the features - apis, language database, language selection for
many use cases, we need to provide a minimal ULS. RL module
ext.uls.init does that job now.

For using ULS as interface language selection tool, new RL module
ext.uls.interface is introduced. That will add UI language selection,
webfonts, ime features, if enabled.

Change-Id: I796a7c9cce0de42bf8aa06b26e383e0075dbe1dd

UniversalLanguageSelector.hooks.php

@@ -39,12 +39,13 @@ class UniversalLanguageSelectorHooks {
 	 * @return bool
 	 */
 	public static function addModules( $out, $skin ) {
-		if ( !self::isToolbarEnabled( $out->getUser() ) ) {
+		// If extension is enabled, basic features(API, language data) available.
-			return true;
-		}
-
 		$out->addModules( 'ext.uls.init' );
 		$out->addModules( 'ext.uls.geoclient' );
+		if ( self::isToolbarEnabled( $out->getUser() ) ) {
+			// Enable UI language selection for the user.
+			$out->addModules( 'ext.uls.interface' );
+		}
 
 		return true;
 	}
@@ -58,7 +59,7 @@ class UniversalLanguageSelectorHooks {
 	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' ),
+			'dependencies' => array( 'ext.uls.init', 'ext.uls.interface' ),
 			'localBasePath' => __DIR__,
 			'remoteExtPath' => 'UniversalLanguageSelector',
 		);

UniversalLanguageSelector.php

@@ -104,6 +104,7 @@ $wgHooks['UserGetLanguageObject'][] = 'UniversalLanguageSelectorHooks::getLangua
 $wgDefaultUserOptions['uls-preferences'] = '';
 $wgHooks['GetPreferences'][] = 'UniversalLanguageSelectorHooks::onGetPreferences';
 
+/* Base ULS module */
 $wgResourceModules['ext.uls.init'] = array(
 	'scripts' => 'resources/js/ext.uls.init.js',
 	'styles' => 'resources/css/ext.uls.css',
@@ -111,12 +112,24 @@ $wgResourceModules['ext.uls.init'] = array(
 	'remoteExtPath' => 'UniversalLanguageSelector',
 	'dependencies' => array(
 		'mediawiki.Uri',
-		'jquery.tipsy',
+		'mediawiki.util',
+		'jquery.json',
 		'jquery.uls',
 		'jquery.i18n',
+	),
+	'position' => 'top',
+);
+
+/* Interface language selection module */
+$wgResourceModules['ext.uls.interface'] = array(
+	'scripts' => 'resources/js/ext.uls.interface.js',
+	'localBasePath' => $dir,
+	'remoteExtPath' => 'UniversalLanguageSelector',
+	'dependencies' => array(
+		'ext.uls.init',
+		'jquery.tipsy',
 		'ext.uls.displaysettings',
 		'ext.uls.inputsettings',
-		'ext.uls.geoclient'
 	),
 	'position' => 'top',
 );

resources/js/ext.uls.init.js

@@ -1,7 +1,7 @@
 /**
- * ULS startup script.
+ * ULS startup script - MediaWiki specific customization for jquery.uls
  *
- * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
+ * Copyright (C) 2012-2013 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.
  *
@@ -137,8 +137,6 @@
 	}
 
 	$( document ).ready( function () {
-		var $ulsTrigger, previousLanguages, previousLang;
-
 		/*
 		 * The 'als' is used in a non-standard way in MediaWiki -
 		 * it may be used to represent the Allemanic language,
@@ -152,178 +150,5 @@
 		// JavaScript side i18n initialization
 		i18nInit();
 
-		$ulsTrigger = $( '.uls-trigger' );
-		previousLanguages = mw.uls.getPreviousLanguages() || [];
-		previousLang = previousLanguages.slice( -1 )[0];
-
-		function displaySettings() {
-			var $displaySettingsTitle, displaySettingsText, $displaySettings;
-
-			displaySettingsText = $.i18n( 'ext-uls-display-settings-desc' );
-			$displaySettingsTitle = $( '<div data-i18n="ext-uls-display-settings-title">' )
-				.addClass( 'settings-title' )
-				.attr( 'title', displaySettingsText );
-			$displaySettings = $( '<div>' )
-				.addClass( 'display-settings-block' )
-				.prop( 'id', 'display-settings-block' )
-				.append( $displaySettingsTitle );
-
-			return $displaySettings;
-		}
-
-		function inputSettings() {
-			var $inputSettingsTitle, inputSettingsText, $inputSettings;
-
-			inputSettingsText = $.i18n( 'ext-uls-input-settings-desc' );
-			$inputSettingsTitle = $( '<div data-i18n="ext-uls-input-settings-title">' )
-				.addClass( 'settings-title' )
-				.attr( 'title', inputSettingsText );
-			$inputSettings = $( '<div>' )
-				.addClass( 'input-settings-block' )
-				.prop( 'id', 'input-settings-block' )
-				.append( $inputSettingsTitle );
-
-			return $inputSettings;
-		}
-
-		function addDisplaySettings( uls ) {
-			var $displaySettings, position;
-
-			$displaySettings = displaySettings();
-			uls.$menu.find( '#settings-block' ).append( $displaySettings );
-			position = uls.position();
-
-			$displaySettings.languagesettings( {
-				defaultModule: 'display',
-				onClose: function () {
-					uls.show();
-				},
-				top: position.top,
-				left: position.left
-			} );
-
-			$displaySettings.on( 'click', function () {
-				uls.hide();
-			} );
-		}
-
-		function addInputSettings( uls ) {
-			var $inputSettings, position;
-
-			$inputSettings = inputSettings();
-			uls.$menu.find( '#settings-block' ).append( $inputSettings );
-			position = uls.position();
-
-			$inputSettings.languagesettings( {
-				defaultModule: 'input',
-				onClose: function () {
-					uls.show();
-				},
-				top: position.top,
-				left: position.left
-			} );
-
-			$inputSettings.on( 'click', function () {
-				uls.hide();
-			} );
-		}
-
-		$ulsTrigger.uls( {
-			onReady: function () {
-				addDisplaySettings( this );
-				addInputSettings( this );
-			},
-			onSelect: function ( language ) {
-				mw.uls.changeLanguage( language );
-			},
-			languages: mw.config.get( 'wgULSLanguages' ),
-			searchAPI: mw.util.wikiScript( 'api' ) + '?action=languagesearch',
-			quickList: function () {
-				return mw.uls.getFrequentLanguageList();
-			}
-		} );
-
-		if ( !previousLang ) {
-			previousLanguages.push( currentLang );
-			mw.uls.setPreviousLanguages( previousLanguages );
-
-			// Do not show tooltip.
-			return true;
-		}
-
-		if ( previousLang === currentLang ) {
-			// Do not show tooltip.
-			return true;
-		}
-
-		previousLanguages.push( currentLang );
-		mw.uls.setPreviousLanguages( previousLanguages );
-
-		// Attach a tipsy tooltip to the trigger
-		$ulsTrigger.tipsy( {
-			gravity: 'n',
-			delayOut: 3000,
-			html: true,
-			fade: true,
-			trigger: 'manual',
-			title: function () {
-				var link;
-
-				link = $( '<a>' ).text( $.uls.data.getAutonym( previousLang ) )
-					.attr( {
-						href: '#',
-						'class': 'uls-prevlang-link',
-						lang: previousLang,
-						dir: $.uls.data.getDir( previousLang )
-					} );
-
-				// Get the html of the link by wrapping it in div first
-				link = $( '<div>' ).html( link ).html();
-
-				return $.i18n( 'ext-uls-undo-language-tooltip-text', link );
-			}
-		} );
-
-		function showTipsy( timeout ) {
-			var tipsyTimer = 0;
-
-			$ulsTrigger.tipsy( 'show' );
-			// if the mouse is over the tooltip, do not hide
-			$( '.tipsy' ).on( 'mouseover', function () {
-				window.clearTimeout( tipsyTimer );
-			} );
-			$( '.tipsy' ).on( 'mouseout', function () {
-				tipsyTimer = window.setTimeout( function () {
-					hideTipsy();
-				}, timeout );
-			} );
-			// Event handler for links in the tooltip
-			$( 'a.uls-prevlang-link' ).on( 'click', function () {
-				mw.uls.changeLanguage( $( this ).attr( 'lang' ) );
-			} );
-			tipsyTimer = window.setTimeout( function () {
-				hideTipsy();
-			}, timeout );
-		}
-
-		function hideTipsy() {
-			$ulsTrigger.tipsy( 'hide' );
-		}
-
-		// Show the tipsy tooltip on page load.
-		showTipsy( 6000 );
-
-		// manually show the tooltip
-		$ulsTrigger.on( 'mouseover', function () {
-			// show only if the ULS panel is not shown
-			if ( !$ulsTrigger.data( 'uls' ).shown ) {
-				showTipsy( 3000 );
-			}
-		} );
-
-		// hide the tooltip when clicked on uls trigger
-		$ulsTrigger.on( 'click', function () {
-			hideTipsy();
-		} );
 	} );
 }( jQuery, mediaWiki, window, document ) );

resources/js/ext.uls.interface.js

@@ -0,0 +1,203 @@
+/**
+ * ULS Interface language selector
+ *
+ * Copyright (C) 2012-2013 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, window, document, undefined ) {
+	'use strict';
+
+	$( document ).ready( function () {
+		var $ulsTrigger, previousLanguages, previousLang,
+			currentLang = mw.config.get( 'wgUserLanguage' );
+
+		$ulsTrigger = $( '.uls-trigger' );
+		previousLanguages = mw.uls.getPreviousLanguages() || [];
+		previousLang = previousLanguages.slice( -1 )[0];
+
+		function displaySettings() {
+			var $displaySettingsTitle, displaySettingsText, $displaySettings;
+
+			displaySettingsText = $.i18n( 'ext-uls-display-settings-desc' );
+			$displaySettingsTitle = $( '<div data-i18n="ext-uls-display-settings-title">' )
+				.addClass( 'settings-title' )
+				.attr( 'title', displaySettingsText );
+			$displaySettings = $( '<div>' )
+				.addClass( 'display-settings-block' )
+				.prop( 'id', 'display-settings-block' )
+				.append( $displaySettingsTitle );
+
+			return $displaySettings;
+		}
+
+		function inputSettings() {
+			var $inputSettingsTitle, inputSettingsText, $inputSettings;
+
+			inputSettingsText = $.i18n( 'ext-uls-input-settings-desc' );
+			$inputSettingsTitle = $( '<div data-i18n="ext-uls-input-settings-title">' )
+				.addClass( 'settings-title' )
+				.attr( 'title', inputSettingsText );
+			$inputSettings = $( '<div>' )
+				.addClass( 'input-settings-block' )
+				.prop( 'id', 'input-settings-block' )
+				.append( $inputSettingsTitle );
+
+			return $inputSettings;
+		}
+
+		function addDisplaySettings( uls ) {
+			var $displaySettings, position;
+
+			$displaySettings = displaySettings();
+			uls.$menu.find( '#settings-block' ).append( $displaySettings );
+			position = uls.position();
+
+			$displaySettings.languagesettings( {
+				defaultModule: 'display',
+				onClose: function () {
+					uls.show();
+				},
+				top: position.top,
+				left: position.left
+			} );
+
+			$displaySettings.on( 'click', function () {
+				uls.hide();
+			} );
+		}
+
+		function addInputSettings( uls ) {
+			var $inputSettings, position;
+
+			$inputSettings = inputSettings();
+			uls.$menu.find( '#settings-block' ).append( $inputSettings );
+			position = uls.position();
+
+			$inputSettings.languagesettings( {
+				defaultModule: 'input',
+				onClose: function () {
+					uls.show();
+				},
+				top: position.top,
+				left: position.left
+			} );
+
+			$inputSettings.on( 'click', function () {
+				uls.hide();
+			} );
+		}
+
+		$ulsTrigger.uls( {
+			onReady: function () {
+				if ( $.fn.languagesettings ) {
+					addDisplaySettings( this );
+					addInputSettings( this );
+				}
+			},
+			onSelect: function ( language ) {
+				mw.uls.changeLanguage( language );
+			},
+			languages: mw.config.get( 'wgULSLanguages' ),
+			searchAPI: mw.util.wikiScript( 'api' ) + '?action=languagesearch',
+			quickList: function () {
+				return mw.uls.getFrequentLanguageList();
+			}
+		} );
+
+		if ( !previousLang ) {
+			previousLanguages.push( currentLang );
+			mw.uls.setPreviousLanguages( previousLanguages );
+
+			// Do not show tooltip.
+			return true;
+		}
+
+		if ( previousLang === currentLang ) {
+			// Do not show tooltip.
+			return true;
+		}
+
+		previousLanguages.push( currentLang );
+		mw.uls.setPreviousLanguages( previousLanguages );
+
+		// Attach a tipsy tooltip to the trigger
+		$ulsTrigger.tipsy( {
+			gravity: 'n',
+			delayOut: 3000,
+			html: true,
+			fade: true,
+			trigger: 'manual',
+			title: function () {
+				var link;
+
+				link = $( '<a>' ).text( $.uls.data.getAutonym( previousLang ) )
+					.attr( {
+						href: '#',
+						'class': 'uls-prevlang-link',
+						lang: previousLang,
+						dir: $.uls.data.getDir( previousLang )
+					} );
+
+				// Get the html of the link by wrapping it in div first
+				link = $( '<div>' ).html( link ).html();
+
+				return $.i18n( 'ext-uls-undo-language-tooltip-text', link );
+			}
+		} );
+
+		function showTipsy( timeout ) {
+			var tipsyTimer = 0;
+
+			$ulsTrigger.tipsy( 'show' );
+			// if the mouse is over the tooltip, do not hide
+			$( '.tipsy' ).on( 'mouseover', function () {
+				window.clearTimeout( tipsyTimer );
+			} );
+			$( '.tipsy' ).on( 'mouseout', function () {
+				tipsyTimer = window.setTimeout( function () {
+					hideTipsy();
+				}, timeout );
+			} );
+			// Event handler for links in the tooltip
+			$( 'a.uls-prevlang-link' ).on( 'click', function () {
+				mw.uls.changeLanguage( $( this ).attr( 'lang' ) );
+			} );
+			tipsyTimer = window.setTimeout( function () {
+				hideTipsy();
+			}, timeout );
+		}
+
+		function hideTipsy() {
+			$ulsTrigger.tipsy( 'hide' );
+		}
+
+		// Show the tipsy tooltip on page load.
+		showTipsy( 6000 );
+
+		// manually show the tooltip
+		$ulsTrigger.on( 'mouseover', function () {
+			// show only if the ULS panel is not shown
+			if ( !$ulsTrigger.data( 'uls' ).shown ) {
+				showTipsy( 3000 );
+			}
+		} );
+
+		// hide the tooltip when clicked on uls trigger
+		$ulsTrigger.on( 'click', function () {
+			hideTipsy();
+		} );
+	} );
+}( jQuery, mediaWiki, window, document ) );