Santhosh has uploaded a new change for review.
https://gerrit.wikimedia.org/r/81180
Change subject: Make the cancel and apply button applicable for all modules
......................................................................
Make the cancel and apply button applicable for all modules
If a user do changes for moduleA, does not save or cancel, goto
moduleB, do some changes, move to other modules, and finally press
apply, all changes should get saved.
Similarly if user cancel all changes should get cancelled.
This required moving the cancel and apply button outside of modules
and managed by the language settings framework.
Modules get mw.uls.settings.apply or mw.uls.settings.cancel triggers
to do whatever they want to do on apply or save.
Includes some refactoring related to this.
Bug: 53256
Change-Id: I7d773d33a980a78604b36e39bf96a5686870124e
---
M resources/css/ext.uls.languagesettings.css
M resources/js/ext.uls.displaysettings.js
M resources/js/ext.uls.inputsettings.js
M resources/js/ext.uls.languagesettings.js
4 files changed, 43 insertions(+), 62 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UniversalLanguageSelector
refs/changes/80/81180/1
diff --git a/resources/css/ext.uls.languagesettings.css
b/resources/css/ext.uls.languagesettings.css
index 7c5e61f..b7a1b94 100644
--- a/resources/css/ext.uls.languagesettings.css
+++ b/resources/css/ext.uls.languagesettings.css
@@ -92,7 +92,7 @@
background-color: #F5F5F5;
}
-#languagesettings-settings-panel .language-settings-buttons {
+.language-settings-buttons {
border-top: 1px solid #F0F0F0;
margin-top: 25px;
padding: 15px;
diff --git a/resources/js/ext.uls.displaysettings.js
b/resources/js/ext.uls.displaysettings.js
index b368044..544da85 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -78,19 +78,9 @@
+ '</div>' // End font selectors
- + '</div>' // End font settings section
+ + '</div>'; // End font settings section
- // Separator
- + '<div class="row"></div>'
- // Apply and Cancel buttons
- + '<div class="row language-settings-buttons">'
- + '<div class="eleven columns">'
- + '<button class="button uls-display-settings-cancel"
data-i18n="ext-uls-language-settings-cancel"></button>'
- + '<button class="button active blue"
id="uls-displaysettings-apply" data-i18n="ext-uls-language-settings-apply"
disabled></button>'
- + '</div>'
- + '</div>'
- + '</div>';
function DisplaySettings( $parent ) {
this.name = $.i18n( 'ext-uls-display-settings-title-short' );
@@ -451,8 +441,7 @@
* i18n this settings panel
*/
i18n: function () {
- this.$template.i18n();
-
+ this.$parent.i18n();
this.$template.find( '#ui-font-selector-label strong' )
.text( $.i18n( 'ext-uls-webfonts-select-for',
$.uls.data.getAutonym( this.uiLanguage ) ) );
this.$template.find( '#content-font-selector-label
strong' )
@@ -484,11 +473,11 @@
*/
markDirty: function () {
this.dirty = true;
- this.$template.find( '#uls-displaysettings-apply'
).removeAttr( 'disabled' );
+ this.$parent.$window.find( 'button.uls-settings-apply'
).removeAttr( 'disabled' );
},
disableApplyButton: function () {
- this.$template.find( '#uls-displaysettings-apply'
).prop( 'disabled', true );
+ this.$parent.$window.find( 'button.uls-settings-apply'
).prop( 'disabled', true );
},
/**
@@ -501,15 +490,6 @@
$tabButtons = displaySettings.$template.find(
'.uls-display-settings-tab-switcher button' );
// TODO all these repeated selectors can be placed in
object constructor.
-
- displaySettings.$template.find(
'#uls-displaysettings-apply' ).on( 'click', function () {
- displaySettings.apply();
- } );
-
- displaySettings.$template.find(
'button.uls-display-settings-cancel' ).on( 'click', function () {
- displaySettings.cancel();
- displaySettings.close();
- } );
$uiFontSelector.on( 'change', function () {
displaySettings.markDirty();
@@ -550,7 +530,6 @@
} );
- mw.hook( 'mw.uls.settings.cancel' ).add( $.proxy(
this.cancel, this ) );
},
/**
@@ -623,6 +602,7 @@
*/
cancel: function () {
if ( !this.dirty ) {
+ this.close();
return;
}
// Reload preferences
@@ -630,6 +610,7 @@
// Restore content and UI language
this.uiLanguage = this.getUILanguage();
this.contentLanguage = this.getContentLanguage();
+ this.close();
}
};
diff --git a/resources/js/ext.uls.inputsettings.js
b/resources/js/ext.uls.inputsettings.js
index 81bafbc..026f749 100644
--- a/resources/js/ext.uls.inputsettings.js
+++ b/resources/js/ext.uls.inputsettings.js
@@ -53,18 +53,6 @@
+ '<div class="six columns button uls-input-settings-toggle">'
+ '<button class="active green button
uls-input-toggle-button"></button>'
+ '</div>'
- + '</div>'
-
- // Separator
- + '<div class="row"></div>'
-
- // Apply and Cancel buttons
- + '<div class="row language-settings-buttons">'
- + '<div class="eleven columns">'
- + '<button class="button uls-input-settings-cancel"
data-i18n="ext-uls-language-settings-cancel"></button>'
- + '<button class="active blue button uls-input-settings-apply"
data-i18n="ext-uls-language-settings-apply" disabled></button>'
- + '</div>'
- + '</div>'
+ '</div>';
function InputSettings( $parent ) {
@@ -103,8 +91,7 @@
this.prepareLanguages();
this.prepareToggleButton();
- this.$template.i18n();
- this.disableApplyButton();
+ this.$parent.i18n();
$( 'body' ).data( 'webfonts' ).refresh();
this.listen();
},
@@ -115,11 +102,11 @@
*/
markDirty: function () {
this.dirty = true;
- this.$template.find( 'button.uls-input-settings-apply'
).prop( 'disabled', false );
+ this.$parent.$window.find( 'button.uls-settings-apply'
).prop( 'disabled', false );
},
disableApplyButton: function () {
- this.$template.find( 'button.uls-input-settings-apply'
).prop( 'disabled', true );
+ this.$parent.$window.find( 'button.uls-settings-apply'
).prop( 'disabled', true );
},
prepareInputmethods: function ( language ) {
@@ -446,16 +433,6 @@
$imeListContainer = this.$template.find(
'.uls-input-settings-inputmethods-list' );
- // Apply and close buttons
- inputSettings.$template.find(
'button.uls-input-settings-apply' ).on( 'click', function () {
- inputSettings.apply();
- } );
-
- inputSettings.$template.find(
'button.uls-input-settings-cancel' ).on( 'click', function () {
- inputSettings.cancel();
- inputSettings.close();
- } );
-
$imeListContainer.on( 'change',
'input:radio[name=ime]:checked', function () {
inputSettings.markDirty();
$.ime.preferences.setIM( $( this ).val() );
@@ -472,7 +449,6 @@
}
} );
- mw.hook( 'mw.uls.settings.cancel' ).add( $.proxy(
this.cancel, this ) );
},
/**
@@ -564,6 +540,7 @@
*/
cancel: function () {
if ( !this.dirty ) {
+ this.close();
return;
}
// Reload preferences
@@ -576,6 +553,7 @@
} else {
mw.ime.disable();
}
+ this.close();
}
};
diff --git a/resources/js/ext.uls.languagesettings.js
b/resources/js/ext.uls.languagesettings.js
index 02bfafb..c71a4b0 100644
--- a/resources/js/ext.uls.languagesettings.js
+++ b/resources/js/ext.uls.languagesettings.js
@@ -20,7 +20,7 @@
( function ( $, mw ) {
'use strict';
- var closeRow, settingsMenu, settingsPanel, windowTemplate, panelsRow;
+ var closeRow, settingsMenu, settingsPanel, windowTemplate, panelsRow,
buttonsRow;
closeRow = '<div class="row">' +
'<div class="uls-language-settings-close-block eight columns
offset-by-four"><span id="languagesettings-close"
class="icon-close"></span></div>' +
@@ -32,9 +32,19 @@
'</div>';
settingsPanel = '<div id="languagesettings-settings-panel" class="eight
columns">' +
'</div>';
+ buttonsRow = '<div class="row"></div>' +
+ // Apply and Cancel buttons
+ '<div class="row language-settings-buttons">' +
+ '<div class="eleven columns">' +
+ '<button class="button uls-settings-cancel"
data-i18n="ext-uls-language-settings-cancel"></button>' +
+ '<button class="button active blue uls-settings-apply"
data-i18n="ext-uls-language-settings-apply" disabled></button>' +
+ '</div>' +
+ '</div>' +
+ '</div>';
panelsRow = '<div class="row" id="languagesettings-panels">' +
settingsMenu +
settingsPanel +
+ buttonsRow +
'</div>';
windowTemplate = '<div style="display: block;"
id="language-settings-dialog" class="grid uls-menu uls-wide">' +
closeRow +
@@ -66,9 +76,13 @@
// Register all event listeners to the ULS language settings
here.
listen: function () {
this.$element.on( 'click', $.proxy( this.click, this )
);
- this.$window.find( '#languagesettings-close' )
- .on( 'click', $.proxy( this.close, this ) );
+ this.$window.find( '#languagesettings-close' )
+ .on( 'click', $.proxy( mw.hook(
'mw.uls.settings.cancel' ).fire, this ) );
+ this.$window.find( 'button.uls-settings-cancel' )
+ .on( 'click', $.proxy( mw.hook(
'mw.uls.settings.cancel' ).fire, this ) );
+ this.$window.find( 'button.uls-settings-apply' )
+ .on( 'click', $.proxy( mw.hook(
'mw.uls.settings.apply' ).fire, this ) );
// Hide the window when clicked outside
$( 'html' ).click( $.proxy( this.hide, this ) );
@@ -95,17 +109,18 @@
}
// Call render function on the current
setting module.
- languageSettings.renderModule(
moduleName, defaultModule === moduleName );
+ languageSettings.initModule(
moduleName, defaultModule === moduleName );
}
} );
},
/**
+ * Initialize the module.
* Render the link and settings area for a language setting
module.
- * @param moduleName String Name of the setting module
- * @param active boolean Make this module active and show by
default
+ * @param {string} moduleName Name of the setting module
+ * @param {boolean} active boolean Make this module active and
show by default
*/
- renderModule: function ( moduleName, active ) {
+ initModule: function ( moduleName, active ) {
var $settingsTitle, $settingsText, $settingsLink,
languageSettings = this,
module = new
$.fn.languagesettings.modules[moduleName]( languageSettings ),
@@ -143,6 +158,10 @@
$settingsLink.addClass( 'active' );
}
this.modules[moduleName] = module;
+
+ // register cancel and apply hooks
+ mw.hook( 'mw.uls.settings.cancel' ).add( $.proxy(
module.cancel, module ) )
+ mw.hook( 'mw.uls.settings.apply' ).add( $.proxy(
module.apply, module ) );
},
position: function () {
@@ -160,6 +179,10 @@
this.$window.scrollIntoView();
},
+ i18n: function () {
+ this.$window.i18n();
+ },
+
show: function () {
if ( !this.initialized ) {
this.render();
@@ -167,7 +190,7 @@
}
// close model windows close, if they hide on page click
$( 'html' ).click();
- this.$window.i18n();
+ this.i18n();
this.shown = true;
this.$window.show();
@@ -217,7 +240,6 @@
this.options.onClose();
}
- mw.hook( 'mw.uls.settings.cancel' ).fire();
},
click: function ( e ) {
--
To view, visit https://gerrit.wikimedia.org/r/81180
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7d773d33a980a78604b36e39bf96a5686870124e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UniversalLanguageSelector
Gerrit-Branch: master
Gerrit-Owner: Santhosh <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
