Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mw.widgets.CopyTextLayout: Extend upstream OOUI version

Browse source 
Most of this widget was moved upstream, apart from the
notifications.

Change-Id: I22e556a649898f1b82d9d60caf9e23e063b17ff3
This commit is contained in:
Ed Sanders 2023-07-20 14:18:41 +01:00
parent 175563ded4
commit cb8459d61b
5 changed files with 37 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
languages/i18n/en.json
View file

@ -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",

1
languages/i18n/qqq.json
View file

@ -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.",

6
resources/Resources.php
View file

@ -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',

19
resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.css
View file

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

146
resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.js
View file

@ -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' } );
}
};