Lazy loading of regions

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

lib/jquery.uls/data/langdb.yaml

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

lib/jquery.uls/examples/index.html

@@ -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>

lib/jquery.uls/src/jquery.uls.core.js

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

lib/jquery.uls/src/jquery.uls.languagefilter.js

@@ -78,8 +78,12 @@
 					var that = this;
 					this.selectedLanguage = null;
 					delay( function() {
-						that.options.$target.empty();
+						if ( !that.$element.val() ) {
-						that.search();
+							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' );
 		},
 
 		/**

lib/jquery.uls/src/jquery.uls.lcd.js

@@ -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' );
+				if ( this.offsetHeight + this.scrollTop >= this.scrollHeight ) {
-				var listtop = that.$element.position().top;
+					that.$element.trigger( 'scrollend' );
-				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;
-					}
-				} );
 
-				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' );
 			} );
 		}
 

lib/jquery.uls/src/jquery.uls.regionfilter.js

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

resources/js/ext.uls.displaysettings.js

@@ -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?!

resources/js/ext.uls.init.js

@@ -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' ),
+			previousLanguages = mw.uls.getPreviousLanguages() || [],
-			currentLang = mw.config.get( 'wgUserLanguage' );
+			previousLang = previousLanguages.slice( -1 )[0];
-
-		/**
-		 * 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();
-		}
 
 		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'
+		previousLanguages.push( currentLang );
-		$.cookie( 'uls-previous-language', 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 );