Add the sidebar ULS cog icon and $wgULSPosition variable

Change-Id: I6acf1e21316a41ab8fcb4fd65e065be68693430f

UniversalLanguageSelector.hooks.php

@@ -71,12 +71,18 @@ class UniversalLanguageSelectorHooks {
 	 * Add some tabs for navigation for users who do not use Ajax interface.
 	 * Hooks: SkinTemplateNavigation, SkinTemplateTabs
 	 */
-	static function addTrigger( array &$personal_urls, &$title ) {
+	static function addPersonalBarTrigger( array &$personal_urls, &$title ) {
-		global $wgLang, $wgUser;
+		global $wgLang, $wgUser, $wgULSPosition;
+
+		if ( $wgULSPosition !== 'personal' ) {
+			return true;
+		}
+
 		if ( !self::isToolbarEnabled( $wgUser ) ) {
 			return true;
 		}
 
+		// The element id will be 'pt-uls'
 		$personal_urls = array(
 			'uls' => array(
 				'text' => $wgLang->getLanguageName( $wgLang->getCode() ),
@@ -251,6 +257,8 @@ class UniversalLanguageSelectorHooks {
 			$out->getLanguage()->getCode(), 'mwfile'
 		);
 		$vars['wgULSAcceptLanguageList'] = array_keys( $out->getRequest()->getAcceptLang() );
+		global $wgULSPosition;
+		$vars['wgULSPosition'] = $wgULSPosition;
 
 		return true;
 	}
@@ -262,4 +270,27 @@ class UniversalLanguageSelectorHooks {
 
 		return true;
 	}
+
+	/**
+	 * Hook: SkinTemplateOutputPageBeforeExec
+	 * @param Skin $skin
+	 * @param QuickTemplate $template
+	 * @return bool
+	 */
+	public static function onSkinTemplateOutputPageBeforeExec( Skin &$skin, QuickTemplate &$template ) {
+		global $wgULSPosition;
+
+		if ( $wgULSPosition !== 'interlanguage' ) {
+			return true;
+		}
+
+		// A dummy link, just to make sure that the section appears
+		$template->data['language_urls'][] = array(
+			'href' => '#',
+			'text' => '',
+			'class' => 'uls-p-lang-dummy',
+		);
+
+		return true;
+	}
 }

UniversalLanguageSelector.php

@@ -83,6 +83,18 @@ $wgULSEnable = true;
  */
 $wgULSEnableAnon = true;
 
+/**
+ * The location and the form of the language selection trigger.
+ * The possible values are:
+ * 'personal': as a link near the username or the log in link in
+ * the personal toolbar (default).
+ * 'interlanguage': as an icon near the header of the list of interlanguage
+ * links in the sidebar.
+ *
+ * @since 2013.04
+ */
+$wgULSPosition = 'personal';
+
 $dir = __DIR__;
 
 // Internationalization
@@ -94,12 +106,13 @@ $wgAutoloadClasses['ApiLanguageSearch'] = "$dir/api/ApiLanguageSearch.php";
 $wgAutoloadClasses['LanguageNameSearch'] = "$dir/data/LanguageNameSearch.php";
 
 $wgHooks['BeforePageDisplay'][] = 'UniversalLanguageSelectorHooks::addModules';
-$wgHooks['PersonalUrls'][] = 'UniversalLanguageSelectorHooks::addTrigger';
+$wgHooks['PersonalUrls'][] = 'UniversalLanguageSelectorHooks::addPersonalBarTrigger';
 $wgHooks['ResourceLoaderTestModules'][] = 'UniversalLanguageSelectorHooks::addTestModules';
 $wgHooks['ResourceLoaderGetConfigVars'][] = 'UniversalLanguageSelectorHooks::addConfig';
 $wgHooks['MakeGlobalVariablesScript'][] = 'UniversalLanguageSelectorHooks::addVariables';
 $wgAPIModules['languagesearch'] = 'ApiLanguageSearch';
 $wgHooks['UserGetLanguageObject'][] = 'UniversalLanguageSelectorHooks::getLanguage';
+$wgHooks['SkinTemplateOutputPageBeforeExec'][] = 'UniversalLanguageSelectorHooks::onSkinTemplateOutputPageBeforeExec';
 
 $wgDefaultUserOptions['uls-preferences'] = '';
 $wgHooks['GetPreferences'][] = 'UniversalLanguageSelectorHooks::onGetPreferences';

i18n/en.json

@@ -1,6 +1,7 @@
 {
 "@metadata": {
 	"authors": [
+		"Amire80",
 		"Santhosh Thottingal"
 	],
 	"message-documentation": "qqq"
@@ -8,6 +9,7 @@
 "ext-uls-display-settings-title": "Display settings",
 "ext-uls-display-settings-title-short": "Display",
 "ext-uls-display-settings-desc": "Set language used for menus and fonts.",
+"ext-uls-select-language-settings-icon-tooltip": "Language settings",
 "ext-uls-undo-language-tooltip-text": "Language changed from $1",
 "ext-uls-language-settings-title": "Language settings",
 "ext-uls-language-settings-apply": "Apply settings",

i18n/qqq.json

@@ -1,6 +1,7 @@
 {
 	"@metadata": {
 		"authors": [
+			"Amire80",
 			"Hyperborean",
 			"Lloffiwr",
 			"Santhosh Thottingal",
@@ -10,6 +11,7 @@
 	"ext-uls-display-settings-title": "Display settings title text",
 	"ext-uls-display-settings-title-short": "A short name for display settings screen. Can be a translation for 'Display'",
 	"ext-uls-display-settings-desc": "Short description about display settings.  'Set language used for menus and set fonts' is equivalent in meaning to the source message.",
+	"ext-uls-select-language-settings-icon-tooltip": "A tooltip for the icon that shows the language selector.",
 	"ext-uls-undo-language-tooltip-text": "Text for the tooltip appearing when language is changed. $1 is the previous language acronym.",
 	"ext-uls-language-settings-title": "Title text for language settings screen",
 	"ext-uls-language-settings-apply": "Label for apply settings button in language settings screen",
@@ -40,4 +42,4 @@
 	"ext-uls-input-enable": "Label for enable input tools button",
 	"ext-uls-input-disable-info": "Info text for the disable input tools button",
 	"ext-uls-input-settings-noime": "Text to be shown when no input methods are available for a selected language"
-}
+}

resources/css/ext.uls.css

@@ -1,7 +1,29 @@
+/*
+ * The trigger can be placed in the personal toolbar near the username
+ * or near the interlanguage links.
+ */
+
 #pt-uls a.uls-trigger {
 	padding-left: 30px;
 }
 
+#p-lang .uls-trigger {
+	/* @embed */
+	background: transparent url('../images/cog-sprite.png') right top no-repeat;
+	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
+	background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
+	background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
+	background-size: 14px auto;
+	border-radius: 0 0 5px 5px;
+	height: 14px;
+	float: right;
+	cursor: pointer;
+}
+
+#p-lang .uls-trigger:hover {
+	background-position: right -18px;
+}
+
 /* Opera for some inexplicable reason confuses right and left padding with */
 /* RTL text direction here (bug 45142). x:-o-prefocus won't match anything, */
 /* but will make other browsers ignore this rule. */

resources/images/cog-sprite.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="14"
+   height="32"
+   viewBox="0 0 14 32"
+   id="Layer_1"
+   xml:space="preserve"><metadata
+   id="metadata8"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs6" />
+
+<path
+   d="m 6.032,18 c -0.231,0 -0.418,0.187 -0.418,0.418 v 1.064 c -0.541,0.134 -1.062,0.35 -1.551,0.645 l -0.75,-0.75 c -0.164,-0.164 -0.429,-0.164 -0.593,0 l -1.36,1.36 c -0.164,0.164 -0.164,0.429 0,0.593 l 0.75,0.75 C 1.818,22.568 1.615,23.095 1.483,23.631 H 0.418 C 0.187,23.631 0,23.818 0,24.05 v 1.918 c 0,0.231 0.187,0.419 0.418,0.419 h 1.046 c 0.134,0.541 0.351,1.061 0.645,1.551 l -0.75,0.75 c -0.164,0.164 -0.164,0.429 0,0.593 l 1.36,1.36 c 0.164,0.164 0.429,0.164 0.593,0 l 0.75,-0.75 c 0.491,0.297 1.01,0.493 1.551,0.627 v 1.064 C 5.614,31.813 5.801,32 6.032,32 H 7.95 c 0.231,0 0.419,-0.187 0.419,-0.418 V 30.518 C 8.911,30.385 9.43,30.185 9.92,29.891 l 0.75,0.75 c 0.164,0.164 0.429,0.164 0.593,0 l 1.36,-1.36 c 0.164,-0.164 0.164,-0.429 0,-0.593 l -0.75,-0.75 c 0.295,-0.488 0.51,-1.014 0.645,-1.551 h 1.064 C 13.813,26.387 14,26.199 14,25.968 V 24.05 c 0,-0.231 -0.187,-0.419 -0.418,-0.419 H 12.518 C 12.385,23.094 12.164,22.567 11.873,22.08 l 0.75,-0.75 c 0.164,-0.164 0.164,-0.429 0,-0.593 l -1.36,-1.36 c -0.164,-0.164 -0.429,-0.164 -0.593,0 l -0.75,0.75 C 9.43,19.833 8.908,19.615 8.369,19.482 V 18.418 C 8.369,18.187 8.182,18 7.95,18 H 6.032 z m 0.889,4.358 c 0.678,-0.018 1.37,0.212 1.901,0.715 1.062,1.007 1.111,2.687 0.104,3.749 -1.005,1.059 -2.686,1.105 -3.749,0.104 -1.062,-1.007 -1.112,-2.687 -0.105,-3.749 0.505,-0.531 1.172,-0.8 1.849,-0.819 z"
+   id="rect3381-0"
+   style="fill:#555555" />
+<path
+   d="M 6.032,0 C 5.801,0 5.614,0.187 5.614,0.418 V 1.481 C 5.073,1.616 4.552,1.833 4.062,2.127 L 3.312,1.377 C 3.148,1.213 2.883,1.213 2.719,1.377 l -1.36,1.36 c -0.164,0.164 -0.164,0.429 0,0.593 l 0.75,0.75 C 1.817,4.568 1.615,5.095 1.482,5.631 H 0.418 C 0.187,5.631 0,5.818 0,6.05 v 1.918 c 0,0.231 0.187,0.418 0.418,0.418 h 1.046 c 0.134,0.542 0.351,1.062 0.645,1.551 l -0.75,0.75 c -0.164,0.164 -0.164,0.429 0,0.593 l 1.36,1.36 c 0.164,0.164 0.429,0.164 0.593,0 l 0.75,-0.75 c 0.491,0.296 1.01,0.493 1.551,0.627 V 13.58 C 5.614,13.813 5.801,14 6.032,14 H 7.95 c 0.231,0 0.419,-0.187 0.419,-0.418 V 12.519 C 8.911,12.385 9.43,12.186 9.92,11.892 l 0.75,0.75 c 0.164,0.164 0.429,0.164 0.593,0 l 1.36,-1.36 c 0.164,-0.164 0.164,-0.429 0,-0.593 l -0.75,-0.75 c 0.295,-0.489 0.51,-1.013 0.645,-1.551 h 1.064 C 13.813,8.386 14,8.199 14,7.968 V 6.05 C 14,5.818 13.813,5.632 13.582,5.632 H 12.518 C 12.385,5.094 12.164,4.567 11.873,4.08 l 0.75,-0.75 c 0.164,-0.164 0.164,-0.429 0,-0.593 l -1.36,-1.36 c -0.164,-0.164 -0.429,-0.164 -0.593,0 L 9.92,2.127 C 9.43,1.833 8.908,1.615 8.369,1.482 V 0.418 C 8.369,0.187 8.182,0 7.95,0 H 6.032 z M 6.921,4.358 C 7.6,4.341 8.291,4.57 8.822,5.073 9.884,6.081 9.934,7.76 8.927,8.822 7.922,9.882 6.241,9.927 5.178,8.927 4.116,7.919 4.066,6.24 5.073,5.178 5.577,4.647 6.244,4.376 6.921,4.358 z"
+   id="path3059"
+   style="fill:#808080" />
+</svg>

resources/js/ext.uls.interface.js

@@ -21,9 +21,27 @@
 	'use strict';
 
 	$( document ).ready( function () {
-		var $ulsTrigger, previousLanguages, previousLang,
+		var $ulsTrigger, $pLang,
+			previousLanguages, previousLang,
+			ulsPosition = mw.config.get( 'wgULSPosition' ),
+			tipsyGravity = {
+				personal: 'n',
+				interlanguage: $( 'body' ).hasClass( 'rtl' ) ? 'e' : 'w'
+			},
 			currentLang = mw.config.get( 'wgUserLanguage' );
 
+		if ( ulsPosition === 'interlanguage' ) {
+			// The interlanguage links section
+			$pLang = $( '#p-lang' );
+			// Add an element near the interlanguage links header
+			$pLang.prepend( $( '<span>' )
+				.addClass( 'uls-trigger' )
+				.attr( 'title', $.i18n( 'ext-uls-language-settings-title' ) )
+			);
+			// Remove the dummy link that was added to make sure that the section appears
+			$pLang.find( '.uls-p-lang-dummy' ).remove();
+		}
+
 		$ulsTrigger = $( '.uls-trigger' );
 		previousLanguages = mw.uls.getPreviousLanguages() || [];
 		previousLang = previousLanguages.slice( -1 )[0];
@@ -117,6 +135,10 @@
 			}
 		} );
 
+		if ( ulsPosition === 'interlanguage' ) {
+			$ulsTrigger.attr( 'title', $.i18n( 'ext-uls-select-language-settings-icon-tooltip' ) );
+		}
+
 		if ( !previousLang ) {
 			previousLanguages.push( currentLang );
 			mw.uls.setPreviousLanguages( previousLanguages );
@@ -135,7 +157,7 @@
 
 		// Attach a tipsy tooltip to the trigger
 		$ulsTrigger.tipsy( {
-			gravity: 'n',
+			gravity: tipsyGravity[ulsPosition],
 			delayOut: 3000,
 			html: true,
 			fade: true,