Introduce display settings link at the top of ULS

Extend $.fn.uls render method to add additional rendering of display settings link. Add css for the new element. Add display.png icon from the Agora icon set. Change-Id: I7a29b4892be02526969b0dd786c74bdb7551c074
2012-08-09 16:44:19 +05:30
parent 8855af1428
commit 1648899c45
5 changed files with 54 additions and 13 deletions
--- a/resources/js/ext.uls.init.js
+++ b/resources/js/ext.uls.init.js
@@ -0,0 +1,131 @@
+/**
+ * ULS startup script.
+ *
+ * Copyright (C) 2012 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 ) {
+	"use strict";
+
+	$( document ).ready( function( ) {
+		var $ulsTrigger = $( '.uls-trigger' ),
+			previousLang = $.cookie( 'uls-previous-language' ),
+			currentLang = mw.config.get( 'wgUserLanguage' );
+
+		/**
+		 * Change the language of wiki using setlang URL parameter
+		 * @param {String} language
+		 */
+		function changeLanguage( language ) {
+			$.cookie( 'uls-previous-language', currentLang );
+			var uri = new mw.Uri( window.location.href );
+			uri.extend( {
+				setlang: language
+			} );
+			window.location.href = uri.toString();
+		}
+
+		function displaySettings() {
+			var $displaySettingsTitle = $( '<div>' )
+					.addClass( 'settings-title' )
+					.text( 'Display settings' ),
+				$displaySettingsText = $( '<span>' )
+					.addClass( 'settings-text' )
+					.text( 'Set language for menus and fonts.' ),
+				$displaySettings = $( '<div>' )
+					.addClass( 'display-settings-block' )
+					.prop( 'id', 'display-settings-block' )
+					.append( $displaySettingsTitle )
+					.append( $displaySettingsText );
+			$displaySettings.on( 'click', function() {
+				// TODO: Show language settings window with display settings highlighted
+			} );
+			return $displaySettings;
+		}
+
+		// Extend the render api of ULS to add display and input settings.
+		$.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
+			render: function() {
+				var $displaySettings = displaySettings();
+				this.$menu.find("div#settings-block").append($displaySettings);
+			}
+		} );
+
+		$ulsTrigger.uls( {
+			onSelect: function( language ) {
+				changeLanguage( language );
+			},
+			searchAPI: mw.util.wikiScript( 'api' ) + "?action=languagesearch"
+		} );
+
+		if ( !previousLang || previousLang === currentLang ) {
+			// Do not show tooltip.
+			return true;
+		}
+
+		var tipsyTimer;
+		// Current language is the cookie value for 'uls-previous-language'
+		$.cookie( 'uls-previous-language', currentLang );
+		// Attach a tipsy tooltip to the trigger
+		$ulsTrigger.tipsy( {
+			gravity: 'n',
+			delayOut: 3000,
+			html: true,
+			fade: true,
+			trigger: 'manual',
+			title: function() {
+				var prevLangName = $.uls.data.autonym( previousLang ),
+					linkClass = 'uls-lang-link',
+					title = "Language changed from <a href='#' lang = '" +
+						previousLang + "' class = '" + linkClass + "' >" +
+						prevLangName + "</a>";
+				return title;
+			}
+		} );
+		// 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, mediaWiki );