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;
}
.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;

5
examples/index.html
View File

@@ -42,12 +42,11 @@
<body>
<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>
<p>
Demonstration of jQuery plugin
Demonstration of jQuery.uls plugin
</p>
</div>
<div class="container"></div>
</body>
</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
},
/**
* 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 ) );

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

@@ -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 ) );