From bccf10390052080a79df60c9819b5af67cd4b47d Mon Sep 17 00:00:00 2001
From: Santhosh Thottingal <santhosh.thottingal@gmail.com>
Date: Tue, 9 Jan 2018 13:17:47 +0530
Subject: [PATCH] Removing assigned ids to elements that are not guaranteed to
 be unique (#284)

It is a bad practice to assign id attributes when there is no guarantee
about the uniqueness of element. ULS should function even if there are
more than one instance of it is present in a page.
---
 src/jquery.uls.core.js           |  8 ++++----
 src/jquery.uls.languagefilter.js |  4 ++--
 src/jquery.uls.lcd.js            | 15 +++++++--------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js
index 5cedb02..66e53db 100644
--- a/src/jquery.uls.core.js
+++ b/src/jquery.uls.core.js
@@ -30,11 +30,11 @@
 				<div class="uls-search-wrapper"> \
 					<label class="uls-search-label" for="uls-languagefilter"></label>\
 					<div class="uls-search-input-wrapper">\
-						<span id="uls-languagefilter-clear" class="uls-languagefilter-clear"></span>\
+						<span class="uls-languagefilter-clear"></span>\
 						<input type="text" class="uls-filterinput uls-filtersuggestion"\
-							id="uls-filtersuggestion" disabled="true" autocomplete="off">\
+							disabled="true" autocomplete="off">\
 						<input type="text" class="uls-filterinput uls-languagefilter"\
-							id="uls-languagefilter" data-clear="uls-languagefilter-clear"\
+							data-clear="uls-languagefilter-clear"\
 							data-suggestion="uls-filtersuggestion"\
 							placeholder="Search for a language" autocomplete="off">\
 					</div>\
@@ -68,7 +68,7 @@
 		this.shown = false;
 		this.initialized = false;
 
-		this.$languageFilter = this.$menu.find( '#uls-languagefilter' );
+		this.$languageFilter = this.$menu.find( '.uls-languagefilter' );
 		this.$resultsView = this.$menu.find( '.uls-language-list' );
 
 		this.render();
diff --git a/src/jquery.uls.languagefilter.js b/src/jquery.uls.languagefilter.js
index 8a471c9..e22f0fc 100644
--- a/src/jquery.uls.languagefilter.js
+++ b/src/jquery.uls.languagefilter.js
@@ -46,8 +46,8 @@
 		this.options = $.extend( {}, $.fn.languagefilter.defaults, options );
 		this.$element.addClass( 'languagefilter' );
 		this.resultCount = 0;
-		this.$suggestion = this.$element.parents().find( '#' + this.$element.data( 'suggestion' ) );
-		this.$clear = this.$element.parents().find( '#' + this.$element.data( 'clear' ) );
+		this.$suggestion = this.$element.parents().find( '.' + this.$element.data( 'suggestion' ) );
+		this.$clear = this.$element.parents().find( '.' + this.$element.data( 'clear' ) );
 		this.selectedLanguage = null;
 		this.init();
 		this.listen();
diff --git a/src/jquery.uls.lcd.js b/src/jquery.uls.lcd.js
index 58618bb..4719497 100644
--- a/src/jquery.uls.lcd.js
+++ b/src/jquery.uls.lcd.js
@@ -147,7 +147,7 @@
 
 				$section = $( '<div>' )
 					.addClass( 'uls-lcd-region-section hide' )
-					.attr( 'id', regionCode );
+					.attr( 'data-region', regionCode );
 
 				// Show a region heading, unless we are using a narrow ULS
 				if ( !narrowMode ) {
@@ -176,9 +176,9 @@
 			this.$noResults.addClass( 'hide' );
 			this.$element.children( '.uls-lcd-region-section' ).each( function () {
 				var $region = $( this ),
-					regionCode = $region.attr( 'id' );
+					regionCode = $region.data( 'region' );
 
-				if ( $region.is( '#uls-lcd-quicklist' ) ) {
+				if ( $region.is( '.uls-lcd-quicklist' ) ) {
 					return;
 				}
 
@@ -302,7 +302,7 @@
 		 * Adds quicklist as a region.
 		 */
 		quicklist: function () {
-			this.$element.find( '#uls-lcd-quicklist' ).removeClass( 'hide' );
+			this.$element.find( '.uls-lcd-quicklist' ).removeClass( 'hide' );
 		},
 
 		buildQuicklist: function () {
@@ -327,8 +327,7 @@
 			quickList.sort( $.uls.data.sortByAutonym );
 
 			$quickListSection = $( '<div>' )
-				.addClass( 'uls-lcd-region-section' )
-				.attr( 'id', 'uls-lcd-quicklist' );
+				.addClass( 'uls-lcd-region-section uls-lcd-quicklist' );
 
 			$quickListSectionTitle = $( '<h3>' )
 				.attr( 'data-i18n', 'uls-common-languages' )
@@ -356,7 +355,7 @@
 		},
 
 		empty: function () {
-			this.$element.find( '#uls-lcd-quicklist' ).addClass( 'hide' );
+			this.$element.find( '.uls-lcd-quicklist' ).addClass( 'hide' );
 		},
 
 		focus: function () {
@@ -374,7 +373,7 @@
 			}
 
 			$suggestions = this.buildQuicklist().clone();
-			$suggestions.removeClass( 'hide' ).removeAttr( 'id' );
+			$suggestions.removeClass( 'hide' );
 			$suggestions.find( 'h3' )
 				.data( 'i18n', 'uls-no-results-suggestion-title' )
 				.text( 'You may be interested in:' )