Correct the naming of region and region groups

Change-Id: I857178bc9f830e1ecee7c34541ebab3fbbe95fbd

UniversalLanguageSelector.hooks.php

@@ -67,13 +67,13 @@ class UniversalLanguageSelectorHooks {
 				</div>
 				<div class=\"uls-menu-header-right\">
 					<div class='uls-worldmap'>
-						 <div class='uls-region' id='uls-region-1' data-region='1'>
+						 <div class='uls-region' id='uls-region-1' data-regiongroup='1'>
 							<a>North America<br>Latin America<br>South America</a>
 						 </div>
-						 <div class='uls-region' id='uls-region-2' data-region='2'>
+						 <div class='uls-region' id='uls-region-2' data-regiongroup='2'>
 							<a>Europe<br>Middle East<br>Africa</a>
 						 </div>
-						 <div class='uls-region' id='uls-region-3' data-region='3'>
+						 <div class='uls-region' id='uls-region-3' data-regiongroup='3'>
 							<a>Asia<br>Australia<br>Pacific</a>
 						</div>
 					</div>

examples/index.html

@@ -47,17 +47,17 @@
 					</div>
 					<div class="uls-menu-header-right">
 						<div class="uls-worldmap">
-							<div data-region="1" id="uls-region-1" class="uls-region regionselector">
+							<div data-regiongroup="1" id="uls-region-1" class="uls-region regionselector">
 								<a>America</a>
 							</div>
-							<div data-region="2" id="uls-region-2" class="uls-region regionselector">
+							<div data-regiongroup="2" id="uls-region-2" class="uls-region regionselector">
 								<a>Europe
 								<br>
 								Middle East
 								<br>
 								Africa</a>
 							</div>
-							<div data-region="3" id="uls-region-3" class="uls-region regionselector">
+							<div data-regiongroup="3" id="uls-region-3" class="uls-region regionselector">
 								<a>Asia
 								<br>
 								Australia

resources/ext.uls.languagefilter.js

@@ -104,15 +104,15 @@
 	/*
 	 * Region selector is a language selector based on regions.
 	 * Usage: $( 'jqueryselector' ).regionselector( options );
-	 * The attached element should have data-region attribute
-	 * that defines the region for the selector.
+	 * The attached element should have data-regiongroup attribute
+	 * that defines the regiongroup for the selector.
 	 */
 	var RegionSelector = function( element, options ) {
 		this.$element = $( element );
 		this.options = $.extend( {}, $.fn.regionselector.defaults, options );
 		this.$element.addClass( 'regionselector' );
 		this.listen();
-		this.region = this.$element.data( 'region' );
+		this.regionGroup = this.$element.data( 'regiongroup' );
 	};
 
 	RegionSelector.prototype = {
@@ -122,13 +122,13 @@
 			var languages = $.uls.data.languages;
 			var regionGroups = $.uls.data.regiongroups;
 			var regions = languages[langCode][1];
-			// 1. loop over all regions - like {EU: 2, AF: 2, AS: 3 ...}
+			// 1. loop over all regiongroups - like {EU: 2, AF: 2, AS: 3 ...}
 			// 2. check that the region matches the active region group
 			// 3. if this language is included in that region, show it
 			// 4. if none of the conditions match, the language is not shown
-			$.each( regionGroups, function( regionGroup, groupId ) {
-				if ( groupId === that.region && $.inArray( regionGroup, regions ) >= 0 ) {
-					that.render( langCode, regionGroup );
+			$.each( regionGroups, function( region, regionGroup) {
+				if ( regionGroup === that.regionGroup && $.inArray( region, regions ) >= 0 ) {
+					that.render( langCode, region );
 					return;
 				}
 			} );
@@ -152,12 +152,12 @@
 				that.options.callback.call();
 			}
 		},
-		render: function( langCode, regionGroup) {
+		render: function( langCode, region) {
 			var $target = this.options.$target;
 			if ( !$target ) {
 				return;
 			}
-			$target.append( langCode, regionGroup );
+			$target.append( langCode, region );
 		},
 		listen: function(){
 			this.$element.on( 'click', $.proxy( this.click, this ) );

resources/ext.uls.lcd.js

@@ -12,12 +12,18 @@
 	LanguageCategoryDisplay.prototype = {
 		constructor: LanguageCategoryDisplay,
 
-		append: function( langCode, regionGroup ) {
+		append: function( langCode, regionCode ) {
 			var that = this;
-			this.addToRegion( langCode, regionGroup );
+			this.addToRegion( langCode, regionCode );
 		},
-
-		addToRegion: function( langCode, regionGroup ) {
+		/**
+		 * Add the language to a region.
+		 * If the region parameter is given , add to that region alone
+		 * Otherwise to all regions that this language belongs.
+		 * @param langCode
+		 * @param region
+		 */
+		addToRegion: function( langCode, region ) {
 			var that = this,
 				language = $.uls.data.languages[langCode];
 
@@ -28,20 +34,23 @@
 
 			var langName = that.options.languages[langCode];
 
-			var regions = $.uls.data.regions( langCode );
+			var regions = [];
+			if ( region ) {
+				regions.push( region );
+			} else{
+				regions = $.uls.data.regions( langCode );
+			}
+
 			for ( var i = 0; i < regions.length; i++ ) {
 				var regionCode = regions[i];
 
-				if ( regionGroup && regionCode !== regionGroup ) {
-					continue;
-				}
-
 				var $li = $( '<li>' )
 					.data( 'code', langCode )
 					.append(
 						$( '<a>' ).prop( 'href', '#' ).html( langName )
 					);
 				that.getColumn( regionCode ).append( $li );
+
 				if ( that.options.clickhandler ) {
 					$li.click( function() {
 						that.options.clickhandler.call( this, langCode );