From 276de2e8d73f772c5017b10f8e44e6a74605a8b1 Mon Sep 17 00:00:00 2001 From: Sebastian Tschan Date: Tue, 6 Mar 2012 16:15:11 +0900 Subject: [PATCH] Make the Image Processing plugin as well as the LoadImage and Templates functions optional dependencies. Added the filesContainer option. Allow setting the uploadTemplateId and downloadTemplateId options after widget initialization. --- js/jquery.fileupload-ui.js | 116 ++++++++++++++++++++++--------------- 1 file changed, 70 insertions(+), 46 deletions(-) diff --git a/js/jquery.fileupload-ui.js b/js/jquery.fileupload-ui.js index 84883d5ba..8cef5a04f 100644 --- a/js/jquery.fileupload-ui.js +++ b/js/jquery.fileupload-ui.js @@ -1,5 +1,5 @@ /* - * jQuery File Upload User Interface Plugin 6.5.5 + * jQuery File Upload User Interface Plugin 6.6 * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2010, Sebastian Tschan @@ -33,9 +33,10 @@ }(function ($, tmpl, loadImage) { 'use strict'; - // The UI version extends the IP (image processing) version and adds - // complete user interface interaction: - $.widget('blueimpUI.fileupload', $.blueimpIP.fileupload, { + // The UI version extends the IP (image processing) version or the basic + // file upload widget and adds complete user interface interaction: + var parentWidget = ($.blueimpIP || $.blueimp).fileupload; + $.widget('blueimpUI.fileupload', parentWidget, { options: { // By default, files added to the widget are uploaded as soon @@ -85,11 +86,10 @@ $(this).fileupload('resize', data).done(data, function () { data.files.valid = data.isValidated = that._validate(files); data.context = that._renderUpload(files) - .appendTo(that._files) + .appendTo(options.filesContainer) .data('data', data); that._renderPreviews(files, data.context); - // Force reflow: - that._reflow = $.support.transition && data.context[0].offsetWidth; + that._forceReflow(data.context); that._transition(data.context).done( function () { if ((that._trigger('added', e, data) !== false) && @@ -146,9 +146,7 @@ template = that._renderDownload([file]) .css('height', node.height()) .replaceAll(node); - // Force reflow: - that._reflow = $.support.transition && - template[0].offsetWidth; + that._forceReflow(template); that._transition(template).done( function () { data.context = $(this); @@ -160,9 +158,8 @@ }); } else { template = that._renderDownload(data.result) - .appendTo(that._files); - // Force reflow: - that._reflow = $.support.transition && template[0].offsetWidth; + .appendTo(that.options.filesContainer); + that._forceReflow(template); that._transition(template).done( function () { data.context = $(this); @@ -187,9 +184,7 @@ var node = $(this); template = that._renderDownload([file]) .replaceAll(node); - // Force reflow: - that._reflow = $.support.transition && - template[0].offsetWidth; + that._forceReflow(template); that._transition(template).done( function () { data.context = $(this); @@ -210,10 +205,9 @@ } else if (data.errorThrown !== 'abort') { that._adjustMaxNumberOfFiles(-data.files.length); data.context = that._renderUpload(data.files) - .appendTo(that._files) + .appendTo(that.options.filesContainer) .data('data', data); - // Force reflow: - that._reflow = $.support.transition && data.context[0].offsetWidth; + that._forceReflow(data.context); that._transition(data.context).done( function () { data.context = $(this); @@ -357,24 +351,29 @@ }, _renderTemplate: function (func, files) { - return $(this.options.templateContainer).html(func({ + if (!func) { + return $(); + } + var result = func({ files: files, formatFileSize: this._formatFileSize, options: this.options - })).children(); + }); + if (result instanceof $) { + return result; + } + return $(this.options.templatesContainer).html(result).children(); }, _renderPreview: function (file, node) { var that = this, options = this.options, deferred = $.Deferred(); - return (loadImage( + return ((loadImage && loadImage( file, function (img) { node.append(img); - // Force reflow: - that._reflow = $.support.transition && - node[0].offsetWidth; + that._forceReflow(node); that._transition(node).done(function () { deferred.resolveWith(node); }); @@ -384,7 +383,7 @@ maxHeight: options.previewMaxHeight, canvas: options.previewAsCanvas } - ) || deferred.resolveWith(node)) && deferred; + )) || deferred.resolveWith(node)) && deferred; }, _renderPreviews: function (files, nodes) { @@ -451,11 +450,16 @@ e.data.fileupload._trigger('destroy', e, { context: button.closest('.template-download'), url: button.attr('data-url'), - type: button.attr('data-type'), + type: button.attr('data-type') || 'DELETE', dataType: e.data.fileupload.options.dataType }); }, + _forceReflow: function (node) { + this._reflow = $.support.transition && + node.length && node[0].offsetWidth; + }, + _transition: function (node) { var that = this, deferred = $.Deferred(); @@ -480,7 +484,7 @@ _initButtonBarEventHandlers: function () { var fileUploadButtonBar = this.element.find('.fileupload-buttonbar'), - filesList = this._files, + filesList = this.options.filesContainer, ns = this.options.namespace; fileUploadButtonBar.find('.start') .bind('click.' + ns, function (e) { @@ -517,9 +521,9 @@ }, _initEventHandlers: function () { - $.blueimpIP.fileupload.prototype._initEventHandlers.call(this); + parentWidget.prototype._initEventHandlers.call(this); var eventData = {fileupload: this}; - this._files + this.options.filesContainer .delegate( '.start button', 'click.' + this.options.namespace, @@ -542,12 +546,13 @@ }, _destroyEventHandlers: function () { + var options = this.options; this._destroyButtonBarEventHandlers(); - this._files - .undelegate('.start button', 'click.' + this.options.namespace) - .undelegate('.cancel button', 'click.' + this.options.namespace) - .undelegate('.delete button', 'click.' + this.options.namespace); - $.blueimpIP.fileupload.prototype._destroyEventHandlers.call(this); + options.filesContainer + .undelegate('.start button', 'click.' + options.namespace) + .undelegate('.cancel button', 'click.' + options.namespace) + .undelegate('.delete button', 'click.' + options.namespace); + parentWidget.prototype._destroyEventHandlers.call(this); }, _enableFileInputButton: function () { @@ -564,25 +569,44 @@ _initTemplates: function () { var options = this.options; - options.templateContainer = document.createElement( - this._files.prop('nodeName') + options.templatesContainer = document.createElement( + options.filesContainer.prop('nodeName') ); - options.uploadTemplate = tmpl(options.uploadTemplateId); - options.downloadTemplate = tmpl(options.downloadTemplateId); + if (tmpl) { + options.uploadTemplate = tmpl(options.uploadTemplateId); + options.downloadTemplate = tmpl(options.downloadTemplateId); + } }, - _initFiles: function () { - this._files = this.element.find('.files'); + _initFilesContainer: function () { + if (!this.options.filesContainer) { + this.options.filesContainer = this.element.find('.files'); + } }, - _create: function () { - this._initFiles(); - $.blueimpIP.fileupload.prototype._create.call(this); + _initSpecialOptions: function () { + parentWidget.prototype._initSpecialOptions.call(this); this._initTemplates(); }, + _create: function () { + this._initFilesContainer(); + parentWidget.prototype._create.call(this); + this._refreshOptionsList.push( + 'filesContainer', + 'uploadTemplateId', + 'downloadTemplateId' + ); + if (!$.blueimpIP) { + this._processingQueue = $.Deferred().resolveWith(this).promise(); + this.resize = function () { + return this._processingQueue; + }; + } + }, + enable: function () { - $.blueimpIP.fileupload.prototype.enable.call(this); + parentWidget.prototype.enable.call(this); this.element.find('input, button').prop('disabled', false); this._enableFileInputButton(); }, @@ -590,7 +614,7 @@ disable: function () { this.element.find('input, button').prop('disabled', true); this._disableFileInputButton(); - $.blueimpIP.fileupload.prototype.disable.call(this); + parentWidget.prototype.disable.call(this); } });