/*
* inplaced.js - AJAX inplace edit script
*
* Copyright (c) 2009 Zoran Hron (BBM)
*
* dependencies: tiny_mce.js, jquery.js
*
* usage:
*
* to make a HTML element in-place editable, it is necessary to add the following
* custom attributes to tag declaration:
*
* - add class 'inplace_edit' within tag class attribute
* - add 'tinyMCE' attribute (possible values: 'false', 'minimal', 'basic', 'normal', 'rich')
* - add 'ajaxURL' attribute and place your AJAX server script URL there
* PHP server script should accept $_REQUEST['value'] parameter and return a json string
* with two params: "msg" and "result"
*
*
* Examples
* --------
*
* input tag:
*
*
* Click here to edit
*
*
* server PHP code:
*
* "success", "result"=>"stored_value")); ?>
*
*/
var pathToTinyExtra = '/Themes/Default/javascript/tiny_mce/examples';
if(typeof(jQuery) == 'undefined') {
alert('inplaced.js requires JQuery javascritp librarry!');
}
$(document).ready(
function() {
$('.inplace_edit').each(
function() {
/*
$(this).click(
function() {
var ed_inp = new EdInPlace(this);
ed_inp.init();
}
);
*/
$(this).hover(
function() {
$(this).addClass("inplace_active");
},
function() {
$(this).removeClass("inplace_active");
}
);
}
);
$('.inplace_edit').bind('click', function(e){
attachEditor(this);
});
}
);
function EdInPlace(obj) {
var self = this;
this.destElem = obj;
this.init = function() {
this.elemType = this.destElem.tagName;
this.tinyMode = $(this.destElem).attr('tinyMCE');
this.ajaxURL = $(this.destElem).attr('ajaxUrl');
this.minWidth = $(this.destElem).attr('minWidth');
this.minHeight = $(this.destElem).attr('minHeight');
this.elemID = $(this.destElem).attr('id');
this.elemWidth = $(this.destElem).css("width");
this.elemHeight = $(this.destElem).css("height");
this.elemInitialValue = this.getElemValue(this.destElem);
if(typeof(this.minWidth) != 'undefined') {
this.elemWidth = this.minWidth;
}
if(typeof(this.minHeight) != 'undefined') {
this.elemHeight = this.minHeight;
}
if(typeof(this.elemID) == 'undefined') {
this.missingAttrMsg('id');
return false;
}
if(typeof(this.ajaxURL) == 'undefined') {
this.missingAttrMsg('ajaxURL');
return false;
}
var html_ins;
if(typeof(this.tinyMode) == 'undefined') {
this.attachTextarea();
} else if (this.tinyMode == 'false') {
this.attachTextarea();
} else {
if(typeof(tinyMCE) == 'undefined') {
alert("[inplaced.js]: Can't attach TinyMCE - TinyMCE not loaded!");
return false;
}
this.attachTiny();
}
}
this.attachTiny = function() {
$(self.destElem).hide();
var tiny_edit = new TinySettings();
html_ins = '';
$(self.destElem).after(html_ins);
tiny_edit.setupTiny(self.tinyMode, 'exact', self.elemID+ '_edit');
$('#'+self.elemID+'_save').click(
function() {
var ajax_data = "value=" + escape(tinyMCE.get(self.elemID+'_edit').getContent());
tinyMCE.execCommand('mceRemoveControl', false, self.elemID+'_edit');
self.storeData(ajax_data);
}
);
$('#'+self.elemID+'_cancel').click(
function() {
tinyMCE.execCommand('mceRemoveControl', false, self.elemID+'_edit');
self.cancelEdit();
}
);
}
this.attachTextarea = function() {
$(self.destElem).hide();
html_ins = '';
$(self.destElem).after(html_ins);
$('#'+self.elemID+'_edit').keypress(function (e) {
if (e.which == 13 ) {
var ajax_data = "value=" + escape($('#'+self.elemID+'_edit').val());
self.storeData(ajax_data);
} else if (e.which == 27) {
self.cancelEdit();
}
});
$('#'+self.elemID+'_save').click(
function() {
var ajax_data = "value=" + escape($('#'+self.elemID+'_edit').val());
self.storeData(ajax_data);
}
);
$('#'+self.elemID+'_cancel').click(
function() {
self.cancelEdit();
}
);
}
this.missingAttrMsg = function(attr_str) {
alert('[inplaced.js]\r\n\r\nInvalid ' + self.elemType +
' tag. Mandatory tag attribute [' + attr_str +
'] undefined. Please, see an usage example bellow: \r\n\r\n' +
'