From f3ffe8bead0b11362d80a401610acb4316564a95 Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Fri, 17 Aug 2012 16:26:08 +0530 Subject: [PATCH] jQuery.uls bug fixes and keep template with the plugin * The jQuery selectors should be referring to the menu for the current ULS instance rather than querying on the page. This allows multiple instances of ULS present in the page * Keep the HTML template with the plugin. No more HTML added from hooks. * Updated the example based on above change. * Updated the hooks code. * Some more documentation. Change-Id: I48e2e167bc2c09b8653a142c50317c22e8ba1362 --- UniversalLanguageSelector.hooks.php | 76 -------------- UniversalLanguageSelector.php | 1 - lib/jquery.uls/examples/index.html | 70 +------------ lib/jquery.uls/src/jquery.uls.core.js | 99 +++++++++++++++++-- .../src/jquery.uls.languagefilter.js | 4 +- lib/jquery.uls/src/jquery.uls.lcd.js | 14 +-- 6 files changed, 101 insertions(+), 163 deletions(-) diff --git a/UniversalLanguageSelector.hooks.php b/UniversalLanguageSelector.hooks.php index 16487ca4..716aadb8 100644 --- a/UniversalLanguageSelector.hooks.php +++ b/UniversalLanguageSelector.hooks.php @@ -106,80 +106,4 @@ class UniversalLanguageSelectorHooks { $vars['wgULSLanguages'] = Language::fetchLanguageNames( $wgContLang->getCode() ); return true; } - - /** - * Add the template for the ULS to the body. - * Hooks: SkinAfterContent - * @param $data string - * @param $skin Skin - * @return bool - * TODO: move to JavaScript side - * TODO: hardcoded English - */ - public static function addTemplate( &$data, $skin ) { - $data .= " -
-
- -
-
-
-

" . $skin->msg( 'uls-select-content-language' )->escaped() . "

-
-
-
-
-
- Worldwide -
-
-
-
- America -
- - -
-
-
-
-
- -
-
-

No results found for \"\"

-
-
-

You can search by language name, script name, ISO code of language or you can browse by region: - America, - Europe, - Middle East, - Africa, - Asia, - Pacific or - Worldwide languages. -

-
-
-
-
"; - return true; - } } diff --git a/UniversalLanguageSelector.php b/UniversalLanguageSelector.php index 628840f6..6dc82e87 100644 --- a/UniversalLanguageSelector.php +++ b/UniversalLanguageSelector.php @@ -57,7 +57,6 @@ $wgAutoloadClasses['LanguageNameSearch'] = "$dir/data/LanguageNameSearch.php"; $wgHooks['BeforePageDisplay'][] = 'UniversalLanguageSelectorHooks::addModules'; $wgHooks['PersonalUrls'][] = 'UniversalLanguageSelectorHooks::addTrigger'; -$wgHooks['SkinAfterContent'][] = 'UniversalLanguageSelectorHooks::addTemplate'; $wgHooks['ResourceLoaderTestModules'][] = 'UniversalLanguageSelectorHooks::addTestModules'; $wgHooks['ResourceLoaderGetConfigVars'][] = 'UniversalLanguageSelectorHooks::addConfig'; $wgAPIModules['languagesearch'] = 'ApiLanguageSearch'; diff --git a/lib/jquery.uls/examples/index.html b/lib/jquery.uls/examples/index.html index 74252ee7..e14935ba 100644 --- a/lib/jquery.uls/examples/index.html +++ b/lib/jquery.uls/examples/index.html @@ -47,74 +47,6 @@ Demonstration of jquery plugin

-
-
-
- -
-
-
-

Select language

-
-
- -
- - -
-
-

No results found for "Esapnol"

-
-
-

- You can search by language name, script name, ISO code of language or you can browse by region: America, Europe, Middle East, Africa, Asia, Pacific or Worldwide languages. -

-
-
-
-
-
+
diff --git a/lib/jquery.uls/src/jquery.uls.core.js b/lib/jquery.uls/src/jquery.uls.core.js index 4897eb56..d58ae7cc 100644 --- a/lib/jquery.uls/src/jquery.uls.core.js +++ b/lib/jquery.uls/src/jquery.uls.core.js @@ -1,5 +1,6 @@ /** - * . + * Universal Language Selector + * ULS core component. * * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris, * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other @@ -20,10 +21,83 @@ (function ( $ ) { "use strict"; + var template = '\ +
\ +
\ + \ +
\ +
\ +
\ +

Select language

\ +
\ +
\ +
\ +
\ +
\ + Worldwide\ +
\ +
\ +
\ +
\ + America\ +
\ + \ + \ +
\ +
\ +
\ +
\ +
\ + \ +
\ +
\ +

\ + No results found\ +

\ +
\ +
\ +

\ + You can search by language name, script name, ISO code of language or you can browse by\ + region: America, Europe, Middle East, Africa, Asia, Pacific or Worldwide languages.\ +

\ +
\ +
\ +
\ +
'; + + /** + * ULS Public class definition + */ var ULS = function( element, options ) { this.$element = $( element ); this.options = $.extend( {}, $.fn.uls.defaults, options ); - this.$menu = $( this.options.menu ); + this.$menu = $( template ); this.languages = this.options.languages; for ( var code in this.languages ) { if ( $.uls.data.languages[code] === undefined ) { @@ -33,9 +107,9 @@ } this.shown = false; this.initialized = false; - this.$languageFilter = $( 'input#languagefilter' ); - this.$noResultsView = $( 'div.uls-no-results-view' ); - this.$resultsView = $( 'div.uls-language-list' ); + this.$languageFilter = this.$menu.find( 'input#languagefilter' ); + this.$noResultsView = this.$menu.find( 'div.uls-no-results-view' ); + this.$resultsView = this.$menu.find( 'div.uls-language-list' ); this.$noResultsView.hide(); this.render(); this.listen(); @@ -63,6 +137,10 @@ left: '25%' }; }, + + /** + * Show the ULS window + */ show: function() { var pos = this.position(); this.$menu.css( { @@ -71,6 +149,7 @@ } ); if ( !this.initialized ) { + $( 'body' ).prepend( this.$menu ); // Initialize with a full search. // This happens on first time click of uls trigger. this.$languageFilter.languagefilter( 'clear' ); @@ -90,7 +169,8 @@ }, /** - * Render the UI elements. Can be used for customization + * Render the UI elements. + * Does nothing by default. Can be used for customization. */ render: function() { // Rendering stuff here @@ -125,7 +205,7 @@ that.$element.on( 'click', $.proxy( that.click, that ) ); // Handle click on close button - $( "#uls-close" ).on( 'click', $.proxy( that.click, that ) ); + this.$menu.find( "#uls-close" ).on( 'click', $.proxy( that.click, that ) ); // Handle key press events on the menu that.$menu.on('keypress', $.proxy(this.keypress, this) ) @@ -155,12 +235,13 @@ } ); // Create region selectors, one per region - $( '.uls-region, .uls-region-link' ).regionselector( { + this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( { $target: lcd, languages: that.languages, success: function() { // Deactivate search filtering that.$languageFilter.languagefilter( 'deactivate' ); + // Show 'results view' if we are in no results mode that.success(); }, @@ -237,7 +318,7 @@ }; $.fn.uls.defaults = { - menu: '.uls-menu', + menu: template, onSelect: null, // Callback function to be called when a language is selected searchAPI: null, // Language search API languages: $.uls.data.autonyms() // Languages to be used for ULS, default is all languages diff --git a/lib/jquery.uls/src/jquery.uls.languagefilter.js b/lib/jquery.uls/src/jquery.uls.languagefilter.js index 68e02917..05f9f19d 100644 --- a/lib/jquery.uls/src/jquery.uls.languagefilter.js +++ b/lib/jquery.uls/src/jquery.uls.languagefilter.js @@ -31,8 +31,8 @@ this.options = $.extend( {}, $.fn.regionselector.defaults, options ); this.$element.addClass( 'languagefilter' ); this.resultCount = 0; - this.$suggestion = $( '#' + this.$element.data( 'suggestion' ) ); - this.$clear = $( '#'+ this.$element.data( 'clear' ) ); + this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) ); + this.$clear = this.$element.parents().find( '#'+ this.$element.data( 'clear' ) ); this.selectedLanguage = null; this.listen(); }; diff --git a/lib/jquery.uls/src/jquery.uls.lcd.js b/lib/jquery.uls/src/jquery.uls.lcd.js index 328b6b9a..43d6bddb 100644 --- a/lib/jquery.uls/src/jquery.uls.lcd.js +++ b/lib/jquery.uls/src/jquery.uls.lcd.js @@ -1,5 +1,7 @@ /** - * . + * Universal Language Selector + * Language category display component - Used for showing the search results, + * grouped by regions, scripts * * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris, * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other @@ -97,7 +99,7 @@ var $divRegionCode, $rowDiv, $ul; forceNew = forceNew || false; - $divRegionCode = $( 'div#' + regionCode ); + $divRegionCode = this.$element.find( 'div#' + regionCode ); $rowDiv = $divRegionCode.find( 'div.row:last' ); $ul = $divRegionCode.find( 'ul:last' ); @@ -144,9 +146,9 @@ var that = this; // The region section need to be in sync with the map filter. that.$element.scroll( function () { - var inviewRegion = $( 'div.uls-lcd-region-section:first' ).attr( 'id' ); + var inviewRegion = that.$element.find( 'div.uls-lcd-region-section:first' ).attr( 'id' ); var listtop = that.$element.position().top; - $( 'div.uls-lcd-region-section' ).each( function () { + that.$element.find( 'div.uls-lcd-region-section' ).each( function () { var offset = $( this ).position().top - listtop; if ( offset < 0 ) { inviewRegion = $( this ).attr( 'id' ); @@ -156,8 +158,8 @@ } ); var inview = $.uls.data.regiongroups[inviewRegion]; - $( 'div.uls-region' ).removeClass( 'active' ); - $( 'div#uls-region-' + inview ).addClass( 'active' ); + that.$element.find( 'div.uls-region' ).removeClass( 'active' ); + that.$element.find( 'div#uls-region-' + inview ).addClass( 'active' ); } ); }