diff --git a/languages/i18n/en.json b/languages/i18n/en.json index 893366c2713..3c2710dd00b 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -4311,7 +4311,6 @@ "mw-widgets-abandonedit-discard": "Discard edits", "mw-widgets-abandonedit-keep": "Continue editing", "mw-widgets-abandonedit-title": "Are you sure?", - "mw-widgets-copytextlayout-copy": "Copy", "mw-widgets-copytextlayout-copy-fail": "Failed to copy to clipboard.", "mw-widgets-copytextlayout-copy-success": "Copied to clipboard.", "mw-widgets-dateinput-no-date": "No date selected", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index 63f05e75cad..9cdb66e31bb 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -4564,7 +4564,6 @@ "mw-widgets-abandonedit-discard": "Text shown on the button which closes an editor and discards changes when the user confirms that they want to leave the editor.\n\nPreceded by the prompt {{msg-mw|mw-widgets-abandonedit}}.\n\nFollowed by the button {{msg-mw|mw-widgets-abandonedit-keep}}.", "mw-widgets-abandonedit-keep": "Text shown on the button which does not do anything when the user decides that they do not want to leave the editor.\n\nPreceded by the button {{msg-mw|mw-widgets-abandonedit-discard}}.", "mw-widgets-abandonedit-title": "Title of the dialog shown when the user tries to leave the editor without saving their changes.\n\nFollowed by the following buttons:\n* {{msg-mw|mw-widgets-abandonedit-discard}}\n* {{msg-mw|mw-widgets-abandonedit-keep}}\n{{Identical|Are you sure?}}", - "mw-widgets-copytextlayout-copy": "Label of button to copy text to clipboard.", "mw-widgets-copytextlayout-copy-fail": "Message shown when copying to clipboard failed.", "mw-widgets-copytextlayout-copy-success": "Message shown when copying to clipboard worked.", "mw-widgets-dateinput-no-date": "Label of a date input field when no date has been selected.", diff --git a/resources/Resources.php b/resources/Resources.php index 0cb243cd6b7..91fe38633e4 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -2478,9 +2478,7 @@ return [ 'mw.widgets.ComplexTitleInputWidget.js', 'mw.widgets.TitleOptionWidget.js', ], - 'styles' => [ - 'mw.widgets.CopyTextLayout.css', - ], + 'styles' => [], 'skinStyles' => [ 'default' => [ 'mw.widgets.TitleWidget.less', @@ -2503,7 +2501,6 @@ return [ 'blanknamespace', 'namespacesall', // CopyTextLayout - 'mw-widgets-copytextlayout-copy', 'mw-widgets-copytextlayout-copy-fail', 'mw-widgets-copytextlayout-copy-success', // TitleInputWidget @@ -2938,6 +2935,7 @@ return [ 'oojs-ui-widgets.icons', ], 'messages' => [ + 'ooui-copytextlayout-copy', 'ooui-item-remove', 'ooui-outline-control-move-down', 'ooui-outline-control-move-up', diff --git a/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.css b/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.css deleted file mode 100644 index f09128a0f0d..00000000000 --- a/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * MediaWiki Widgets – CopyTextLayout styles. - * - * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt - * @license The MIT License (MIT); see LICENSE.txt - */ - -.mw-widget-copyTextLayout > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field { - /* TODO: This should be upstreamed to OOUI */ - max-width: 50em; -} - -.mw-widget-copyTextLayout-multiline-button { - display: block; - max-width: 50em; - margin-top: 0.5em; - /* Float to right of inline help */ - float: right; -} diff --git a/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.js b/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.js index 28598c00ca4..762cb80b81b 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.js +++ b/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.js @@ -4,121 +4,45 @@ * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt * @license The MIT License (MIT); see LICENSE.txt */ -( function () { - /** - * An action field layout containing some readonly text and a button to copy - * it to the clipboard. - * - * @class - * @extends OO.ui.ActionFieldLayout - * - * @constructor - * @param {Object} [config] Configuration options - * @cfg {string} copyText Text to copy, can also be provided as textInput.value - * @cfg {Object} textInput Config for text input - * @cfg {Object} button Config for button - * @cfg {string} successMessage Success message, - * defaults to 'mw-widgets-copytextlayout-copy-success'. - * @cfg {string} failMessage Failure message, - * defaults to 'mw-widgets-copytextlayout-copy-fail'. - */ - mw.widgets.CopyTextLayout = function MwWidgetsCopyTextLayout( config ) { - var TextClass; - config = config || {}; +/** + * Extends CopyTextLayout with MediaWiki notifications + * + * @class + * @extends OO.ui.CopyTextLayout + * + * @constructor + * @param {Object} [config] Configuration options + * @cfg {string} successMessage Success message, + * defaults to 'mw-widgets-copytextlayout-copy-success'. + * @cfg {string} failMessage Failure message, + * defaults to 'mw-widgets-copytextlayout-copy-fail'. + */ +mw.widgets.CopyTextLayout = function MwWidgetsCopyTextLayout( config ) { + // Parent constructor + mw.widgets.CopyTextLayout.super.apply( this, arguments ); - // Properties - TextClass = config.multiline ? OO.ui.MultilineTextInputWidget : OO.ui.TextInputWidget; - this.textInput = new TextClass( $.extend( { - value: config.copyText, - readOnly: true - }, config.textInput ) ); - this.button = new OO.ui.ButtonWidget( $.extend( { - label: mw.msg( 'mw-widgets-copytextlayout-copy' ), - icon: 'copy' - }, config.button ) ); - this.successMessage = config.successMessage || mw.msg( 'mw-widgets-copytextlayout-copy-success' ); - this.failMessage = config.failMessage || mw.msg( 'mw-widgets-copytextlayout-copy-fail' ); + this.successMessage = config.successMessage || mw.msg( 'mw-widgets-copytextlayout-copy-success' ); + this.failMessage = config.failMessage || mw.msg( 'mw-widgets-copytextlayout-copy-fail' ); - // Parent constructor - mw.widgets.CopyTextLayout.super.call( this, this.textInput, this.button, config ); + this.connect( this, { copy: 'onMwCopy' } ); +}; - // HACK: Remove classes which connect widgets when using - // a multiline text input. TODO: This should be handled in OOUI. - if ( config.multiline ) { - this.$input.removeClass( 'oo-ui-actionFieldLayout-input' ); - this.$button - .removeClass( 'oo-ui-actionFieldLayout-button' ) - .addClass( 'mw-widget-copyTextLayout-multiline-button' ); - } +/* Inheritence */ - // Events - this.button.connect( this, { click: 'onButtonClick' } ); - this.textInput.$input.on( 'focus', this.onInputFocus.bind( this ) ); +OO.inheritClass( mw.widgets.CopyTextLayout, OO.ui.CopyTextLayout ); - this.$element.addClass( 'mw-widget-copyTextLayout' ); - }; +/* Methods */ - /* Inheritence */ - - OO.inheritClass( mw.widgets.CopyTextLayout, OO.ui.ActionFieldLayout ); - - /* Methods */ - - /** - * Handle button click events - * - * @fires copy - */ - mw.widgets.CopyTextLayout.prototype.onButtonClick = function () { - var copied; - - this.selectText(); - - try { - copied = document.execCommand( 'copy' ); - } catch ( e ) { - copied = false; - } - if ( copied ) { - mw.notify( this.successMessage ); - } else { - mw.notify( this.failMessage, { type: 'error' } ); - } - - this.emit( 'copy', copied ); - }; - - /** - * Handle text widget focus events - */ - mw.widgets.CopyTextLayout.prototype.onInputFocus = function () { - if ( !this.selecting ) { - this.selectText(); - } - }; - - /** - * Select the text to copy - */ - mw.widgets.CopyTextLayout.prototype.selectText = function () { - // Don't attempt to focus a hidden input (https://github.com/jquery/jquery/issues/4950, T312770) - // eslint-disable-next-line no-jquery/no-sizzle - if ( !this.textInput.$input.is( ':visible' ) ) { - return; - } - - var input = this.textInput.$input[ 0 ], - scrollTop = input.scrollTop, - scrollLeft = input.scrollLeft; - - this.selecting = true; - this.textInput.select(); - this.selecting = false; - - // Restore scroll position - input.scrollTop = scrollTop; - input.scrollLeft = scrollLeft; - }; - -}() ); +/** + * Handle copy events + * + * @param {boolean} copied + */ +mw.widgets.CopyTextLayout.prototype.onMwCopy = function ( copied ) { + if ( copied ) { + mw.notify( this.successMessage ); + } else { + mw.notify( this.failMessage, { type: 'error' } ); + } +};