CopyTextLayout: Support multiline text

Change-Id: I9049f5a1c0d88680fc4a174e390dd08e27c0eee2

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.css b/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.css
index b336fa2..f09128a 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.css
+++ b/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.css
@@ -9,3 +9,11 @@
        /* 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 48c14b6..65e7eb7 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.js
@@ -24,10 +24,12 @@
         *  defaults to 'mw-widgets-copytextlayout-copy-fail'.
         */
        mw.widgets.CopyTextLayout = function MwWidgetsCopyTextLayout( config ) {
+               var TextClass;
                config = config || {};
 
                // Properties
-               this.textInput = new OO.ui.TextInputWidget( $.extend( {
+               TextClass = config.multiline ? OO.ui.MultilineTextInputWidget : OO.ui.TextInputWidget;
+               this.textInput = new TextClass( $.extend( {
                        value: config.copyText,
                        readOnly: true
                }, config.textInput ) );
@@ -41,6 +43,15 @@
                // Parent constructor
                mw.widgets.CopyTextLayout.super.call( this, this.textInput, this.button, config );
 
+               // 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' );
+               }
+
                // Events
                this.button.connect( this, { click: 'onButtonClick' } );
                this.textInput.$input.on( 'click', this.onInputClick.bind( this ) );