// InlineEdit.js
// Javascript Behaviour for the InlineEdit Control
// Copyright (c) by Matthias Hertel, http://www.mathertel.de
// This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx
// -----
// 04.04.2006 created by Matthias Hertel
// 15.09.2007 adding OpenAjax event functionality
// 18.12.2007 Simplifications and documentation.
var HtmlEditBehaviour = {
staticCont: null, // ... container
staticObj: null, // ... iframe
staticDoc: null, // ... document of the iframe
staticTimer: null,
_isInit: false,
eventnamespace: "de.mathertel.edit", /// Namespace of the events published by contained elements without a full qualified namespace.
init: function() {
if (! HtmlEditBehaviour._isInit)
OpenAjax.hub.subscribe(this.eventnamespace + ".*", this._listener, this);
HtmlEditBehaviour._isInit = true;
}, // init
// listen to de.mathertel.edit.* and execute the command on the current edit document.
_listener: function(name, data) {
var evName = name.substr(this.eventnamespace.length+1);
this.Command(evName, data);
}, // _listener
// ----- Events -----
// add highlight effect
onmouseover: function(evt) {
if (this.className == "editable")
this.className = "edithover"
},
// remove highlight effect
onmouseout: function(evt) {
if (this.className == "edithover")
this.className = "editable"
},
// Start Editing
onclick: function(evt) {
this.StartEditing();
}, // onclick
// ----- Methods -----
// add an editable iframe to the container
StartEditing: function() {
this.EndEditing();
HtmlEditBehaviour.staticCont = this;
var htmltext = this.innerHTML;
var obj = document.createElement("iframe");
HtmlEditBehaviour.staticObj = obj;
obj.scrolling="no";
obj.style.height = this.scrollHeight + "px";
if (jcl.isIE)
obj.style.width = (this.scrollWidth) + "px";
else
obj.style.width = (this.scrollWidth-2) + "px";
this.innerHTML = "";
this.className = "editmode";
this.appendChild(obj);
obj.className="editframe";
var edDoc;
if (obj.contentDocument)
edDoc = obj.contentDocument;
else
edDoc = obj.contentWindow.document;
HtmlEditBehaviour.staticDoc = edDoc;
edDoc.designMode="On";
edDoc.write("");
edDoc.write("");
edDoc.write("");
edDoc.write("" + htmltext + "");
edDoc.close();
window.setTimeout(HtmlEditBehaviour.StartEditing2, 100);
}, // StartEditing
// add an editable iframe to the container
StartEditing2: function() {
var edDoc = HtmlEditBehaviour.staticDoc;
// set the focus at the end of the inner Text
if (edDoc.createRange) {
HtmlEditBehaviour.staticObj.contentWindow.focus();
var r = edDoc.createRange();
if (edDoc.body) {
r.selectNode(edDoc.body.lastChild);
r.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(r);
} else {
window.setTimeout(HtmlEditBehaviour.StartEditing2, 100);
} // if
} else {
var r = edDoc.body.createTextRange();
r.collapse(false);
r.select();
HtmlEditBehaviour.AdjustHeight();
} // if
}, // StartEditing2
// remove the editable iframe from the container
EndEditing: function() {
if (HtmlEditBehaviour.staticDoc != null) {
var htmltext = HtmlEditBehaviour.staticDoc.body.innerHTML;
var c = HtmlEditBehaviour.staticCont;
c.removeChild(HtmlEditBehaviour.staticObj);
c.innerHTML = htmltext;
c.className = "editable";
} // if
// cut the references
HtmlEditBehaviour.staticCont = null;
HtmlEditBehaviour.staticObj = null;
HtmlEditBehaviour.staticDoc = null;
},
Command: function(cmd, p) {
if ((cmd) && (cmd.length > 0) && (HtmlEditBehaviour.staticDoc != null)) {
HtmlEditBehaviour.staticDoc.execCommand(cmd, false, p);
} // if
},
// check the height of the editable iframe's content and resize
AdjustHeight: function () {
var doc = HtmlEditBehaviour.staticDoc;
if (doc != null) {
var sh = doc.body.scrollHeight + "px";
var obj = HtmlEditBehaviour.staticObj;
if (obj.style.height != sh) {
obj.style.height = sh;
HtmlEditBehaviour.staticCont.style.height = sh;
} // if
window.setTimeout(HtmlEditBehaviour.AdjustHeight, 100);
} // if
} // AdjustHeight
} // HtmlEditBehaviour
// End