jquery.i18n message store for ULS

Bug: 49935
Change-Id: Iddef0805abbf9b4ff0e606fc311c57e9dfa7107d

resources/js/ext.uls.displaysettings.js

@@ -204,8 +204,7 @@
 					// set the language for the settings panel so that webfonts
 					// are correctly applied.
 					displaySettings.$template.attr( 'lang', displaySettings.uiLanguage );
-					$.i18n().locale = displaySettings.uiLanguage;
+					displaySettings.preview( displaySettings.uiLanguage );
-					displaySettings.i18n();
 				};
 			}
 
@@ -300,8 +299,7 @@
 					// set the language for the settings panel so that webfonts
 					// are correctly applied.
 					displaySettings.$template.attr( 'lang', langCode );
-					$.i18n().locale = langCode;
+					displaySettings.preview( langCode );
-					displaySettings.i18n();
 				},
 				quickList: function () {
 					return mw.uls.getFrequentLanguageList();
@@ -313,6 +311,20 @@
 			} );
 		},
 
+		/**
+		 * Preview the settings panel in the given language
+		 * @param {String} language Language code
+		 */
+		preview: function ( language ) {
+			var displaySettings = this,
+				i18n = $.i18n();
+
+			i18n.locale = language;
+			i18n.messageStore.load( i18n.locale ).done( function () {
+				displaySettings.i18n();
+			} );
+		},
+
 		/**
 		 * Get previous languages
 		 * @returns {Array}

resources/js/ext.uls.init.js

@@ -31,8 +31,11 @@
 		this.$languageFilter.addClass( 'noime' );
 	};
 
-	var initialized = false,
+	var MWMessageStore,
+		jsonLoader,
+		initialized = false,
 		currentLang = mw.config.get( 'wgUserLanguage' );
+
 	mw.uls = mw.uls || {};
 	mw.uls.previousLanguagesCookie = 'uls-previous-languages';
 	/**
@@ -173,30 +176,65 @@
 	}
 
 	/**
-	 * i18n initialization
+	 * jquery.i18n message store for MediaWiki
+	 *
 	 */
-	function i18nInit() {
+	MWMessageStore = function () {
-		var jsonLoader = mw.util.wikiScript( 'api' ) + '?action=ulslocalization&language=';
+		this.messages = {};
+	};
 
-		$.i18n( {
+	MWMessageStore.prototype = {
-			locale: currentLang,
+		init: function () {},
-			messageLocationResolver: function ( locale ) {
+
-				return jsonLoader + locale;
+		get: function ( locale, messageKey ) {
+			return ( this.isLoaded( locale ) && this.messages[locale][messageKey] ) ||
+				'<' + messageKey + '>';
+		},
+
+		set: function( locale, messages ) {
+			this.messages[locale] = messages;
+		},
+
+		isLoaded: function ( locale ) {
+			if ( this.messages[locale] ) {
+				return true;
 			}
-		} )
+
-			// Preload i18n for current language.
+			return false;
-			.load( jsonLoader + currentLang, currentLang );
+		},
+
+		load: function ( locale ) {
+			var store = this,
+				deferred = $.Deferred(),
+				url = mw.util.wikiScript( 'api' ) + '?action=ulslocalization&language=';
+
+			if ( store.isLoaded( locale ) ) {
+				return deferred.resolve();
 			}
 
+			deferred = $.getJSON( url + locale ).done( function ( data ) {
+				store.set( locale, data );
+			} ).fail( function ( jqxhr, settings, exception ) {
+				mw.log( 'Error in loading messages from ' + url + ' Exception: ' + exception );
+			} );
+			 return deferred.promise();
+		}
+	};
+
 	mw.uls.init = function ( callback ) {
+		var messageStore = new MWMessageStore();
+
 		callback = callback || $.noop;
 
 		if ( initialized ) {
 			callback.call( this, false );
+
 			return;
 		}
+
 		if ( !isBrowserSupported() ) {
 			$( '#pt-uls' ).hide();
+
 			return;
 		}
 
@@ -211,9 +249,19 @@
 		$.uls.data.addLanguage( 'als', { target: 'gsw' } );
 
 		// JavaScript side i18n initialization
-		i18nInit();
+		$.i18n( {
+			locale: currentLang,
+			messageStore: messageStore
+		} );
+
+		if ( !jsonLoader ) {
+			jsonLoader = messageStore.load( currentLang );
+		} else {
+			jsonLoader.done( function () {
 				initialized = true;
-		callback.call( this, true );
+			} );
+			jsonLoader.done( callback );
+		}
 	};
 
 	$( document ).ready( function () {