WebFonts integration with ULS display settings.

This does not add much functionality. That will come in
future commits.

This commit has many cleanup, refactoring on the display settings,
language settings code.

Change-Id: I7fbc3ebb9b67c1afd80f159c2d82cd2a1c6bea74

resources/js/ext.uls.displaysettings.js

@@ -19,30 +19,56 @@
 
 ( function( $ ) {
 	"use strict";
-	var template = '<div><h3>Display Settings</h3></div>' +
-		'<div><h4>Select Language</h4></div>' +
-		'<div>' +
-			'<button>English</button>' +
-			'<button>Deutsch</button>' +
-			'<button>עברית</button>' +
-			'<button class="uls-trigger">...</button>' +
-		'</div>' +
-		'<div><h4>Font Settings</h4></div>' +
-		'<div>' +
-			'<input type="checkbox" id="webfonts-enable-checkbox" />' +
-			'<label for="webfonts-enable-checkbox">Download fonts automatically when needed</label>' +
-		'</div>' +
-		'<div><h5>Select your preferred fonts to use</h5></div>' +
-		'<div>Fonts for English<select></select></div>' +
-		'<div>Fonts for Spanish<select></select></div>' +
-		'<div class="language-settings-buttons"><button>Cancel</button><button>Apply changes</button></div>';
+	var template = '<div><h3>Display Settings</h3></div>'
+			+ '<div><h4>Select Language</h4></div>'
+			+ '<div class="row">'
+			+ '<button class="two columns toggle button down">English</button>'
+			+ '<button class="two columns offset-by-one toggle button">Deutsch</button>'
+			+ '<button class="two columns offset-by-one toggle button">עברית</button>'
+			+ '<button id="uls-more-languages" class="two columns offset-by-one toggle button"">...</button>'
+			+ '</div>'
+			+ '<div class="row"><h4>Font Settings</h4></div>'
+			+ '<div  class="row">'
+			+ '<label class="checkbox"><input type="checkbox" checked id="webfonts-enable-checkbox" />'
+			+ '<b>Download fonts automatically when needed</b> '
+			+ 'Web fonts will be downloaded when text in special scripts is displayed. '
+			+ '<a href="#">More Information</a>'
+			+ '</span></label>'
+			+ '</div>'
+			+ '<div class="row"><h5>Select your preferred fonts to use</h5></div>'
+			+ '<div class="row">'
+			+ '<div class="six columns">Fonts for English</div>'
+			+ '<select class="three columns end uls-font-select"></select></div>'
+			+ '</div>'
+			+ '<div class="row"></div>'
+			+ '<div class="row language-settings-buttons">'
+			+ '<button class="three columns offset-by-three blue button">Cancel</button>'
+			+ '<button  class="four columns offset-by-one active blue button">Apply changes</button>'
+			+ '</div>'; // FIXME too much hardcoding.
 
 	var displaySettings = {
+		name: "Display",
+		description: "Set the fonts for languages",
+
 		render: function() {
 			return template;
 		},
-		name: "Display",
-		description: "Set the fonts for languages"
+
+		listen: function() {
+			var $webfonts = $( 'body' ).data( 'webfonts' );
+			var fonts = $webfonts.list( 'en' ); // FIXME
+			var $fontSelector = $( 'select.uls-font-select' );
+			$.each( fonts, function( key, font ) {
+				$fontSelector.append( $( "<option></option>" )
+					.attr( "value", font ).text( font ) );
+			} );
+			$( "button.toggle.button" ).click( function() {
+				$( "button.toggle.button" ).removeClass( "down" );
+				$( this ).addClass( "down" );
+			} );
+			// $( '#uls-more-languages' ).uls({
+			// });
+		}
 	};
 
 	$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {