7a9b801a79
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
112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
(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 );
|