Introduce Language Category Display (LCD)

Introduce $.fn.lcd - displaying languages by categories. Added the jquery.viewport.js module by Mika Tuupola (MIT license). More tests for language utils. Change-Id: I804b6da8ab0a2d518e17ae8bbd35e1c1da4bab3f
2012-06-27 19:01:08 +05:30
parent 7d899696d0
commit 7a9b801a79
10 changed files with 302 additions and 90 deletions
--- a/resources/ext.uls.lcd.js
+++ b/resources/ext.uls.lcd.js
@@ -0,0 +1,111 @@
+(function( $ ) {
+	"use strict";
+
+	var LanguageCategoryDisplay = function( element, options ) {
+		this.$element = $( element );
+		this.options = $.extend( {}, $.fn.lcd.defaults, options );
+		this.$element.addClass( 'lcd' );
+		this.show();
+		this.listen();
+	};
+
+	LanguageCategoryDisplay.prototype = {
+		constructor: LanguageCategoryDisplay,
+
+		append: function( langCode, regionGroup ) {
+			var that = this;
+			this.addToRegion( langCode, regionGroup );
+		},
+
+		addToRegion: function( langCode, regionGroup ) {
+			var that = this,
+				language = $.uls.data.languages[langCode];
+
+			if ( !language ) {
+				console.log( "Definition for " + langCode + " was not found in the language database." );
+				return;
+			}
+
+			var langName = that.options.languages[langCode];
+
+			var regions = $.uls.data.regions( langCode );
+			for ( var i = 0; i < regions.length; i++ ) {
+				var regionCode = regions[i];
+
+				if ( regionGroup && regionCode !== regionGroup ) {
+					continue;
+				}
+
+				var $li = $( '<li>' )
+					.data( 'code', langCode )
+					.append(
+						$( '<a>' ).prop( 'href', '#' ).html( langName )
+					);
+				that.getColumn( regionCode ).append( $li );
+				if ( that.options.clickhandler ) {
+					$li.click( function() {
+						that.options.clickhandler.call( this, langCode );
+					} );
+				}
+			}
+		},
+
+		getColumn: function( regionCode ) {
+			var $ul = $( "div#" + regionCode ).find( 'ul:last' );
+			if ( $ul.length === 0 || $ul.find( 'li' ).length >= 10) {
+				$ul = $( '<ul>' );
+				$( 'div#' + regionCode ).append( $ul );
+			}
+			$( 'div#' + regionCode ).show();
+			return $ul;
+		},
+
+		show: function() {
+			var that = this;
+			$.each( $.uls.data.regiongroups, function( regionCode, regionIndex ) {
+				var $section = $( '<div>' ).addClass( 'uls-lcd-region-section' ).prop( 'id', regionCode );
+				$section.append( $( '<h3>' ).html( regionCode ) );
+				// FIXME this is regioncode(NA, EU etc). Should be Proper localized region name.
+				$section.append( $( '<ul>' ) );
+				that.$element.append( $section );
+			} );
+		},
+
+		empty: function() {
+			this.$element.find( 'div ul' ).remove();
+			this.$element.find( 'div' ).hide();
+		},
+
+		listen: function(){
+			this.$element.scroll( function() {
+				var inviewRegion = $( 'div.uls-lcd-region-section:in-viewport:first' ).attr( 'id' );
+				var inview = $.uls.data.regiongroups[inviewRegion];
+				$( 'div.uls-region' ).removeClass( 'active' );
+				$( 'div#uls-region-' + inview).addClass( 'active' );
+			});
+		}
+
+	};
+
+	$.fn.lcd = function( option ) {
+		return this.each( function() {
+			var $this = $( this ),
+				data = $this.data( 'lcd' ),
+				options = typeof option === 'object' && option;
+
+			if ( !data ) {
+				$this.data( 'lcd', ( data = new LanguageCategoryDisplay( this, options ) ) );
+			}
+			if ( typeof option === 'string') {
+				data[option]();
+			}
+		} );
+	};
+
+	$.fn.lcd.defaults = {
+		languages: null
+	};
+
+	$.fn.lcd.Constructor = LanguageCategoryDisplay;
+
+} )( jQuery );