ULS persistent preference system.

Change-Id: Ieb22e09f226e770c9935b875f4226a75ffd8c46d

UniversalLanguageSelector.php

@@ -77,11 +77,24 @@ $wgResourceModules['ext.uls.init'] = array(
 	'position' => 'top',
 );
 
+$wgResourceModules['ext.uls.preferences'] = array(
+	'scripts' => 'resources/js/ext.uls.preferences.js',
+	'localBasePath' => $dir,
+	'remoteExtPath' => 'UniversalLanguageSelector',
+	'dependencies' => array(
+		'mediawiki.user',
+		'jquery.json',
+	),
+);
+
 $wgResourceModules['ext.uls.languagesettings'] = array(
 	'scripts' => 'resources/js/ext.uls.languagesettings.js',
 	'styles' => 'resources/css/ext.uls.languagesettings.css',
 	'localBasePath' => $dir,
 	'remoteExtPath' => 'UniversalLanguageSelector',
+		'dependencies' => array(
+		'ext.uls.preferences',
+	),
 );
 
 $wgResourceModules['ext.uls.webfonts'] = array(

resources/js/ext.uls.displaysettings.js

@@ -40,15 +40,17 @@
 			+ '<div class="row"></div>'
 			+ '<div class="row language-settings-buttons">'
 			+ '<button class="three columns offset-by-three button uls-settings-close">Cancel</button>'
-			+ '<button class="four columns offset-by-one active blue button">Apply changes</button>'
+			+ '<button id="uls-displaysettings-apply" class="four columns offset-by-one active blue button">Apply changes</button>'
 			+ '</div>'; // FIXME i18n and too much hardcoding.
 
-	var DisplaySettings = function () {
+	var DisplaySettings = function ( $parent ) {
 		this.name = "Display";
 		this.description = "Set the languages of menus and fonts";
 		this.$template = $( template );
 		this.language = this.currentLanguage();
 		this.$webfonts = null;
+		this.$parent = $parent;
+		this.webfontPreferences = new $.fn.uls.preferences( 'webfonts' );
 	};
 
 	DisplaySettings.prototype = {
@@ -57,12 +59,11 @@
 
 		/**
 		 * Render the module into a given target
-		 * @param $target
 		 */
-		render: function ( $target ) {
+		render: function ( ) {
-			$target.empty();
+			this.$parent.$settingsPanel.empty();
 			this.$webfonts = $( 'body' ).data( 'webfonts' );
-			$target.append( this.$template );
+			this.$parent.$settingsPanel.append( this.$template );
 			this.prepareLanguages();
 			this.prepareFonts();
 			this.listen();
@@ -84,10 +85,10 @@
 					.addClass( 'two columns button' )
 					.text( $.uls.data.autonym( language ) );
 				if ( language === this.language ) {
-					 $button.addClass( 'down' );
+					$button.addClass( 'down' );
 				}
 				if ( i > 0 ) {
-					 $button.addClass( 'offset-by-one' );
+					$button.addClass( 'offset-by-one' );
 				}
 				$button.data( 'language', language );
 				$languages.append( $button );
@@ -129,10 +130,18 @@
 			var fonts = this.$webfonts.list( this.language );
 			var $fontSelector = $( 'select.uls-font-select' );
 			$fontSelector.find( 'option' ).remove();
-			$.each( fonts, function ( key, font ) {
+			var savedFont = this.webfontPreferences.get( this.language );
-				$fontSelector.append( $( "<option></option>" )
+			if( fonts && fonts.length ) {
-					.attr( "value", font ).text( font ) );
+				$.each( fonts, function ( key, font ) {
-			} );
+					var $fontOption = $( "<option>" )
+					.attr( "value", font ).text( font );
+					$fontSelector.append( $fontOption );
+					$fontOption.attr( 'selected',  savedFont === font );
+				} );
+			}
+			var $systemFont = $( "<option>" ).val( 'system' ).text( 'System font' );
+			$fontSelector.append( $systemFont );
+			$systemFont.attr( 'selected', savedFont === 'system' );
 			var $fontLabel = $( 'label#font-selector' );
 			$fontLabel.text( "Select font for " + $.uls.data.autonym( this.language ) );
 		},
@@ -142,12 +151,15 @@
 		 */
 		listen: function () {
 			var that = this;
-			$( "button.button" ).click( function () {
+			$( "div.uls-ui-languages button.button" ).click( function () {
 				$( "button.button" ).removeClass( "down" );
 				$( this ).addClass( "down" );
 				that.language = $( this ).data( 'language' ) || that.language;
 				that.prepareFonts();
 			} );
+			$( '#uls-displaysettings-apply' ).on( 'click', function () {
+				that.apply();
+			} );
 		},
 
 		/**
@@ -163,20 +175,47 @@
 			window.location.href = uri.toString();
 		},
 
+		/**
+		 * Callback for save preferences
+		 */
+		onSave: function ( success ) {
+			if ( success ) {
+				this.$parent.hide();
+				// we delay change UI language to here, because it causes a page refresh
+				if ( this.language !== this.currentLanguage() ) {
+					this.changeLanguage( this.language );
+				}
+			} else {
+				// FIXME failure. what to do?!
+			}
+		},
+
 		/**
 		 * Handle the apply button press
 		 */
 		apply: function () {
+			var that = this;
 			var $fontSelector = $( 'select.uls-font-select' );
 			var font = $fontSelector.find( 'option:selected' ).val();
-			this.$webfonts.apply( font );
+			// Live font update if current UI language match with language selection
-			if ( this.language !== this.currentLanguage() ) {
+			if ( this.language === this.currentLanguage() ) {
-				this.changeLanguage( this.language );
+				if ( font === 'system' ) {
+					this.$webfonts.reset();
+				} else {
+					this.$webfonts.apply( font );
+				}
 			}
+			// Save the preferences
+			this.webfontPreferences.set( this.language, font );
+			this.webfontPreferences.save( function ( result ) {
+				// closure for not losing the scope
+				that.onSave( result );
+			} );
 		}
 	};
 
+	// Register this module to language settings modules
 	$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
-		display: new DisplaySettings()
+		display:  DisplaySettings
 	} );
 } ) ( jQuery );

resources/js/ext.uls.languagesettings.js

@@ -45,6 +45,7 @@
 		this.$window = $( this.options.template );
 		this.shown = false;
 		this.initialized = false;
+		this.$settingsPanel = this.$window.find( "#languagesettings-settings-panel" );
 		this.init();
 		this.listen();
 	};
@@ -72,7 +73,7 @@
 			for ( var moduleName in modules ) {
 				if ( modules.hasOwnProperty( moduleName ) ) {
 					if ( !firstModule ) {
-						firstModule = modules[moduleName];
+						firstModule = new modules[moduleName]( this );
 					}
 					// Call render function on the current setting module.
 					this.renderModule( moduleName );
@@ -80,13 +81,12 @@
 			}
 
 			// Show the default module
-			firstModule.render( $( "#languagesettings-settings-panel" ) );
+			firstModule.render();
 		},
 
 		renderModule: function( moduleName ) {
-			var that = this;
 			var $settingsMenuItems = this.$window.find( ".settings-menu-items" );
-			var module = $.fn.languagesettings.modules[moduleName];
+			var module = new $.fn.languagesettings.modules[moduleName]( this );
 			var $settingsTitle = $( "<div>" )
 				.addClass( "settings-title" )
 				.text( module.name );
@@ -104,8 +104,7 @@
 
 			$settingsLink.on( "click", function() {
 				var module = $( this ).data( "module" );
-				var $settingsPanel = that.$window.find( "#languagesettings-settings-panel" );
+				module.render();
-				module.render( $settingsPanel );
 				$( this ).addClass( 'active' );
 			} );
 		},

resources/js/ext.uls.preferences.js

@@ -0,0 +1,113 @@
+/**
+ * ULS preferences system for MediaWiki.
+ * Cookies for anonymous users, preferences for logged in users.
+ *
+ * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
+ * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
+ * contributors. See CREDITS for a list.
+ *
+ * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
+ * have to do anything special to choose one license or the other and you don't
+ * have to notify anyone which license you are using. You are free to use
+ * UniversalLanguageSelector in commercial projects as long as the copyright
+ * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
+ *
+ * @file
+ * @ingroup Extensions
+ * @licence GNU General Public Licence 2.0 or later
+ * @licence MIT License
+ */
+
+(function( $, mw ) {
+	"use strict";
+
+	var ULSPreferences = function ( group ) {
+		this.cookieName = this.preferenceName = 'uls-preferences';
+		this.username = mw.user.getName();
+		this.isAnon = mw.user.isAnon();
+		this.preferences = null;
+		this.group = group;
+		this.init();
+	};
+
+	ULSPreferences.prototype = {
+		/**
+		 * Initalize
+		 */
+		init: function () {
+			if ( this.isAnon ) {
+				this.cookie = $.cookie( this.cookieName );
+				this.preferences = $.parseJSON( this.cookie );
+			} else {
+				var options = mw.user.options.get( this.preferenceName );
+				this.preferences = $.parseJSON( options );
+			}
+			this.preferences = this.preferences || {};
+		},
+
+		/**
+		 * Set the preference
+		 * @param {String} key
+		 * @param value
+		 */
+		set: function ( key, value ) {
+			if ( !this.preferences[this.group] ) {
+				this.preferences[this.group] = {};
+			}
+			this.preferences[this.group][key] = value;
+		},
+
+		/**
+		 * Get a preference value for the given preference name
+		 * @param key
+		 * @returns
+		 */
+		get: function ( key ) {
+			return this.preferences[this.group] && this.preferences[this.group][key];
+		},
+
+		/**
+		 * Save the preferences
+		 *
+		 * @param callback
+		 */
+		save: function ( callback ) {
+			var that = this;
+			callback = callback || $.noop();
+			if ( this.isAnon ) {
+				// Anonymous user- Save preferences in cookie
+				$.cookie( this.cookieName, $.toJSON( this.preferences ), {
+					expires: 30,
+					HttpOnly: true,
+					path: '/'
+				} );
+				callback.call( this, true );
+			} else {
+				// Logged in user. Use MW apis to change preferences
+				var api = new mw.Api();
+				api.post( {
+					action: 'tokens',
+					type: 'options'
+				} ).done( function ( result ) {
+					var token = result.tokens.optionstoken;
+					api.post( {
+						action: 'options',
+						change: 'hideminor=1',
+						optionname: that.preferenceName,
+						optionvalue: $.toJSON( that.preferences ),
+						token: token
+					} ).done( function ( result ) {
+						callback.call( this, true );
+					} ).fail( function () {
+						callback.call( this, false );
+					} );
+				} ).fail( function ( xhr, textStatus, exception ) {
+					callback.call( this, false );
+				} );
+			}
+		}
+	};
+
+	$.fn.uls.preferences = ULSPreferences;
+
+}( jQuery, mediaWiki ) );

resources/js/ext.uls.webfonts.js

@@ -16,7 +16,7 @@
  * @licence GNU General Public Licence 2.0 or later
  * @licence MIT License
  */
-( function($, mw) {
+( function ( $, mw ) {
 	"use strict";
 	$( document ).ready( function() {
 		var mediawikiFontRepository = $.webfonts.repository;
@@ -25,5 +25,14 @@
 		$( 'body' ).webfonts( {
 			repository: mediawikiFontRepository
 		} );
+		var $webfonts = $( 'body' ).data( 'webfonts' );
+		var webfontPreferences = new $.fn.uls.preferences( 'webfonts' );
+		var rememberedFont = webfontPreferences.get( mw.config.get( 'wgUserLanguage' ) );
+		if ( rememberedFont === 'system' ) {
+			$webfonts.reset();
+		} else {
+			// FIXME: jquery.webfonts should have an option to specify default font to use.
+			$webfonts.apply( rememberedFont );
+		}
 	} );
 } )( jQuery, mediaWiki );