MarkTraceur has uploaded a new change for review.
https://gerrit.wikimedia.org/r/192809
Change subject: [Very WIP] Only use one file input, use Upload objects to
represent upload process
......................................................................
[Very WIP] Only use one file input, use Upload objects to represent upload
process
Bug: T89356
Change-Id: I25b6a9d003da40d94cbeffd59bd318fa5b5ec26d
---
M resources/mw.UploadWizard.js
M resources/mw.UploadWizardUploadInterface.js
A resources/ui/uw.ui.FileInput.js
M resources/ui/uw.ui.Upload.js
4 files changed, 194 insertions(+), 67 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UploadWizard
refs/changes/09/192809/1
diff --git a/resources/mw.UploadWizard.js b/resources/mw.UploadWizard.js
index b35c04b..09f65bc 100644
--- a/resources/mw.UploadWizard.js
+++ b/resources/mw.UploadWizard.js
@@ -59,6 +59,18 @@
wizard.moveToStep(
'details' );
}
} );
+ } )
+
+ .on( 'new-upload', function ( file, toobig ) {
+ var newUpload = wizard.newUpload();
+
+ if ( toobig ) {
+ newUpload.disablePreview();
+ }
+
+ newUpload.fill( file );
+
+ wizard.updateFileCounts();
} ),
deeds: new uw.controller.Deed( this.api, config )
@@ -343,24 +355,6 @@
.on( 'filled', function () {
wizard.setUploadFilled( upload );
- } )
-
- .on( 'extra-files', function ( files, toobig ) {
- $.each( files, function ( i, file ) {
- // NOTE: By running newUpload
we will end up calling checkfile() again.
- var newUpload =
wizard.newUpload();
-
- if ( toobig ) {
-
newUpload.disablePreview();
- }
-
- newUpload.fill( file );
- } );
-
- // Add a new upload to cover the button
- wizard.newUpload();
-
- wizard.updateFileCounts();
} )
.on( 'error', function ( code, message ) {
diff --git a/resources/mw.UploadWizardUploadInterface.js
b/resources/mw.UploadWizardUploadInterface.js
index c150cf3..e901b9d 100644
--- a/resources/mw.UploadWizardUploadInterface.js
+++ b/resources/mw.UploadWizardUploadInterface.js
@@ -25,15 +25,6 @@
this.isFilled = false;
- this.$fileInputCtrl = $( '<input size="1"
class="mwe-upwiz-file-input" name="file" type="file"/>' );
- if (mw.UploadWizard.config.enableFormData &&
mw.fileApi.isFormDataAvailable() &&
- mw.UploadWizard.config.enableMultiFileSelect &&
mw.UploadWizard.config.enableMultipleFiles ) {
- // Multiple uploads requires the FormData transport
- this.$fileInputCtrl.attr( 'multiple', '1' );
- }
-
- this.initFileInputCtrl();
-
this.$indicator = $( '<div
class="mwe-upwiz-file-indicator"></div>' );
this.visibleFilenameDiv = $('<div
class="mwe-upwiz-visible-file"></div>')
@@ -66,35 +57,6 @@
//this.errorDiv = $('<div class="mwe-upwiz-upload-error
mwe-upwiz-file-indicator" style="display: none;"></div>').get(0);
- this.filenameCtrl = $('<input type="hidden" name="filename"
value=""/>').get(0);
-
- // this file Ctrl container is placed over other interface
elements, intercepts clicks and gives them to the file input control.
- // however, we want to pass hover events to interface elements
that we are over, hence the bindings.
- // n.b. not using toggleClass because it often gets this event
wrong -- relies on previous state to know what to do
- this.fileCtrlContainer = $('<div
class="mwe-upwiz-file-ctrl-container">');
-
- // the css trickery (along with css)
- // here creates a giant size file input control which is
contained within a div and then
- // clipped for overflow. The effect is that we have a div
(ctrl-container) we can position anywhere
- // which works as a file input. It will be set to opacity:0 and
then we can do whatever we want with
- // interface "below".
- // XXX caution -- if the add file input changes size we won't
match, unless we add some sort of event to catch this.
- this.form = $( '<form method="POST"
encType="multipart/form-data" class="mwe-upwiz-form"></form>' )
- .attr( { action:
this.upload.api.defaults.ajax.url } )
- .append( this.visibleFilenameDiv )
- .append( this.fileCtrlContainer )
- .append( this.filenameCtrl )
- .get( 0 );
-
- if ( $( '<input type="file">' ).prop( 'disabled' ) ) {
- $( '#mwe-upwiz-stepdiv-file' ).replaceWith(
- $( '<span/>' )
- .addClass( 'mwe-error' )
- .msg( 'mwe-upwiz-file-upload-notcapable' )
- );
- $( '#mwe-upwiz-add-file' ).hide();
- return;
- }
if ( !this.upload.fromURL ) {
$( this.fileCtrlContainer ).append( this.$fileInputCtrl
);
@@ -273,16 +235,6 @@
this.setStatus( msgKey, args );
};
- UIP.initFileInputCtrl = function () {
- var ui = this;
-
- this.$fileInputCtrl.change( function () {
- ui.emit( 'file-changed', ui.getFiles() );
-
- ui.clearErrors();
- } );
- };
-
/**
* Reset file input to have no value.
*/
@@ -379,7 +331,6 @@
this.$fileInputCtrl.replaceWith( $newFileInput );
this.$fileInputCtrl = $newFileInput;
- this.initFileInputCtrl();
if ( this.providedFile ) {
this.providedFile = null;
diff --git a/resources/ui/uw.ui.FileInput.js b/resources/ui/uw.ui.FileInput.js
new file mode 100644
index 0000000..8a0ec15
--- /dev/null
+++ b/resources/ui/uw.ui.FileInput.js
@@ -0,0 +1,168 @@
+/*
+ * This file is part of the MediaWiki extension UploadWizard.
+ *
+ * UploadWizard is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * UploadWizard is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with UploadWizard. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+( function ( mw, $, ui, oo ) {
+ var FIP;
+
+ /**
+ * File input UI class
+ * @class mw.uw.ui.FileInput
+ * @mixins OO.EventEmitter
+ * @constructor
+ * @param {jQuery} $parent Where to add the interface
+ * @param {Object} config The UW config object.
+ */
+ function FileInput( $parent, config ) {
+ var input = this;
+
+ oo.EventEmitter.call( this );
+
+ this.$div = $( '<div>' )
+ .addClass( 'mwe-upwiz-file' )
+ .appendTo( $parent );
+
+ this.$form = $( '<form>' )
+ .addClass( 'mwe-upwiz-form' )
+ .attr( {
+ method: 'POST',
+ encType: 'multipart/form-data',
+ action: api.defaults.ajax.url
+ } )
+ .appendTo( this.$div );
+
+ this.$fileInputContainer = $( '<div>' )
+ .addClass( 'mwe-upwiz-file-ctrl-container' )
+ .appendTo( this.$form );
+
+ this.$fileInput = $( '<input>' )
+ .addClass( 'mwe-upwiz-file-input' )
+ .attr( {
+ size: 1,
+ type: 'file',
+ name: 'file'
+ } )
+ .appendTo( this.$fileInputContainer );
+
+ this.$filename = $( '<input>' )
+ .attr( {
+ type: 'hidden',
+ name: 'filename'
+ } )
+ .appendTo( this.$form );
+
+ this.$fileInput.prop(
+ 'multiple',
+ config.enableFormData &&
mw.fileApi.isFormDataAvailable() && config.enableMultiFileSelect &&
config.enableMultipleFiles
+ );
+
+ this.$fileInput.change( function () {
+ var toobig = false,
+ size = 0,
+ files = input.getFiles();
+
+ $.each( files, function ( i, file ) {
+ size += file.size;
+ } );
+
+ toobig = size > 10000000;
+
+ $.each( input.getFiles(), function ( i, file ) {
+ input.emit( 'add-file', file, toobig );
+ } );
+ } );
+
+ this.$button = $( '<button>' )
+ .addClass( 'mwe-upwiz-add-file' )
+ .appendTo( this.$div );
+
+ this.moveFileInputToCover( this.$button );
+ }
+
+ oo.mixinClass( FileInput, oo.EventEmitter );
+
+ FIP = FileInput.prototype;
+
+ /**
+ * Get files in the input currently.
+ * @return {File[]}
+ */
+ FIP.getFiles = function () {
+ var files = [];
+
+ if ( mw.fileApi.isAvailable() ) {
+ $.each( this.$fileInput.get( 0 ).files, function ( i,
file ) {
+ files.push( file );
+ } );
+ }
+
+ return files;
+ };
+
+ /**
+ * Toggles "filled" status, showing a different style and message.
+ * @param {boolean} [state] If omitted, the state will be flipped.
+ */
+ FIP.toggleFilled = function ( state ) {
+ if ( state === undefined ) {
+ state = !this.filled;
+ }
+
+ this.filled = state;
+ this.$button.toggleClass( 'filled', state );
+ this.$button.text( mw.message( 'mwe-upwiz-add-file' + ( state ?
'-n' : '-0-free' ) ) );
+ };
+
+ /**
+ * Keep a file input over the passed-in element.
+ * @param {jQuery} $target
+ * @param {boolean} [poll=false] Whether to keep the input positioned
there with an interval.
+ */
+ FIP.moveFileInputToCover = function ( $target, poll ) {
+ var input = this;
+
+ function update() {
+ input.$fileInputContainer
+ .css( $target.position() )
+ .css( {
+ marginTop: $target.css( 'marginTop' ),
+ marginRight: $target.css( 'marginRight'
),
+ marginBottom: $target.css(
'marginBottom' ),
+ marginLeft: $target.css( 'marginLeft' ),
+ zIndex: 1
+ } )
+ .width( $target.outerWidth() )
+ .height( $target.outerHeight() );
+
+ input.$fileInput.css( {
+ marginLeft: '-' + ( input.$fileInput.width() -
$target.outerWidth() - 10 ) + 'px',
+ marginTop: '-' + ( input.$fileInput.height() -
$target.outerHeight() - 10 ) + 'px'
+ } );
+ }
+
+ if ( poll ) {
+ this.stopPolling();
+
+ this.stopTracking = ( function ( iv ) {
+ return function () {
+ window.clearInterval( iv );
+ };
+ } )( window.setInterval( update, 500 ) );
+ }
+ };
+
+ ui.FileInput = FileInput;
+}( mediaWiki, jQuery, mediaWiki.uploadWizard.ui, OO ) );
diff --git a/resources/ui/uw.ui.Upload.js b/resources/ui/uw.ui.Upload.js
index 521616d..88747c4 100644
--- a/resources/ui/uw.ui.Upload.js
+++ b/resources/ui/uw.ui.Upload.js
@@ -72,6 +72,11 @@
this.$fileList = $( '#mwe-upwiz-filelist' );
this.$progress = $( '#mwe-upwiz-progress' );
+
+ this.fileInput = new ui.FileInput( this.$uploadCtrl, config )
+ .on( 'add-file', function ( file ) {
+ upload.newUpload( file );
+ } );
}
oo.inheritClass( Upload, ui.Step );
@@ -224,5 +229,14 @@
} );
};
+ /**
+ * Creates a new upload and adds it to the list.
+ * @param {File} file
+ * @param {boolean} toobig Whether this batch of additions is too big
for previews.
+ */
+ UP.newUpload = function ( file, toobig ) {
+ this.emit( 'new-upload', file, toobig );
+ };
+
ui.Upload = Upload;
}( mediaWiki, jQuery, mediaWiki.uploadWizard.ui, OO ) );
--
To view, visit https://gerrit.wikimedia.org/r/192809
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I25b6a9d003da40d94cbeffd59bd318fa5b5ec26d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UploadWizard
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
