resources/src/mediawiki.Upload.Dialog.js

   1 ( function () {
   2
   3         /**
   4          * @classdesc Controls a {@link mw.Upload.BookletLayout BookletLayout}.
   5          *
   6          * ## Usage
   7          *
   8          * To use, set up a {@link OO.ui.WindowManager window manager} like for normal
   9          * dialogs:
  10          * ```
  11          * var uploadDialog = new mw.Upload.Dialog();
  12          * var windowManager = new OO.ui.WindowManager();
  13          * $( document.body ).append( windowManager.$element );
  14          * windowManager.addWindows( [ uploadDialog ] );
  15          * windowManager.openWindow( uploadDialog );
  16          * ```
  17          *
  18          * The dialog's closing promise can be used to get details of the upload.
  19          *
  20          * If you want to use a different {@link OO.ui.BookletLayout}, for example the
  21          * {@link mw.ForeignStructuredUpload.BookletLayout}, like in the case of the upload
  22          * interface in VisualEditor, you can pass it in through the `bookletClass` config option:
  23          * ```
  24          * var uploadDialog = new mw.Upload.Dialog( {
  25          *     bookletClass: mw.ForeignStructuredUpload.BookletLayout
  26          * } );
  27          * ```
  28          *
  29          * @class mw.Upload.Dialog
  30          * @extends OO.ui.ProcessDialog
  31          *
  32          * @constructor
  33          * @description Create an instance of `mw.Upload.Dialog`.
  34          * @param {Object} [config] Configuration options
  35          * @param {Function} [config.bookletClass=mw.Upload.BookletLayout] Booklet class to be
  36          *     used for the steps
  37          * @param {Object} [config.booklet] Booklet constructor configuration
  38          */
  39         mw.Upload.Dialog = function ( config ) {
  40                 // Config initialization
  41                 config = Object.assign( {
  42                         bookletClass: mw.Upload.BookletLayout
  43                 }, config );
  44
  45                 // Parent constructor
  46                 mw.Upload.Dialog.super.call( this, config );
  47
  48                 // Initialize
  49                 this.bookletClass = config.bookletClass;
  50                 this.bookletConfig = config.booklet;
  51         };
  52
  53         /* Setup */
  54
  55         OO.inheritClass( mw.Upload.Dialog, OO.ui.ProcessDialog );
  56
  57         /* Static Properties */
  58
  59         /**
  60          * @inheritdoc
  61          * @property {string} name
  62          */
  63         mw.Upload.Dialog.static.name = 'mwUploadDialog';
  64
  65         /**
  66          * @inheritdoc
  67          * @property {Function|string} title
  68          */
  69         mw.Upload.Dialog.static.title = mw.msg( 'upload-dialog-title' );
  70
  71         /**
  72          * @inheritdoc
  73          * @property {Object[]} actions
  74          */
  75         mw.Upload.Dialog.static.actions = [
  76                 {
  77                         flags: 'safe',
  78                         action: 'cancel',
  79                         label: mw.msg( 'upload-dialog-button-cancel' ),
  80                         modes: [ 'upload', 'insert' ]
  81                 },
  82                 {
  83                         flags: 'safe',
  84                         action: 'cancelupload',
  85                         label: mw.msg( 'upload-dialog-button-back' ),
  86                         modes: [ 'info' ]
  87                 },
  88                 {
  89                         flags: [ 'primary', 'progressive' ],
  90                         label: mw.msg( 'upload-dialog-button-done' ),
  91                         action: 'insert',
  92                         modes: 'insert'
  93                 },
  94                 {
  95                         flags: [ 'primary', 'progressive' ],
  96                         label: mw.msg( 'upload-dialog-button-save' ),
  97                         action: 'save',
  98                         modes: 'info'
  99                 },
 100                 {
 101                         flags: [ 'primary', 'progressive' ],
 102                         label: mw.msg( 'upload-dialog-button-upload' ),
 103                         action: 'upload',
 104                         modes: 'upload'
 105                 }
 106         ];
 107
 108         /* Methods */
 109
 110         /**
 111          * @ignore
 112          * @inheritdoc
 113          */
 114         mw.Upload.Dialog.prototype.initialize = function () {
 115                 // Parent method
 116                 mw.Upload.Dialog.super.prototype.initialize.call( this );
 117
 118                 this.uploadBooklet = this.createUploadBooklet();
 119                 this.uploadBooklet.connect( this, {
 120                         set: 'onUploadBookletSet',
 121                         uploadValid: 'onUploadValid',
 122                         infoValid: 'onInfoValid'
 123                 } );
 124
 125                 this.$body.append( this.uploadBooklet.$element );
 126         };
 127
 128         /**
 129          * Create an upload booklet.
 130          *
 131          * @protected
 132          * @return {mw.Upload.BookletLayout} An upload booklet
 133          */
 134         mw.Upload.Dialog.prototype.createUploadBooklet = function () {
 135                 // eslint-disable-next-line new-cap
 136                 return new this.bookletClass( Object.assign( {
 137                         $overlay: this.$overlay
 138                 }, this.bookletConfig ) );
 139         };
 140
 141         /**
 142          * @ignore
 143          * @inheritdoc
 144          */
 145         mw.Upload.Dialog.prototype.getBodyHeight = function () {
 146                 return 600;
 147         };
 148
 149         /**
 150          * Handle panelNameSet events from the upload booklet.
 151          *
 152          * @protected
 153          * @param {OO.ui.PageLayout} page Current page
 154          */
 155         mw.Upload.Dialog.prototype.onUploadBookletSet = function ( page ) {
 156                 this.actions.setMode( page.getName() );
 157                 this.actions.setAbilities( { upload: false, save: false } );
 158         };
 159
 160         /**
 161          * Handle uploadValid events.
 162          *
 163          * {@link OO.ui.ActionSet#setAbilities Sets abilities}
 164          * for the dialog accordingly.
 165          *
 166          * @protected
 167          * @param {boolean} isValid The panel is complete and valid
 168          */
 169         mw.Upload.Dialog.prototype.onUploadValid = function ( isValid ) {
 170                 this.actions.setAbilities( { upload: isValid } );
 171         };
 172
 173         /**
 174          * Handle infoValid events.
 175          *
 176          * {@link OO.ui.ActionSet#setAbilities Sets abilities}
 177          * for the dialog accordingly.
 178          *
 179          * @protected
 180          * @param {boolean} isValid The panel is complete and valid
 181          */
 182         mw.Upload.Dialog.prototype.onInfoValid = function ( isValid ) {
 183                 this.actions.setAbilities( { save: isValid } );
 184         };
 185
 186         /**
 187          * @ignore
 188          * @inheritdoc
 189          */
 190         mw.Upload.Dialog.prototype.getSetupProcess = function ( data ) {
 191                 return mw.Upload.Dialog.super.prototype.getSetupProcess.call( this, data )
 192                         .next( () => this.uploadBooklet.initialize() );
 193         };
 194
 195         /**
 196          * @ignore
 197          * @inheritdoc
 198          */
 199         mw.Upload.Dialog.prototype.getActionProcess = function ( action ) {
 200                 if ( action === 'upload' ) {
 201                         return new OO.ui.Process( this.uploadBooklet.uploadFile() );
 202                 }
 203                 if ( action === 'save' ) {
 204                         return new OO.ui.Process( this.uploadBooklet.saveFile() );
 205                 }
 206                 if ( action === 'insert' ) {
 207                         return new OO.ui.Process( () => {
 208                                 this.close( this.upload );
 209                         } );
 210                 }
 211                 if ( action === 'cancel' ) {
 212                         return new OO.ui.Process( this.close().closed );
 213                 }
 214                 if ( action === 'cancelupload' ) {
 215                         return new OO.ui.Process( this.uploadBooklet.initialize() );
 216                 }
 217
 218                 return mw.Upload.Dialog.super.prototype.getActionProcess.call( this, action );
 219         };
 220
 221         /**
 222          * @ignore
 223          * @inheritdoc
 224          */
 225         mw.Upload.Dialog.prototype.getTeardownProcess = function ( data ) {
 226                 return mw.Upload.Dialog.super.prototype.getTeardownProcess.call( this, data )
 227                         .next( () => {
 228                                 this.uploadBooklet.clear();
 229                         } );
 230         };
 231 }() );