EditInPlace = function() { }; EditInPlace.settings = function(set) { var settings = { id: false, save_url: false, css_class: 'eip_editable', savebutton: 'eip_savebutton', cancelbutton: 'eip_cancelbutton', saving: 'eip_saving', empty: 'eip_empty', type: 'text', is_empty: false, empty_text: 'Click To Edit', orig_text: false, options: { }, option_name: false
}; for(var i in set) { settings[i] = set[i];}
return($H(settings));}; EditInPlace.formField = function(set) { var field = ''; if(set['is_empty'] == true) { $(set['id']).innerHTML = '';}
set['orig_text'] = $(set['id']).innerHTML; if(set['type'] == 'text') { var size = set['orig_text'].length + 10; if(size >= 100) { size = 100;}
if(set['size']) { size = set['size'];}
field = '<span id="' + set['id'] + '_editor"><input id="' + set['id'] + '_edit" class="' + set['css_class'] + '" name="' + set['id'] + '_edit" type="text" size="' + size + '" value="' + set['orig_text'] + '" /><br />';}
else if(set['type'] == 'textarea') { var cols = 50; if(set['cols']) { cols = set['cols'];}
var rows = (set['orig_text'].length / cols) + 3; if(set['rows']) { rows = set['rows'];}
field = '<span id="' + set['id'] + '_editor"><textarea id="' + set['id'] + '_edit" class="' + set['css_class'] + '" name="' + set['id'] + '_edit" rows="' + rows + '" cols="' + cols + '">' + set['orig_text'] + '</textarea><br />';}
else if(set['type'] == 'select') { field = '<span id="' + set['id'] + '_editor"><select id="' + set['id'] + '_edit" class="' + set['css_class'] + '" name="' + set['id'] + '_edit">'; for(var i in set['options']) { field += '<option id="' + set['id'] + '_option_' + i + '" name="' + set['id'] + '_option_' + i + '" value="' + i + '"'; if(set['options'][i] == $(set['id']).innerHTML) { field += ' selected="selected"';}
field += '>' + set['options'][i] + '</option>';}
field += '</select>&nbsp;';}
return(field);}; EditInPlace.formButtons = function(set) { return( '<span><input id="' + set['id'] + '_save" class="' + set['savebutton'] + '" type="button" value="SAVE" />' + '<input id="' + set['id'] + '_cancel" class="' + set['cancelbutton'] + '" type="button" value="CANCEL" />' + '</span></span>' );}; EditInPlace.setEvents = function(set) { Event.observe( set['id'], 'mouseover', function() { Element.addClassName(set['id'], set['css_class']);}, false ); Event.observe( set['id'], 'mouseout', function() { Element.removeClassName(set['id'], set['css_class']);}, false ); Event.observe( set['id'], 'click', function() { Element.hide(set['id']); var field = EditInPlace.formField(set); var button = EditInPlace.formButtons(set); new Insertion.After(set['id'], field + button); Field.focus(set['id'] + '_edit'); Event.observe( set['id'] + '_save', 'click', function() { EditInPlace.saveChanges(set);}, false ); Event.observe( set['id'] + '_cancel', 'click', function() { EditInPlace.cancelChanges(set);}, false );}, false );}; EditInPlace.saveComplete = function(t, set) { if(t.responseText == '') { set['is_empty'] = true; $(set['id']).innerHTML = '<span class="' + set['empty'] + '">' + set['empty_text'] + '</span>';}
else { set['is_empty'] = false; $(set['id']).innerHTML = t.responseText;}
Element.removeClassName(set['id'], set['css_class']);}; EditInPlace.saveFailed = function(t, set) { $(set['id']).innerHTML = set['orig_text']; Element.removeClassName(set['id'], set['css_class']); alert('Failed to save changes.');}; EditInPlace.saveChanges = function(set) { var new_text = encodeURIComponent($F(set['id'] + '_edit')); $(set['id']).innerHTML = '<span class="' + set['saving'] + '">Saving ...</span>'; var params = 'var_id=' + set['id'] + '&var_value=' + new_text + '&action=' + set['action'] + '&keyval=' + set['keyval'] + '&pagename=' + set['pagename']; if(set['type'] == 'select') { params += '&option_name=' + $(set['id'] + '_option_' + new_text).innerHTML;}
Element.remove(set['id'] + '_editor'); Element.show(set['id']); var ajax_req = new Ajax.Request( set['save_url'], { method: 'post', postBody: params, onSuccess: function(t) { EditInPlace.saveComplete(t, set);}, onFailure: function(t) { EditInPlace.saveFailed(t, set);}
} );}; EditInPlace.cancelChanges = function(set) { Element.remove(set['id'] + '_editor'); Element.removeClassName(set['id'], set['css_class']); if($(set['id']).innerHTML == '') { set['is_empty'] = true; $(set['id']).innerHTML = '<span class="' + set['empty'] + '">' + set['empty_text'] + '</span>';}
Element.show(set['id']);}
EditInPlace.makeEditable = function(args) { var set = EditInPlace.settings(args); if($(set['id']).innerHTML == '') { set['is_empty'] = true; $(set['id']).innerHTML = '<span class="' + set['empty'] + '">' + set['empty_text'] + '</span>';}
EditInPlace.setEvents(set);}