Jquery plugin for file upload and optional WYMeditor image insertion

jquery.wymeditor.attachments.js

(function($){

	$.Attachments = {
		defaults: {

			editLoader: '<div class="contentLoading formloader"><img src="/site_media/images/loading.gif" alt="Loading data, please wait...">',

			editLoaderS: 'div.formloader',

			listLoader: '<div class="contentLoading listloader"><img src="/site_media/images/loading.gif" alt="Loading data, please wait...">',

			listLoaderS: 'div.listloader',

			forceTrailingActionSlash: true,

			changeCallback: function(){}
		}
	};

	// attCreationUrl is the url to retreive the new/edit form
	// attListUrl is the url to hit to list all attachments
	$.fn.attachments = function(attCreationUrl, attListUrl, settings) {

		settings = $.extend({}, $.Attachments.defaults, settings);
		settings.attCreationUrl = attCreationUrl;
		settings.attListUrl = attListUrl;

		return this.each(function() {
			$.data(this, "attachments", settings);

			new Attachments($(this), settings);
		});
	};
})(jQuery);

function Attachments($elem, settings) {
	this._settings = settings;
	this._$elem = $elem;

	this.editing = false; //We start of with a creation form
	this.attEditUrl = null;

	this.init();
};

Attachments.prototype.init = function() {
	this.editHref = null; //The link to the currently-being-edited attachment
	this.listMessages = [];

	$.ajaxSetup({'cache': false});

	this.editDeleteBound = false;

	this.initDisplay();
};

Attachments.prototype.changeOccured = function() {
	var callback = this._settings.changeCallback

	if (callback != null){
		callback();
	}
}

Attachments.prototype.removeEditedAttFromList = function() {
	if(this.editing && this.attEditUrl != null){
		$editLink = this._$elem.find('a[href='+this.attEditUrl+']');
		$row = $editLink.parent().parent();
		$row.remove();
	}
}

Attachments.prototype.handleEditClick = function($link, $parent){
	var href = $link.attr('href');

	this.editing = true;
	this.attEditUrl = href;

	this.removeEditedAttFromList();
	this.updateAttachmentList();
	this.updateAttachmentForm();
}

Attachments.prototype.handleDeleteClick = function($link, $parent){
	var href = $link.attr('href');
	var a = this;

	a.showListLoader();
	a.showEditLoader();
	function deletionCallback(data, textStatus){
		if(data.success == true){
			a.listMessages.push('Attachment Removed');
			a.changeOccured();

			a.updateAttachmentList();
			a.updateAttachmentForm();
		}
	}
	$.post(href, {}, deletionCallback, "json");
}



Attachments.prototype.bindToSubmit = function() {
	// Override the submit to use AJAX
	if(this.editing == true){
		this.bindEditForm();
	}else{
		this.bindCreateForm();
	}
}

Attachments.prototype.bindEditForm = function() {
	var a = this;
	var settings = a._settings;
	var $elem = this._$elem;

	function beforeSubmitEdit(data, $object, form_settings) {
		a.showEditLoader();
	}

	function successEdit(response) {
		a.hideEditLoader();

		var $attachment_add = $elem.find('div.attachment_add');
		var $response = $(response);
		$attachment_add.html($response);

		// Weird ie8 workaround for the form element not containing the form stuff
		if( $attachment_add.find('form').children().length == 0 ){
			// ie8 also strips trailing slashes off of the action url
			var action = $response.attr('action');
			if (settings.forceTrailingActionSlash) {
				if (action[action.length-1] != '/') {
					action = action + '/';
				}
			}
			var form = $attachment_add.find('form');
			if (typeof(action) != 'undefined' && action != '') {
				$(form).attr('action', action);
			}
			var siblings = $(form).siblings();
			siblings.remove();
			form.append(siblings);
		}

		$edit_form = $('#attachment_edit')
		if($edit_form.length == 0){ //Successful edit, because we got a new form
			a.editing = false;
			//Prepend a success message, since we just edited the attachment
			a.listMessages.push('Attachment Successfully Modified');
			a.changeOccured();
		}

		a.bindToSubmit();
		a.updateAttachmentList();
	}

	var $attachment_add = $elem.find('div.attachment_add');
	// Attach the ajax stuff to our retreived form
	$('#attachment_edit').unbind();
	$('#attachment_edit').ajaxForm({
		'beforeSubmit': beforeSubmitEdit,
		'success': successEdit,
		'iframe': true
	});
}

Attachments.prototype.bindCreateForm = function() {
	var a = this;
	var settings = a._settings;
	var $elem = this._$elem;

	function beforeSubmitCreate(data, $object, form_settings) {
		a.showEditLoader();
	}

	function successCreate(response) {
		a.hideEditLoader();

		var $attachment_add = $elem.find('div.attachment_add');
		var $response = $(response);
		$attachment_add.html($response);

		// Weird ie8 workaround for the form element not containing the form stuff
		if( $attachment_add.find('form').children().length == 0 ){
			// ie8 also strips trailing slashes off of the action url
			var action = $response.attr('action');
			if (settings.forceTrailingActionSlash) {
				if (action[action.length-1] != '/') {
					action = action + '/';
				}
			}
			var form = $attachment_add.find('form');
			if (typeof(action) != 'undefined' && action != '') {
				$(form).attr('action', action);
			}
			var siblings = $(form).siblings();
			siblings.remove();
			form.append(siblings);
		}
		a.listMessages.push('Attachment Successfully Saved');
		a.changeOccured();
		a.bindToSubmit();
		a.updateAttachmentList();
	}

	// Attach the ajax stuff to our retreived form
	$('form.attachment').ajaxForm({
		'beforeSubmit': beforeSubmitCreate,
		'success': successCreate,
		'iframe': true
	});
}


Attachments.prototype.initDisplay = function() {
	var $elem = this._$elem;
	var a = this;
	var settings = a._settings;

	html = '<div class="attachments">';
	html	+= '<div class="attachment_add"></div>';
	html	+= '<div class="attachment_list"></div>';
	html	+= '</div>';

	$elem.html(html);
	a.bindEditDelete();

	// Load the current attachments
	a.updateAttachmentList();
	a.updateAttachmentForm();
}

Attachments.prototype.bindEditDelete = function() {
	var a = this;
	var settings = a._settings;
	var $elem = this._$elem;

	var $attachment_list = $elem.find('div.attachment_list');

	$attachment_list.click(function(target) {
		$link = $(target.target);
		$parent = $link.parent();

		if($parent.hasClass('edit')){
			a.handleEditClick($link, $parent);
			return false;
		}else if($parent.hasClass('delete')){
			a.handleDeleteClick($link, $parent);
			return false;
		}else if($link.hasClass('insert_image')){
			//Handle image insertion
			$wym = $.wymeditors(0);
			$wym._iframe.contentWindow.focus(); // For ie8. See WYMeditor #154
			//This timestamp is used so we can find our image after we insert it
			var sStamp = $wym.uniqueStamp();
			$wym._exec(WYMeditor.INSERT_IMAGE, sStamp);

			var src = $parent.parent().find('a.attachment_url').attr('href');
			var title = $parent.parent().find('.attachment_title').text();
			jQuery("img[src$=" + sStamp + "]", $wym._doc.body)
				.attr(WYMeditor.SRC, src)
				.attr(WYMeditor.TITLE, title)
				.attr(WYMeditor.ALT, title);
			return false;
		}else{
			//Some other kind of link
			return true;
		}
	});
}

Attachments.prototype.updateAttachmentList = function() {
	var a = this;
	var settings = a._settings;

	var $attachmentList = a._$elem.find('div.attachment_list');

	a.showListLoader();

	$attachmentList.load(settings.attListUrl, null,
		function(){
			a.hideListLoader();
			a.removeEditedAttFromList();

			while(a.listMessages.length > 0){
				message = a.listMessages.pop();
				message = '<p class="attachment_msg">'+message+'</p>';
				$attachmentList.prepend(message);
			}
		}
	);
}

Attachments.prototype.updateAttachmentForm = function() {
	var a = this;
	var settings = a._settings;

	var $attachment_add = a._$elem.find('div.attachment_add');

	// Load the attachment form, depending on whether or not we're editing
	var loadUrl = ''
	if(a.editing == true){
		loadUrl = this.attEditUrl;
	}else{
		loadUrl = settings.attCreationUrl;
	}
	a.showEditLoader();
	$attachment_add.load(loadUrl, null,
		function(responseText, textStatus, request){
			a.hideEditLoader();
			a.bindToSubmit();
		}
	);
}

Attachments.prototype.hideEditLoader = function() {
	var $div = this._$elem.find('div.attachment_add');
	var $loader = this._$elem.find(this._settings.editLoaderS);

	$loader.hide();
	$div.show();
}
Attachments.prototype.showEditLoader = function() {
	var $div = this._$elem.find('div.attachment_add');
	var $loader = this._$elem.find(this._settings.editLoaderS);

	if($loader.length == 0){
		$div.before(this._settings.editLoader);
		$loader = this._$elem.find(this._settings.editLoaderS);
	}
	$div.hide();
	$loader.show();
}
Attachments.prototype.hideListLoader = function() {
	var $div = this._$elem.find('div.attachment_list');
	var $loader = this._$elem.find(this._settings.listLoaderS);

	$loader.hide();
	$div.show();
}
Attachments.prototype.showListLoader = function() {
	var $div = this._$elem.find('div.attachment_list');
	var $loader = this._$elem.find(this._settings.listLoaderS);

	if($loader.length == 0){
		$div.before(this._settings.listLoader);
		$loader = this._$elem.find(this._settings.listLoaderS);
	}
	$div.hide();
	$loader.show();
}