Help links for input settings

Bug: 42373
Change-Id: I30c8d6cbe916ac026ad70974755942c5bbea7162

Resources.php

@@ -71,6 +71,9 @@ $wgResourceModules['ext.uls.inputsettings'] = array(
 		'ext.uls.ime',
 		'jquery.i18n',
 	),
+	'messages' => array(
+		'uls-ime-helppage',
+	),
 ) + $resourcePaths;
 
 // Interface language selection module

UniversalLanguageSelector.i18n.php

@@ -24,12 +24,14 @@ $messages = array();
  * English
  * @author santhosh
  * @author Amire80
+ * @author Nike
  */
 $messages['en'] = array(
 	'UniversalLanguageSelector' => 'Universal Language Selector',
 	'uls-desc' => 'Gives the user several ways to select a language and to adjust language settings',
 
 	'uls-plang-title-languages' => 'Languages',
+	'uls-ime-helppage' => 'https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Extension:UniversalLanguageSelector/Input_methods/$1',
 );
 
 /** Message documentation (Message documentation)
@@ -42,6 +44,7 @@ $messages['qqq'] = array(
 	'uls-plang-title-languages' => 'A title for the are in the sidebar in which the interlanguage links are supposed to appear.
 This title is shown when there are no interlanguage links there, but an icon that enables the ULS is shown.
 {{Identical|Language}}',
+	'uls-ime-helppage' => 'Target page for ime helps. $1 is ime id. Intented for wiki local customization.',
 );
 
 /** Arabic (العربية)

i18n/en.json

@@ -33,6 +33,7 @@
 "ext-uls-input-settings-ime-settings": "Input methods for $1",
 "ext-uls-input-settings-ui-language": "Language used for writing",
 "ext-uls-back-to-input-settings": "Back to input settings",
+"ext-uls-ime-help": "How to use",
 "ext-uls-disable-input-method": "Use native keyboard",
 "ext-uls-input-settings-more-languages-tooltip": "More languages",
 "jquery-ime-other-languages": "Other languages",

resources/css/ext.uls.inputsettings.css

@@ -67,7 +67,7 @@ div.input-settings-block {
 	height: 14px;
 	position: absolute;
 	right: 0;
-	}
+}
 
 .uls-ime-menu-settings-item > a:hover {
 	background-color: #f0f0f0;
@@ -116,3 +116,7 @@ div.input-settings-block {
 	color: #0645AD;
 	cursor: pointer;
 }
+
+.uls-input-settings .uls-ime-help {
+	margin-left: 10px;
+}

resources/js/ext.uls.inputsettings.js

@@ -169,7 +169,7 @@
 		 * @return {Object} jQuery object corresponding to the input method item.
 		 */
 		renderInputmethodOption: function ( imeId, selected ) {
-			var $imeLabel, name, description, inputmethod, $inputMethodItem;
+			var $imeLabel, name, description, $helplink, inputmethod, $inputMethodItem;
 
 			if ( imeId !== 'system' && !$.ime.sources[imeId] ) {
 				// imeId not known for jquery.ime.
@@ -194,8 +194,14 @@
 			if ( imeId === 'system' ) {
 				name = $.i18n( 'ext-uls-disable-input-method' );
 				description = '';
+				$helplink = '';
 			} else {
 				inputmethod = $.ime.inputmethods[imeId];
+				$helplink = $( '<a>' )
+					.addClass( 'uls-ime-help' )
+					.text( $.i18n( 'ext-uls-ime-help' ) )
+					.attr( 'href', mw.msg( 'uls-ime-helppage' ).replace( '$1', imeId ) )
+					.attr( 'target', '_blank' );
 				if ( !inputmethod ) {
 					// The input method definition(rules) not loaded.
 					// We will show the name from $.ime.sources
@@ -209,7 +215,8 @@
 
 			$imeLabel.append(
 				$( '<strong>' ).text( name ),
-				$( '<span>' ).text( description )
+				$( '<span>' ).text( description ),
+				$helplink
 			);
 
 			return $imeLabel;