resources/src/mediawiki.widgets/mw.widgets.CopyTextLayout.js

   1 /*!
   2  * MediaWiki Widgets - CopyTextLayout class.
   3  *
   4  * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7 ( function () {
   8
   9         /**
  10          * An action field layout containing some readonly text and a button to copy
  11          * it to the clipboard.
  12          *
  13          * @class
  14          * @extends OO.ui.ActionFieldLayout
  15          *
  16          * @constructor
  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'.
  25          */
  26         mw.widgets.CopyTextLayout = function MwWidgetsCopyTextLayout( config ) {
  27                 var TextClass;
  28                 config = config || {};
  29
  30                 // Properties
  31                 TextClass = config.multiline ? OO.ui.MultilineTextInputWidget : OO.ui.TextInputWidget;
  32                 this.textInput = new TextClass( $.extend( {
  33                         value: config.copyText,
  34                         readOnly: true
  35                 }, config.textInput ) );
  36                 this.button = new OO.ui.ButtonWidget( $.extend( {
  37                         label: mw.msg( 'mw-widgets-copytextlayout-copy' ),
  38                         icon: 'articles'
  39                 }, config.button ) );
  40                 this.successMessage = config.successMessage || mw.msg( 'mw-widgets-copytextlayout-copy-success' );
  41                 this.failMessage = config.failMessage || mw.msg( 'mw-widgets-copytextlayout-copy-fail' );
  42
  43                 // Parent constructor
  44                 mw.widgets.CopyTextLayout.super.call( this, this.textInput, this.button, config );
  45
  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' );
  50                         this.$button
  51                                 .removeClass( 'oo-ui-actionFieldLayout-button' )
  52                                 .addClass( 'mw-widget-copyTextLayout-multiline-button' );
  53                 }
  54
  55                 // Events
  56                 this.button.connect( this, { click: 'onButtonClick' } );
  57                 this.textInput.$input.on( 'click', this.onInputClick.bind( this ) );
  58
  59                 this.$element.addClass( 'mw-widget-copyTextLayout' );
  60         };
  61
  62         /* Inheritence */
  63
  64         OO.inheritClass( mw.widgets.CopyTextLayout, OO.ui.ActionFieldLayout );
  65
  66         /* Methods */
  67
  68         /**
  69          * Handle button click events
  70          *
  71          * @fires copy
  72          */
  73         mw.widgets.CopyTextLayout.prototype.onButtonClick = function () {
  74                 var copied;
  75
  76                 this.selectText();
  77
  78                 try {
  79                         copied = document.execCommand( 'copy' );
  80                 } catch ( e ) {
  81                         copied = false;
  82                 }
  83                 if ( copied ) {
  84                         mw.notify( this.successMessage );
  85                 } else {
  86                         mw.notify( this.failMessage, { type: 'error' } );
  87                 }
  88
  89                 this.emit( 'copy', copied );
  90         };
  91
  92         /**
  93          * Handle button click events
  94          */
  95         mw.widgets.CopyTextLayout.prototype.onInputClick = function () {
  96                 this.selectText();
  97         };
  98
  99         /**
 100          * Select the text to copy
 101          */
 102         mw.widgets.CopyTextLayout.prototype.selectText = function () {
 103                 var input = this.textInput.$input[ 0 ],
 104                         scrollTop = input.scrollTop,
 105                         scrollLeft = input.scrollLeft;
 106
 107                 this.textInput.select();
 108
 109                 // Restore scroll position
 110                 input.scrollTop = scrollTop;
 111                 input.scrollLeft = scrollLeft;
 112         };
 113
 114 }() );