From 453912fdf2d449b7cd8c56f4815e4fccf9359763 Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Tue, 26 Mar 2013 11:27:32 +0530 Subject: [PATCH] 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 | 11 +- UniversalLanguageSelector.php | 17 ++- resources/js/ext.uls.init.js | 179 +----------------------- resources/js/ext.uls.interface.js | 203 ++++++++++++++++++++++++++++ 4 files changed, 226 insertions(+), 184 deletions(-) create mode 100644 resources/js/ext.uls.interface.js diff --git a/UniversalLanguageSelector.hooks.php b/UniversalLanguageSelector.hooks.php index 868f4a2e..04600b0d 100644 --- a/UniversalLanguageSelector.hooks.php +++ b/UniversalLanguageSelector.hooks.php @@ -39,12 +39,13 @@ class UniversalLanguageSelectorHooks { * @return bool */ public static function addModules( $out, $skin ) { - if ( !self::isToolbarEnabled( $out->getUser() ) ) { - return true; - } - + // If extension is enabled, basic features(API, language data) available. $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', ); diff --git a/UniversalLanguageSelector.php b/UniversalLanguageSelector.php index 2564d48e..216bd3e5 100644 --- a/UniversalLanguageSelector.php +++ b/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', ); diff --git a/resources/js/ext.uls.init.js b/resources/js/ext.uls.init.js index 994c7c10..b449c7a5 100644 --- a/resources/js/ext.uls.init.js +++ b/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 = $( '
' ) - .addClass( 'settings-title' ) - .attr( 'title', displaySettingsText ); - $displaySettings = $( '
' ) - .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 = $( '
' ) - .addClass( 'settings-title' ) - .attr( 'title', inputSettingsText ); - $inputSettings = $( '
' ) - .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 = $( '' ).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 = $( '
' ).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 ) ); diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js new file mode 100644 index 00000000..3e635dc6 --- /dev/null +++ b/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 = $( '
' ) + .addClass( 'settings-title' ) + .attr( 'title', displaySettingsText ); + $displaySettings = $( '
' ) + .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 = $( '
' ) + .addClass( 'settings-title' ) + .attr( 'title', inputSettingsText ); + $inputSettings = $( '
' ) + .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 = $( '' ).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 = $( '
' ).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 ) );