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