Skip to content

Commit

Permalink
Make the Image Processing plugin as well as the LoadImage and Templat…
Browse files Browse the repository at this point in the history 
…es functions optional dependencies.

Added the filesContainer option.
Allow setting the uploadTemplateId and downloadTemplateId options after
widget initialization.
  • Loading branch information
@blueimp
blueimp committed Mar 6, 2012
1 parent 0eeaac1 commit 276de2e
Showing 1 changed file with 70 additions and 46 deletions.
116 changes: 70 additions & 46 deletions js/jquery.fileupload-ui.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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) &&
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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);
});
Expand All @@ -384,7 +383,7 @@
maxHeight: options.previewMaxHeight,
canvas: options.previewAsCanvas
}
) || deferred.resolveWith(node)) && deferred;
)) || deferred.resolveWith(node)) && deferred;
},

_renderPreviews: function (files, nodes) {
Expand Down Expand Up @@ -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();
Expand All @@ -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) {
Expand Down Expand Up @@ -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,
Expand All @@ -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 () {
Expand All @@ -564,33 +569,52 @@

_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();
},

disable: function () {
this.element.find('input, button').prop('disabled', true);
this._disableFileInputButton();
$.blueimpIP.fileupload.prototype.disable.call(this);
parentWidget.prototype.disable.call(this);
}

});
Expand Down

0 comments on commit 276de2e

Please sign in to comment.