Proyectos de Subversion LeadersLinked - Antes de SPA

/**

 * jquery.plupload.queue.js

 *

 * Copyright 2009, Moxiecode Systems AB

 * Released under GPL License.

 *

 * License: http://www.plupload.com/license

 * Contributing: http://www.plupload.com/contributing

 */

/* global jQuery:true, alert:true */

/**

jQuery based implementation of the Plupload API - multi-runtime file uploading API.

To use the widget you must include _jQuery_. It is not meant to be extended in any way and is provided to be

used as it is.

@example

	<!-- Instantiating: -->

	<div id="uploader">

		<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>

	</div>

	<script>

		$('#uploader').pluploadQueue({

			url : '../upload.php',

			filters : [

				{title : "Image files", extensions : "jpg,gif,png"}

			],

			rename: true,

			flash_swf_url : '../../js/Moxie.swf',

			silverlight_xap_url : '../../js/Moxie.xap',

		});

	</script>

@example

	// Retrieving a reference to plupload.Uploader object

	var uploader = $('#uploader').pluploadQueue();

	uploader.bind('FilesAdded', function() {

		// Autostart

		setTimeout(uploader.start, 1); // "detach" from the main thread

	});

@class pluploadQueue

@constructor

@param {Object} settings For detailed information about each option check documentation.

	@param {String} settings.url URL of the server-side upload handler.

	@param {Number|String} [settings.chunk_size=0] Chunk size in bytes to slice the file into. Shorcuts with b, kb, mb, gb, tb suffixes also supported. `e.g. 204800 or "204800b" or "200kb"`. By default - disabled.

	@param {String} [settings.file_data_name="file"] Name for the file field in Multipart formated message.

	@param {Array} [settings.filters=[]] Set of file type filters, each one defined by hash of title and extensions. `e.g. {title : "Image files", extensions : "jpg,jpeg,gif,png"}`. Dispatches `plupload.FILE_EXTENSION_ERROR`

	@param {String} [settings.flash_swf_url] URL of the Flash swf.

	@param {Object} [settings.headers] Custom headers to send with the upload. Hash of name/value pairs.

	@param {Number|String} [settings.max_file_size] Maximum file size that the user can pick, in bytes. Optionally supports b, kb, mb, gb, tb suffixes. `e.g. "10mb" or "1gb"`. By default - not set. Dispatches `plupload.FILE_SIZE_ERROR`.

	@param {Number} [settings.max_retries=0] How many times to retry the chunk or file, before triggering Error event.

	@param {Boolean} [settings.multipart=true] Whether to send file and additional parameters as Multipart formated message.

	@param {Object} [settings.multipart_params] Hash of key/value pairs to send with every file upload.

	@param {Boolean} [settings.multi_selection=true] Enable ability to select multiple files at once in file dialog.

	@param {Boolean} [settings.prevent_duplicates=false] Do not let duplicates into the queue. Dispatches `plupload.FILE_DUPLICATE_ERROR`.

	@param {String|Object} [settings.required_features] Either comma-separated list or hash of required features that chosen runtime should absolutely possess.

	@param {Object} [settings.resize] Enable resizng of images on client-side. Applies to `image/jpeg` and `image/png` only. `e.g. {width : 200, height : 200, quality : 90, crop: true}`

		@param {Number} [settings.resize.width] If image is bigger, it will be resized.

		@param {Number} [settings.resize.height] If image is bigger, it will be resized.

		@param {Number} [settings.resize.quality=90] Compression quality for jpegs (1-100).

		@param {Boolean} [settings.resize.crop=false] Whether to crop images to exact dimensions. By default they will be resized proportionally.

	@param {String} [settings.runtimes="html5,flash,silverlight,html4"] Comma separated list of runtimes, that Plupload will try in turn, moving to the next if previous fails.

	@param {String} [settings.silverlight_xap_url] URL of the Silverlight xap.

	@param {Boolean} [settings.unique_names=false] If true will generate unique filenames for uploaded files.

	@param {Boolean} [settings.dragdrop=true] Enable ability to add file to the queue by drag'n'dropping them from the desktop.

	@param {Boolean} [settings.rename=false] Enable ability to rename files in the queue.

	@param {Boolean} [settings.multiple_queues=true] Re-activate the widget after each upload procedure.

*/

;(function($, plupload) {

	var uploaders = {};

	function _(str) {

		return plupload.translate(str) || str;

	}

	function renderUI(id, target) {

		// Remove all existing non plupload items

		target.contents().each(function(i, node) {

			node = $(node);

			if (!node.is('.plupload')) {

				node.remove();

			}

		});

		target.prepend(

			'<div class="plupload_wrapper plupload_scroll">' +

				'<div id="' + id + '_container" class="plupload_container">' +

					'<div class="plupload">' +

						'<div class="plupload_header">' +

							'<div class="plupload_header_content">' +

								'<div class="plupload_header_title">' + _('Select files') + '</div>' +

								'<div class="plupload_header_text">' + _('Add files to the upload queue and click the start button.') + '</div>' +

							'</div>' +

						'</div>' +

						'<div class="plupload_content">' +

							'<div class="plupload_filelist_header">' +

								'<div class="plupload_file_name">' + _('Filename') + '</div>' +

								'<div class="plupload_file_action">&nbsp;</div>' +

								'<div class="plupload_file_status"><span>' + _('Status') + '</span></div>' +

								'<div class="plupload_file_size">' + _('Size') + '</div>' +

								'<div class="plupload_clearer">&nbsp;</div>' +

							'</div>' +

							'<ul id="' + id + '_filelist" class="plupload_filelist"></ul>' +

							'<div class="plupload_filelist_footer">' +

								'<div class="plupload_file_name">' +

									'<div class="plupload_buttons">' +

										'<a href="#" class="plupload_button plupload_add" id="' + id + '_browse">' + _('Add Files') + '</a>' +

										'<a href="#" class="plupload_button plupload_start">' + _('Start Upload') + '</a>' +

									'</div>' +

									'<span class="plupload_upload_status"></span>' +

								'</div>' +

								'<div class="plupload_file_action"></div>' +

								'<div class="plupload_file_status"><span class="plupload_total_status">0%</span></div>' +

								'<div class="plupload_file_size"><span class="plupload_total_file_size">0 b</span></div>' +

								'<div class="plupload_progress">' +

									'<div class="plupload_progress_container">' +

										'<div class="plupload_progress_bar"></div>' +

									'</div>' +

								'</div>' +

								'<div class="plupload_clearer">&nbsp;</div>' +

							'</div>' +

						'</div>' +

					'</div>' +

				'</div>' +

				'<input type="hidden" id="' + id + '_count" name="' + id + '_count" value="0" />' +

			'</div>'

		);

	}

	$.fn.pluploadQueue = function(settings) {

		if (settings) {

			this.each(function() {

				var uploader, target, id, contents_bak;

				target = $(this);

				id = target.attr('id');

				if (!id) {

					id = plupload.guid();

					target.attr('id', id);

				}

				contents_bak = target.html();

				renderUI(id, target);

				settings = $.extend({

					dragdrop : true,

					browse_button : id + '_browse',

					container : id

				}, settings);

				// Enable drag/drop (see PostInit handler as well)

				if (settings.dragdrop) {

					settings.drop_element = id + '_filelist';

				}

				uploader = new plupload.Uploader(settings);

				uploaders[id] = uploader;

				function handleStatus(file) {

					var actionClass;

					if (file.status == plupload.DONE) {

						actionClass = 'plupload_done';

					}

					if (file.status == plupload.FAILED) {

						actionClass = 'plupload_failed';

					}

					if (file.status == plupload.QUEUED) {

						actionClass = 'plupload_delete';

					}

					if (file.status == plupload.UPLOADING) {

						actionClass = 'plupload_uploading';

					}

					var icon = $('#' + file.id).attr('class', actionClass).find('a').css('display', 'block');

					if (file.hint) {

						icon.attr('title', file.hint);

					}

				}

				function updateTotalProgress() {

					$('span.plupload_total_status', target).html(uploader.total.percent + '%');

					$('div.plupload_progress_bar', target).css('width', uploader.total.percent + '%');

					$('span.plupload_upload_status', target).html(

						plupload.sprintf(_('Uploaded %d/%d files'), uploader.total.uploaded, uploader.files.length)

					);

				}

				function updateList() {

					var fileList = $('ul.plupload_filelist', target).html(''), inputCount = 0, inputHTML;

					$.each(uploader.files, function(i, file) {

						inputHTML = '';

						if (file.status == plupload.DONE) {

							if (file.target_name) {

								inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_tmpname" value="' + plupload.xmlEncode(file.target_name) + '" />';

							}

							inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_name" value="' + plupload.xmlEncode(file.name) + '" />';

							inputHTML += '<input type="hidden" name="' + id + '_' + inputCount + '_status" value="' + (file.status == plupload.DONE ? 'done' : 'failed') + '" />';

							inputCount++;

							$('#' + id + '_count').val(inputCount);

						}

						fileList.append(

							'<li id="' + file.id + '">' +

								'<div class="plupload_file_name"><span>' + file.name + '</span></div>' +

								'<div class="plupload_file_action"><a href="#"></a></div>' +

								'<div class="plupload_file_status">' + file.percent + '%</div>' +

								'<div class="plupload_file_size">' + plupload.formatSize(file.size) + '</div>' +

								'<div class="plupload_clearer">&nbsp;</div>' +

								inputHTML +

							'</li>'

						);

						handleStatus(file);

						$('#' + file.id + '.plupload_delete a').click(function(e) {

							$('#' + file.id).remove();

							uploader.removeFile(file);

							e.preventDefault();

						});

					});

					$('span.plupload_total_file_size', target).html(plupload.formatSize(uploader.total.size));

					if (uploader.total.queued === 0) {

						$('span.plupload_add_text', target).html(_('Add Files'));

					} else {

						$('span.plupload_add_text', target).html(plupload.sprintf(_('%d files queued'), uploader.total.queued));

					}

					$('a.plupload_start', target).toggleClass('plupload_disabled', uploader.files.length == (uploader.total.uploaded + uploader.total.failed));

					// Scroll to end of file list

					fileList[0].scrollTop = fileList[0].scrollHeight;

					updateTotalProgress();

					// Re-add drag message if there is no files

					if (!uploader.files.length && uploader.features.dragdrop && uploader.settings.dragdrop) {

						$('#' + id + '_filelist').append('<li class="plupload_droptext">' + _("Drag files here.") + '</li>');

					}

				}

				function destroy() {

					delete uploaders[id];

					uploader.destroy();

					target.html(contents_bak);

					uploader = target = contents_bak = null;

				}

				uploader.bind("UploadFile", function(up, file) {

					$('#' + file.id).addClass('plupload_current_file');

				});

				uploader.bind('Init', function(up, res) {

					// Enable rename support

					if (!settings.unique_names && settings.rename) {

						target.on('click', '#' + id + '_filelist div.plupload_file_name span', function(e) {

							var targetSpan = $(e.target), file, parts, name, ext = "";

							// Get file name and split out name and extension

							file = up.getFile(targetSpan.parents('li')[0].id);

							name = file.name;

							parts = /^(.+)(\.[^.]+)$/.exec(name);

							if (parts) {

								name = parts[1];

								ext = parts[2];

							}

							// Display input element

							targetSpan.hide().after('<input type="text" />');

							targetSpan.next().val(name).focus().blur(function() {

								targetSpan.show().next().remove();

							}).keydown(function(e) {

								var targetInput = $(this);

								if (e.keyCode == 13) {

									e.preventDefault();

									// Rename file and glue extension back on

									file.name = targetInput.val() + ext;

									targetSpan.html(file.name);

									targetInput.blur();

								}

							});

						});

					}

					$('#' + id + '_container').attr('title', 'Using runtime: ' + res.runtime);

					$('a.plupload_start', target).click(function(e) {

						if (!$(this).hasClass('plupload_disabled')) {

							uploader.start();

						}

						e.preventDefault();

					});

					$('a.plupload_stop', target).click(function(e) {

						e.preventDefault();

						uploader.stop();

					});

					$('a.plupload_start', target).addClass('plupload_disabled');

				});

				uploader.bind("Error", function(up, err) {

					var file = err.file, message;

					if (file) {

						message = err.message;

						if (err.details) {

							message += " (" + err.details + ")";

						}

						if (err.code == plupload.FILE_SIZE_ERROR) {

							alert(_("Error: File too large:") + " " + file.name);

						}

						if (err.code == plupload.FILE_EXTENSION_ERROR) {

							alert(_("Error: Invalid file extension:") + " " + file.name);

						}

						file.hint = message;

						$('#' + file.id).attr('class', 'plupload_failed').find('a').css('display', 'block').attr('title', message);

					}

					if (err.code === plupload.INIT_ERROR) {

						setTimeout(function() {

							destroy();

						}, 1);

					}

				});

				uploader.bind("PostInit", function(up) {

					// features are populated only after input components are fully instantiated

					if (up.settings.dragdrop && up.features.dragdrop) {

						$('#' + id + '_filelist').append('<li class="plupload_droptext">' + _("Drag files here.") + '</li>');

					}

				});

				uploader.init();

				uploader.bind('StateChanged', function() {

					if (uploader.state === plupload.STARTED) {

						$('li.plupload_delete a,div.plupload_buttons', target).hide();

						uploader.disableBrowse(true);

						$('span.plupload_upload_status,div.plupload_progress,a.plupload_stop', target).css('display', 'block');

						$('span.plupload_upload_status', target).html('Uploaded ' + uploader.total.uploaded + '/' + uploader.files.length + ' files');

						if (settings.multiple_queues) {

							$('span.plupload_total_status,span.plupload_total_file_size', target).show();

						}

					} else {

						updateList();

						$('a.plupload_stop,div.plupload_progress', target).hide();

						$('a.plupload_delete', target).css('display', 'block');

						if (settings.multiple_queues && uploader.total.uploaded + uploader.total.failed == uploader.files.length) {

							$(".plupload_buttons,.plupload_upload_status", target).css("display", "inline");

							uploader.disableBrowse(false);

							$(".plupload_start", target).addClass("plupload_disabled");

							$('span.plupload_total_status,span.plupload_total_file_size', target).hide();

						}

					}

				});

				uploader.bind('FilesAdded', updateList);

				uploader.bind('FilesRemoved', function() {

					// since the whole file list is redrawn for every change in the queue

					// we need to scroll back to the file removal point to avoid annoying

					// scrolling to the bottom bug (see #926)

					var scrollTop = $('#' + id + '_filelist').scrollTop();

					updateList();

					$('#' + id + '_filelist').scrollTop(scrollTop);

				});

				uploader.bind('FileUploaded', function(up, file) {

					handleStatus(file);

				});

				uploader.bind("UploadProgress", function(up, file) {

					// Set file specific progress

					$('#' + file.id + ' div.plupload_file_status', target).html(file.percent + '%');

					handleStatus(file);

					updateTotalProgress();

				});

				// Call setup function

				if (settings.setup) {

					settings.setup(uploader);

				}

			});

			return this;

		} else {

			// Get uploader instance for specified element

			return uploaders[$(this[0]).attr('id')];

		}

	};

})(jQuery, plupload);