bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the cancel and apply button applicable for all modules

Browse Source 
If a user does changes in module A, does not save or cancel,
goes to module B, does some changes, moves to other modules,
and finally presses Apply, all changes should get saved.

Similarly, if a user cancels, 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
This commit is contained in:
Santhosh Thottingal
2013-08-27 11:56:58 +05:30
committed by Amir E. Aharoni
parent 375c676fba
commit 3af403fee5
9 changed files with 51 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/css/ext.uls.languagesettings.css
View File

@@ -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;

31
resources/js/ext.uls.displaysettings.js
View File

@@ -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' );
@@ -452,8 +442,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' )
@@ -485,11 +474,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 );
},
/**
@@ -503,15 +492,6 @@
// 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();
mw.webfonts.preferences.setFont( displaySettings.uiLanguage,
@@ -551,7 +531,6 @@
} );
mw.hook( 'mw.uls.settings.cancel' ).add( $.proxy( this.cancel, this ) );
},
/**
@@ -624,6 +603,7 @@
*/
cancel: function () {
if ( !this.dirty ) {
this.close();
return;
}
// Reload preferences
@@ -637,6 +617,7 @@
// Restore content and UI language
this.uiLanguage = this.getUILanguage();
this.contentLanguage = this.getContentLanguage();
this.close();
}
};

36
resources/js/ext.uls.inputsettings.js
View File

@@ -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 ) {
@@ -76,6 +64,8 @@
this.$imes = null;
this.$parent = $parent;
this.savedRegistry = $.extend( true, {}, $.ime.preferences.registry );
// ime system is lazy loaded, make sure it is initialized
mw.ime.init();
}
InputSettings.prototype = {
@@ -92,8 +82,6 @@
this.$imes = $( 'body' ).data( 'ime' );
this.$parent.$settingsPanel.append( this.$template );
$enabledOnly = this.$template.find( '.enabled-only' );
// ime system is lazy loaded, make sure it is initialized
mw.ime.init();
if ( $.ime.preferences.isEnabled() ) {
$enabledOnly.removeClass( 'hide' );
} else {
@@ -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();
}
};

40
resources/js/ext.uls.languagesettings.js
View File

@@ -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,11 @@
// 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, 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 +107,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 ),
@@ -132,7 +145,7 @@
var $this = $( this );
$this.data( 'module' ).render();
// re-position the window and scroll in to view if required.
// Re-position the window and scroll in to view if required.
languageSettings.position();
$settingsMenuItems.find( '.menu-section' ).removeClass( 'active' );
$this.addClass( 'active' );
@@ -143,6 +156,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 +177,10 @@
this.$window.scrollIntoView();
},
i18n: function () {
this.$window.i18n();
},
show: function () {
if ( !this.initialized ) {
this.render();
@@ -167,7 +188,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 +238,6 @@
this.options.onClose();
}
mw.hook( 'mw.uls.settings.cancel' ).fire();
},
click: function ( e ) {