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

Update upstream jquery.uls to 10777bb

Browse Source 
* Don't show region headings in narrow mode.
* Remove the map.

GitHub link: 10777bb25e

Change-Id: I4fcfba5a6ef46d0bda34331c6ea111cdedd157a7
This commit is contained in:
Amir E. Aharoni
2014-12-22 09:28:39 +02:00
committed by Amire80
parent 0d98108f42
commit 1acaf1515f
10 changed files with 154 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,34 +28,9 @@
template = '<div class="grid uls-menu"> \
<div class="row"> \
<span id="uls-close" class="uls-icon-close"></span> \
</div> \
<div class="row"> \
<div class="uls-title-region seven columns">\
<h1 data-i18n="uls-select-language" class="uls-title">Select Language</h1>\
</div>\
<div class="five columns uls-map-block" id="uls-map-block">\
<div class="row">\
<div data-regiongroup="1" id="uls-region-1" class="three columns uls-region uls-region-1">\
<a data-i18n="uls-region-WW">Worldwide</a>\
</div>\
<div class="nine columns">\
<div class="row uls-worldmap">\
<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">\
<a data-i18n="uls-region-AM">America</a>\
</div>\
<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">\
<a><span data-i18n="uls-region-EU">Europe</span><br>\
<span data-i18n="uls-region-ME">Middle East</span><br>\
<span data-i18n="uls-region-AF">Africa</span></a>\
</div>\
<div data-regiongroup="4" id="uls-region-4" class="four columns uls-region">\
<a><span data-i18n="uls-region-AS">Asia</span><br>\
<span data-i18n="uls-region-PA">Pacific</span></a>\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
<div id="search" class="row uls-search"> \
<div class="one column">\
@@ -88,9 +63,9 @@
this.languages = this.options.languages;
for ( var code in this.languages ) {
if ( $.uls.data.languages[code] === undefined ) {
if ( $.uls.data.languages[ code ] === undefined ) {
// Language is unknown to ULS.
delete this.languages[code];
delete this.languages[ code ];
}
}
@@ -100,7 +75,6 @@
this.initialized = false;
this.$languageFilter = this.$menu.find( '#uls-languagefilter' );
this.$regionFilters = this.$menu.find( '.uls-region' );
this.$resultsView = this.$menu.find( 'div.uls-language-list' );
this.render();
@@ -147,7 +121,7 @@
var pos;
pos = $.extend( {}, this.$element.offset(), {
height: this.$element[0].offsetHeight
height: this.$element[ 0 ].offsetHeight
} );
return {
@@ -166,7 +140,7 @@
narrow: 'uls-narrow'
};
this.$menu.addClass( widthClasses[this.options.menuWidth] );
this.$menu.addClass( widthClasses[this.getMenuWidth()] );
this.$menu.css( this.position() );
if ( this.options.compact ) {
@@ -176,11 +150,6 @@
if ( !this.initialized ) {
$( 'body' ).prepend( this.$menu );
this.i18n();
// Initialize with a full search.
// This happens on first time click of uls trigger.
this.defaultSearch();
this.initialized = true;
}
@@ -205,12 +174,6 @@
}
},
defaultSearch: function () {
this.$resultsView.lcd( 'empty' );
this.$regionFilters.regionselector( 'show' );
},
/**
* Hide the ULS window
*/
@@ -231,7 +194,6 @@
* Callback for no results found context.
*/
noresults: function () {
$( '.regionselector' ).removeClass( 'active' );
this.$resultsView.lcd( 'noResults' );
},
@@ -239,10 +201,10 @@
* callback for results found context.
*/
success: function () {
$( '.regionselector' ).removeClass( 'active' );
this.$resultsView.show();
},
/**
/**
* Bind the UI elements with their event listeners
*/
@@ -259,10 +221,6 @@
// Register all event listeners to the ULS here.
this.$element.on( 'click', $.proxy( this.click, this ) );
this.$languageFilter.on( 'searchclear.uls', $.proxy( this.defaultSearch, this ) );
this.$languageFilter.on( 'noresults.uls', $.proxy( this.noresults, this ) );
this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) );
// Close when clicking on the close button
this.$menu.find( '#uls-close' ).on( 'click', $.proxy( this.cancel, this ) );
// Don't do anything if pressing on empty space in the ULS
@@ -280,7 +238,7 @@
lcd = this.$resultsView.lcd( {
languages: this.languages,
columns: columnsOptions[this.options.menuWidth],
columns: columnsOptions[ this.getMenuWidth() ],
quickList: this.options.quickList,
clickhandler: $.proxy( this.select, this ),
source: this.$languageFilter,
@@ -296,7 +254,7 @@
} );
// Create region selectors, one per region
this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( {
this.regionFilter = new $.uls.RegionSelector( {
$target: lcd,
languages: this.languages,
success: function ( regionfilter ) {
@@ -316,6 +274,10 @@
}
} );
this.$languageFilter.on( 'searchclear.uls', $.proxy( this.regionFilter.show, this.regionFilter ) );
this.$languageFilter.on( 'noresults.uls', $.proxy( this.noresults, this ) );
this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) );
$( 'html' ).click( $.proxy( this.cancel, this ) );
},
@@ -382,12 +344,36 @@
if ( !isSupported ) {
this.$element.setAttribute( eventName, 'return;' );
isSupported = typeof this.$element[eventName] === 'function';
isSupported = typeof this.$element[ eventName ] === 'function';
}
return isSupported;
},
/**
* Get the panel menu width parameter
* @return string
*/
getMenuWidth: function () {
var languagesCount;
if ( this.options.menuWidth ) {
return this.options.menuWidth;
}
languagesCount = Object.keys( this.options.languages ).length;
if ( languagesCount < 12 ) {
return 'narrow';
}
if ( languagesCount < 100 ) {
return 'medium';
}
return 'wide';
},
isMobile: function () {
return navigator.userAgent.match( /(iPhone|iPod|iPad|Android|BlackBerry)/ );
}
@@ -407,7 +393,7 @@
}
if ( typeof option === 'string' ) {
data[option]();
data[ option ]();
}
} );
};
@@ -418,7 +404,9 @@
languages: $.uls.data.getAutonyms(), // Languages to be used for ULS, default is all languages
quickList: null, // Array of language codes or function that returns such
compact: false, // Show ULS in compact mode
menuWidth: 'wide', // The options are wide (4 columns), medium (2 columns), and narrow (1 column)
// The options are wide (4 columns), medium (2 columns), and narrow (1 column).
// If not specified, it will be set automatically.
menuWidth: null,
showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
languageDecorator: null // Callback function to be called when a language link is prepared - for custom decoration.
};

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

@@ -29,7 +29,7 @@
LanguageFilter = function( element, options ) {
this.$element = $( element );
this.options = $.extend( {}, $.fn.regionselector.defaults, options );
this.options = $.extend( {}, $.fn.languagefilter.defaults, options );
this.$element.addClass( 'languagefilter' );
this.resultCount = 0;
this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) );

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

@@ -34,14 +34,7 @@
<p>\
<span data-i18n="uls-search-help">You can search by language name, \
script name, ISO code of language or \
you can browse by region:</span>\
<a class="uls-region-link" data-i18n="uls-region-AM" data-region="AM">America</a>, \
<a class="uls-region-link" data-i18n="uls-region-EU" data-region="EU">Europe</a>, \
<a class="uls-region-link" data-i18n="uls-region-ME" data-region="ME">Middle East</a>, \
<a class="uls-region-link" data-i18n="uls-region-AF" data-region="AF">Africa</a>, \
<a class="uls-region-link" data-i18n="uls-region-AS" data-region="AS">Asia</a>, \
<a class="uls-region-link" data-i18n="uls-region-PA" data-region="PA">Pacific</a>, \
<a class="uls-region-link" data-i18n="uls-region-WW" data-region="WW">Worldwide</a>.\
you can browse by region.</span>\
</p>\
</div>\
</div>\
@@ -73,26 +66,38 @@
* @return {bool} Whether the language was added.
*/
append: function ( langCode, regionCode ) {
var lcd = this, i, regions;
var lcd = this,
i, regions;
if ( !this.options.languages[langCode] ) {
if ( !this.options.languages[ langCode ] ) {
// Language is unknown or not in the list of languages for this context.
return false;
}
if ( regionCode ) {
regions = [regionCode];
// Show everything in one region when there is only one column
if ( lcd.options.columns === 1 ) {
regions = [ 'WW' ];
// Languages are expected to be repeated in this case,
// and we only want to show them once
if ( $.inArray( langCode, this.regionLanguages.WW ) > -1 ) {
return true;
}
} else {
regions = $.uls.data.getRegions( langCode );
if ( regionCode ) {
regions = [ regionCode ];
} else {
regions = $.uls.data.getRegions( langCode );
}
}
// Worldwides only displayed once
if ( $.inArray( 'WW', regions ) > -1 ) {
regions = ['WW'];
regions = [ 'WW' ];
}
for ( i = 0; i < regions.length; i++ ) {
this.regionLanguages[regions[i]].push( langCode );
this.regionLanguages[ regions[ i ] ].push( langCode );
}
// Work around the bad interface, delay rendering until we have got
@@ -124,7 +129,8 @@
regions.push( this.buildQuicklist() );
$.each( $.uls.data.regiongroups, function ( regionCode ) {
lcd.regionLanguages[regionCode] = [];
lcd.regionLanguages[ regionCode ] = [];
// Don't show the region unless it was enabled
if ( $.inArray( regionCode, lcd.options.showRegions ) === -1 ) {
return;
@@ -132,13 +138,16 @@
$section = $( '<div>' )
.addClass( 'eleven columns offset-by-one uls-lcd-region-section hide' )
.attr( 'id', regionCode )
.append(
$( '<h3>' )
.attr( 'id', regionCode );
// Show a region heading, unless we are using a narrow ULS
if ( lcd.options.columns !== 1 ) {
$section.append( $( '<h3>' )
.attr( 'data-i18n', 'uls-region-' + regionCode )
.addClass( 'eleven columns uls-lcd-region-title' )
.text( regionNames[regionCode] )
.text( regionNames[ regionCode ] )
);
}
regions.push( $section );
} );
@@ -166,7 +175,7 @@
$region.children( '.uls-language-block' ).remove();
languages = lcd.regionLanguages[regionCode];
languages = lcd.regionLanguages[ regionCode ];
if ( !languages || languages.length === 0 ) {
$region.addClass( 'hide' );
return;
@@ -180,7 +189,7 @@
);
$region.removeClass( 'hide' );
lcd.regionLanguages[regionCode] = [];
lcd.regionLanguages[ regionCode ] = [];
} );
},
@@ -192,9 +201,9 @@
* @param {number} itemsPerColumn How many languages fit in a column.
* @param {number} columnsPerRow How many columns fit in a row.
*/
renderRegion: function( $region, languages, itemsPerColumn, columnsPerRow ) {
renderRegion: function ( $region, languages, itemsPerColumn, columnsPerRow ) {
var columnsClasses, i, lastItem, currentScript, nextScript, force,
len = languages.length,
languagesCount = languages.length,
items = [],
columns = [],
rows = [];
@@ -207,27 +216,39 @@
columnsClasses = 'three columns';
}
for ( i = 0; i < len; i++ ) {
force = false;
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[i+1] );
lastItem = len - i === 1;
// Force column break if script changes and column has more than one row already
if ( i === 0 ) {
currentScript = $.uls.data.getScriptGroupOfLanguage( languages[i] );
} else if ( currentScript !== nextScript && items.length > 1 ) {
force = true;
if ( this.options.columns === 1 ) {
// For one-column narrow ULS, just render all the languages
// in one simple list without separators or script groups
for ( i = 0; i < languagesCount; i++ ) {
items.push( this.renderItem( languages[ i ] ) );
}
currentScript = nextScript;
items.push( this.renderItem( languages[i] ) );
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
} else {
// For medium and wide ULS, clever column placement
for ( i = 0; i < languagesCount; i++ ) {
force = false;
nextScript = $.uls.data.getScriptGroupOfLanguage( languages[ i + 1 ] );
if ( items.length >= itemsPerColumn || lastItem || force ) {
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
items = [];
if ( columns.length >= columnsPerRow || lastItem ) {
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
columns = [];
lastItem = languagesCount - i === 1;
// Force column break if script changes and column has more than one row already
if ( i === 0 ) {
currentScript = $.uls.data.getScriptGroupOfLanguage( languages[ i ] );
} else if ( currentScript !== nextScript && items.length > 1 ) {
force = true;
}
currentScript = nextScript;
items.push( this.renderItem( languages[ i ] ) );
if ( items.length >= itemsPerColumn || lastItem || force ) {
columns.push( $( '<ul>' ).addClass( columnsClasses ).append( items ) );
items = [];
if ( columns.length >= columnsPerRow || lastItem ) {
rows.push( $( '<div>' ).addClass( 'row uls-language-block' ).append( columns ) );
columns = [];
}
}
}
}
@@ -240,10 +261,10 @@
* @param {string} code Language code
* @return {Element}
*/
renderItem: function( code ) {
renderItem: function ( code ) {
var a, name, autonym, li;
name = this.options.languages[code];
name = this.options.languages[ code ];
autonym = $.uls.data.getAutonym( code ) || name || code;
// Not using jQuery as this is performance hotspot
@@ -264,7 +285,7 @@
return li;
},
i18n: function ( ) {
i18n: function () {
this.$element.find( '[data-i18n]' ).i18n();
},
@@ -355,34 +376,6 @@
lcd.options.clickhandler.call( this, $( this ).data( 'code' ) );
} );
}
// The region section need to be in sync with the map filter.
lcd.$element.scroll( function () {
var inview, inviewRegion,
$ulsLanguageList = $( this ),
scrollTop = $ulsLanguageList.position().top,
scrollBottom = $ulsLanguageList.height();
// The region section need to be in sync with the map filter.
inviewRegion = 'WW';
lcd.$element.find( '.uls-lcd-region-section' ).each( function () {
var $lcdRegionSection = $( this ),
top = $lcdRegionSection.position().top,
height = $lcdRegionSection.height(),
padding = 10;
if ( top - padding <= scrollTop && height > scrollBottom ) {
inviewRegion = $lcdRegionSection.attr( 'id' );
}
} );
// highlight the region visible while scrolling in the map.
inview = $.uls.data.regiongroups[inviewRegion];
if ( !$( '#uls-region-' + inview ).hasClass( 'active' ) ) {
$( '.regionselector' ).removeClass( 'active' );
$( '#uls-region-' + inview ).addClass( 'active' );
}
} );
}
};
@@ -396,15 +389,15 @@
$this.data( 'lcd', ( data = new LanguageCategoryDisplay( this, options ) ) );
}
if ( typeof option === 'string') {
data[option]();
if ( typeof option === 'string' ) {
data[ option ]();
}
} );
};
$.fn.lcd.defaults = {
languages: null,
showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'],
showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
itemsPerColumn: 8,
// Other supported values are 1 and 2.
// Other values will have rendering issues.
@@ -413,4 +406,4 @@
};
$.fn.lcd.Constructor = LanguageCategoryDisplay;
} ( jQuery ) );
}( jQuery ) );

108
lib/jquery.uls/src/jquery.uls.regionfilter.js
View File

@@ -1,5 +1,5 @@
/**
* jQuery region filter plugin.
* Region Filter for ULS
*
* Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
@@ -20,37 +20,23 @@
( function ( $ ) {
'use strict';
/* RegionSelector plugin definition */
var RegionSelector;
/**
* Region selector is a language selector based on regions.
* Usage: $( 'jqueryselector' ).regionselector( options );
* The attached element should have data-regiongroup attribute
* that defines the regiongroup for the selector.
*/
RegionSelector = function ( element, options ) {
this.$element = $( element );
this.options = $.extend( {}, $.fn.regionselector.defaults, options );
this.$element.addClass( 'regionselector' );
var RegionSelector = function ( options ) {
this.options = options;
this.regions = [];
this.cache = null;
this.regionGroup = this.$element.data( 'regiongroup' );
this.init();
this.listen();
};
RegionSelector.prototype = {
constructor: RegionSelector,
init: function () {
var region = this.$element.data( 'region' );
this.regions = $.uls.data.getRegionsInGroup( this.regionGroup );
if ( region ) {
this.regions.push( region );
}
this.regions = this.options.regions || $.uls.data.getAllRegions();
this.show();
},
test: function ( langCode ) {
@@ -58,11 +44,11 @@
langRegions = $.uls.data.getRegions( langCode );
for ( i = 0; i < this.regions.length; i++ ) {
region = this.regions[i];
region = this.regions[ i ];
if ( $.inArray( region, langRegions ) >= 0 ) {
this.render( langCode, region );
this.cache[langCode] = region;
this.cache[ langCode ] = region;
return;
}
@@ -71,14 +57,14 @@
show: function () {
var result, languagesByScriptGroup, scriptGroup, languages, i,
$element = this.options.$target && this.options.$target.$element,
$parent = $element && $element.parent(),
$prev = $element && $element.prev();
$target = this.options.$target && this.options.$target.$target,
$parent = $target && $target.parent(),
$prev = $target && $target.prev();
if ( $element && $parent ) {
if ( $target && $parent ) {
// Avoid reflows while adding new elements to the list
// Use .detach() to keep jQuery events and data associated with elements
$element.detach();
$target.detach();
}
if ( this.cache ) {
@@ -87,7 +73,7 @@
result = null;
for ( result in this.cache ) {
this.render( result, this.cache[result] );
this.render( result, this.cache[ result ] );
}
} else {
this.cache = {};
@@ -98,7 +84,7 @@
// of script groups
for ( scriptGroup in $.uls.data.scriptgroups ) {
// Get the languages for the script group
languages = languagesByScriptGroup[scriptGroup];
languages = languagesByScriptGroup[ scriptGroup ];
// It's possible that some script groups are missing
if ( !languages ) {
@@ -110,17 +96,17 @@
for ( i = 0; i < languages.length; i++ ) {
// Check whether it belongs to the region
this.test( languages[i] );
this.test( languages[ i ] );
}
}
}
if ( $element && $parent ) {
if ( $target && $parent ) {
// Restore the element to where we removed it from
if ( $prev ) {
$prev.after( $element );
$prev.after( $target );
} else {
$parent.append( $element );
$parent.append( $target );
}
}
@@ -138,61 +124,7 @@
$target.append( langCode, region );
},
listen: function () {
this.$element.on( 'click', $.proxy( this.click, this ) );
},
click: function () {
var $list, $firstTargetRegion;
// Don't do anything if a region is selected already
if ( this.$element.hasClass( 'active' ) ) {
return;
}
$list = this.options.$target.$element;
$firstTargetRegion = $list.find( '#' + this.regions[0] );
// Scroll to appropriate area
$list.scrollTop(
$firstTargetRegion.offset().top - $list.offset().top + $list.scrollTop()
);
// Make the selected region (and it only) active
$( '.regionselector' ).removeClass( 'active' );
if ( this.regionGroup ) {
// if there is a region group, make it active.
this.$element.addClass( 'active' );
}
}
};
/* RegionSelector plugin definition */
$.fn.regionselector = function ( option ) {
return this.each( function () {
var $this = $( this ),
data = $this.data( 'regionselector' ),
options = typeof option === 'object' && option;
if ( !data ) {
$this.data( 'regionselector', ( data = new RegionSelector( this, options ) ) );
}
if ( typeof option === 'string' ) {
data[option]();
}
} );
};
$.fn.regionselector.defaults = {
$target: null, // Where to render the results
success: null, // callback if any results found.
noresults: null, // callback when no results to show
languages: null
};
$.fn.regionselector.Constructor = RegionSelector;
} ( jQuery ) );
$.uls.RegionSelector = RegionSelector;
}( jQuery ) );