Display Settings - ULS - Display settings navigation

Change-Id: I9d16cbac8f0f897378f769b0b98e48441503fe1a

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

@@ -27,7 +27,7 @@
 				<span id="uls-close" class="icon-close"></span> \
 			</div> \
 			<div class="row"> \
-				<div class="four columns">\
+				<div class="uls-title four columns">\
 					<h1>Select language</h1>\
 				</div>\
 				<div class="three columns" id="settings-block"></div>\
@@ -105,6 +105,8 @@
 				delete this.languages[code];
 			}
 		}
+		this.left = this.options.left;
+		this.top = this.options.top;
 		this.shown = false;
 		this.initialized = false;
 		this.$languageFilter = this.$menu.find( 'input#languagefilter' );
@@ -120,7 +122,9 @@
 		constructor: ULS,
 
 		ready: function() {
-			// Currently empty, can be overridden for anything useful.
+			if ( this.options.onReady ) {
+				this.options.onReady( this );
+			}
 		},
 
 		/**
@@ -133,8 +137,8 @@
 				height: this.$element[0].offsetHeight
 			} );
 			return {
-				top: pos.top + pos.height,
+				top: this.top || pos.top + pos.height,
-				left: '25%'
+				left: this.left || '25%'
 			};
 		},
 
@@ -256,6 +260,7 @@
 		 * @param langCode
 		 */
 		onSelect: function( langCode ) {
+			this.hide();
 			if ( this.options.onSelect ) {
 				this.options.onSelect.call( this, langCode );
 			}
@@ -292,8 +297,6 @@
 			e.preventDefault();
 			if ( !this.shown ) {
 				this.show();
-			} else {
-				this.hide();
 			}
 		}
 

resources/js/ext.uls.displaysettings.js

@@ -68,7 +68,6 @@
 			this.$parent.$settingsPanel.empty();
 			this.$webfonts = $( 'body' ).data( 'webfonts' );
 			this.$parent.$settingsPanel.append( this.$template );
-			$( 'select.uls-font-select' ).val(  );
 			this.prepareLanguages();
 			this.prepareFonts();
 			this.prepareWebfontsCheckbox();
@@ -83,19 +82,23 @@
 			if ( enable === undefined ) {
 				enable = true;
 			}
-			$( '#webfonts-enable-checkbox' ).prop( 'checked', enable );
+			this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked', enable );
 		},
 
 		/**
 		 * Prepare the UI language selector
 		 */
 		prepareLanguages: function () {
-			var $languages = $( 'div.uls-ui-languages' );
+			var $languages = this.$template.find( 'div.uls-ui-languages' );
 			$languages.empty();
 			var previousLanguages = this.previousLanguages();
 			var languages = [this.language];
-			$.merge( languages, previousLanguages);
+			for ( var lang in previousLanguages ) {
-			$.unique( languages );
+				if ( previousLanguages[lang] === this.language ) {
+					continue;
+				}
+				languages.push( previousLanguages[lang] );
+			}
 
 			for ( var i = 0; i < 3; i++ ) {
 				var language = languages[i];
@@ -143,7 +146,7 @@
 		 */
 		prepareFonts: function () {
 			var fonts = this.$webfonts.list( this.language );
-			var $fontSelector = $( 'select.uls-font-select' );
+			var $fontSelector = this.$template.find( 'select.uls-font-select' );
 
 			$fontSelector.find( 'option' ).remove();
 			var savedFont = this.webfontPreferences.get( this.language );
@@ -165,7 +168,7 @@
 		},
 
 		selectedFont: function () {
-			return $( 'select.uls-font-select' ).find( 'option:selected' ).val();
+			return this.$template.find( 'select.uls-font-select' ).find( 'option:selected' ).val();
 		},
 
 		/**
@@ -174,24 +177,55 @@
 		listen: function () {
 			var that = this;
 
-			$( "div.uls-ui-languages button.button" ).click( function () {
+			this.$template.find( "div.uls-ui-languages button.button" ).click( function () {
-				$( "button.button" ).removeClass( "down" );
+				$( "div.uls-ui-languages button.button" ).removeClass( "down" );
 				$( this ).addClass( "down" );
 				that.language = $( this ).data( 'language' ) || that.language;
 				that.prepareFonts();
 			} );
 
-			$( '#uls-displaysettings-apply' ).on( 'click', function () {
+			this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
 				that.apply();
 			} );
 
-			$( '#webfonts-enable-checkbox' ).on( 'click', function () {
+			this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
 				if ( this.checked ) {
 					that.$webfonts.apply( that.selectedFont() );
 				} else {
 					that.$webfonts.reset();
 				}
 			} );
+
+			this.$template.find( 'button#uls-more-languages').on( 'click', function () {
+				that.$parent.hide();
+			} );
+
+			// Show the long language list to select a language for display settings
+			this.$template.find( 'button#uls-more-languages').uls( {
+				left: that.$parent.left,
+				top: that.$parent.top,
+
+				onReady: function( uls ) {
+					var $back = $( '<a>' )
+						.prop( 'href', '#' )
+						.prop( 'title', 'Back to display settings' )
+						.text( '← Back to display settings' );
+
+					$back.click( function() {
+						uls.hide();
+						that.$parent.show();
+					} );
+
+					uls.$menu.find( 'div.uls-title' ).append( $back );
+					uls.show();
+				},
+
+				onSelect: function( langCode ) {
+					that.language = langCode;
+					that.$parent.show();
+					that.prepareFonts();
+				}
+			} );
 		},
 
 		/**
@@ -241,7 +275,7 @@
 			// Save the preferences
 			this.webfontPreferences.set( this.language, font );
 			this.webfontPreferences.set( 'webfontsEnabled',
-				$( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false );
+				this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false );
 			this.webfontPreferences.save( function ( result ) {
 				// closure for not losing the scope
 				that.onSave( result );

resources/js/ext.uls.init.js

@@ -53,24 +53,23 @@
 			return $displaySettings;
 		}
 
-		// Extend the render api of ULS to add display and input settings.
+		function addDisplaySettings( uls ) {
-		$.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
+			var $displaySettings = displaySettings();
-			render: function() {
+			uls.$menu.find( "div#settings-block" ).append( $displaySettings );
-				var $displaySettings = displaySettings();
+			var position = uls.position();
-				var that = this;
+			$displaySettings.languagesettings( {
-				this.$menu.find( "div#settings-block" ).append( $displaySettings );
+				top: position.top,
-				var position = this.position();
+				left: position.left
-				$displaySettings.languagesettings( {
+			} );
-					top: position.top,
+			$displaySettings.on( 'click', function() {
-					left: position.left
+				uls.hide();
-				} );
+			} );
-				$displaySettings.on( 'click', function() {
+		}
-					that.hide();
-				} );
-			}
-		} );
 
 		$ulsTrigger.uls( {
+			onReady: function ( uls ) {
+				addDisplaySettings( uls );
+			},
 			onSelect: function( language ) {
 				changeLanguage( language );
 			},

resources/js/ext.uls.languagesettings.js

@@ -45,6 +45,8 @@
 		this.$window = $( this.options.template );
 		this.shown = false;
 		this.initialized = false;
+		this.left = this.options.left;
+		this.top = this.options.top;
 		this.$settingsPanel = this.$window.find( "#languagesettings-settings-panel" );
 		this.init();
 		this.listen();
@@ -61,9 +63,9 @@
 		listen: function() {
 			var that = this;
 			// Register all event listeners to the ULS language settings here.
-			that.$element.on( "click", $.proxy( that.click, that ) );
+			that.$element.on( "click", $.proxy( that.show, that ) );
-			$( '#languagesettings-close' ).on( "click", $.proxy( that.click, that ) );
+			$( '#languagesettings-close' ).on( "click", $.proxy( that.hide, that ) );
-			$( '.uls-settings-close' ).on( "click", $.proxy( that.click, that ) );
+			$( '.uls-settings-close' ).on( "click", $.proxy( that.hide, that ) );
 		},
 
 		render: function() {
@@ -116,8 +118,8 @@
 				var pos = $.extend( {}, this.$element.offset(), {
 					height: this.$element[0].offsetHeight
 				} );
-				var top = this.options.top || pos.top + pos.height;
+				var top = this.top || pos.top + pos.height;
-				var left = this.options.left || '25%';
+				var left = this.left || '25%';
 				// FIXME this is not exactly correct. position may not
 				// be relative to the trigger.
 				this.$window.css( {
@@ -140,8 +142,6 @@
 			e.preventDefault();
 			if ( !this.shown ) {
 				this.show();
-			} else {
-				this.hide();
 			}
 		}
 	};