resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js

   1 /*global moment */
   2 ( function ( $, mw ) {
   3
   4         /**
   5          * mw.ForeignStructuredUpload.BookletLayout encapsulates the process
   6          * of uploading a file to MediaWiki using the mw.ForeignStructuredUpload model.
   7          *
   8          *     var uploadDialog = new mw.Upload.Dialog( {
   9          *         bookletClass: mw.ForeignStructuredUpload.BookletLayout,
  10          *         booklet: {
  11          *             target: 'local'
  12          *         }
  13          *     } );
  14          *     var windowManager = new OO.ui.WindowManager();
  15          *     $( 'body' ).append( windowManager.$element );
  16          *     windowManager.addWindows( [ uploadDialog ] );
  17          *
  18          * @class mw.ForeignStructuredUpload.BookletLayout
  19          * @uses mw.ForeignStructuredUpload
  20          * @extends mw.Upload.BookletLayout
  21          * @cfg {string} [target] Used to choose the target repository.
  22          *     If nothing is passed, the {@link mw.ForeignUpload#property-target default} is used.
  23          */
  24         mw.ForeignStructuredUpload.BookletLayout = function ( config ) {
  25                 config = config || {};
  26                 // Parent constructor
  27                 mw.ForeignStructuredUpload.BookletLayout.parent.call( this, config );
  28
  29                 this.target = config.target;
  30         };
  31
  32         /* Setup */
  33
  34         OO.inheritClass( mw.ForeignStructuredUpload.BookletLayout, mw.Upload.BookletLayout );
  35
  36         /* Uploading */
  37
  38         /**
  39          * @inheritdoc
  40          */
  41         mw.ForeignStructuredUpload.BookletLayout.prototype.initialize = function () {
  42                 var deferred = $.Deferred();
  43                 mw.ForeignStructuredUpload.BookletLayout.parent.prototype.initialize.call( this )
  44                         .done( function () {
  45                                 // Point the CategorySelector to the right wiki
  46                                 this.upload.apiPromise.done( function ( api ) {
  47                                         // If this is a ForeignApi, it will have a apiUrl, otherwise we don't need to do anything
  48                                         if ( api.apiUrl ) {
  49                                                 // Can't reuse the same object, CategorySelector calls #abort on its mw.Api instance
  50                                                 this.categoriesWidget.api = new mw.ForeignApi( api.apiUrl );
  51                                         }
  52                                         deferred.resolve();
  53                                 }.bind( this ) );
  54                         }.bind( this ) );
  55                 return deferred.promise();
  56         };
  57
  58         /**
  59          * Returns a {@link mw.ForeignStructuredUpload mw.ForeignStructuredUpload}
  60          * with the {@link #cfg-target target} specified in config.
  61          *
  62          * @protected
  63          * @return {mw.Upload}
  64          */
  65         mw.ForeignStructuredUpload.BookletLayout.prototype.createUpload = function () {
  66                 return new mw.ForeignStructuredUpload( this.target );
  67         };
  68
  69         /* Form renderers */
  70
  71         /**
  72          * @inheritdoc
  73          */
  74         mw.ForeignStructuredUpload.BookletLayout.prototype.renderUploadForm = function () {
  75                 var fieldset, $ownWorkMessage, $notOwnWorkMessage,
  76                         ownWorkMessage, notOwnWorkMessage, notOwnWorkLocal,
  77                         validTargets = mw.config.get( 'wgForeignUploadTargets' ),
  78                         target = this.target || validTargets[ 0 ] || 'local',
  79                         layout = this;
  80
  81                 // foreign-structured-upload-form-label-own-work-message-local
  82                 // foreign-structured-upload-form-label-own-work-message-shared
  83                 ownWorkMessage = mw.message( 'foreign-structured-upload-form-label-own-work-message-' + target );
  84                 // foreign-structured-upload-form-label-not-own-work-message-local
  85                 // foreign-structured-upload-form-label-not-own-work-message-shared
  86                 notOwnWorkMessage = mw.message( 'foreign-structured-upload-form-label-not-own-work-message-' + target );
  87                 // foreign-structured-upload-form-label-not-own-work-local-local
  88                 // foreign-structured-upload-form-label-not-own-work-local-shared
  89                 notOwnWorkLocal = mw.message( 'foreign-structured-upload-form-label-not-own-work-local-' + target );
  90
  91                 if ( !ownWorkMessage.exists() ) {
  92                         ownWorkMessage = mw.message( 'foreign-structured-upload-form-label-own-work-message-default' );
  93                 }
  94                 if ( !notOwnWorkMessage.exists() ) {
  95                         notOwnWorkMessage = mw.message( 'foreign-structured-upload-form-label-not-own-work-message-default' );
  96                 }
  97                 if ( !notOwnWorkLocal.exists() ) {
  98                         notOwnWorkLocal = mw.message( 'foreign-structured-upload-form-label-not-own-work-local-default' );
  99                 }
 100
 101                 $ownWorkMessage = $( '<p>' ).html( ownWorkMessage.parse() )
 102                         .addClass( 'mw-foreignStructuredUpload-bookletLayout-license' );
 103                 $notOwnWorkMessage = $( '<div>' ).append(
 104                         $( '<p>' ).html( notOwnWorkMessage.parse() ),
 105                         $( '<p>' ).html( notOwnWorkLocal.parse() )
 106                 );
 107                 $ownWorkMessage.add( $notOwnWorkMessage ).find( 'a' ).attr( 'target', '_blank' );
 108
 109                 this.selectFileWidget = new OO.ui.SelectFileWidget();
 110                 this.messageLabel = new OO.ui.LabelWidget( {
 111                         label: $notOwnWorkMessage
 112                 } );
 113                 this.ownWorkCheckbox = new OO.ui.CheckboxInputWidget().on( 'change', function ( on ) {
 114                         layout.messageLabel.toggle( !on );
 115                 } );
 116
 117                 fieldset = new OO.ui.FieldsetLayout();
 118                 fieldset.addItems( [
 119                         new OO.ui.FieldLayout( this.selectFileWidget, {
 120                                 align: 'top',
 121                                 label: mw.msg( 'upload-form-label-select-file' )
 122                         } ),
 123                         new OO.ui.FieldLayout( this.ownWorkCheckbox, {
 124                                 align: 'inline',
 125                                 label: $( '<div>' ).append(
 126                                         $( '<p>' ).text( mw.msg( 'foreign-structured-upload-form-label-own-work' ) ),
 127                                         $ownWorkMessage
 128                                 )
 129                         } ),
 130                         new OO.ui.FieldLayout( this.messageLabel, {
 131                                 align: 'top'
 132                         } )
 133                 ] );
 134                 this.uploadForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
 135
 136                 // Validation
 137                 this.selectFileWidget.on( 'change', this.onUploadFormChange.bind( this ) );
 138                 this.ownWorkCheckbox.on( 'change', this.onUploadFormChange.bind( this ) );
 139
 140                 return this.uploadForm;
 141         };
 142
 143         /**
 144          * @inheritdoc
 145          */
 146         mw.ForeignStructuredUpload.BookletLayout.prototype.onUploadFormChange = function () {
 147                 var file = this.selectFileWidget.getValue(),
 148                         ownWork = this.ownWorkCheckbox.isSelected(),
 149                         valid = !!file && ownWork;
 150                 this.emit( 'uploadValid', valid );
 151         };
 152
 153         /**
 154          * @inheritdoc
 155          */
 156         mw.ForeignStructuredUpload.BookletLayout.prototype.renderInfoForm = function () {
 157                 var fieldset;
 158
 159                 this.filenameWidget = new OO.ui.TextInputWidget( {
 160                         required: true,
 161                         validate: /.+/
 162                 } );
 163                 this.descriptionWidget = new OO.ui.TextInputWidget( {
 164                         required: true,
 165                         validate: /.+/,
 166                         multiline: true,
 167                         autosize: true
 168                 } );
 169                 this.dateWidget = new mw.widgets.DateInputWidget( {
 170                         $overlay: this.$overlay,
 171                         required: true,
 172                         mustBeBefore: moment().add( 1, 'day' ).locale( 'en' ).format( 'YYYY-MM-DD' ) // Tomorrow
 173                 } );
 174                 this.categoriesWidget = new mw.widgets.CategorySelector( {
 175                         // Can't be done here because we don't know the target wiki yet... done in #initialize.
 176                         // api: new mw.ForeignApi( ... ),
 177                         $overlay: this.$overlay
 178                 } );
 179
 180                 fieldset = new OO.ui.FieldsetLayout( {
 181                         label: mw.msg( 'upload-form-label-infoform-title' )
 182                 } );
 183                 fieldset.addItems( [
 184                         new OO.ui.FieldLayout( this.filenameWidget, {
 185                                 label: mw.msg( 'upload-form-label-infoform-name' ),
 186                                 align: 'top'
 187                         } ),
 188                         new OO.ui.FieldLayout( this.descriptionWidget, {
 189                                 label: mw.msg( 'upload-form-label-infoform-description' ),
 190                                 align: 'top'
 191                         } ),
 192                         new OO.ui.FieldLayout( this.categoriesWidget, {
 193                                 label: mw.msg( 'foreign-structured-upload-form-label-infoform-categories' ),
 194                                 align: 'top'
 195                         } ),
 196                         new OO.ui.FieldLayout( this.dateWidget, {
 197                                 label: mw.msg( 'foreign-structured-upload-form-label-infoform-date' ),
 198                                 align: 'top'
 199                         } )
 200                 ] );
 201                 this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
 202
 203                 // Validation
 204                 this.filenameWidget.on( 'change', this.onInfoFormChange.bind( this ) );
 205                 this.descriptionWidget.on( 'change', this.onInfoFormChange.bind( this ) );
 206                 this.dateWidget.on( 'change', this.onInfoFormChange.bind( this ) );
 207
 208                 return this.infoForm;
 209         };
 210
 211         /**
 212          * @inheritdoc
 213          */
 214         mw.ForeignStructuredUpload.BookletLayout.prototype.onInfoFormChange = function () {
 215                 var layout = this;
 216                 $.when(
 217                         this.filenameWidget.getValidity(),
 218                         this.descriptionWidget.getValidity(),
 219                         this.dateWidget.getValidity()
 220                 ).done( function () {
 221                         layout.emit( 'infoValid', true );
 222                 } ).fail( function () {
 223                         layout.emit( 'infoValid', false );
 224                 } );
 225         };
 226
 227         /* Getters */
 228
 229         /**
 230          * @inheritdoc
 231          */
 232         mw.ForeignStructuredUpload.BookletLayout.prototype.getText = function () {
 233                 var language = mw.config.get( 'wgContentLanguage' );
 234                 this.upload.addDescription( language, this.descriptionWidget.getValue() );
 235                 this.upload.setDate( this.dateWidget.getValue() );
 236                 this.upload.addCategories( this.categoriesWidget.getItemsData() );
 237                 return this.upload.getText();
 238         };
 239
 240         /* Setters */
 241
 242         /**
 243          * @inheritdoc
 244          */
 245         mw.ForeignStructuredUpload.BookletLayout.prototype.clear = function () {
 246                 mw.ForeignStructuredUpload.BookletLayout.parent.prototype.clear.call( this );
 247
 248                 this.ownWorkCheckbox.setSelected( false );
 249                 this.categoriesWidget.setItemsFromData( [] );
 250                 this.dateWidget.setValue( '' ).setValidityFlag( true );
 251         };
 252
 253 }( jQuery, mediaWiki ) );