$('#page').inlineEdit();
$.fn.inlineEdit = function (opts) {
var options = $.extend({
element: null,
state: 0
}, opts);
return this.each(function () {
var self = this, field, liveElement;
// Setup event handling
$('#page .editable').live('click', function (evnt) {
options.element = this;
// check state
self.toggleState();
if (options.state == 1) {
// Find type
liveElement = $(this);
// Regular textfield
if (liveElement.hasClass('text')) {
field = self.setElement('text', liveElement.html());
}
if (liveElement.hasClass('richtext')) {
field = self.setElement('richtext', liveElement.html());
}
liveElement.replaceWith(field);
}
// Leaving liveEdit
if (options.state == 0) {
var userInput = field.val() == "" ? field.html() : field.val();
liveElement.html(userInput);
field.replaceWith(liveElement);
$('#page .wysiwyg').remove();
}
if (liveElement.hasClass('richtext')) {
$('#elementfoo').wysiwyg({
css: '/stylesheets/wysiwyg.css'
});
}
return false;
});
// Toggle state mode
self.toggleState = function () {
if (options.state == 0) {
options.state = 1;
} else {
options.state = 0;
}
};
// Return the correct field
self.setElement = function (type, input) {
var elm;
switch (type) {
case 'text':
default:
elm = $('<input type="text" value="" />');
elm.val(input);
break;
case 'richtext':
elm = $('<textarea rows="3" cols="3" style="width: 260px; margin-bottom: 5px;"></textarea>');
elm.val(input);
break;
}
elm.attr('id', 'elementfoo');
elm.addClass('foo'+ type);
return elm;
};
// Get user input from element
self.getElement = function () {
var t = field.val();
return fieldValue;
};
});
};
Refactorings
No refactoring yet !
This is based on jquery and jquery wysiwyg, the problem is to get the editor to respond to "onblur" which is not implemented in jquery live. It would also be great to get this "stable" currently it's still buggy.