Eraser

gibney.org : Technology : Javascript : Bookmarklets : Eraser

(Entry Nr. 338, by user 1 | edit) search

if ('undefined'==typeof(ge_included))
{
 ge_included_left2load=0;
 ge_included=new Object();
 ge_included["http://javascript.gibney.org/standards.js"]=true;

function ge_require_once(src)
 {
  if(ge_included[src]) return;

ge_included_left2load++;

function startMain()
 {
  if (ge_included_left2load==0) main();
  else setTimeout("startMain()",250);
 }
}

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;");
  var O=isDOM ? e.target : event.srcElement;
  O.parentNode.removeChild(O);
  }
  
  this.confirmEdit = function()
  {
   var editValue=document.getElementById('ge_editor_obj_edit').value;
   
   if (this.editObj.tagName=='INPUT') this.editObj.value=editValue;
   else                               this.editObj.innerHTML=editValue;
   
   removeDiv('ge_editor_div');
   this.activate();
  }
  
  this.cancelEdit = function()
  {
  	removeDiv('ge_editor_div');
  	this.activate();
  }
}

// Functions -------------------------------------------------------------------------------------------------

function getMouseX(e)
{
 var r=0;

if (isDOM) r = e.pageX;
    else       r = event.clientX + document.body.scrollLeft;
 
 if (r < 0) r=0;

return r;
}

function getMouseY(e)
{
 var r=0;
 
 if (isDOM) r = e.pageY;
    else       r = event.clientY + document.body.scrollTop;
 
 if (r < 0) r=0;

return r;
}

function getTop(Element)
{ 
 if (Element.offsetParent) return Element.offsetTop+getTop(Element.offsetParent);
 else return Element.offsetTop;
}

function getLeft(Element)
{ 
 if (Element.offsetParent) return Element.offsetLeft+getLeft(Element.offsetParent)
 else return Element.offsetLeft;
}

function getWidth(Element)
{ 
 return Element.offsetWidth;
}

function getHeight(Element)
{ 
 return Element.offsetHeight;
}

function main()
{
 if ("undefined"!=typeof(ge_bookmarklet_include_mode)) return;

editor=new ge_Editor('editor');
 editor.activate();
 
 message=createDiv('ge_editor_info_div',(10+ge_view_getScrollX()),(10+ge_view_getScrollY()),'<table style="background-color:#ffffff;border:1px solid #000000;color:#000000;"><tr><td style="padding: 0.5em;"><a href="http://en.gibney.org/bookmarklets/" target=_blank><img src="http://en.gibney.org/elements/images/mg-sign.gif" style="border: 0;"></a></td><td style="padding: 0.5em;"><b style="color: #008000;">The Editor</b> is active.<br><b>Left</b>-click on any element to edit it.<br>Press <b>ESC</b> to deactivate.</td></tr></table>');
 message.style.zIndex=9999;
 window.setTimeout("removeDiv('ge_editor_info_div')",2000);
}

startMain();