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          * Returns a {@link mw.ForeignStructuredUpload mw.ForeignStructuredUpload}
  40          * with the {@link #cfg-target target} specified in config.
  41          *
  42          * @protected
  43          * @return {mw.Upload}
  44          */
  45         mw.ForeignStructuredUpload.BookletLayout.prototype.createUpload = function () {
  46                 return new mw.ForeignStructuredUpload( this.target );
  47         };
  48
  49         /* Form renderers */
  50
  51         /**
  52          * @inheritdoc
  53          */
  54         mw.ForeignStructuredUpload.BookletLayout.prototype.renderUploadForm = function () {
  55                 var fieldset, $ownWorkMessage, $notOwnWorkMessage,
  56                         ownWorkMessage, notOwnWorkMessage, notOwnWorkLocal,
  57                         validTargets = mw.config.get( 'wgForeignUploadTargets' ),
  58                         target = this.target || validTargets[ 0 ] || 'local',
  59                         layout = this;
  60
  61                 // foreign-structured-upload-form-label-own-work-message-local
  62                 // foreign-structured-upload-form-label-own-work-message-shared
  63                 ownWorkMessage = mw.message( 'foreign-structured-upload-form-label-own-work-message-' + target );
  64                 // foreign-structured-upload-form-label-not-own-work-message-local
  65                 // foreign-structured-upload-form-label-not-own-work-message-shared
  66                 notOwnWorkMessage = mw.message( 'foreign-structured-upload-form-label-not-own-work-message-' + target );
  67                 // foreign-structured-upload-form-label-not-own-work-local-local
  68                 // foreign-structured-upload-form-label-not-own-work-local-shared
  69                 notOwnWorkLocal = mw.message( 'foreign-structured-upload-form-label-not-own-work-local-' + target );
  70
  71                 if ( !ownWorkMessage.exists() ) {
  72                         ownWorkMessage = mw.message( 'foreign-structured-upload-form-label-own-work-message-default' );
  73                 }
  74                 if ( !notOwnWorkMessage.exists() ) {
  75                         notOwnWorkMessage = mw.message( 'foreign-structured-upload-form-label-not-own-work-message-default' );
  76                 }
  77                 if ( !notOwnWorkLocal.exists() ) {
  78                         notOwnWorkLocal = mw.message( 'foreign-structured-upload-form-label-not-own-work-local-default' );
  79                 }
  80
  81                 $ownWorkMessage = $( '<p>' ).html( ownWorkMessage.parse() );
  82                 $notOwnWorkMessage = $( '<div>' ).append(
  83                         $( '<p>' ).html( notOwnWorkMessage.parse() ),
  84                         $( '<p>' ).html( notOwnWorkLocal.parse() )
  85                 );
  86                 $ownWorkMessage.add( $notOwnWorkMessage ).find( 'a' ).attr( 'target', '_blank' );
  87
  88                 this.selectFileWidget = new OO.ui.SelectFileWidget();
  89                 this.messageLabel = new OO.ui.LabelWidget( {
  90                         label: $notOwnWorkMessage
  91                 } );
  92                 this.ownWorkCheckbox = new OO.ui.CheckboxInputWidget().on( 'change', function ( on ) {
  93                         if ( on ) {
  94                                 layout.messageLabel.setLabel( $ownWorkMessage );
  95                         } else {
  96                                 layout.messageLabel.setLabel( $notOwnWorkMessage );
  97                         }
  98                 } );
  99
 100                 fieldset = new OO.ui.FieldsetLayout();
 101                 fieldset.addItems( [
 102                         new OO.ui.FieldLayout( this.selectFileWidget, {
 103                                 align: 'top',
 104                                 label: mw.msg( 'upload-form-label-select-file' )
 105                         } ),
 106                         new OO.ui.FieldLayout( this.ownWorkCheckbox, {
 107                                 align: 'inline',
 108                                 label: mw.msg( 'foreign-structured-upload-form-label-own-work' )
 109                         } ),
 110                         this.messageLabel
 111                 ] );
 112                 this.uploadForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
 113
 114                 // Validation
 115                 this.selectFileWidget.on( 'change', this.onUploadFormChange.bind( this ) );
 116                 this.ownWorkCheckbox.on( 'change', this.onUploadFormChange.bind( this ) );
 117
 118                 return this.uploadForm;
 119         };
 120
 121         /**
 122          * @inheritdoc
 123          */
 124         mw.ForeignStructuredUpload.BookletLayout.prototype.onUploadFormChange = function () {
 125                 var file = this.selectFileWidget.getValue(),
 126                         ownWork = this.ownWorkCheckbox.isSelected(),
 127                         valid = !!file && ownWork;
 128                 this.emit( 'uploadValid', valid );
 129         };
 130
 131         /**
 132          * @inheritdoc
 133          */
 134         mw.ForeignStructuredUpload.BookletLayout.prototype.renderInfoForm = function () {
 135                 var fieldset;
 136
 137                 this.filenameWidget = new OO.ui.TextInputWidget( {
 138                         required: true,
 139                         validate: /.+/
 140                 } );
 141                 this.descriptionWidget = new OO.ui.TextInputWidget( {
 142                         required: true,
 143                         validate: /.+/,
 144                         multiline: true,
 145                         autosize: true
 146                 } );
 147                 this.dateWidget = new mw.widgets.DateInputWidget( {
 148                         $overlay: this.$overlay,
 149                         required: true,
 150                         mustBeBefore: moment().add( 1, 'day' ).locale( 'en' ).format( 'YYYY-MM-DD' ) // Tomorrow
 151                 } );
 152                 this.categoriesWidget = new mw.widgets.CategorySelector( {
 153                         $overlay: this.$overlay
 154                 } );
 155
 156                 fieldset = new OO.ui.FieldsetLayout( {
 157                         label: mw.msg( 'upload-form-label-infoform-title' )
 158                 } );
 159                 fieldset.addItems( [
 160                         new OO.ui.FieldLayout( this.filenameWidget, {
 161                                 label: mw.msg( 'upload-form-label-infoform-name' ),
 162                                 align: 'top'
 163                         } ),
 164                         new OO.ui.FieldLayout( this.categoriesWidget, {
 165                                 label: mw.msg( 'foreign-structured-upload-form-label-infoform-categories' ),
 166                                 align: 'top'
 167                         } ),
 168                         new OO.ui.FieldLayout( this.descriptionWidget, {
 169                                 label: mw.msg( 'upload-form-label-infoform-description' ),
 170                                 align: 'top'
 171                         } ),
 172                         new OO.ui.FieldLayout( this.dateWidget, {
 173                                 label: mw.msg( 'foreign-structured-upload-form-label-infoform-date' ),
 174                                 align: 'top'
 175                         } )
 176                 ] );
 177                 this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
 178
 179                 // Validation
 180                 this.filenameWidget.on( 'change', this.onInfoFormChange.bind( this ) );
 181                 this.descriptionWidget.on( 'change', this.onInfoFormChange.bind( this ) );
 182                 this.dateWidget.on( 'change', this.onInfoFormChange.bind( this ) );
 183
 184                 return this.infoForm;
 185         };
 186
 187         /**
 188          * @inheritdoc
 189          */
 190         mw.ForeignStructuredUpload.BookletLayout.prototype.onInfoFormChange = function () {
 191                 var layout = this;
 192                 $.when(
 193                         this.filenameWidget.getValidity(),
 194                         this.descriptionWidget.getValidity(),
 195                         this.dateWidget.getValidity()
 196                 ).done( function () {
 197                         layout.emit( 'infoValid', true );
 198                 } ).fail( function () {
 199                         layout.emit( 'infoValid', false );
 200                 } );
 201         };
 202
 203         /* Getters */
 204
 205         /**
 206          * @inheritdoc
 207          */
 208         mw.ForeignStructuredUpload.BookletLayout.prototype.getText = function () {
 209                 this.upload.addDescription( 'en', this.descriptionWidget.getValue() );
 210                 this.upload.setDate( this.dateWidget.getValue() );
 211                 this.upload.addCategories( this.categoriesWidget.getItemsData() );
 212                 return this.upload.getText();
 213         };
 214
 215         /* Setters */
 216
 217         /**
 218          * @inheritdoc
 219          */
 220         mw.ForeignStructuredUpload.BookletLayout.prototype.clear = function () {
 221                 mw.ForeignStructuredUpload.BookletLayout.parent.prototype.clear.call( this );
 222
 223                 this.ownWorkCheckbox.setSelected( false );
 224                 this.categoriesWidget.setItemsFromData( [] );
 225                 this.dateWidget.setValue( '' ).setValidityFlag( true );
 226         };
 227
 228 }( jQuery, mediaWiki ) );