Editor (Entry Nr. 58, by user 1 | edit) |
|
|
ge_require_once('http://javascript.gibney.org/view.js');
ge_require_once('http://javascript.gibney.org/dynamic_html_elements.js');
ge_require_once('http://javascript.gibney.org/outerhtml.js');
// Global Variables -----------------------------------------------------------------------------------------
var isDOM = document.getElementById && !document.all;
// ======================================================================
// = JS Loader t be used in loaction bar ===============================
/*javascript: ge_bookmarklet_loader("editor");
function % 20ge_bookmarklet_loader(name) {
if (typeof(ge_bookmarklets) == "undefined") ge_bookmarklets = {};
if (typeof ge_bookmarklets[name] == "undefined") ge_bookmarklets[name] = {};
else if(ge_bookmarklets[name].active) % 20return;
ge_bookmarklets[name].parameter = "%s";
ge_bookmarklets.currentName = name;
ge_bookmarklets[name].active = true;
var head = document.getElementsByTagName("head").item(0);
var script = document.createElement("script");
script.src = "http://js.gibney.org/" + name + ".js";
script.type = "text/javascript";
head.appendChild(script);
}*/
// ======================================================================
// 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.enterEditMode = function()
{
this.highlighter.deactivate();
removeDiv('ge_editor_div');
document.onclick = null;
document.onkeyup = null;
// trap clicks, so one cannot accidentaly move away from the page while editing:
document.onclick = new Function("e", this.instanceName + ".onClickInEditMode(e); return false;");
}
this.leaveEditMode = 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.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.name = ge_bookmarklets.currentName;
ge_bookmarklets[this.name].active = true;
}
this.deactivate = function()
{
this.highlighter.deactivate();
removeDiv('ge_editor_div');
document.onclick = null;
document.onkeyup = null;
if (ge_bookmarklets[this.name].active == true)
{
delete ge_bookmarklets[this.name]['active'];
}
}
this.onClickInEditMode = function(e)
{
// we dont do anything here. Clicks are handled by the onclick events
// of the editor dialog.
}
this.deactivateOnEsc = function(e)
{
if (!e)
{
e = window.event;
}
if (e.keyCode == 27)
{
this.deactivate();
}
}
this.o
this.edit = function(e)
{
// this.deactivate();
this.enterEditMode();
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);
this.setEditValue = function(e){
switch (e.tagName)
{
case 'INPUT' :
editValue = e.value;
break;
case 'IMG' :
editValue = e.src;
if(e.parentNode.nodeName == 'A')
{
editLink = e.parentNode;
}
break;
case 'A' :
editValue = e.innerHTML;
editLink = e.href;
break;
default :
editValue = e.innerHTML;
}
}
var editValue;
var editLink;
this.setEditValue(this.editObj);
this.setBreadcrumb = function(e)
{
var allParents = getParents(e);
var path = '' + e.nodeName + '';
return path;
}
var content = '';
content += ' ' + this.setBreadcrumb(this.editObj) + ' ';
content += ' | |
