Introduce display settings link at the top of ULS

Extend $.fn.uls render method to add additional rendering of display
settings link.

Add css for the new element.

Add display.png icon from the Agora icon set.

Change-Id: I7a29b4892be02526969b0dd786c74bdb7551c074

UniversalLanguageSelector.php

@@ -63,7 +63,8 @@ $wgAPIModules['languagesearch'] = 'ApiLanguageSearch';
 $wgHooks['UserGetLanguageObject'][] = 'UniversalLanguageSelectorHooks::getLanguage';
 
 $wgResourceModules['ext.uls.init'] = array(
-	'scripts' => 'resources/ext.uls.init.js',
+	'scripts' => 'resources/js/ext.uls.init.js',
+	'styles' => 'resources/css/ext.uls.css',
 	'localBasePath' => $dir,
 	'remoteExtPath' => 'UniversalLanguageSelector',
 	'dependencies' => array(

lib/jquery.uls/examples/index.html

@@ -108,14 +108,8 @@
 					<h2 class="ten columns end offset-by-one">No results found for "<span id="uls-no-found-search-term">Esapnol</span>"</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:
+							<p>
-								<a class="uls-region-link" data-region="NA" href="#">America</a>,
+								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>.
-								 <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>

resources/css/ext.uls.css

@@ -0,0 +1,19 @@
+div#settings-block {
+	border-left: 1px solid #C9C9C9;
+	padding-left: 10px;
+}
+div#display-settings-block {
+	/* @embed */
+	background: url('../images/display.png');
+	background-repeat: no-repeat;
+	background-size: 20px auto;
+	padding-left: 25px;
+	cursor: pointer;
+}
+.settings-title {
+	font-size: 11pt;
+}
+.settings-text {
+	color: #555555;
+	font-size: 9pt;
+}

resources/js/ext.uls.init.js

@@ -17,25 +17,52 @@
  * @licence MIT License
  */
 
-( function( $ ) {
+( function( $, mw ) {
 	"use strict";
 
 	$( document ).ready( function( ) {
 		var $ulsTrigger = $( '.uls-trigger' ),
 			previousLang = $.cookie( 'uls-previous-language' ),
 			currentLang = mw.config.get( 'wgUserLanguage' );
+
 		/**
 		 * Change the language of wiki using setlang URL parameter
 		 * @param {String} language
 		 */
-		var changeLanguage = function( language ) {
+		function changeLanguage( language ) {
 			$.cookie( 'uls-previous-language', currentLang );
 			var uri = new mw.Uri( window.location.href );
 			uri.extend( {
 				setlang: language
 			} );
 			window.location.href = uri.toString();
-		};
+		}
+
+		function displaySettings() {
+			var $displaySettingsTitle = $( '<div>' )
+					.addClass( 'settings-title' )
+					.text( 'Display settings' ),
+				$displaySettingsText = $( '<span>' )
+					.addClass( 'settings-text' )
+					.text( 'Set language for menus and fonts.' ),
+				$displaySettings = $( '<div>' )
+					.addClass( 'display-settings-block' )
+					.prop( 'id', 'display-settings-block' )
+					.append( $displaySettingsTitle )
+					.append( $displaySettingsText );
+			$displaySettings.on( 'click', function() {
+				// TODO: Show language settings window with display settings highlighted
+			} );
+			return $displaySettings;
+		}
+
+		// Extend the render api of ULS to add display and input settings.
+		$.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
+			render: function() {
+				var $displaySettings = displaySettings();
+				this.$menu.find("div#settings-block").append($displaySettings);
+			}
+		} );
 
 		$ulsTrigger.uls( {
 			onSelect: function( language ) {
@@ -101,4 +128,4 @@
 			changeLanguage( $(this).attr( 'lang' ) );
 		} );
 	} );
-} )( jQuery );
+} )( jQuery, mediaWiki );