diff --git a/css/jquery.uls.lcd.css b/css/jquery.uls.lcd.css index 337a07f..2f62b13 100644 --- a/css/jquery.uls.lcd.css +++ b/css/jquery.uls.lcd.css @@ -102,6 +102,18 @@ vertical-align: middle; } +.uls-no-results-view { + display: none; +} + +.uls-lcd.uls-no-results > .uls-lcd-region-section { + display: none; +} + +.uls-lcd.uls-no-results > .uls-no-results-view { + display: block; +} + .uls-no-results-found-title { font-size: 16px; padding: 0 16px 0 28px; diff --git a/examples/index.html b/examples/index.html index 9ebb1f7..4f1d211 100644 --- a/examples/index.html +++ b/examples/index.html @@ -30,7 +30,7 @@ + + + + + + + + + + +
+ Select language +

Universal Language Selector

+

+ Demonstration of jQuery.uls plugin +

+
+ + diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js index 66e53db..99fcb51 100644 --- a/src/jquery.uls.core.js +++ b/src/jquery.uls.core.js @@ -190,13 +190,6 @@ // Rendering stuff here }, - /** - * Callback for no results found context. - */ - noresults: function () { - this.$resultsView.lcd( 'noResults' ); - }, - /** * Callback for results found context. */ @@ -241,7 +234,8 @@ clickhandler: $.proxy( this.select, this ), source: this.$languageFilter, showRegions: this.options.showRegions, - languageDecorator: this.options.languageDecorator + languageDecorator: this.options.languageDecorator, + noResultsTemplate: this.options.noResultsTemplate } ).data( 'lcd' ); this.$languageFilter.languagefilter( { @@ -251,7 +245,7 @@ onSelect: $.proxy( this.select, this ) } ); - this.$languageFilter.on( 'noresults.uls', $.proxy( this.noresults, this ) ); + this.$languageFilter.on( 'noresults.uls', $.proxy( lcd.noResults, lcd ) ); this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) ); $( 'html' ).click( $.proxy( this.cancel, this ) ); diff --git a/src/jquery.uls.lcd.js b/src/jquery.uls.lcd.js index 4719497..a447c03 100644 --- a/src/jquery.uls.lcd.js +++ b/src/jquery.uls.lcd.js @@ -22,30 +22,31 @@ ( function ( $ ) { 'use strict'; - var noResultsTemplate, LanguageCategoryDisplay; + // eslint-disable-next-line no-multi-str + var noResultsTemplate = '
\ +

No results found

\ +
\ +
\ +

\ + You can search by language name, script name, ISO code of language or you can browse by region.\ +

\ +
'; - noResultsTemplate = $( '
' ).addClass( 'uls-no-results-view hide' ); - noResultsTemplate.append( - $( '

' ) - .attr( 'data-i18n', 'uls-no-results-found' ) - .addClass( 'uls-no-results-found-title' ) - .text( 'No results found' ), - $( '
' ) - .addClass( 'uls-no-found-more' ) - .append( - $( '
' ) - .addClass( '' ) - .append( - $( '

' ).append( - $( '' ) - .attr( 'data-i18n', 'uls-search-help' ) - .text( 'You can search by language name, script name, ISO code of language or you can browse by region.' ) - ) - ) - ) - ); - - LanguageCategoryDisplay = function ( element, options ) { + /** + * Language category display + * @param {Element} element The container element to which the languages to be displayed + * @param {Object} [options] Configuration object + * @cfg {Object} [languages] Languages known to the ULS. Keyed by language code, values are autonyms. + * @cfg {string[]} [showRegions] Array of region codes to show. Default is + * [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ], + * @cfg {number} [itemsPerColumn] Number of languages per column. + * @cfg {number} [columns] Number of columns for languages. Default is 4. + * @cfg {Function} [languageDecorator] Callback function to be called when a language + * link is prepared - for custom decoration. + * @cfg {Function|string[]} [quickList] The languages to display as suggestions for quick selectoin. + * @cfg {jQuery|Function} [noResultsTemplate] + */ + function LanguageCategoryDisplay( element, options ) { this.$element = $( element ); this.options = $.extend( {}, $.fn.lcd.defaults, options ); this.$element.addClass( 'uls-lcd' ); @@ -53,12 +54,9 @@ this.renderTimeout = null; this.cachedQuicklist = null; - this.$element.append( noResultsTemplate.clone() ); - this.$noResults = this.$element.children( '.uls-no-results-view' ); - this.render(); this.listen(); - }; + } LanguageCategoryDisplay.prototype = { constructor: LanguageCategoryDisplay, @@ -173,7 +171,7 @@ var languages, lcd = this; - this.$noResults.addClass( 'hide' ); + this.$element.removeClass( 'uls-no-results' ); this.$element.children( '.uls-lcd-region-section' ).each( function () { var $region = $( this ), regionCode = $region.data( 'region' ); @@ -354,6 +352,9 @@ } }, + /** + * Called when a fresh search is started + */ empty: function () { this.$element.find( '.uls-lcd-quicklist' ).addClass( 'hide' ); }, @@ -362,23 +363,29 @@ this.$element.focus(); }, - noResults: function () { - var $suggestions; - this.$noResults.removeClass( 'hide' ); - this.$noResults.siblings( '.uls-lcd-region-section' ).addClass( 'hide' ); + /** + * No-results event handler + * @param {Event} event + * @param {string} [currentSearchQuery] Current search query that gave mp results + */ + noResults: function ( event, currentSearchQuery ) { + var $noResults; - // Only build the data once - if ( this.$noResults.find( '.uls-lcd-region-title' ).length ) { - return; + 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, currentSearchQuery ); + } 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' ); } - $suggestions = this.buildQuicklist().clone(); - $suggestions.removeClass( 'hide' ); - $suggestions.find( 'h3' ) - .data( 'i18n', 'uls-no-results-suggestion-title' ) - .text( 'You may be interested in:' ) - .i18n(); - this.$noResults.find( 'h2' ).after( $suggestions ); + this.$element.append( $noResults.addClass( 'uls-no-results-view' ) ); }, listen: function () { @@ -416,8 +423,21 @@ // Other values will have rendering issues. columns: 4, languageDecorator: null, - quickList: [] + quickList: [], + 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; + } }; - $.fn.lcd.Constructor = LanguageCategoryDisplay; }( jQuery ) );