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

Lazy loading of regions

Browse Source 
Also adds landing page feature. But candidate list is hardcoded
for now. Example html file updated.

show method of lcd renamed to render.

Introduced a trigger searchclear
Introduced mw.uls.changeLanguage, setPreviousLanguages
getPreviousLanguages and getBrowserLanguage methods

Region groups re-numbered - from [4, 1, 2, 3] to [1, 2, 3, 4].

Change-Id: Iac1edf628708e6f40e41578df70d40c42f15289a
This commit is contained in:
Santhosh Thottingal
2012-08-22 20:46:18 +05:30
committed by Amir E. Aharoni
parent b845045070
commit fde6b18e40
9 changed files with 187 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
lib/jquery.uls/data/langdb.yaml
View File

@@ -557,24 +557,25 @@ scriptgroups:
rtlscripts:
[Arab, Hebr, Syrc, Nkoo, Thaa]
# The numbers are also used in HTML id attributes
regiongroups:
# north-america
NA: 1
# latin-america
LA: 1
# south-america
SA: 1
# europe
EU: 2
# middle-east
ME: 2
# africa
AF: 2
# asia
AS: 3
# pacific
PA: 3
# australia
AU: 3
# world wide, international
WW: 4
# Worldwide, international
WW: 1
# North America
NA: 2
# Latin America
LA: 2
# South America
SA: 2
# Europe
EU: 3
# Middle East
ME: 3
# Africa
AF: 3
# Asia
AS: 4
# Pacific
PA: 4
# Aaustralia
AU: 4

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

@@ -34,7 +34,8 @@
onSelect : function( language ) {
var languageName = $.uls.data.autonym( language );
$('a#pageLanguage').text( languageName );
}
},
quickList: ['en', 'hi', 'he', 'ml', 'ta','fr'] //FIXME
} );
} );
</script>

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

@@ -21,6 +21,7 @@
(function ( $ ) {
"use strict";
// Region numbers in id attributes also appear in the langdb.
var template = '\
<div class="uls-menu"> \
<div class="row"> \
@@ -33,19 +34,19 @@
<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">\
<div data-regiongroup="1" id="uls-region-1" 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">\
<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">\
<a>America</a>\
</div>\
<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">\
<div data-regiongroup="3" id="uls-region-3" 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">\
<div data-regiongroup="4" id="uls-region-4" class="four columns uls-region">\
<a>Asia <br> Australia <br> Pacific\
</a>\
</div>\
@@ -110,6 +111,7 @@
this.shown = false;
this.initialized = false;
this.$languageFilter = this.$menu.find( 'input#languagefilter' );
this.$regionFilters = this.$menu.find( '.uls-region' );
this.$noResultsView = this.$menu.find( 'div.uls-no-results-view' );
this.$resultsView = this.$menu.find( 'div.uls-language-list' );
this.$noResultsView.hide();
@@ -156,7 +158,7 @@
$( 'body' ).prepend( this.$menu );
// Initialize with a full search.
// This happens on first time click of uls trigger.
this.$languageFilter.languagefilter( 'clear' );
this.defaultSearch();
this.initialized = true;
}
this.$menu.show();
@@ -164,6 +166,12 @@
this.$languageFilter.focus();
},
defaultSearch: function() {
this.$resultsView.lcd( 'empty' );
this.$resultsView.lcd( 'quicklist' );
this.$regionFilters.first().regionselector( 'show' );
},
/**
* Hide the ULS window
*/
@@ -208,6 +216,7 @@
// Register all event listeners to the ULS here.
that.$element.on( 'click', $.proxy( that.click, that ) );
that.$languageFilter.on( 'seachclear', $.proxy( that.defaultSearch, that ) );
// Handle click on close button
this.$menu.find( "#uls-close" ).on( 'click', $.proxy( that.hide, that ) );
@@ -220,6 +229,7 @@
lcd = that.$resultsView.lcd( {
languages: that.languages,
quickList: that.options.quickList,
clickhandler: $.proxy( that.onSelect, that )
} ).data( "lcd" );
@@ -239,7 +249,7 @@
} );
// Create region selectors, one per region
this.$menu.find( '.uls-region, .uls-region-link' ).regionselector( {
this.$menu.find( '.uls-region' ).regionselector( { //, .uls-region-link
$target: lcd,
languages: that.languages,
success: function() {
@@ -324,7 +334,8 @@
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
languages: $.uls.data.autonyms(), // Languages to be used for ULS, default is all languages
quickList : null
};
$.fn.uls.Constructor = ULS;

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

File diff suppressed because one or more lines are too long

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

@@ -78,8 +78,12 @@
var that = this;
this.selectedLanguage = null;
delay( function() {
that.options.$target.empty();
that.search();
if ( !that.$element.val() ) {
that.clear();
} else {
that.options.$target.empty();
that.search();
}
}, 300 );
this.toggleClear();
}
@@ -101,7 +105,7 @@
*/
clear: function() {
this.deactivate();
this.search();
this.$element.trigger( 'seachclear' );
},
/**

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

@@ -27,7 +27,7 @@
this.options = $.extend( {}, $.fn.lcd.defaults, options );
this.$element.addClass( 'lcd' );
this.regionDivs = {};
this.show();
this.render();
this.listen();
};
@@ -111,27 +111,60 @@
$rowDiv.append( $ul );
}
if( !$divRegionCode.is( ':visible' ) ) {
$divRegionCode.show();
}
$divRegionCode.show();
return $ul;
},
show: function() {
render: function() {
var that = this;
var $section;
$.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) {
var $section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode );
$section = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', regionCode );
$section.append( $( '<h3>' ).addClass( 'eleven columns uls-lcd-region-section offset-by-one' ).html( regionCode ) );
// FIXME this is regioncode(NA, EU etc). Should be proper localized region name.
that.$element.append( $section );
$section.hide();
that.regionDivs[regionCode] = $section;
} );
},
quicklist: function() {
if ( !this.options.quickList ) {
return;
}
var $column;
var quickList = this.options.quickList;
var quickListLength = ( quickList.length <= 16 ) ? quickList.length : 16;
var $quickListsection = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' );
$quickListsection.append( $( '<h3>' ).addClass( 'eleven columns uls-lcd-region-section offset-by-one' ).text( 'Common Languages' ) );
this.$element.prepend( $quickListsection );
this.regionDivs[ 'quick' ] = $quickListsection;
for ( var i = 0; i < quickListLength; i++) {
$column = this.getColumn( 'quick', i % 4 === 0 );
var langCode = quickList[i];
var language = this.options.languages[langCode];
var langName = $.uls.data.autonym( langCode ) || language || langCode;
var $li = $( '<li>' )
.data( 'code', langCode )
.append(
$( '<a>' ).prop( 'href', '#' ).prop( 'title', language ).html( langName )
);
$column.append( $li );
}
$quickListsection.show();
},
show: function() {
if ( !this.regionDivs ) {
this.render();
}
//this.quickList();
},
empty: function() {
this.$element.find( 'div.row' ).remove();
this.$element.find( 'div' ).hide();
this.$element.find( 'div.uls-lcd-region-section' ).hide();
},
focus: function() {
@@ -145,23 +178,13 @@
that.options.clickhandler.call( this, $( this ).data( 'code' ) );
} );
}
// The region section need to be in sync with the map filter.
that.$element.scroll( function () {
var inviewRegion = that.$element.find( 'div.uls-lcd-region-section:first' ).attr( 'id' );
var listtop = that.$element.position().top;
that.$element.find( 'div.uls-lcd-region-section' ).each( function () {
var offset = $( this ).position().top - listtop;
if ( offset < 0 ) {
inviewRegion = $( this ).attr( 'id' );
} else {
return false;
}
} );
if ( this.offsetHeight + this.scrollTop >= this.scrollHeight ) {
that.$element.trigger( 'scrollend' );
}
var inview = $.uls.data.regiongroups[inviewRegion];
// FIXME This is not a clean solution. It should get fixed with infinite scroll feature.
$( 'div.uls-region' ).removeClass( 'active' );
$( 'div#uls-region-' + inview ).addClass( 'active' );
} );
}

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

@@ -71,8 +71,6 @@
// if there is a region group, make it active.
this.$element.addClass( 'active' );
}
// Re-populate the list of languages
this.options.$target.empty();
if ( this.cache ) {
// If the result cache is present, render the results from there.
@@ -109,8 +107,28 @@
$target.append( langCode, region );
},
next: function () {
if ( !this.$element.hasClass( 'active') ) {
return true;
}
var that = this;
// Do not respond to all scroll end events, but only after a short interval
delay( function () {
var regiongroup = that.$element.data( 'regiongroup' );
var nextRegiongroup = regiongroup + 1;
var $nextRegion = $( '#uls-region-' + nextRegiongroup );
var next = $nextRegion.length && $nextRegion.data( 'regionselector' );
if ( next ) {
next.show();
}
}, 100 );
return false;
},
listen: function() {
this.$element.on( 'click', $.proxy( this.click, this ) );
this.options.$target.$element.bind( 'scrollend', $.proxy( this.next, this) );
},
click: function( e ) {
@@ -120,6 +138,8 @@
this.options.noresults.call();
}
} else {
// Re-populate the list of languages
this.options.$target.empty();
this.show();
}
}
@@ -150,4 +170,13 @@
};
$.fn.regionselector.Constructor = RegionSelector;
var delay = function () {
var timer = 0;
return ( function ( callback, milliseconds ) {
clearTimeout( timer );
timer = setTimeout( callback, milliseconds );
} );
}();
} )( jQuery );