5 * mw.ForeignStructuredUpload.BookletLayout encapsulates the process
6 * of uploading a file to MediaWiki using the mw.ForeignStructuredUpload model.
8 * var uploadDialog = new mw.Upload.Dialog( {
9 * bookletClass: mw.ForeignStructuredUpload.BookletLayout,
14 * var windowManager = new OO.ui.WindowManager();
15 * $( 'body' ).append( windowManager.$element );
16 * windowManager.addWindows( [ uploadDialog ] );
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.
24 mw
.ForeignStructuredUpload
.BookletLayout = function ( config
) {
25 config
= config
|| {};
27 mw
.ForeignStructuredUpload
.BookletLayout
.parent
.call( this, config
);
29 this.target
= config
.target
;
34 OO
.inheritClass( mw
.ForeignStructuredUpload
.BookletLayout
, mw
.Upload
.BookletLayout
);
41 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.initialize = function () {
43 return mw
.ForeignStructuredUpload
.BookletLayout
.parent
.prototype.initialize
.call( this ).then(
46 // Point the CategorySelector to the right wiki
47 booklet
.upload
.getApi().then( function ( api
) {
48 // If this is a ForeignApi, it will have a apiUrl, otherwise we don't need to do anything
50 // Can't reuse the same object, CategorySelector calls #abort on its mw.Api instance
51 booklet
.categoriesWidget
.api
= new mw
.ForeignApi( api
.apiUrl
);
53 return $.Deferred().resolve();
55 // Set up booklet fields and license messages to match configuration
56 booklet
.upload
.loadConfig().then( function ( config
) {
59 isLocal
= booklet
.upload
.target
=== 'local',
60 fields
= config
.fields
,
61 msgs
= config
.licensemessages
[ isLocal
? 'local' : 'foreign' ];
63 // Hide disabled fields
64 booklet
.descriptionField
.toggle( !!fields
.description
);
65 booklet
.categoriesField
.toggle( !!fields
.categories
);
66 booklet
.dateField
.toggle( !!fields
.date
);
67 // Update form validity
68 booklet
.onInfoFormChange();
70 // Load license messages from the remote wiki if we don't have these messages locally
71 // (this means that we only load messages from the foreign wiki for custom config)
72 if ( mw
.message( 'upload-form-label-own-work-message-' + msgs
).exists() ) {
73 msgPromise
= $.Deferred().resolve();
75 msgPromise
= booklet
.upload
.apiPromise
.then( function ( api
) {
76 return api
.loadMessages( [
77 'upload-form-label-own-work-message-' + msgs
,
78 'upload-form-label-not-own-work-message-' + msgs
,
79 'upload-form-label-not-own-work-local-' + msgs
84 // Update license messages
85 return msgPromise
.then( function () {
86 booklet
.$ownWorkMessage
87 .msg( 'upload-form-label-own-work-message-' + msgs
)
88 .find( 'a' ).attr( 'target', '_blank' );
89 booklet
.$notOwnWorkMessage
90 .msg( 'upload-form-label-not-own-work-message-' + msgs
)
91 .find( 'a' ).attr( 'target', '_blank' );
92 booklet
.$notOwnWorkLocal
93 .msg( 'upload-form-label-not-own-work-local-' + msgs
)
94 .find( 'a' ).attr( 'target', '_blank' );
101 // Always resolve, never reject
102 function () { return $.Deferred().resolve(); }
107 * Returns a {@link mw.ForeignStructuredUpload mw.ForeignStructuredUpload}
108 * with the {@link #cfg-target target} specified in config.
111 * @return {mw.Upload}
113 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.createUpload = function () {
114 return new mw
.ForeignStructuredUpload( this.target
);
122 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.renderUploadForm = function () {
126 // These elements are filled with text in #initialize
127 // TODO Refactor this to be in one place
128 this.$ownWorkMessage
= $( '<p>' )
129 .addClass( 'mw-foreignStructuredUpload-bookletLayout-license' );
130 this.$notOwnWorkMessage
= $( '<p>' );
131 this.$notOwnWorkLocal
= $( '<p>' );
133 this.selectFileWidget
= new OO
.ui
.SelectFileWidget( {
136 this.messageLabel
= new OO
.ui
.LabelWidget( {
137 label
: $( '<div>' ).append(
138 this.$notOwnWorkMessage
,
139 this.$notOwnWorkLocal
142 this.ownWorkCheckbox
= new OO
.ui
.CheckboxInputWidget().on( 'change', function ( on
) {
143 layout
.messageLabel
.toggle( !on
);
146 fieldset
= new OO
.ui
.FieldsetLayout();
148 new OO
.ui
.FieldLayout( this.selectFileWidget
, {
151 new OO
.ui
.FieldLayout( this.ownWorkCheckbox
, {
153 label
: $( '<div>' ).append(
154 $( '<p>' ).text( mw
.msg( 'upload-form-label-own-work' ) ),
158 new OO
.ui
.FieldLayout( this.messageLabel
, {
162 this.uploadForm
= new OO
.ui
.FormLayout( { items
: [ fieldset
] } );
165 this.selectFileWidget
.on( 'change', this.onUploadFormChange
.bind( this ) );
166 this.ownWorkCheckbox
.on( 'change', this.onUploadFormChange
.bind( this ) );
168 this.selectFileWidget
.on( 'change', function () {
169 var file
= layout
.getFile();
171 // Set the date to lastModified once we have the file
172 if ( layout
.getDateFromLastModified( file
) !== undefined ) {
173 layout
.dateWidget
.setValue( layout
.getDateFromLastModified( file
) );
176 // Check if we have EXIF data and set to that where available
177 layout
.getDateFromExif( file
).done( function ( date
) {
178 layout
.dateWidget
.setValue( date
);
181 layout
.updateFilePreview();
184 return this.uploadForm
;
190 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.onUploadFormChange = function () {
191 var file
= this.selectFileWidget
.getValue(),
192 ownWork
= this.ownWorkCheckbox
.isSelected(),
193 valid
= !!file
&& ownWork
;
194 this.emit( 'uploadValid', valid
);
200 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.renderInfoForm = function () {
203 this.filePreview
= new OO
.ui
.Widget( {
204 classes
: [ 'mw-upload-bookletLayout-filePreview' ]
206 this.progressBarWidget
= new OO
.ui
.ProgressBarWidget( {
209 this.filePreview
.$element
.append( this.progressBarWidget
.$element
);
211 this.filenameWidget
= new OO
.ui
.TextInputWidget( {
215 this.descriptionWidget
= new OO
.ui
.TextInputWidget( {
221 this.categoriesWidget
= new mw
.widgets
.CategorySelector( {
222 // Can't be done here because we don't know the target wiki yet... done in #initialize.
223 // api: new mw.ForeignApi( ... ),
224 $overlay
: this.$overlay
226 this.dateWidget
= new mw
.widgets
.DateInputWidget( {
227 $overlay
: this.$overlay
,
229 mustBeBefore
: moment().add( 1, 'day' ).locale( 'en' ).format( 'YYYY-MM-DD' ) // Tomorrow
232 this.filenameField
= new OO
.ui
.FieldLayout( this.filenameWidget
, {
233 label
: mw
.msg( 'upload-form-label-infoform-name' ),
235 classes
: [ 'mw-foreignStructuredUploa-bookletLayout-small-notice' ],
236 notices
: [ mw
.msg( 'upload-form-label-infoform-name-tooltip' ) ]
238 this.descriptionField
= new OO
.ui
.FieldLayout( this.descriptionWidget
, {
239 label
: mw
.msg( 'upload-form-label-infoform-description' ),
241 classes
: [ 'mw-foreignStructuredUploa-bookletLayout-small-notice' ],
242 notices
: [ mw
.msg( 'upload-form-label-infoform-description-tooltip' ) ]
244 this.categoriesField
= new OO
.ui
.FieldLayout( this.categoriesWidget
, {
245 label
: mw
.msg( 'upload-form-label-infoform-categories' ),
248 this.dateField
= new OO
.ui
.FieldLayout( this.dateWidget
, {
249 label
: mw
.msg( 'upload-form-label-infoform-date' ),
253 fieldset
= new OO
.ui
.FieldsetLayout( {
254 label
: mw
.msg( 'upload-form-label-infoform-title' )
258 this.descriptionField
,
259 this.categoriesField
,
262 this.infoForm
= new OO
.ui
.FormLayout( {
263 classes
: [ 'mw-upload-bookletLayout-infoForm' ],
264 items
: [ this.filePreview
, fieldset
]
268 this.filenameWidget
.on( 'change', this.onInfoFormChange
.bind( this ) );
269 this.descriptionWidget
.on( 'change', this.onInfoFormChange
.bind( this ) );
270 this.dateWidget
.on( 'change', this.onInfoFormChange
.bind( this ) );
272 this.on( 'fileUploadProgress', function ( progress
) {
273 this.progressBarWidget
.setProgress( progress
* 100 );
276 return this.infoForm
;
282 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.onInfoFormChange = function () {
284 validityPromises
= [];
286 validityPromises
.push( this.filenameWidget
.getValidity() );
287 if ( this.descriptionField
.isVisible() ) {
288 validityPromises
.push( this.descriptionWidget
.getValidity() );
290 if ( this.dateField
.isVisible() ) {
291 validityPromises
.push( this.dateWidget
.getValidity() );
294 $.when
.apply( $, validityPromises
).done( function () {
295 layout
.emit( 'infoValid', true );
296 } ).fail( function () {
297 layout
.emit( 'infoValid', false );
306 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.getText = function () {
307 var language
= mw
.config
.get( 'wgContentLanguage' );
308 this.upload
.clearDescriptions();
309 this.upload
.addDescription( language
, this.descriptionWidget
.getValue() );
310 this.upload
.setDate( this.dateWidget
.getValue() );
311 this.upload
.clearCategories();
312 this.upload
.addCategories( this.categoriesWidget
.getItemsData() );
313 return this.upload
.getText();
317 * Get original date from EXIF data
319 * @param {Object} file
320 * @return {jQuery.Promise} Promise resolved with the EXIF date
322 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.getDateFromExif = function ( file
) {
324 deferred
= $.Deferred();
326 if ( file
&& file
.type
=== 'image/jpeg' ) {
327 fileReader
= new FileReader();
328 fileReader
.onload = function () {
329 var fileStr
, arr
, i
, metadata
;
331 if ( typeof fileReader
.result
=== 'string' ) {
332 fileStr
= fileReader
.result
;
334 // Array buffer; convert to binary string for the library.
335 arr
= new Uint8Array( fileReader
.result
);
337 for ( i
= 0; i
< arr
.byteLength
; i
++ ) {
338 fileStr
+= String
.fromCharCode( arr
[ i
] );
343 metadata
= mw
.libs
.jpegmeta( this.result
, file
.name
);
348 if ( metadata
!== null && metadata
.exif
!== undefined && metadata
.exif
.DateTimeOriginal
) {
349 deferred
.resolve( moment( metadata
.exif
.DateTimeOriginal
, 'YYYY:MM:DD' ).format( 'YYYY-MM-DD' ) );
355 if ( 'readAsBinaryString' in fileReader
) {
356 fileReader
.readAsBinaryString( file
);
357 } else if ( 'readAsArrayBuffer' in fileReader
) {
358 fileReader
.readAsArrayBuffer( file
);
360 // We should never get here
362 throw new Error( 'Cannot read thumbnail as binary string or array buffer.' );
366 return deferred
.promise();
370 * Get last modified date from file
372 * @param {Object} file
373 * @return {Object} Last modified date from file
375 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.getDateFromLastModified = function ( file
) {
376 if ( file
&& file
.lastModified
) {
377 return moment( file
.lastModified
).format( 'YYYY-MM-DD' );
386 mw
.ForeignStructuredUpload
.BookletLayout
.prototype.clear = function () {
387 mw
.ForeignStructuredUpload
.BookletLayout
.parent
.prototype.clear
.call( this );
389 this.ownWorkCheckbox
.setSelected( false );
390 this.categoriesWidget
.setItemsFromData( [] );
391 this.dateWidget
.setValue( '' ).setValidityFlag( true );
394 }( jQuery
, mediaWiki
) );