bryce/jquery.uls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Custom no-results message support (#286)

Browse Source 
* 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
2018-01-12 19:35:11 +05:30
committed by Niklas Laxström
parent 84e82520c8
commit 2aa43148bb
5 changed files with 136 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/jquery.uls.lcd.css
View File

@@ -102,6 +102,18 @@
vertical-align: middle; 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 { .uls-no-results-found-title {
font-size: 16px; font-size: 16px;
padding: 0 16px 0 28px; padding: 0 16px 0 28px;

7
examples/index.html
View File

@@ -30,7 +30,7 @@
<script> <script>
$( document ).ready( function() { $( document ).ready( function() {
$( '.uls-trigger' ).uls( { $( '.uls-trigger' ).uls( {
onSelect : function( language ) { onSelect: function( language ) {
var languageName = $.uls.data.getAutonym( language ); var languageName = $.uls.data.getAutonym( language );
$( '.uls-trigger' ).text( languageName ); $( '.uls-trigger' ).text( languageName );
}, },
@@ -42,12 +42,11 @@
<body> <body>
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<span class="active uls-trigger">Select Language</span> <span class="active uls-trigger">Select language</span>
<h1>Universal Language Selector</h1> <h1>Universal Language Selector</h1>
<p> <p>
Demonstration of jQuery plugin Demonstration of jQuery.uls plugin
</p> </p>
</div> </div>
<div class="container"></div>
</body> </body>
</html> </html>

54
examples/test-no-results.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!--
Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Universal Language Selector</title>
<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
<!-- <meta name="description" content=""> -->
<meta name="author" content="Santhosh Thottingal">
<link href="../css/jquery.uls.css" rel="stylesheet">
<link href="../css/jquery.uls.grid.css" rel="stylesheet">
<link href="../css/jquery.uls.lcd.css" rel="stylesheet">
<!-- demo -->
<link href="resources/demo.css" rel="stylesheet">
<!-- Libs -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Source -->
<script src="../src/jquery.uls.data.js"></script>
<script src="../src/jquery.uls.data.utils.js"></script>
<script src="../src/jquery.uls.lcd.js"></script>
<script src="../src/jquery.uls.languagefilter.js"></script>
<script src="../src/jquery.uls.core.js"></script>
<script>
$( document ).ready( function() {
$( '.uls-trigger' ).uls( {
onSelect: function( language ) {
var languageName = $.uls.data.getAutonym( language );
$( '.uls-trigger' ).text( languageName );
},
noResultsTemplate: function( query ) {
return $( '<div>No article exists in the language ' + query + '</div>' )
}
} );
} );
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<span class="active uls-trigger">Select language</span>
<h1>Universal Language Selector</h1>
<p>
Demonstration of jQuery.uls plugin
</p>
</div>
</body>
</html>

12
src/jquery.uls.core.js
View File

@@ -190,13 +190,6 @@
// Rendering stuff here // Rendering stuff here
}, },
/**
* Callback for no results found context.
*/
noresults: function () {
this.$resultsView.lcd( 'noResults' );
},
/** /**
* Callback for results found context. * Callback for results found context.
*/ */
@@ -241,7 +234,8 @@
clickhandler: $.proxy( this.select, this ), clickhandler: $.proxy( this.select, this ),
source: this.$languageFilter, source: this.$languageFilter,
showRegions: this.options.showRegions, showRegions: this.options.showRegions,
languageDecorator: this.options.languageDecorator languageDecorator: this.options.languageDecorator,
noResultsTemplate: this.options.noResultsTemplate
} ).data( 'lcd' ); } ).data( 'lcd' );
this.$languageFilter.languagefilter( { this.$languageFilter.languagefilter( {
@@ -251,7 +245,7 @@
onSelect: $.proxy( this.select, this ) 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 ) ); this.$languageFilter.on( 'resultsfound.uls', $.proxy( this.success, this ) );
$( 'html' ).click( $.proxy( this.cancel, this ) ); $( 'html' ).click( $.proxy( this.cancel, this ) );

108
src/jquery.uls.lcd.js
View File

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