Skip to content

Instantly share code, notes, and snippets.

@winhamwr
Created April 19, 2011 18:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save winhamwr/929104 to your computer and use it in GitHub Desktop.
Save winhamwr/929104 to your computer and use it in GitHub Desktop.
Jquery plugin for file upload and optional WYMeditor image insertion
(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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment