bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

jQuery.uls bug fixes and keep template with the plugin

Browse Source 
* 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
This commit is contained in:
Santhosh Thottingal
2012-08-17 16:26:08 +05:30
committed by Amir E. Aharoni
parent 5bd96823d6
commit f3ffe8bead
6 changed files with 101 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
UniversalLanguageSelector.hooks.php
View File

@@ -106,80 +106,4 @@ class UniversalLanguageSelectorHooks {
$vars['wgULSLanguages'] = Language::fetchLanguageNames( $wgContLang->getCode() ); $vars['wgULSLanguages'] = Language::fetchLanguageNames( $wgContLang->getCode() );
return true; 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 .= "
<div class='uls-menu'>
<div class='row'>
<span id='uls-close' class='icon-close'></span>
</div>
<div class='row'>
<div class='four columns'>
<h1>" . $skin->msg( 'uls-select-content-language' )->escaped() . "</h1>
</div>
<div class='three columns' id='settings-block'></div>
<div class='five columns' id='map-block'>
<div class='row'>
<div class='three columns uls-region' id='uls-region-4' data-regiongroup='4'>
<a>Worldwide</a>
</div>
<div class='nine columns'>
<div class='row uls-worldmap'>
<div class='four columns uls-region' id='uls-region-1' data-regiongroup='1'>
<a>America</a>
</div>
<div class='four columns uls-region' id='uls-region-2' data-regiongroup='2'>
<a>Europe<br>Middle East<br>Africa</a>
</div>
<div class='four columns uls-region' id='uls-region-3' data-regiongroup='3'>
<a>Asia<br>Australia<br>Pacific</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='search' class='row'>
<div class='one column'>
<span class='search-label'></span>
</div>
<div class='ten columns'>
<div id='search-input-block'>
<input type='text' class='filterinput' id='filtersuggestion' disabled='true' autocomplete='off' role='textbox' bound='true'/>
<input type='text' class='filterinput' data-clear='languagefilter-clear' data-suggestion='filtersuggestion' id='languagefilter' placeholder='Language search' bound='true'/>
</div>
</div>
<div class='one column'>
<span id='languagefilter-clear'></span>
</div>
</div>
<div class='row uls-language-list'></div>
<div class='row uls-no-results-view'>
<h2 class='ten columns end offset-by-one'>No results found for \"<span id='uls-no-found-search-term'></span>\"</h2>
<div id='uls-no-found-more'>
<div class='ten columns end offset-by-one'>
<p>You can search by language name, script name, ISO code of language or you can browse by region:
<a class='uls-region-link' data-region='NA' href='#'>America</a>,
<a class='uls-region-link' data-region='EU' href='#'>Europe</a>,
<a class='uls-region-link' data-region='ME' href='#'>Middle East</a>,
<a class='uls-region-link' data-region='AF' href='#'>Africa</a>,
<a class='uls-region-link' data-region='AS' href='#'>Asia</a>,
<a class='uls-region-link' data-region='PA' href='#'>Pacific</a> or
<a class='uls-region-link' data-region='WW' href='#'>Worldwide languages</a>.
</p>
</div>
</div>
</div>
</div>";
return true;
}
} }

1
UniversalLanguageSelector.php
View File

@@ -57,7 +57,6 @@ $wgAutoloadClasses['LanguageNameSearch'] = "$dir/data/LanguageNameSearch.php";
$wgHooks['BeforePageDisplay'][] = 'UniversalLanguageSelectorHooks::addModules'; $wgHooks['BeforePageDisplay'][] = 'UniversalLanguageSelectorHooks::addModules';
$wgHooks['PersonalUrls'][] = 'UniversalLanguageSelectorHooks::addTrigger'; $wgHooks['PersonalUrls'][] = 'UniversalLanguageSelectorHooks::addTrigger';
$wgHooks['SkinAfterContent'][] = 'UniversalLanguageSelectorHooks::addTemplate';
$wgHooks['ResourceLoaderTestModules'][] = 'UniversalLanguageSelectorHooks::addTestModules'; $wgHooks['ResourceLoaderTestModules'][] = 'UniversalLanguageSelectorHooks::addTestModules';
$wgHooks['ResourceLoaderGetConfigVars'][] = 'UniversalLanguageSelectorHooks::addConfig'; $wgHooks['ResourceLoaderGetConfigVars'][] = 'UniversalLanguageSelectorHooks::addConfig';
$wgAPIModules['languagesearch'] = 'ApiLanguageSearch'; $wgAPIModules['languagesearch'] = 'ApiLanguageSearch';

70
lib/jquery.uls/examples/index.html
View File

@@ -47,74 +47,6 @@
Demonstration of jquery plugin Demonstration of jquery plugin
</p> </p>
</div> </div>
<div class="container"> <div class="container"></div>
<div class="uls-menu">
<div class="row">
<span id="uls-close" class="icon-close"></span>
</div>
<div class="row">
<div class="four columns">
<h1> Select language </h1>
</div>
<div class="three columns" id="settings-block"></div>
<div class="five columns" id="map-block">
<div class="row">
<div data-regiongroup="4" id="uls-region-4" class="three columns uls-region">
<a>Worldwide</a>
</div>
<div class="nine columns">
<div class="row uls-worldmap">
<div data-regiongroup="1" id="uls-region-1" class="four columns uls-region">
<a>America</a>
</div>
<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">
<a>Europe
<br>
Middle east
<br>
Africa</a>
</div>
<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">
<a>Asia
<br>
Australia
<br>
Pacific</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="search">
<div class="row">
<div class="one column">
<span class="search-label"></span>
</div>
<div class="ten columns">
<div id="search-input-block">
<input type="text" class="filterinput" id="filtersuggestion" disabled="true" autocomplete="off"/>
<input type="text" class="filterinput" id="languagefilter" data-clear='languagefilter-clear' data-suggestion="filtersuggestion" placeholder="Language search" autocomplete="off"/>
</div>
</div>
<div class="one column">
<span id="languagefilter-clear"></span>
</div>
</div>
</div>
<div class="row uls-language-list"></div>
<div class="row uls-no-results-view">
<h2 class="ten columns end offset-by-one">No results found for "<span id="uls-no-found-search-term">Esapnol</span>"</h2>
<div id="uls-no-found-more">
<div class="ten columns end offset-by-one">
<p>
You can search by language name, script name, ISO code of language or you can browse by region: <a class="uls-region-link" data-region="NA" href="#">America</a>, <a class="uls-region-link" data-region="EU" href="#">Europe</a>, <a class="uls-region-link" data-region="ME" href="#">Middle East</a>, <a class="uls-region-link" data-region="AF" href="#">Africa</a>, <a class="uls-region-link" data-region="AS" href="#">Asia</a>, <a class="uls-region-link" data-region="PA" href="#">Pacific</a> or <a class="uls-region-link" data-region="WW" href="#">Worldwide languages</a>.
</p>
</div>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

99
lib/jquery.uls/src/jquery.uls.core.js
View File

@@ -1,5 +1,6 @@
/** /**
* <explain briefly what this file is about>. * Universal Language Selector
* ULS core component.
* *
* Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris, * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
@@ -20,10 +21,83 @@
(function ( $ ) { (function ( $ ) {
"use strict"; "use strict";
var template = '\
<div class="uls-menu"> \
<div class="row"> \
<span id="uls-close" class="icon-close"></span> \
</div> \
<div class="row"> \
<div class="four columns">\
<h1>Select language</h1>\
</div>\
<div class="three columns" id="settings-block"></div>\
<div class="five columns" id="map-block">\
<div class="row">\
<div data-regiongroup="4" id="uls-region-4" class="three columns uls-region">\
<a>Worldwide</a>\
</div>\
<div class="nine columns">\
<div class="row uls-worldmap">\
<div data-regiongroup="1" id="uls-region-1" class="four columns uls-region">\
<a>America</a>\
</div>\
<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">\
<a>Europe <br> Middle east <br> Africa\
</a>\
</div>\
<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">\
<a>Asia <br> Australia <br> Pacific\
</a>\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
<div id="search" class="row"> \
<div class="one column">\
<span class="search-label"></span>\
</div>\
<div class="ten columns">\
<div id="search-input-block">\
<input type="text" class="filterinput" id="filtersuggestion" disabled="true"\
autocomplete="off" /> <input type="text" class="filterinput" id="languagefilter"\
data-clear="languagefilter-clear" data-suggestion="filtersuggestion"\
placeholder="Language search" autocomplete="off" />\
</div>\
</div>\
<div class="one column">\
<span id="languagefilter-clear"></span>\
</div>\
</div>\
<div class="row uls-language-list"></div>\
<div class="row uls-no-results-view">\
<h2 class="ten columns end offset-by-one">\
No results found\
</h2>\
<div id="uls-no-found-more">\
<div class="ten columns end offset-by-one">\
<p>\
You can search by language name, script name, ISO code of language or you can browse by\
region: <a class="uls-region-link" data-region="NA" href="#">America</a>, <a\
class="uls-region-link" data-region="EU" href="#">Europe</a>, <a class="uls-region-link"\
data-region="ME" href="#">Middle East</a>, <a class="uls-region-link" data-region="AF"\
href="#">Africa</a>, <a class="uls-region-link" data-region="AS" href="#">Asia</a>, <a\
class="uls-region-link" data-region="PA" href="#">Pacific</a> or <a class="uls-region-link"\
data-region="WW" href="#">Worldwide languages</a>.\
</p>\
</div>\
</div>\
</div>\
</div> ';
/**
* ULS Public class definition
*/
var ULS = function( element, options ) { var ULS = function( element, options ) {
this.$element = $( element ); this.$element = $( element );
this.options = $.extend( {}, $.fn.uls.defaults, options ); this.options = $.extend( {}, $.fn.uls.defaults, options );
this.$menu = $( this.options.menu ); this.$menu = $( template );
this.languages = this.options.languages; this.languages = this.options.languages;
for ( var code in this.languages ) { for ( var code in this.languages ) {
if ( $.uls.data.languages[code] === undefined ) { if ( $.uls.data.languages[code] === undefined ) {
@@ -33,9 +107,9 @@
} }
this.shown = false; this.shown = false;
this.initialized = false; this.initialized = false;
this.$languageFilter = $( 'input#languagefilter' ); this.$languageFilter = this.$menu.find( 'input#languagefilter' );
this.$noResultsView = $( 'div.uls-no-results-view' ); this.$noResultsView = this.$menu.find( 'div.uls-no-results-view' );
this.$resultsView = $( 'div.uls-language-list' ); this.$resultsView = this.$menu.find( 'div.uls-language-list' );
this.$noResultsView.hide(); this.$noResultsView.hide();
this.render(); this.render();
this.listen(); this.listen();
@@ -63,6 +137,10 @@
left: '25%' left: '25%'
}; };
}, },
/**
* Show the ULS window
*/
show: function() { show: function() {
var pos = this.position(); var pos = this.position();
this.$menu.css( { this.$menu.css( {
@@ -71,6 +149,7 @@
} ); } );
if ( !this.initialized ) { if ( !this.initialized ) {
$( 'body' ).prepend( this.$menu );
// Initialize with a full search. // Initialize with a full search.
// This happens on first time click of uls trigger. // This happens on first time click of uls trigger.
this.$languageFilter.languagefilter( 'clear' ); 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() { render: function() {
// Rendering stuff here // Rendering stuff here
@@ -125,7 +205,7 @@
that.$element.on( 'click', $.proxy( that.click, that ) ); that.$element.on( 'click', $.proxy( that.click, that ) );
// Handle click on close button // 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 // Handle key press events on the menu
that.$menu.on('keypress', $.proxy(this.keypress, this) ) that.$menu.on('keypress', $.proxy(this.keypress, this) )
@@ -155,12 +235,13 @@
} ); } );
// Create region selectors, one per region // Create region selectors, one per region
$( '.uls-region, .uls-region-link' ).regionselector( { this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( {
$target: lcd, $target: lcd,
languages: that.languages, languages: that.languages,
success: function() { success: function() {
// Deactivate search filtering // Deactivate search filtering
that.$languageFilter.languagefilter( 'deactivate' ); that.$languageFilter.languagefilter( 'deactivate' );
// Show 'results view' if we are in no results mode // Show 'results view' if we are in no results mode
that.success(); that.success();
}, },
@@ -237,7 +318,7 @@
}; };
$.fn.uls.defaults = { $.fn.uls.defaults = {
menu: '.uls-menu', menu: template,
onSelect: null, // Callback function to be called when a language is selected onSelect: null, // Callback function to be called when a language is selected
searchAPI: null, // Language search API searchAPI: null, // Language search API
languages: $.uls.data.autonyms() // Languages to be used for ULS, default is all languages languages: $.uls.data.autonyms() // Languages to be used for ULS, default is all languages

4
lib/jquery.uls/src/jquery.uls.languagefilter.js
View File

@@ -31,8 +31,8 @@
this.options = $.extend( {}, $.fn.regionselector.defaults, options ); this.options = $.extend( {}, $.fn.regionselector.defaults, options );
this.$element.addClass( 'languagefilter' ); this.$element.addClass( 'languagefilter' );
this.resultCount = 0; this.resultCount = 0;
this.$suggestion = $( '#' + this.$element.data( 'suggestion' ) ); this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) );
this.$clear = $( '#'+ this.$element.data( 'clear' ) ); this.$clear = this.$element.parents().find( '#'+ this.$element.data( 'clear' ) );
this.selectedLanguage = null; this.selectedLanguage = null;
this.listen(); this.listen();
}; };

14
lib/jquery.uls/src/jquery.uls.lcd.js
View File

@@ -1,5 +1,7 @@
/** /**
* <explain briefly what this file is about>. * 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, * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
@@ -97,7 +99,7 @@
var $divRegionCode, $rowDiv, $ul; var $divRegionCode, $rowDiv, $ul;
forceNew = forceNew || false; forceNew = forceNew || false;
$divRegionCode = $( 'div#' + regionCode ); $divRegionCode = this.$element.find( 'div#' + regionCode );
$rowDiv = $divRegionCode.find( 'div.row:last' ); $rowDiv = $divRegionCode.find( 'div.row:last' );
$ul = $divRegionCode.find( 'ul:last' ); $ul = $divRegionCode.find( 'ul:last' );
@@ -144,9 +146,9 @@
var that = this; var that = this;
// The region section need to be in sync with the map filter. // The region section need to be in sync with the map filter.
that.$element.scroll( function () { 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; 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; var offset = $( this ).position().top - listtop;
if ( offset < 0 ) { if ( offset < 0 ) {
inviewRegion = $( this ).attr( 'id' ); inviewRegion = $( this ).attr( 'id' );
@@ -156,8 +158,8 @@
} ); } );
var inview = $.uls.data.regiongroups[inviewRegion]; var inview = $.uls.data.regiongroups[inviewRegion];
$( 'div.uls-region' ).removeClass( 'active' ); that.$element.find( 'div.uls-region' ).removeClass( 'active' );
$( 'div#uls-region-' + inview ).addClass( 'active' ); that.$element.find( 'div#uls-region-' + inview ).addClass( 'active' );
} ); } );
} }