Simplify the preference system

* Just use key,value system and drop the concept of groups
* Abstract the preferences for each type of systems(display, input)
  to have meaningful APIs

Change-Id: I25423667adf6ca181a4027cdfc4ed378f36a94ba

resources/js/ext.uls.displaysettings.js

@@ -94,7 +94,6 @@
 		this.contentLanguage = this.getContentLanguage();
 		this.$webfonts = null;
 		this.$parent = $parent;
-		this.webfontPreferences = mw.uls.preferences( 'webfonts' );
 	}
 
 	DisplaySettings.prototype = {
@@ -121,7 +120,7 @@
 		},
 
 		isWebFontsEnabled: function () {
-			var enable = this.webfontPreferences.get( 'webfonts-enabled' );
+			var enable = mw.webfonts.preferences.isEnabled();
 
 			// If the user didn't use the checkbox, the preference will be undefined.
 			// The default for now is to enable webfonts if the user didn't select anything.
@@ -297,7 +296,7 @@
 			$fontSelector = this.$template.find( 'select#ui-font-selector' );
 
 			$fontSelector.find( 'option' ).remove();
-			savedFont = this.webfontPreferences.get( this.uiLanguage );
+			savedFont = mw.webfonts.preferences.getFont( this.uiLanguage );
 
 			if ( fonts && fonts.length ) {
 				$.each( fonts, function ( key, font ) {
@@ -347,7 +346,7 @@
 			$fontSelector = this.$template.find( '#content-font-selector' );
 
 			$fontSelector.find( 'option' ).remove();
-			savedFont = this.webfontPreferences.get( this.contentLanguage );
+			savedFont = mw.webfonts.preferences.getFont( this.contentLanguage );
 
 			if ( fonts && fonts.length ) {
 				$.each( fonts, function ( key, font ) {
@@ -397,12 +396,12 @@
 
 			this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
 				if ( this.checked ) {
-					that.webfontPreferences.set( 'webfonts-enabled', true );
+					mw.webfonts.preferences.enable();
 					$contentFontSelector.prop( 'disabled', false );
 					$uiFontSelector.prop( 'disabled', false );
 					that.$webfonts.apply( $uiFontSelector.find( 'option:selected' ) );
 				} else {
-					that.webfontPreferences.set( 'webfonts-enabled', false );
+					mw.webfonts.preferences.disable();
 					$contentFontSelector.prop( 'disabled', true );
 					$uiFontSelector.prop( 'disabled', true );
 					that.$webfonts.reset();
@@ -411,13 +410,13 @@
 
 			$uiFontSelector.on( 'change', function () {
 				var font = $( this ).find( 'option:selected' ).val();
-				that.webfontPreferences.set( that.uiLanguage, font );
+				mw.webfonts.preferences.setFont( that.uiLanguage, font );
 				that.$webfonts.refresh();
 			} );
 
 			$contentFontSelector.on( 'change', function () {
 				var font = $( this ).find( 'option:selected' ).val();
-				that.webfontPreferences.set( that.contentLanguage, font );
+				mw.webfonts.preferences.setFont( that.contentLanguage, font );
 				that.$webfonts.refresh();
 			} );
 
@@ -463,7 +462,7 @@
 			var that = this;
 
 			// Save the preferences
-			this.webfontPreferences.save( function ( result ) {
+			mw.webfonts.preferences.save( function ( result ) {
 				// closure for not losing the scope
 				that.onSave( result );
 			} );

resources/js/ext.uls.preferences.js

@@ -21,12 +21,11 @@
 ( function ( $, mw, undefined ) {
 	'use strict';
 
-	var ULSPreferences = function ( group ) {
+	var ULSPreferences = function () {
 		this.preferenceName = 'uls-preferences';
 		this.username = mw.user.getName();
 		this.isAnon = mw.user.isAnon();
 		this.preferences = null;
-		this.group = group;
 		this.init();
 	};
 
@@ -51,10 +50,7 @@
 		 * @param value
 		 */
 		set: function ( key, value ) {
-			if ( !this.preferences[this.group] ) {
+			this.preferences[key] = value;
-				this.preferences[this.group] = {};
-			}
-			this.preferences[this.group][key] = value;
 		},
 
 		/**
@@ -64,7 +60,7 @@
 		 * @returns
 		 */
 		get: function ( key ) {
-			return this.preferences[this.group] && this.preferences[this.group][key];
+			return this.preferences[key];
 		},
 
 		/**
@@ -106,14 +102,11 @@
 	};
 
 	mw.uls = mw.uls || {};
-	mw.uls.preferences = function ( group ) {
+	mw.uls.preferences = function () {
 		var data = $( 'body' ).data( 'preferences' );
 
 		if ( !data ) {
-			$( 'body' ).data( 'preferences', ( data = new ULSPreferences( group ) ) );
+			$( 'body' ).data( 'preferences', ( data = new ULSPreferences() ) );
-		}
-		if ( typeof group === 'string' ) {
-			data.get( group );
 		}
 		return data;
 	};

resources/js/ext.uls.webfonts.js

@@ -20,10 +20,10 @@
 	'use strict';
 
 	$( document ).ready( function () {
-		var mediawikiFontRepository, webfontsPreferences;
+		var mediawikiFontRepository, ulsPreferences;
 
 		mediawikiFontRepository = $.webfonts.repository;
-		webfontsPreferences = mw.uls.preferences( 'webfonts' );
+		ulsPreferences = mw.uls.preferences();
 		mediawikiFontRepository.base = mw.config.get( 'wgExtensionAssetsPath' )
 			+ '/UniversalLanguageSelector/data/fontrepo/fonts/';
 
@@ -33,13 +33,54 @@
 			fontStack: ['sans-serif'] // MediaWiki default font as per screen.css
 		} );
 
+		mw.webfonts = mw.webfonts || {};
+
+		mw.webfonts.preferences = {
+			registry: {
+				'fonts': {},
+				'webfonts-enabled': true
+			},
+
+			isEnabled: function () {
+				return this.registry['webfonts-enabled'];
+			},
+
+			enable: function () {
+				this.registry['webfonts-enabled'] = true;
+			},
+
+			disable: function () {
+				this.registry['webfonts-enabled'] = false;
+			},
+
+			setFont: function ( language, font ) {
+				this.registry.fonts[language] = font;
+			},
+
+			getFont: function ( language ) {
+				return this.registry.fonts[language];
+			},
+
+			save: function ( callback ) {
+				ulsPreferences.set( 'webfonts', this.registry );
+				ulsPreferences.save( callback );
+			},
+
+			load: function () {
+				mw.webfonts.preferences.registry = $.extend( this.registry,
+					ulsPreferences.get( 'webfonts' ) );
+			}
+		};
+
+		mw.webfonts.preferences.load();
+
 		// Initialize webfonts
 		$( 'body' ).webfonts( {
 			fontSelector: function ( repository, language ) {
 				var font, enabled;
 
-				font = webfontsPreferences.get( language );
+				font = mw.webfonts.preferences.getFont( language );
-				enabled = webfontsPreferences.get( 'webfonts-enabled' );
+				enabled = mw.webfonts.preferences.isEnabled();
 				// If the user didn't set anything, the preference will be undefined.
 				// The default for now is to enable webfonts if the user didn't select anything.
 				if ( enabled === undefined ) {