Editor_v2 (Entry Nr. 266, by user 1 | edit) |
|
ge_require_once('http://javascript.gibney.org/view.js');
ge_require_once('http://javascript.gibney.org/dynamic_html_elements.js');
// Global Variables -----------------------------------------------------------------------------------------
var isDOM=document.getElementById&&!document.all;
// ge_Highlighter -------------------------------------------------------------------------------------------
function ge_Highlighter(instanceName)
{
this.instanceName=instanceName;
this.lastObj=false;
this.lastObjBackgroundColor=false;
this.lastObjBackgroundImage=false;
// for color cycling
this.colorAngle=0;
this.colorAmplitude=15;
this.colorCurrent='#ebebdc';
this.cycleId=false;
this.activate = function()
{
this.cycleId=window.setInterval(this.instanceName+".setBackground()",250);
document.onmousemove=new Function("e", this.instanceName+".highlight(e);");
}
this.deactivate = function()
{
window.clearInterval(this.cycleId);
document.onmousemove=null;
this.restoreObjState();
}
this.highlight = function(e)
{
var Obj = isDOM ? e.target : event.srcElement;
this.restoreObjState();
this.lastObj=Obj;
this.saveObjState();
if (Obj.style)
{
this.lastObj.style.backgroundColor=this.colorCurrent;
this.lastObj.style.backgroundImage='none';
}
}
this.setBackground = function ()
{
if (!this.lastObj) return;
if (!this.lastObj.style) return;
var dec=(250-this.colorAmplitude)+(this.colorAmplitude*Math.sin(this.colorAngle));
dec=Math.floor(dec);
var hex=dec.toString(16);
if (hex.length==1) hex='0'+hex;
this.colorCurrent='#'+hex+hex+'dc'
this.lastObj.style.backgroundColor=this.colorCurrent;
this.colorAngle+=0.5;
}
this.restoreObjState = function()
{
if(this.lastObjBackgroundColor!==false)
{
this.lastObj.style.backgroundColor=this.lastObjBackgroundColor;
this.lastObj.style.backgroundImage=this.lastObjBackgroundImage;
}
}
this.saveObjState = function()
{
if(this.lastObj.style && this.lastObj.style)
{
this.lastObjBackgroundColor=this.lastObj.style.backgroundColor;
if (!this.lastObjBackgroundColor) this.lastObjBackground='transparent';
this.lastObjBackgroundImage=this.lastObj.style.backgroundImage;
if (!this.lastObjBackgroundImage) this.lastObjBackgroundImage='';
}
else
{
this.lastObjBackgroundColor=false;
this.lastObjBackgroundImage=false;
}
}
}
// ge_Editor -------------------------------------------------------------------------------------------------
function ge_Editor(instanceName)
{
this.instanceName=instanceName;
this.editObj=false;
this.editorDiv=false;
// add highlighting of the current element
this.highlighter=new ge_Highlighter(this.instanceName+'.highlighter');
this.activate = function()
{
this.highlighter.activate();
document.onclick =new Function("e", this.instanceName+".edit(e); return false;");
document.onkeyup =new Function("e", this.instanceName+".deactivateOnEsc(e); return false;");
}
this.deactivate = function()
{
this.highlighter.deactivate();
removeDiv('ge_editor_div');
document.onclick = null;
document.onkeyup = null;
}
this.deactivateOnEsc = function(e)
{
if (!e) e=window.event;
if (e.keyCode==27)
{
this.deactivate();
}
}
this.edit = function(e)
{
this.deactivate();
document.onkeyup =new Function("e", this.instanceName+".deactivateOnEsc(e); return false;");
this.editObj=isDOM ? e.target : event.srcElement;
var editorWidth=400;
var editorHeight=300;
var editorX=ge_view_getScrollX()+(ge_view_getWidth()/2)-(editorWidth/2);
var editorY=ge_view_getScrollY()+(ge_view_getHeight()/2)-(editorHeight/2);
if (this.editObj.tagName=='INPUT') var editValue=this.editObj.value;
else var editValue=this.editObj.innerHTML;
var content ='';
content+=' ';
content+=' ';
content+=' OK ';
content+=' X';
content+='  | The Editor V2.01 is active.
Left-click on any element to edit it.
Press ESC to deactivate. |
');
message.style.zIndex=9999;
window.setTimeout("removeDiv('ge_editor_info_div')",2000);
}
startMain();
|
|
|
|
