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 );

15
resources/js/ext.uls.displaysettings.js
View File

@@ -323,19 +323,6 @@
this.$parent.hide();
},
/**
* Change the language of wiki using setlang URL parameter
* @param {String} language
*/
changeLanguage: function ( language ) {
$.cookie( 'uls-previous-language', this.getUILanguage() );
var uri = new mw.Uri( window.location.href );
uri.extend( {
setlang: language
} );
window.location.href = uri.toString();
},
/**
* Callback for save preferences
*/
@@ -346,7 +333,7 @@
this.$parent.hide();
// we delay change UI language to here, because it causes a page refresh
if ( this.uiLanguage !== this.getUILanguage() ) {
this.changeLanguage( this.uiLanguage );
mw.uls.changeLanguage( this.uiLanguage );
}
} else {
// FIXME failure. what to do?!

88
resources/js/ext.uls.init.js
View File

@@ -17,7 +17,7 @@
* @licence MIT License
*/
( function( $, mw ) {
( function( $, mw, window, document, undefined ) {
"use strict";
// MediaWiki override for ULS defaults.
@@ -26,23 +26,43 @@
searchAPI: mw.util.wikiScript( 'api' ) + "?action=languagesearch"
} );
var currentLang = mw.config.get( 'wgUserLanguage' );
mw.uls = mw.uls || {};
mw.uls.previousLanguagesCookie = 'uls-previous-languages';
/**
* Change the language of wiki using setlang URL parameter
* @param {String} language
*/
mw.uls.changeLanguage = function( language ) {
var uri = new mw.Uri( window.location.href );
uri.extend( {
setlang: language
} );
window.location.href = uri.toString();
};
mw.uls.setPreviousLanguages = function( previousLanguages ) {
$.cookie( mw.uls.previousLanguagesCookie, $.toJSON( previousLanguages ) );
};
mw.uls.getPreviousLanguages = function() {
var previousLanguages = $.cookie( mw.uls.previousLanguagesCookie );
if ( !previousLanguages ) {
return [];
}
// return last 5 language changes
return $.parseJSON( previousLanguages ).slice( -5 );
};
mw.uls.getBrowserLanguage = function() {
return ( window.navigator.language || window.navigator.userLanguage ).split( '-' )[0];
};
$( document ).ready( function() {
var $ulsTrigger = $( '.uls-trigger' ),
previousLang = $.cookie( 'uls-previous-language' ),
currentLang = mw.config.get( 'wgUserLanguage' );
/**
* Change the language of wiki using setlang URL parameter
* @param {String} language
*/
function changeLanguage( language ) {
$.cookie( 'uls-previous-language', currentLang );
var uri = new mw.Uri( window.location.href );
uri.extend( {
setlang: language
} );
window.location.href = uri.toString();
}
previousLanguages = mw.uls.getPreviousLanguages() || [],
previousLang = previousLanguages.slice( -1 )[0];
function displaySettings() {
var $displaySettingsTitle = $( '<div>' )
@@ -77,18 +97,34 @@
addDisplaySettings( uls );
},
onSelect: function( language ) {
changeLanguage( language );
}
mw.uls.changeLanguage( language );
},
languages: mw.config.get( 'wgULSLanguages' ),
searchAPI: mw.util.wikiScript( 'api' ) + "?action=languagesearch",
quickList : $.unique( [
mw.config.get( 'wgUserLanguage' ),
mw.config.get( 'wgContentLanguage' ),
mw.uls.getBrowserLanguage()
].concat( mw.uls.getPreviousLanguages() ) )
} );
if ( !previousLang || previousLang === currentLang ) {
if( !previousLang ) {
previousLanguages.push( currentLang );
mw.uls.setPreviousLanguages( previousLanguages );
// Do not show tooltip.
return true;
}
if ( previousLang === currentLang ) {
// Do not show tooltip.
return true;
}
var tipsyTimer;
// Current language is the cookie value for 'uls-previous-language'
$.cookie( 'uls-previous-language', currentLang );
previousLanguages.push( currentLang );
mw.uls.setPreviousLanguages( previousLanguages );
// Attach a tipsy tooltip to the trigger
$ulsTrigger.tipsy( {
gravity: 'n',
@@ -107,7 +143,7 @@
} );
// Show the tipsy tooltip on page load.
$ulsTrigger.tipsy( 'show' );
tipsyTimer = setTimeout( function() {
tipsyTimer = window.setTimeout( function() {
$ulsTrigger.tipsy('hide');
},
// The timeout after page reloading is longer,
@@ -115,7 +151,7 @@
6000
);
$( '.tipsy' ).live( 'mouseout', function( e ) {
tipsyTimer = setTimeout( function() {
tipsyTimer = window.setTimeout( function() {
$ulsTrigger.tipsy('hide');
},
3000 // hide the link in 3 seconds
@@ -123,7 +159,7 @@
} );
// if the mouse is over the tooltip, do not hide
$( '.tipsy' ).live( 'mouseover', function( e ) {
clearTimeout( tipsyTimer );
window.clearTimeout( tipsyTimer );
} );
// manually show the tooltip
$ulsTrigger.bind( 'mouseover', function( e ) {
@@ -135,7 +171,7 @@
} );
// Event handler for links in the tooltip
$( 'a.uls-lang-link' ).live( 'click', function() {
changeLanguage( $(this).attr( 'lang' ) );
mw.uls.changeLanguage( $(this).attr( 'lang' ) );
} );
} );
} )( jQuery, mediaWiki );
} )( jQuery, mediaWiki, window, document );