Undo feature for language selection

* Use jQuery tipsy plugin to show previous language
* previous language is stored in cookie

Change-Id: Iaae668c33209e32a74dee00211bb22c7b3562456

UniversalLanguageSelector.php

@@ -68,6 +68,7 @@ $wgResourceModules['ext.uls.init'] = array(
 	'remoteExtPath' => 'UniversalLanguageSelector',
 	'dependencies' => array(
 		'mediawiki.Uri',
+		'jquery.tipsy',
 		'ext.uls.core',
 	),
 	'position' => 'top',

resources/ext.uls.init.js

@@ -18,16 +18,86 @@
  */
 
 ( function( $ ) {
+	"use strict";
+
 	$( document ).ready( function( ) {
-		$( '.uls-trigger' ).uls( {
+		var $ulsTrigger = $( '.uls-trigger' );
-			onSelect : function( language ) {
+		/**
+		 * Change the language of wiki using setlang URL parameter
+		 * @param {String} language
+		 */
+		var changeLanguage = function( language ) {
+			$.cookie( 'uls-previous-language', mw.config.get( 'wgUserLanguage' ) );
 			var uri = new mw.Uri( window.location.href );
 			uri.extend( {
 				setlang: language
 			} );
 			window.location.href = uri.toString();
+		};
+
+		$ulsTrigger.uls( {
+			onSelect: function( language ) {
+				changeLanguage( language );
 			},
 			searchAPI: mw.util.wikiScript( 'api' ) + "?action=languagesearch"
 		} );
+
+		// Attach a tipsy tooltip to the trigger
+		$ulsTrigger.tipsy( {
+			gravity: 'n',
+			delayOut: 3000,
+			html: true,
+			fade: true,
+			trigger: 'manual',
+			title: function() {
+				var prevLang = $.cookie( 'uls-previous-language' );
+				if ( !prevLang ) {
+					return '';
+				}
+				var prevLangName = $.uls.data.autonym( prevLang ),
+					linkClass = 'uls-lang-link',
+					title = "Language changed from <a href='#' lang = '" +
+						prevLang + "' class = '" + linkClass + "' >" +
+						prevLangName + "</a>",
+					currentLang = mw.config.get( 'wgUserLanguage' );
+				if ( !prevLang && prevLang === currentLang ) {
+					return '';
+				}
+				return title;
+			}
+		} );
+		var tipsyTimer;
+		// Show the tipsy tooltip on page load.
+		$ulsTrigger.tipsy( 'show' );
+		tipsyTimer = setTimeout( function() {
+				$ulsTrigger.tipsy('hide');
+			},
+			// The timeout after page reloading is longer,
+			// to give the user a better chance to see it.
+			6000
+		);
+		$( '.tipsy' ).live( 'mouseout', function( e ) {
+			tipsyTimer = setTimeout( function() {
+				$ulsTrigger.tipsy('hide');
+				},
+				3000 // hide the link in 3 seconds
+			);
+		} );
+		// if the mouse is over the tooltip, do not hide
+		$( '.tipsy' ).live( 'mouseover', function( e ) {
+			clearTimeout( tipsyTimer );
+		} );
+		// manually show the tooltip
+		$ulsTrigger.bind( 'mouseover', function( e ) {
+			$( this ).tipsy( 'show' );
+		} );
+		// hide the tooltip when clicked on uls trigger
+		$ulsTrigger.bind( 'click', function( e ) {
+			$( this ).tipsy( 'hide' );
+		} );
+		// Event handler for links in the tooltip
+		$( 'a.uls-lang-link' ).live( 'click', function() {
+			changeLanguage( $(this).attr( 'lang' ) );
+		} );
 	} );
 } )( jQuery );