diff options
Diffstat (limited to 'MLEB/Translate/resources/js/ext.translate.messagerenamedialog.js')
-rw-r--r-- | MLEB/Translate/resources/js/ext.translate.messagerenamedialog.js | 327 |
1 files changed, 327 insertions, 0 deletions
diff --git a/MLEB/Translate/resources/js/ext.translate.messagerenamedialog.js b/MLEB/Translate/resources/js/ext.translate.messagerenamedialog.js new file mode 100644 index 00000000..499e1541 --- /dev/null +++ b/MLEB/Translate/resources/js/ext.translate.messagerenamedialog.js @@ -0,0 +1,327 @@ +/** + * Dialog for displaying possible renamed messages. + * Note that methods are not safe to call before the dialog has initialized. + * + * @copyright See AUTHORS.txt + * @license GPL-2.0-or-later + */ + +'use strict'; + +mw.translate = mw.translate || {}; + +/** + * @class + * @extends OO.ui.ProcessDialog + * + * @constructor + * @param {Object} [config] Similar configuration as the OO.ui.ProcessDialog + * @param {Function} [onRenameSelect] Function to call when the rename button is pressed + */ +mw.translate.MessageRenameDialog = function ( config, onRenameSelect ) { + var errMsg; + + // HTML Elements + this.messageSearch = null; + this.searchButton = null; + this.panel = null; + this.form = null; + this.$notice = null; + + // Data properties + this.possibleRenames = null; + this.currentGroupId = null; + this.targetKey = null; + this.selectedMessage = null; + this.resetProperties(); + + if ( !onRenameSelect ) { + errMsg = 'Must provide the "onRenameSelect" callback function.'; + mw.log.error( errMsg ); + throw new Error( errMsg ); + } + this.onRenameSelect = onRenameSelect; + + // Parent constructor + mw.translate.MessageRenameDialog.super.call( this, config ); +}; + +/* Inheritance */ +OO.inheritClass( mw.translate.MessageRenameDialog, OO.ui.ProcessDialog ); + +/* Static Properties */ +mw.translate.MessageRenameDialog.static.name = 'MessageRenameDialog'; + +mw.translate.MessageRenameDialog.static.actions = [ + { + flags: [ 'primary', 'progressive' ], + label: mw.msg( 'translate-smg-rename-select' ), + action: 'select', + active: true + }, + { + flags: 'safe', + label: mw.msg( 'translate-smg-rename-cancel' ), + action: 'cancel' + } +]; + +/** + * @inheritdoc + */ +mw.translate.MessageRenameDialog.prototype.initialize = function () { + mw.translate.MessageRenameDialog.super.prototype.initialize.call( this ); + + this.messageSearch = new OO.ui.TextInputWidget( { + placeholder: mw.msg( 'translate-smg-rename-search' ) + } ); + + this.searchButton = new OO.ui.ButtonWidget( { + icon: 'search', + invisibleLabel: true + } ); + + this.panel = new OO.ui.PanelLayout( { + padded: true, + expanded: false + } ); + + this.form = new OO.ui.FormLayout( { + padded: true, + expanded: false, + items: [ + new OO.ui.ActionFieldLayout( this.messageSearch, this.searchButton, { + classes: [ 'smg-rename-msg-search' ] + } ) + ], + method: 'post' + } ); + + this.$notice = $( '<p>' ) + .addClass( 'smg-rename-notice hide' ); + + this.form.$element.append( this.$notice ); + this.panel.$element.append( this.form.$element ); + this.$body.append( this.panel.$element ); + + this.addEvents(); +}; + +mw.translate.MessageRenameDialog.prototype.addEvents = function () { + this.form.$element.on( 'click', '.smg-rename-list', this.selectMessage.bind( this ) ); + this.messageSearch.on( 'change', OO.ui.debounce( this.filterMessages.bind( this ), 300 ) ); +}; + +/** + * @inheritdoc + */ +mw.translate.MessageRenameDialog.prototype.getSetupProcess = function ( renameDialogData ) { + var dialogData = renameDialogData || {}; + return mw.translate.MessageRenameDialog.super.prototype.getSetupProcess.call( this, dialogData ) + .next( function () { + // Set up contents based on data + this.possibleRenames = dialogData.messages; + this.currentGroupId = dialogData.groupId; + this.targetKey = dialogData.targetKey; + this.selectedMessage = null; + + this.displayMessages( this.possibleRenames ); + }, this ); +}; + +/** + * @inheritdoc + */ +mw.translate.MessageRenameDialog.prototype.getActionProcess = function ( action ) { + if ( action === 'cancel' ) { + return new OO.ui.Process( function () { + this.close(); + this.emit( action ); + }, this ); + } else if ( action === 'select' ) { + if ( !this.selectedMessage ) { + return new OO.ui.Process( function () { + this.displayNotice( mw.msg( 'translate-smg-rename-select-err' ), 'error' ); + }, this ); + } + return mw.translate.MessageRenameDialog.super.prototype.getActionProcess.call( this, action ) + .next( this.rename.bind( this ) ) + .next( function () { + return this.close().closed; + }.bind( this ) ); + } + + return mw.translate.MessageRenameDialog.super.prototype.getActionProcess.call( this, action ); +}; + +/** + * @inheritdoc + */ +mw.translate.MessageRenameDialog.prototype.getTeardownProcess = function ( data ) { + return mw.translate.MessageRenameDialog.super.prototype.getTeardownProcess.call( this, data ) + .first( function () { + // Perform any cleanup as needed + this.clearMessages(); + this.messageSearch.setValue( '' ); + + this.resetProperties(); + }, this ); +}; + +/** + * Displays the given messages on the dialog box. + * + * @param {Array} messages + */ +mw.translate.MessageRenameDialog.prototype.displayMessages = function ( messages ) { + var i; + if ( !messages.length ) { + this.displayNotice( mw.msg( 'translate-smg-rename-no-msg' ), 'info' ); + return; + } + + for ( i = 0; i < messages.length; i++ ) { + this.displayMessage( messages[ i ] ); + } +}; + +/** + * Generates the HTML to display a single message + * + * @param {Object} message + */ +mw.translate.MessageRenameDialog.prototype.displayMessage = function ( message ) { + var $title, $content, $container; + + $title = $( '<div>' ).append( + $( '<a>' ).text( message.title ).addClass( 'smg-rename-msg-key' ) + .prop( 'href', message.link ) + .data( 'msg-key', message.key ), + $( '<span>' ).text( + mw.msg( 'percent', mw.language.convertNumber( ( message.similarity * 100 ).toFixed() ) ) + ).addClass( 'smg-rename-similarity' ) + ); + + $content = $( '<div>' ).text( message.content ).addClass( 'smg-rename-msg-content' ); + + $container = $( '<div>' ).addClass( 'smg-rename-list' ); + + $container.append( $title, $content ); + + this.form.$element.append( $container ); +}; + +/** + * Callback triggered when a message is selected. + * + * @param {Object} event + */ +mw.translate.MessageRenameDialog.prototype.selectMessage = function ( event ) { + var $target = $( event.currentTarget ); + this.selectedMessage = $target.find( '.smg-rename-msg-key' ).data( 'msgKey' ); + + this.form.$element.find( '.smg-rename-list' ).removeClass( 'smg-rename-selected' ); + $target.addClass( 'smg-rename-selected' ); + + this.hideNotice(); +}; + +/** + * Used to reset the state properties for the dialog box. + */ +mw.translate.MessageRenameDialog.prototype.resetProperties = function () { + this.possibleRenames = []; + this.currentGroupId = null; + this.targetKey = null; + this.selectedMessage = null; +}; + +/** + * Perform the actual rename + * + * @return {jQuery.Promise} Resolves after making call to the onRenameSelect function. + */ +mw.translate.MessageRenameDialog.prototype.rename = function () { + var deferred, promise, renameData; + deferred = $.Deferred(); + promise = deferred.promise(); + + renameData = { + groupId: this.currentGroupId, + targetKey: this.targetKey, + selectedKey: this.selectedMessage + }; + + this.onRenameSelect( renameData ).done( function () { + return deferred.resolve(); + } ).fail( function ( code, result ) { + if ( result.error ) { + if ( result.error.code === 'permissiondenied' ) { + return deferred.reject( new OO.ui.Error( result.error.info, + { recoverable: false } ) ); + } + + return deferred.reject( OO.ui.Error( result.error.info ) ); + } + } ); + + return promise; +}; + +/** + * Callback function triggered to handle the search. + * + * @param {Object} searchValue + */ +mw.translate.MessageRenameDialog.prototype.filterMessages = function ( searchValue ) { + var normalizedSearchVal = searchValue.toLowerCase(), filteredMessages = []; + + // if the dialog is closing, let's not do anything. + if ( this.isClosing() || !this.isVisible() ) { + return; + } + + filteredMessages = this.possibleRenames.filter( function ( message ) { + if ( message.key.toLowerCase().indexOf( normalizedSearchVal ) !== -1 ) { + return true; + } + + if ( message.content.toLowerCase().indexOf( normalizedSearchVal ) !== -1 ) { + return true; + } + return false; + } ); + + this.clearMessages(); + this.displayMessages( filteredMessages ); + this.updateSize(); +}; + +/** + * Method use to display a notice on the dialog box + * + * @param {string} msg + * @param {string} type + */ +mw.translate.MessageRenameDialog.prototype.displayNotice = function ( msg, type ) { + var possibleTypes = [ 'info', 'error', 'warning' ]; + this.$notice.removeClass( possibleTypes.join( ' ' ) ); + this.$notice.text( msg ).addClass( type ).removeClass( 'hide' ); + this.updateSize(); +}; + +/** + * Hide displayed notice. + */ +mw.translate.MessageRenameDialog.prototype.hideNotice = function () { + this.$notice.addClass( 'hide' ); + this.updateSize(); +}; + +/** + * Clears all messages from the DOM. + */ +mw.translate.MessageRenameDialog.prototype.clearMessages = function () { + this.form.$element.find( '.smg-rename-list' ).remove(); + this.hideNotice(); +}; |