2 * MediaWiki Widgets - CopyTextLayout class.
4 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
10 * An action field layout containing some readonly text and a button to copy
11 * it to the clipboard.
14 * @extends OO.ui.ActionFieldLayout
17 * @param {Object} [config] Configuration options
18 * @cfg {string} copyText Text to copy, can also be provided as textInput.value
19 * @cfg {Object} textInput Config for text input
20 * @cfg {Object} button Config for button
21 * @cfg {string} successMessage Success message,
22 * defaults to 'mw-widgets-copytextlayout-copy-success'.
23 * @cfg {string} failMessage Failure message,
24 * defaults to 'mw-widgets-copytextlayout-copy-fail'.
26 mw
.widgets
.CopyTextLayout
= function MwWidgetsCopyTextLayout( config
) {
28 config
= config
|| {};
31 TextClass
= config
.multiline
? OO
.ui
.MultilineTextInputWidget
: OO
.ui
.TextInputWidget
;
32 this.textInput
= new TextClass( $.extend( {
33 value
: config
.copyText
,
35 }, config
.textInput
) );
36 this.button
= new OO
.ui
.ButtonWidget( $.extend( {
37 label
: mw
.msg( 'mw-widgets-copytextlayout-copy' ),
40 this.successMessage
= config
.successMessage
|| mw
.msg( 'mw-widgets-copytextlayout-copy-success' );
41 this.failMessage
= config
.failMessage
|| mw
.msg( 'mw-widgets-copytextlayout-copy-fail' );
44 mw
.widgets
.CopyTextLayout
.super.call( this, this.textInput
, this.button
, config
);
46 // HACK: Remove classes which connect widgets when using
47 // a multiline text input. TODO: This should be handled in OOUI.
48 if ( config
.multiline
) {
49 this.$input
.removeClass( 'oo-ui-actionFieldLayout-input' );
51 .removeClass( 'oo-ui-actionFieldLayout-button' )
52 .addClass( 'mw-widget-copyTextLayout-multiline-button' );
56 this.button
.connect( this, { click
: 'onButtonClick' } );
57 this.textInput
.$input
.on( 'focus', this.onInputFocus
.bind( this ) );
59 this.$element
.addClass( 'mw-widget-copyTextLayout' );
64 OO
.inheritClass( mw
.widgets
.CopyTextLayout
, OO
.ui
.ActionFieldLayout
);
69 * Handle button click events
73 mw
.widgets
.CopyTextLayout
.prototype.onButtonClick = function () {
79 copied
= document
.execCommand( 'copy' );
84 mw
.notify( this.successMessage
);
86 mw
.notify( this.failMessage
, { type
: 'error' } );
89 this.emit( 'copy', copied
);
93 * Handle text widget focus events
95 mw
.widgets
.CopyTextLayout
.prototype.onInputFocus = function () {
96 if ( !this.selecting
) {
102 * Select the text to copy
104 mw
.widgets
.CopyTextLayout
.prototype.selectText = function () {
105 var input
= this.textInput
.$input
[ 0 ],
106 scrollTop
= input
.scrollTop
,
107 scrollLeft
= input
.scrollLeft
;
109 this.selecting
= true;
110 this.textInput
.select();
111 this.selecting
= false;
113 // Restore scroll position
114 input
.scrollTop
= scrollTop
;
115 input
.scrollLeft
= scrollLeft
;