' ).addClass( 'row uls-language-block' ).append( columns ) );
columns = [];
}
}
}
}
$region.append( rows );
},
/**
* Creates dom node representing one item in language list.
* @param {string} code Language code
* @return {Element}
*/
renderItem: function( code ) {
var a, name, autonym, li;
name = this.options.languages[code];
autonym = $.uls.data.getAutonym( code ) || name || code;
// Not using jQuery as this is performance hotspot
li = document.createElement( 'li' );
li.title = name;
li.lang = code;
li.dir = $.uls.data.getDir( code );
li.setAttribute( 'data-code', code );
a = document.createElement( 'a' );
a.appendChild( document.createTextNode( autonym ) );
a.className = 'autonym';
li.appendChild( a );
if ( this.options.languageDecorator ) {
this.options.languageDecorator( $( a ), code );
}
return li;
},
i18n: function ( ) {
this.$element.find( '[data-i18n]' ).i18n();
},
/**
* Adds quicklist as a region.
*/
quicklist: function () {
this.$element.find( '#uls-lcd-quicklist' ).removeClass( 'hide' );
},
buildQuicklist: function () {
var quickList, $quickListSection, $quickListSectionTitle;
if ( this.cachedQuicklist !== null ) {
return this.cachedQuicklist;
}
if ( $.isFunction( this.options.quickList ) ) {
this.options.quickList = this.options.quickList();
}
if ( !this.options.quickList ) {
this.cachedQuicklist = $( [] );
return this.cachedQuicklist;
}
// Pick only the first elements, because we don't have room for more
quickList = this.options.quickList;
quickList = quickList.slice( 0, 16 );
quickList.sort( $.uls.data.sortByAutonym );
$quickListSection = $( '
' )
.addClass( 'eleven columns offset-by-one uls-lcd-region-section' )
.attr( 'id', 'uls-lcd-quicklist' );
$quickListSectionTitle = $( '
' )
.attr( 'data-i18n', 'uls-common-languages' )
.addClass( 'eleven columns uls-lcd-region-title' )
.text( 'Common languages' ); // This is placeholder text if jquery.i18n not present
$quickListSection.append( $quickListSectionTitle );
this.renderRegion(
$quickListSection,
quickList,
this.options.itemsPerColumn,
this.options.columns
);
$quickListSectionTitle.i18n();
this.cachedQuicklist = $quickListSection;
return this.cachedQuicklist;
},
show: function () {
if ( !this.regionDivs ) {
this.render();
}
},
empty: function () {
this.$element.find( '#uls-lcd-quicklist' ).addClass( 'hide' );
},
focus: function () {
this.$element.focus();
},
noResults: function () {
this.$noResults.removeClass( 'hide' );
if ( this.$noResults.find( '.uls-lcd-region-title' ).length ) {
return;
}
var $suggestions = this.buildQuicklist().clone();
$suggestions.find( 'h3' )
.data( 'i18n', 'uls-no-results-suggestion-title' )
.text( 'You may be interested in:' )
.i18n();
this.$noResults.find( 'h2' ).after( $suggestions );
},
listen: function () {
var lcd = this;
if ( this.options.clickhandler ) {
this.$element.on( 'click', '.row li', function () {
lcd.options.clickhandler.call( this, $( this ).data( 'code' ) );
} );
}
// The region section need to be in sync with the map filter.
lcd.$element.scroll( function () {
var inview, inviewRegion,
$ulsLanguageList = $( this ),
scrollTop = $ulsLanguageList.position().top,
scrollBottom = $ulsLanguageList.height();
// The region section need to be in sync with the map filter.
inviewRegion = 'WW';
lcd.$element.find( '.uls-lcd-region-section' ).each( function () {
var $lcdRegionSection = $( this ),
top = $lcdRegionSection.position().top,
height = $lcdRegionSection.height(),
padding = 10;
if ( top - padding <= scrollTop && height > scrollBottom ) {
inviewRegion = $lcdRegionSection.attr( 'id' );
}
} );
// highlight the region visible while scrolling in the map.
inview = $.uls.data.regiongroups[inviewRegion];
if ( !$( '#uls-region-' + inview ).hasClass( 'active' ) ) {
$( '.regionselector' ).removeClass( 'active' );
$( '#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,
showRegions: ['WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA'],
itemsPerColumn: 8,
// Other supported values are 1 and 2.
// Other values will have rendering issues.
columns: 4,
languageDecorator: null
};
$.fn.lcd.Constructor = LanguageCategoryDisplay;
} ( jQuery ) );