( function ( $, wp, rwmb ) {
'use strict';
var views = rwmb.views = rwmb.views || {},
MediaField = views.MediaField,
FileUploadField, UploadButton;
FileUploadField = views.FileUploadField = MediaField.extend( {
createAddButton: function () {
this.addButton = new UploadButton( { controller: this.controller } );
}
} );
UploadButton = views.UploadButton = Backbone.View.extend( {
className: 'rwmb-upload-area',
tagName: 'div',
template: wp.template( 'rwmb-upload-area' ),
render: function () {
this.$el.html( this.template( {} ) );
return this;
},
initialize: function ( options ) {
this.controller = options.controller;
this.el.id = _.uniqueId( 'rwmb-upload-area-' );
this.render();
// Auto hide if you reach the max number of media
this.listenTo( this.controller, 'change:full', function () {
this.$el.toggle( !this.controller.get( 'full' ) );
} );
this.collection = this.controller.get( 'items' );
this.listenTo( this.collection, 'remove', function ( item ) {
if ( item.get( 'file' ) !== undefined ) {
this.uploader.uploader.removeFile( item.get( 'file' ) );
}
const totalFiles = parseInt( this.uploader.uploader.getOption( 'totalFiles' ) );
this.uploader.uploader.setOption( 'totalFiles', totalFiles - 1 );
} );
},
// Initializes plupload using code from wp.Uploader (wp-includes/js/plupload/wp-plupload.js)
initUploader: function ( $this ) {
var self = this,
$input = $this.closest( '.rwmb-input' ),
$process = $input.find( '.rwmb-media-view .rwmb-media-progress' ),
extensions = this.getExtensions().join( ',' ),
maxFileSize = this.controller.get( 'maxFileSize' ),
maxFiles = parseInt( this.controller.get( 'maxFiles' ) ),
options = {
container: this.el,
dropzone: this.el,
browser: this.$( '.rwmb-browse-button' ),
params: {
post_id: $( '#post_ID' ).val()
},
added: function ( attachment ) {
self.controller.get( 'items' ).add( [ attachment ] );
}
};
// Initialize the plupload instance.
this.uploader = new wp.Uploader( options );
var filters = this.uploader.uploader.getOption( 'filters' );
if ( maxFileSize ) {
filters.max_file_size = maxFileSize;
}
if ( extensions ) {
filters.mime_types = [ { title: i18nRwmbMedia.select, extensions: extensions } ];
}
this.uploader.uploader.setOption( 'filters', filters );
this.uploader.uploader.setOption( 'totalFiles', 0 );
this.uploader.uploader.bind( 'FilesAdded', function ( up, files ) {
const that = this,
totalFiles = parseInt( that.getOption( 'totalFiles' ) );
$.each( files, function ( i, file ) {
if ( maxFiles !== 0 && i >= maxFiles - totalFiles ) {
up.removeFile( files[ i ] );
return;
}
$process.append( `
${ file.name } - ${ file.percent } %
` );
that.setOption( 'totalFiles', parseInt( that.getOption( 'totalFiles' ) ) + 1 );
} );
} );
const setWidth = ( file, value ) => $process.find( `#${ file.id }` ).attr( 'aria-valuenow', value ).css( '--value', value ).text( `${ file.name } - ${ value }%` );
this.uploader.uploader.bind( 'UploadProgress', ( up, file ) => setWidth( file, file.percent ).addClass( file.percent === 100 ? 'rwmb-progress--completed' : '' ) );
this.uploader.uploader.bind( 'FileUploaded', ( up, file ) => $process.find( `#${ file.id }` ).fadeOut( 'slow', function () {
$( this ).remove();
} ) );
this.uploader.uploader.bind( 'Error', function ( up, err ) {
if ( $input.find( '.rwmb-error' ).length === 0 ) {
$input.append( '' );
}
const $error = $input.find( '.rwmb-error' ).empty().show();
$error.text( err.message );
setTimeout( function () {
$error.fadeOut( "slow" );
}, 5000 );
} );
$this.data( 'uploader', this.uploader );
},
getExtensions: function () {
var mimeTypes = this.controller.get( 'mimeType' ).split( ',' ),
exts = [];
_.each( mimeTypes, function ( current, index ) {
if ( i18nRwmbMedia.extensions[ current ] ) {
exts = exts.concat( i18nRwmbMedia.extensions[ current ] );
}
} );
return exts;
}
} );
function initFileUpload() {
var $this = $( this ),
view = $this.data( 'view' );
if ( view ) {
return;
}
view = new FileUploadField( { input: this } );
$this.siblings( '.rwmb-media-view' ).remove();
$this.after( view.el );
// Init progress
view.$el.find( '.rwmb-media-list' ).after( '' );
// Init uploader after view is inserted to make wp.Uploader works.
view.addButton.initUploader( $this );
$this.data( 'view', view );
}
function init( e ) {
$( e.target ).find( '.rwmb-file_upload' ).each( initFileUpload );
}
function removeFile( e ) {
$( '.rwmb-media-progress #' + $( this ).data( 'file_id' ) ).remove();
}
rwmb.$document
.on( 'mb_ready', init )
.on( 'clone', '.rwmb-file_upload', initFileUpload )
.on( 'click', '.rwmb-file-actions .rwmb-remove-media', removeFile );
} )( jQuery, wp, rwmb );