Fix Bug 39922 - The "No results found" view lacks suggested languages

noresultsview is part of uls.lcd now, moved the html template too.

Change-Id: I9aee0ab1b62e61c3ec0e2c89f7d07b7a4432ef33

lib/jquery.uls/css/jquery.uls.lcd.css

@@ -47,15 +47,22 @@
 
 .uls-no-results-view {
 	color: #555;
+	height: 100%;
+}
+
+.uls-no-results-view h2{
+	font-weight: bold;
 }
 
 #uls-no-found-more {
 	font-size: 0.9em;
 	background: #F8F8F8;
-	display: inline-block;
 	width: 100%;
 	margin-top: 1.6em;
 	line-height: 1.6em;
+	position:absolute;
+	bottom:0;
+	left:0;
 }
 
 .uls-lcd-region-section ul li.uls-column-break:hover {

lib/jquery.uls/src/jquery.uls.core.js

@@ -72,24 +72,6 @@
 				</div>\
 			</div>\
 			<div class="row uls-language-list"></div>\
-			<div class="row uls-no-results-view">\
-				<h2 class="ten columns end offset-by-one">\
-					No results found\
-				</h2>\
-				<div id="uls-no-found-more">\
-					<div class="ten columns end offset-by-one">\
-						<p>\
-							You can search by language name, script name, ISO code of language or you can browse by\
-							region: <a class="uls-region-link" data-region="NA" href="#">America</a>, <a\
-								class="uls-region-link" data-region="EU" href="#">Europe</a>, <a class="uls-region-link"\
-								data-region="ME" href="#">Middle East</a>, <a class="uls-region-link" data-region="AF"\
-								href="#">Africa</a>, <a class="uls-region-link" data-region="AS" href="#">Asia</a>, <a\
-								class="uls-region-link" data-region="PA" href="#">Pacific</a> or <a class="uls-region-link"\
-								data-region="WW" href="#">Worldwide languages</a>.\
-						</p>\
-					</div>\
-				</div>\
-			</div>\
 		</div> ';
 
 	/**
@@ -112,9 +94,7 @@
 		this.initialized = false;
 		this.$languageFilter = this.$menu.find( 'input#languagefilter' );
 		this.$regionFilters = this.$menu.find( '.uls-region' );
-		this.$noResultsView = this.$menu.find( 'div.uls-no-results-view' );
 		this.$resultsView = this.$menu.find( 'div.uls-language-list' );
-		this.$noResultsView.hide();
 		this.render();
 		this.listen();
 		this.ready();
@@ -193,16 +173,13 @@
 		 * @param String search the search term
 		 */
 		noresults: function( search ) {
-			this.$noResultsView.show();
+			this.$resultsView.lcd( 'noResults' );
-			this.$noResultsView.find( 'span#uls-no-found-search-term' ).text( search );
-			this.$resultsView.hide();
 		},
 
 		/**
 		 * callback for results found context.
 		 */
 		success: function() {
-			this.$noResultsView.hide();
 			this.$resultsView.show();
 		},
 

lib/jquery.uls/src/jquery.uls.lcd.js

@@ -22,11 +22,36 @@
 (function( $ ) {
 	"use strict";
 
+
+	var noResultsTemplate = '\
+	<div class="twelve columns uls-no-results-view">\
+		<h2 class="eleven columns end offset-by-one">\
+			No results found\
+		</h2>\
+		<div id="uls-no-found-more">\
+			<div class="ten columns end offset-by-one">\
+				<p>\
+					You can search by language name, script name, ISO code of language or \
+					you can browse by region:\
+					<a class="uls-region-link" data-region="NA" href="#">America</a>,\
+					<a class="uls-region-link" data-region="EU" href="#">Europe</a>,\
+					<a class="uls-region-link" data-region="ME" href="#">Middle East</a>, \
+					<a class="uls-region-link" data-region="AF" href="#">Africa</a>,\
+					<a class="uls-region-link" data-region="AS" href="#">Asia</a>,\
+					<a class="uls-region-link" data-region="PA" href="#">Pacific</a> or \
+					<a class="uls-region-link" data-region="WW" href="#">Worldwide languages</a>.\
+				</p>\
+			</div>\
+		</div>\
+	</div>';
+
 	var LanguageCategoryDisplay = function( element, options ) {
 		this.$element = $( element );
 		this.options = $.extend( {}, $.fn.lcd.defaults, options );
 		this.$element.addClass( 'lcd' );
 		this.regionDivs = {};
+		this.$element.append( $(noResultsTemplate) );
+		this.$noResults = this.$element.find( 'div.uls-no-results-view' );
 		this.render();
 		this.listen();
 	};
@@ -36,6 +61,7 @@
 
 		append: function( langCode, regionCode ) {
 			this.addToRegion( langCode, regionCode );
+			this.$noResults.hide();
 		},
 
 		/**
@@ -127,6 +153,7 @@
 				$section.hide();
 				that.regionDivs[regionCode] = $section;
 			} );
+			this.$noResults.hide();
 		},
 
 		quicklist: function() {
@@ -139,8 +166,7 @@
 			}
 
 			// Pick only the first elements, because we don't have room for more
-			var that = this,
+			var quickList = this.options.quickList;
-				quickList = this.options.quickList;
 			quickList = quickList.slice( 0, 16 );
 			quickList.sort( $.uls.data.sortByAutonym );
 			var $quickListsection = $( '<div>' ).addClass( 'twelve columns uls-lcd-region-section' ).prop( 'id', 'uls-lcd-quicklist' );
@@ -160,6 +186,7 @@
 				$column.append( $li );
 			}
 			$quickListsection.show();
+			return $quickListsection;
 		},
 
 		show: function() {
@@ -169,7 +196,7 @@
 		},
 
 		empty: function() {
-			this.$element.find( 'div.row' ).remove();
+			this.$element.find( 'div.uls-language-block' ).remove();
 			this.$element.find( 'div.uls-lcd-region-section' ).hide();
 		},
 
@@ -177,6 +204,13 @@
 			this.$element.focus();
 		},
 
+		noResults: function() {
+			this.$noResults.show();
+			var $suggestions = this.quicklist();
+			$suggestions.find( 'h3' ).text( 'You may be interested in' );
+			this.$noResults.find( 'h2' ).after( $suggestions );
+		},
+
 		listen: function() {
 			var that = this;
 			if ( this.options.clickhandler ) {