Custom no-results message support (#286)
* Custom no-results message support * Refactoring and clean up for LanguageCategoryDisplay class * Document the options for LanguageCategoryDisplay class * Reduce the spreading of no results handler code * Add an option to accept no results template * Remove unwanted, unused constructor too * Use CSS to hide or show the no-results view * Remove the unwanted noresults method in jquery.uls.core, directly call the same method of lcd. * Add an example * Support a function returning jquery element as the no-result handler
This commit is contained in:
Santhosh Thottingal
committed by
Niklas Laxström
Niklas Laxström
parent
84e82520c8
commit
2aa43148bb
@@ -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 ) );
|
||||
|
||||
@@ -22,30 +22,31 @@
|
||||
( function ( $ ) {
|
||||
'use strict';
|
||||
|
||||
var noResultsTemplate, LanguageCategoryDisplay;
|
||||
// eslint-disable-next-line no-multi-str
|
||||
var noResultsTemplate = '<div class="uls-no-results-view"> \
|
||||
<h2 data-i18n="uls-no-results-found" class="uls-no-results-found-title">No results found</h2> \
|
||||
<div class="uls-no-results-suggestions"></div> \
|
||||
<div class="uls-no-found-more"> \
|
||||
<div><p> \
|
||||
<span data-i18n="uls-search-help">You can search by language name, script name, ISO code of language or you can browse by region.</span>\
|
||||
</p></div> \
|
||||
</div></div>';
|
||||
|
||||
noResultsTemplate = $( '<div>' ).addClass( 'uls-no-results-view hide' );
|
||||
noResultsTemplate.append(
|
||||
$( '<h2>' )
|
||||
.attr( 'data-i18n', 'uls-no-results-found' )
|
||||
.addClass( 'uls-no-results-found-title' )
|
||||
.text( 'No results found' ),
|
||||
$( '<div>' )
|
||||
.addClass( 'uls-no-found-more' )
|
||||
.append(
|
||||
$( '<div>' )
|
||||
.addClass( '' )
|
||||
.append(
|
||||
$( '<p>' ).append(
|
||||
$( '<span>' )
|
||||
.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 ) );
|
||||
|
||||
Reference in New Issue
Block a user