includes/clientside/static/upload.js
author Dan Fuhry <dan@enanocms.org>
Thu, 28 Oct 2010 03:05:31 -0400
changeset 1308 f9bee9b125ee
parent 1295 3c9c1b18567b
permissions -rw-r--r--
Parser updates. Added the "styled" keyword to wikitables to allow them to be styled using the current theme's standard table skinning, and changes to how the image tag parser decides how to display an image (framed, inline or raw).

window.AjaxUpload = function(formid)
{
	load_component(['jquery', 'jquery-ui', 'l10n']);
	
	var theform = document.getElementById(formid);
	theform.AjaxUpload = this;
	this.form = theform;
	
	$(this.form).submit(function()
		{
			return this.AjaxUpload.presubmit();
		});
};

window.zeropad = function(i, ndig)
{
	var s = String(i);
	while ( s.length < ndig )
		s = '0' + s;
	return s;
}

window.humanize_time = function(secs)
{
	var seconds = secs % 60;
	var minutes = (secs - seconds) / 60;
	if ( minutes >= 60 )
	{
		var hours = (minutes - (minutes % 60)) / 60;
		minutes = minutes % 60;
		return zeropad(hours, 2) + ':' + zeropad(minutes, 2) + ':' + zeropad(seconds, 2);
	}
	return zeropad(minutes, 2) + ':' + zeropad(seconds, 2);
}

AjaxUpload.prototype.cancelbit = false;
	
AjaxUpload.prototype.status = function(state)
	{
		if ( state.done )
		{
			$('div.wait-box', this.statusbox).text($lang.get('upload_msg_processing'));
			$('div.progress', this.statusbox).progressbar('value', 100);
		}
		else if ( state.cancel_upload )
		{
			if ( window.stop )
				window.stop();
			else if ( document.execCommand )
				document.execCommand('Stop');
			$('div.wait-box', this.statusbox).addClass('error-box').removeClass('wait-box').text($lang.get('upload_msg_cancelled'));
			
			$('div.progress', this.statusbox).progressbar('value', 100).addClass('ui-progressbar-failure');
		}
		else
		{
			var rawpct = state.bytes_processed / state.content_length;
			var pct = (Math.round((rawpct) * 1000)) / 10;
			var elapsed = state.current_time - state.start_time;
			var rawbps = state.bytes_processed / elapsed;
			var kbps = Math.round((rawbps) / 1024);
			var remain_bytes = state.content_length - state.bytes_processed;
			var remain_time = Math.round(remain_bytes / rawbps);
			if ( pct > 0 )
			$('div.wait-box', this.statusbox).text($lang.get('upload_msg_uploading', {
								percent: pct,
								elapsed: humanize_time(elapsed),
								speed: kbps,
								remain: humanize_time(remain_time)
							}))
					.append('<br /><a href="#" class="cancel"></a>');
			else
				$('div.wait-box', this.statusbox).text($lang.get('upload_msg_starting'))
					.append('<br /><a href="#" class="cancel"></a>');
			
			var au = this;
			$('a.cancel', this.statusbox).text($lang.get('upload_btn_cancel')).click(function()
				{
					au.cancel();
					return false;
				});
				
			$('div.progress', this.statusbox).progressbar('value', pct);
		}
	};
	
AjaxUpload.prototype.cancel = function()
	{
		this.cancelbit = true;
	};

AjaxUpload.prototype.refresh_status = function(au)
	{
		try
		{
			var cancelbit = au.cancelbit ? '&cancel=true' : '';
			au.cancelbit = false;
			ajaxGet(makeUrlNS('Special', 'AjaxUpload', 'form=' + au.form.id + '&uploadstatus=' + au.key + cancelbit), au._incoming_status);
		}
		catch (e)
		{
			alert(e);
		}
	};
	
AjaxUpload.prototype._incoming_status = function(ajax)
	{
		if ( ajax.readyState == 4 )
		{
			var state = parseJSON(ajax.responseText);
			if ( state )
			{
				var au = document.getElementById(state.form).AjaxUpload;
				au.status(state);
				
				if ( !state.done && !state.cancel_upload )
					setTimeout(function()
						{
							au.refresh_status(au)
						}, 250);
			}
		}
	};
	
AjaxUpload.prototype.presubmit = function()
	{
		try
		{
			// create status container and target iframe
			this.statusbox = document.createElement('div');
			this.iframe = document.createElement('iframe');
			this.iframe.AjaxUpload = this;
			$(this.iframe)
				.attr('src', 'about:blank')
				.attr('width', '1')
				.attr('height', '1')
				.attr('frameborder', '0')
				.css('visibility', 'hidden')
				.attr('name', this.form.id + '_frame')
				.load(this._frame_onload);
				
			this.form.parentNode.insertBefore(this.statusbox, this.form);
			this.form.parentNode.insertBefore(this.iframe, this.form);
			this.form.target = this.form.id + '_frame';
			
			this.upload_start();
			
			var have_progress_support = this.form.progress_support.value == 'true';
			if ( have_progress_support )
			{
				this.key = this.form[this.form.upload_progress_name.value].value;
				this.refresh_status(this);
			}
		}
		catch ( e )
		{
			console.debug(e);
			return false;
		}
		
		return true;
	};
	
AjaxUpload.prototype._frame_onload = function()
	{
		var childbody = window[this.AjaxUpload.form.id + '_frame'].document.getElementsByTagName('body')[0];
		window[this.AjaxUpload.form.id + '_frame'].document.close();
		this.AjaxUpload.upload_success(childbody);
	};
	
AjaxUpload.prototype.upload_start = function()
	{
		$(this.statusbox).html('<div class="wait-box">' + $lang.get('upload_msg_starting') + '</div><div class="progress" style="margin-top: 10px;"></div>');
		$('div.progress', this.statusbox).progressbar({ value: 0 });
		$(this.form).hide();
	};
	
AjaxUpload.prototype.upload_success = function(childbody)
	{
		$(this.statusbox).html('<div class="info-box">Upload complete! Result from server:' + childbody.innerHTML + '</div>');
		$('div.info-box', this.statusbox).append('<a href="#">Reset!</a>');
		var form_id = this.form.id;
		$('div.info-box a', this.statusbox).click(function()
			{
				try
				{
					var au = document.getElementById(form_id).AjaxUpload;
					au.reset();
				}
				catch(e) {};
				return false;
			});
	};
	
AjaxUpload.prototype.reset = function()
	{
		this.iframe.parentNode.removeChild(this.iframe);
		this.statusbox.parentNode.removeChild(this.statusbox);
		delete(window[this.form.id + '_frame']);
		$('form#' + this.form.id).show();
		return false;
	};