Amire80 has uploaded a new change for review.
https://gerrit.wikimedia.org/r/174094
Change subject: WIP: ULS for source and target selectors
......................................................................
WIP: ULS for source and target selectors
Change-Id: I435a4c039a538c4391c4c9d19ea117e441c43d93
---
M Resources.php
M modules/source/ext.cx.source.selector.js
M modules/source/styles/ext.cx.source.selector.less
3 files changed, 117 insertions(+), 48 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/94/174094/1
diff --git a/Resources.php b/Resources.php
index cf831e4..3f65111 100644
--- a/Resources.php
+++ b/Resources.php
@@ -142,7 +142,7 @@
'ext.cx.sitemapper',
'jquery.suggestions',
'jquery.throttle-debounce',
- 'jquery.uls.data',
+ 'ext.uls.mediawiki',
),
'messages' => array(
'cx-sourceselector-dialog-new-translation',
diff --git a/modules/source/ext.cx.source.selector.js
b/modules/source/ext.cx.source.selector.js
index cc1dfb1..790fb2b 100644
--- a/modules/source/ext.cx.source.selector.js
+++ b/modules/source/ext.cx.source.selector.js
@@ -35,6 +35,22 @@
}
/**
+ * Return an object of languages indexed by language code.
+ * @param {array} languages An array of language codes.
+ * return {object} Autonyms indexed by language code.
+ */
+ function getAutonyms( languages ) {
+ var i,
+ autonyms = {};
+
+ for ( i = 0; i < languages.length; i++ ) {
+ autonyms[ languages[ i ] ] = $.uls.data.getAutonym(
languages[ i ] );
+ }
+
+ return autonyms;
+ }
+
+ /**
* Initialize the plugin.
*/
CXSourceSelector.prototype.init = function () {
@@ -88,40 +104,73 @@
};
/**
+ * Check whether a language is available as a target language
+ * for the currently selected source language.
+ * @param {array} language A language code.
+ * return {boolean} true if the language is available.
+ */
+ CXSourceSelector.prototype.isValidTarget = function ( language ) {
+ return ( $.inArray(
+ language,
+ this.languagePairs[ this.sourceLanguage() ]
+ ) > -1 );
+ };
+
+ /**
+ * Get the current source language code.
+ * return {string} Language code. Empty string if not set.
+ */
+ CXSourceSelector.prototype.sourceLanguage = function ( language ) {
+ return this.sourceLanguage();
+ };
+
+ /**
+ * Get the current target language code.
+ * return {string} Language code. Empty string if not set.
+ */
+ CXSourceSelector.prototype.sourceLanguage = function ( language ) {
+ return this.sourceLanguage();
+ };
+
+ /**
* Fill the target language dropdown with target languages that have
* language tools compatible with the source language.
*/
CXSourceSelector.prototype.fillTargetLanguages = function () {
- var index, targetLanguage, $option,
- sourceLanguage = this.$sourceLanguage.val(),
+ var i, targetLanguage, $option,
+ cxSourceSelector = this,
+ targetUlsClass = 'cx-sourceselector-uls-target',
+ sourceLanguage = this.sourceLanguage(),
enabledOptions = [],
disabledOptions = [];
- this.$targetLanguage.empty();
- for ( index in this.targetLanguages ) {
- targetLanguage = this.targetLanguages[ index ];
+ // Delete the old target ULS
+ $( '.' + targetUlsClass ).remove();
+ this.$targetLanguage.data( 'uls', null );
- // Skip the same language
- if ( targetLanguage === sourceLanguage ) {
- continue;
- }
+ // Create a new target ULS
+ this.$targetLanguage.uls( {
+ languages: getAutonyms( this.targetLanguages ),
+ onSelect: function ( language ) {
+ cxSourceSelector.$targetLanguage
+ .prop( {
+ lang: language,
+ dir: $.uls.data.getDir(
language )
+ } )
+ .text( $.uls.data.getAutonym( language
) );
- $option = $( '<option>' )
- .attr( 'value', targetLanguage )
- .text( $.uls.data.getAutonym( targetLanguage )
);
-
- if ( $.inArray( targetLanguage, this.languagePairs[
sourceLanguage ] ) > -1 ) {
- enabledOptions.push( $option );
- } else {
- // Disable the option, but show it so the user
will
- // know that this language is is in the system
- $option.attr( 'disabled', true );
- disabledOptions.push( $option );
- }
- }
-
- // Show the enabled languages first
- this.$targetLanguage.append( enabledOptions, disabledOptions );
+ cxSourceSelector.targetLanguageChangeHandler();
+ },
+ onReady: function () {
+ this.$menu.addClass( targetUlsClass );
+ },
+ languageDecorator: function ( $languageLink, language )
{
+ if ( !cxSourceSelector.isValidTarget( language
) ) {
+ $languageLink.addClass(
'cx-sourceselector-unavailable-target' );
+ }
+ },
+ compact: true
+ } );
};
/**
@@ -172,7 +221,7 @@
var $input = this.$sourceTitleInput;
this.searchTitles(
- this.$sourceLanguage.val(),
+ this.sourceLanguage(),
$input.val()
).done( function ( response ) {
$input.suggestions( 'suggestions', response[ 1 ] );
@@ -184,10 +233,12 @@
*/
CXSourceSelector.prototype.sourceLanguageChangeHandler = function () {
this.fillTargetLanguages();
+
if ( localStorage ) {
- localStorage.cxSourceLanguage =
this.$sourceLanguage.val();
- localStorage.cxTargetLanguage =
this.$targetLanguage.val();
+ localStorage.cxSourceLanguage = this.sourceLanguage();
+ localStorage.cxTargetLanguage = this.targetLanguage();
}
+
this.check();
};
@@ -196,7 +247,7 @@
*/
CXSourceSelector.prototype.targetLanguageChangeHandler = function () {
if ( localStorage ) {
- localStorage.cxTargetLanguage =
this.$targetLanguage.val();
+ localStorage.cxTargetLanguage = this.targetLanguage();
}
this.check();
};
@@ -205,7 +256,7 @@
* Handles enter keypress
*/
CXSourceSelector.prototype.enterKeyHandler = function ( e ) {
- var sourceLanguage = this.$sourceLanguage.val(),
+ var sourceLanguage = this.sourceLanguage(),
sourceTitle = this.$sourceTitleInput.val().trim(),
selector = this;
@@ -223,8 +274,8 @@
* Checks source and target inputs for errors.
*/
CXSourceSelector.prototype.check = function () {
- var sourceLanguage = this.$sourceLanguage.val(),
- targetLanguage = this.$targetLanguage.val(),
+ var sourceLanguage = this.sourceLanguage(),
+ targetLanguage = this.targetLanguage(),
sourceTitle = this.$sourceTitleInput.val().trim(),
targetTitle = this.$targetTitleInput.val().trim(),
selector = this;
@@ -384,7 +435,7 @@
var targetLanguage, equivalentTargetPageLink,
targetLanguageDisplay,
existingTargetTitleLink, message;
- targetLanguage = this.$targetLanguage.val();
+ targetLanguage = this.targetLanguage();
equivalentTargetPageLink = this.siteMapper
.getPageUrl( targetLanguage, equivalentTargetPage );
targetLanguageDisplay = $.uls.data.getAutonym( targetLanguage );
@@ -407,7 +458,7 @@
var targetLanguage, equivalentTargetPageLink,
targetLanguageDisplay, message;
- targetLanguage = this.$targetLanguage.val();
+ targetLanguage = this.targetLanguage();
equivalentTargetPageLink = this.siteMapper
.getPageUrl( targetLanguage, equivalentTargetPage );
targetLanguageDisplay = $.uls.data.getAutonym( targetLanguage );
@@ -425,7 +476,7 @@
CXSourceSelector.prototype.showTitleInUseError = function (
existingTargetTitle ) {
var targetLanguage, existingTargetTitleLink, message;
- targetLanguage = this.$targetLanguage.val();
+ targetLanguage = this.targetLanguage();
existingTargetTitleLink = this.siteMapper
.getPageUrl( targetLanguage, existingTargetTitle );
message = mw.message(
@@ -526,8 +577,8 @@
location.href = this.siteMapper.getCXUrl(
this.$sourceTitleInput.val(),
targetTitle,
- this.$sourceLanguage.val(),
- this.$targetLanguage.val()
+ this.sourceLanguage(),
+ this.targetLanguage()
);
};
@@ -540,7 +591,8 @@
$heading, $targetLanguageLabel,
$sourceInputs, $targetInputs,
$messageText,
- index;
+ sourceUlsOptions, targetUlsOptions,
+ cxSourceSelector = this;
this.$dialog = $( '<div>' )
.addClass( 'cx-sourceselector-dialog' )
@@ -552,22 +604,33 @@
$sourceLanguageLabel = $( '<label>' ).addClass(
'cx-sourceselector-dialog__language-label' )
.text( mw.msg(
'cx-sourceselector-dialog-source-language-label' ) );
- this.$sourceLanguage = $( '<select>' )
+ this.$sourceLanguage = $( '<div>' )
.addClass( 'cx-sourceselector-dialog__language' )
.text( $.uls.data.getAutonym( mw.config.get(
'wgContentLanguage' ) ) );
- for ( index in this.sourceLanguages ) {
- this.$sourceLanguage.append( $( '<option>' )
- .attr( 'value', this.sourceLanguages[ index ] )
- .text( $.uls.data.getAutonym(
this.sourceLanguages[ index ] ) )
- );
- }
+
+ this.$sourceLanguage.uls( {
+ languages: getAutonyms( this.sourceLanguages ),
+ onSelect: function ( language ) {
+ cxSourceSelector.$sourceLanguage
+ .prop( {
+ lang: language,
+ dir: $.uls.data.getDir(
language )
+ } )
+ .text( $.uls.data.getAutonym( language
) );
+
+ cxSourceSelector.sourceLanguageChangeHandler();
+ },
+ onReady: function () {
+ this.$menu.addClass(
'cx-sourceselector-uls-source' );
+ },
+ compact: true
+ } );
$targetLanguageLabel = $( '<label>' ).addClass(
'cx-sourceselector-dialog__language-label' )
.text( mw.msg(
'cx-sourceselector-dialog-target-language-label' ) );
- this.$targetLanguage = $( '<select>' )
+ this.$targetLanguage = $( '<div>' )
.addClass( 'cx-sourceselector-dialog__language' )
.text( $.uls.data.getAutonym( mw.config.get(
'wgContentLanguage' ) ) );
-
this.fillTargetLanguages();
this.$sourceTitleInput = $( '<input>' )
diff --git a/modules/source/styles/ext.cx.source.selector.less
b/modules/source/styles/ext.cx.source.selector.less
index 9573cfc..55724cc 100644
--- a/modules/source/styles/ext.cx.source.selector.less
+++ b/modules/source/styles/ext.cx.source.selector.less
@@ -51,6 +51,8 @@
font-size: medium;
height: 30px;
margin-top: 5px;
+ background: #efefef;
+ cursor: pointer;
}
.cx-sourceselector-dialog__title {
@@ -88,3 +90,7 @@
margin-left: 10px;
}
}
+
+.uls-language-list a.cx-sourceselector-unavailable-target {
+ color: #bbccff;
+}
--
To view, visit https://gerrit.wikimedia.org/r/174094
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I435a4c039a538c4391c4c9d19ea117e441c43d93
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Amire80 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
