' ).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.setAttribute( 'data-code', code );
+
+ a = document.createElement( 'a' );
+ a.appendChild( document.createTextNode( autonym ) );
+ a.className = 'autonym';
+ a.lang = code;
+ a.dir = $.uls.data.getDir( code );
+
+ 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 ( typeof this.options.quickList === 'function' ) {
+ this.options.quickList = this.options.quickList();
+ }
+
+ if ( !this.options.quickList.length ) {
+ 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( 'uls-lcd-region-section uls-lcd-quicklist' );
+
+ $quickListSectionTitle = $( '
' )
+ .attr( 'data-i18n', 'uls-common-languages' )
+ .addClass( 'uls-lcd-region-title' )
+ .text( 'Suggested 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();
+ }
+ },
+
+ /**
+ * Called when a fresh search is started
+ */
+ empty: function () {
+ this.$element.addClass( 'uls-lcd--no-quicklist' );
+ this.$element.find( '.uls-lcd-quicklist' ).addClass( 'hide' );
+ },
+
+ focus: function () {
+ this.$element.trigger( 'focus' );
+ },
+
+ /**
+ * No-results event handler
+ *
+ * @param {Event} event
+ * @param {Object} data Information about the failed search query
+ */
+ noResults: function ( event, data ) {
+ var $noResults;
+
+ this.$element.addClass( 'uls-no-results' );
+
+ this.$element.find( '.uls-no-results-view' ).remove();
+
+ if ( typeof this.options.noResultsTemplate === 'function' ) {
+ $noResults =
+ this.options.noResultsTemplate.call( this, data.query );
+ } else if ( this.options.noResultsTemplate instanceof jQuery ) {
+ $noResults = this.options.noResultsTemplate;
+ } else {
+ throw new Error( 'noResultsTemplate option must be ' +
+ 'either jQuery or function returning jQuery' );
+ }
+
+ this.$element.append( $noResults.addClass( 'uls-no-results-view' ).i18n() );
+ },
+
+ listen: function () {
+ var lcd = this;
+
+ if ( this.options.clickhandler ) {
+ this.$element.on( 'click', '.row li', function ( event ) {
+ lcd.options.clickhandler.call( this, $( this ).data( 'code' ), event );
+ } );
+ }
+ }
+ };
+
+ $.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 = {
+ // List of languages to show
+ languages: [],
+ // List of regions to show
+ showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
+ // Whether to group by region, defaults to true when columns > 1
+ groupByRegion: 'auto',
+ // How many items per column until new "row" starts
+ itemsPerColumn: 8,
+ // Number of columns, only 1, 2 and 4 are supported
+ columns: 4,
+ // Callback function for language item styling
+ languageDecorator: undefined,
+ // Likely candidates
+ quickList: [],
+ // Callback function for language selection
+ clickhandler: undefined,
+ // Callback function when no search results.
+ // If overloaded, it can accept the search string as an argument.
+ noResultsTemplate: function () {
+ var $suggestionsContainer, $suggestions,
+ $noResultsTemplate = $( noResultsTemplate );
+
+ $suggestions = this.buildQuicklist().clone();
+ $suggestions.removeClass( 'hide' )
+ .find( 'h3' )
+ .data( 'i18n', 'uls-no-results-suggestion-title' )
+ .text( 'You may be interested in:' )
+ .i18n();
+ $suggestionsContainer = $noResultsTemplate.find( '.uls-no-results-suggestions' );
+ $suggestionsContainer.append( $suggestions );
+ return $noResultsTemplate;
+ }
+ };
+
+}( jQuery ) );