Internationalize Mediawiki ULS extension

Change-Id: I17d6c4d6322e30c96a48788dd34dc11530b809b5

i18n/en.json

@@ -0,0 +1,25 @@
+{
+"@metadata": {
+	"authors": [
+		"Santhosh Thottingal"
+	],
+	"message-documenation": "qqq",
+},
+"ext-uls-display-settings-title": "Display settings",
+"ext-uls-display-settings-title-short": "Display",
+"ext-uls-display-settings-desc": "Set language used for menus and fonts.",
+"ext-uls-undo-language-tooltip-text": "Language changed from $1",
+"ext-uls-language-settings-title": "Language settings",
+"ext-uls-language-settings-apply": "Apply settings",
+"ext-uls-language-settings-cancel": "Cancel",
+"ext-uls-display-settings-font-settings": "Font settings",
+"ext-uls-display-settings-ui-language": "Language for display",
+"ext-uls-webfonts-settings-title": "Download font when needed",
+"ext-uls-webfonts-settings-info": "Webfonts will be downloaded for displaying text in special scripts.",
+"ext-uls-webfonts-settings-info-link": "More information",
+"ext-uls-webfonts-select": "Select prefered font",
+"ext-uls-webfonts-select-for": "Select font for $1",
+"ext-uls-webfonts-select-for-ui-info": "Font used for user interface",
+"ext-uls-webfonts-select-for-content-info": "Font used for content",
+"ext-uls-back-to-display-settings": "Back to display settings"
+}

i18n/ml.json

@@ -0,0 +1,24 @@
+{
+"@metadata": {
+	"authors": [
+		"Santhosh Thottingal"
+		]
+},
+"ext-uls-display-settings-title": "പ്രദർശന ക്രമീകരണങ്ങൾ",
+"ext-uls-display-settings-title-short": "പ്രദർശനം",
+"ext-uls-display-settings-desc": "ഫോണ്ടുകളും സമ്പർക്കമുഖത്തിന്റെ ഭാഷയും ക്രമീകരിക്കുക.",
+"ext-uls-undo-language-tooltip-text": "ഭാഷ മാറിയിരിക്കുന്നു. പഴയ ഭാഷ: $1",
+"ext-uls-language-settings-title": "ഭാഷാ ക്രമീകരണങ്ങൾ",
+"ext-uls-language-settings-apply": "ശരി",
+"ext-uls-language-settings-cancel": "വേണ്ട",
+"ext-uls-display-settings-ui-language": "സമ്പർക്കമുഖത്തിന്റെ ഭാഷ",
+"ext-uls-display-settings-font-settings": "ഫോണ്ടു് ക്രമീകരണങ്ങൾ",
+"ext-uls-webfonts-settings-title": "ആവശ്യമുള്ളപ്പോൾ ഫോണ്ടു് ഡൌൺലോഡ് ചെയ്യുക",
+"ext-uls-webfonts-settings-info": "പ്രത്യേക ലിപികളിലെ ഉള്ളടക്കം പ്രദർശിപ്പിക്കാനായി വെബ്ഫോണ്ടുകൾ ഡൌൺലോഡ് ചെയ്യും",
+"ext-uls-webfonts-settings-info-link": "കൂടുതൽ വിവരങ്ങൾ",
+"ext-uls-webfonts-select": "ഇഷ്ടമുള്ള ഫോണ്ടുകൾ തിരഞ്ഞെടുക്കുക",
+"ext-uls-webfonts-select-for": "$1 ഭാഷയ്ക്കുള്ള ഫോണ്ടു്",
+"ext-uls-webfonts-select-for-ui-info": "സമ്പർക്കമുഖത്തിനുള്ള ഫോണ്ടു്",
+"ext-uls-webfonts-select-for-content-info": "ഉള്ളടക്കത്തിനുള്ള ഫോണ്ടു്",
+"ext-uls-back-to-display-settings": "പ്രദർശന ക്രമീകരണങ്ങളിലേയ്ക്ക് മടങ്ങുക"
+}

i18n/qqq.json

@@ -0,0 +1,24 @@
+{
+"@metadata": {
+	"authors": [
+		"Santhosh Thottingal"
+		]
+},
+"ext-uls-display-settings-title": "Display settings title text",
+"ext-uls-display-settings-title-short": "A short name for display settings screen. Can be a translation for 'Display'",
+"ext-uls-display-settings-desc": "Short description about display settings.",
+"ext-uls-undo-language-tooltip-text": "Text for the tooltip appearing when language is changed. $1 is the previous language acronym.",
+"ext-uls-language-settings-title": "Title text for language settings screen",
+"ext-uls-language-settings-apply": "Label for apply settings button in language settings screen",
+"ext-uls-language-settings-cancel": "Lable for cancel buton in language settings screen",
+"ext-uls-display-settings-font-settings": "Subsection title for font settings",
+"ext-uls-display-settings-ui-language": "Sub section title for selecting UI language",
+"ext-uls-webfonts-settings-title": "Short title for enabling webfonts",
+"ext-uls-webfonts-settings-info": "Webfonts will be downloaded for displaying text in special scripts.",
+"ext-uls-webfonts-settings-info-link": "More information link text for webfonts",
+"ext-uls-webfonts-select": "Title for selecting fonts",
+"ext-uls-webfonts-select-for": "Label for font selector dropdown. $1 is a language name",
+"ext-uls-webfonts-select-for-ui-info": "Information displayed under font selector",
+"ext-uls-webfonts-select-for-content-info": "Information displayed under font selector",
+"ext-uls-back-to-display-settings": "Text for the link shown when language selector is accessed from language settings."
+}

resources/js/ext.uls.displaysettings.js

@@ -20,21 +20,24 @@
 ( function ( $, mw, undefined ) {
 	"use strict";
 
-	var template = '<div class="row"><div class="twelve columns"><h3>Display settings</h3></div></div>'
+	var template = '<div class="row"><div class="twelve columns">'
-		+ '<div class="row"><div class="eleven columns"><h4>Language used for menus</h4></div></div>'
+		+ '<h3 data-i18n="ext-uls-display-settings-title"></h3></div></div>'
+		+ '<div class="row"><div class="eleven columns">'
+		+ '<h4 data-i18n="ext-uls-display-settings-ui-language"></h4></div></div>'
 		+ '<div class="row"><div class="uls-ui-languages eleven columns">'
 		+ '</div></div>'
-		+ '<div class="row"><div class="twelve columns"><h4>Font settings</h4></div></div>'
+		+ '<div class="row"><div class="twelve columns">'
+		+ '<h4 data-i18n="ext-uls-display-settings-font-settings"></h4></div></div>'
 		+ '<div class="row">'
 		+ '<div class="eleven columns">'
 		+ '<label class="checkbox"><input type="checkbox" id="webfonts-enable-checkbox" />'
-		+ '<strong>Download fonts automatically when needed</strong> '
+		+ '<strong data-i18n="ext-uls-webfonts-settings-title"></strong> '
-		+ 'Web fonts will be downloaded when text in special scripts is displayed. '
+		+ '<span data-i18n="ext-uls-webfonts-settings-info"></span> '
-		+ '<a target="_blank" href="//www.mediawiki.org/wiki/Special:MyLanguage/Help:Extension:WebFonts">More information</a>'
+		+ '<a target="_blank" href="//www.mediawiki.org/wiki/Special:MyLanguage/Help:Extension:WebFonts" data-i18n="ext-uls-webfonts-settings-info-link"></a>'
 		+ '</span></label>'
 		+ '</div>'
 		+ '</div>'
-		+ '<div class="row"><h5 class="twelve columns">Select your preferred fonts</h5></div>'
+		+ '<div class="row"><h5 class="twelve columns" data-i18n="ext-uls-webfonts-select"></h5></div>'
 		+ '<div class="row uls-content-fonts">'
 		+ '<div class="six columns"><label class="uls-font-label" id="content-font-selector-label"></label></div>'
 		+ '<select id="content-font-selector" class="four columns end uls-font-select"></select>'
@@ -46,14 +49,15 @@
 		+ '<div class="row"></div>'
 		+ '<div class="row language-settings-buttons">'
 		+ '<div class="eleven columns">'
-		+ '<button class="button uls-settings-close">Cancel</button>'
+		+ '<button class="button uls-settings-close" data-i18n="ext-uls-language-settings-cancel"></button>'
-		+ '<button id="uls-displaysettings-apply" class="active blue button">Apply changes</button>'
+		+ '<button id="uls-displaysettings-apply" class="active blue button" data-i18n="ext-uls-language-settings-apply">'
+		+ '</button>'
 		+ '</div>'
 		+ '</div>'; // FIXME i18n and too much hardcoding.
 
 	var DisplaySettings = function ( $parent ) {
-		this.name = "Display";
+		this.name = $.i18n( "ext-uls-display-settings-title-short" );
-		this.description = "Set language used for menus and fonts";
+		this.description = $.i18n( "ext-uls-display-settings-desc" );
 		this.$template = $( template );
 		this.uiLanguage = this.getUILanguage();
 		this.contentLanguage = this.getContentLanguage();
@@ -153,8 +157,8 @@
 				top: that.$parent.top,
 				onReady: function ( uls ) {
 					var $back = $( '<a>' ).prop( 'href', '#' )
-						.prop( 'title', 'Back to display settings' )
+						.data( 'i18n','ext-uls-back-to-display-settings' )
-						.text( '← Back to display settings' ); // FIXME i18n
+						.i18n();
 
 					$back.click( function () {
 						uls.hide();
@@ -162,7 +166,9 @@
 					} );
 
 					uls.$menu.find( 'div.uls-title' ).append( $back );
-					uls.$menu.find( 'div.uls-title h1' ).text( 'Select display language' );
+					uls.$menu.find( 'div.uls-title h1' )
+						.data( 'i18n','ext-uls-display-settings-ui-language' )
+						.i18n();
 				},
 				onSelect: function ( langCode ) {
 					that.uiLanguage = langCode;
@@ -235,8 +241,12 @@
 			$fontSelector.append( $systemFont );
 			$systemFont.attr( 'selected', savedFont === 'system' || !savedFont );
 			var $fontLabel = this.$template.find( 'label#ui-font-selector-label' );
-			$fontLabel.html( "<strong>Select font for " + $.uls.data.autonym( this.uiLanguage )
+			$fontLabel.html( '<strong>'
-				+ "</strong><div>Used for menus</div>" );
+				+ $.i18n( 'ext-uls-webfonts-select-for', $.uls.data.autonym( this.uiLanguage ) )
+				+ '</strong>'
+				+ '<div>'
+				+ $.i18n( 'ext-uls-webfonts-select-for-ui-info' )
+				+ '</div>' );
 		},
 
 		/**
@@ -263,8 +273,13 @@
 			$fontSelector.append( $systemFont );
 			$systemFont.attr( 'selected', savedFont === 'system' || !savedFont );
 			var $fontLabel = this.$template.find( '#content-font-selector-label' );
-			$fontLabel.html( "<strong>Select font for " + $.uls.data.autonym( this.contentLanguage )
+			$fontLabel.html( '<strong>'
-				+ "</strong><div>Used for content</div>" );
+				+ $.i18n( 'ext-uls-webfonts-select-for',
+					$.uls.data.autonym( this.contentLanguage ) )
+				+ '</strong>'
+				+ '<div>'
+				+ $.i18n( 'ext-uls-webfonts-select-for-content-info' )
+				+ '</div>' );
 		},
 
 		/**

resources/js/ext.uls.init.js

@@ -87,30 +87,33 @@
 	};
 
 	$( document ).ready( function () {
+		var extensionPath = mw.config.get( 'wgExtensionAssetsPath' ) +
+		'/UniversalLanguageSelector/';
 		// i18n initialization
 		var i18n = $.i18n( {
-			locale: currentLang
+			locale: currentLang,
+			messageLocationResolver: function ( locale ) {
+				return extensionPath + 'i18n/' + locale + '.json';
+			}
 		} );
-		var extensionPath = mw.config.get( 'wgExtensionAssetsPath' ) +
+		// localization for jquery.uls
-			'/UniversalLanguageSelector/';
 		i18n.load( extensionPath + 'lib/jquery.uls/i18n/' + currentLang + ".json", currentLang );
-
+		// localization for mediaWiki ULS
+		i18n.load( extensionPath + 'i18n/' + currentLang + ".json", currentLang );
 		var $ulsTrigger = $( '.uls-trigger' ),
 			previousLanguages = mw.uls.getPreviousLanguages() || [],
 			previousLang = previousLanguages.slice( -1 )[0];
 
 		function displaySettings () {
-			var $displaySettingsTitle = $( '<div>' )
+			var $displaySettingsTitle = $( '<div data-i18n="ext-uls-display-settings-title">' )
-					.addClass( 'settings-title' )
+				.addClass( 'settings-title' );
-					.text( 'Display settings' ),
+			var $displaySettingsText = $( '<span data-i18n="ext-uls-display-settings-desc">' )
-				$displaySettingsText = $( '<span>' )
+				.addClass( 'settings-text' );
-					.addClass( 'settings-text' )
+			var $displaySettings = $( '<div>' )
-					.text( 'Set language used for menus and fonts.' ),
+				.addClass( 'display-settings-block' )
-				$displaySettings = $( '<div>' )
+				.prop( 'id', 'display-settings-block' )
-					.addClass( 'display-settings-block' )
+				.append( $displaySettingsTitle )
-					.prop( 'id', 'display-settings-block' )
+				.append( $displaySettingsText );
-					.append( $displaySettingsTitle )
-					.append( $displaySettingsText );
 			return $displaySettings;
 		}
 
@@ -168,11 +171,12 @@
 			fade: true,
 			trigger: 'manual',
 			title: function () {
-				var prevLangName = $.uls.data.autonym( previousLang ),
+				var prevLangName = $.uls.data.autonym( previousLang );
-					linkClass = 'uls-lang-link',
+				var linkClass = 'uls-lang-link';
-					title = "Language changed from <a href='#' lang = '" +
+				var prevLangLink = "<a href='#' lang = '" +
-						previousLang + "' class = '" + linkClass + "' >" +
+					previousLang + "' class = '" + linkClass + "' >" +
-						prevLangName + "</a>";
+					prevLangName + "</a>";
+				var title = $.i18n( "ext-uls-undo-language-tooltip-text", prevLangLink );
 				return title;
 			}
 		} );

resources/js/ext.uls.languagesettings.js

@@ -24,7 +24,7 @@
 		'<span id="languagesettings-close" class="icon-close"></span>' +
 		'</div>';
 	var settingsMenu = '<div class="four columns languagesettings-menu">' +
-		'<h1>Language settings</h1>' + // TODO i18n
+		'<h1 data-i18n="ext-uls-language-settings-title"></h1>' +
 		'<div class="settings-menu-items">' +
 		'</div>' +
 		'</div>';
@@ -135,6 +135,7 @@
 				} );
 			}
 
+			this.$window.i18n();
 			this.shown = true;
 			this.$window.show();
 		},