| updated with pause and clear
javascript code: Â
//////////////////////////////////////////////////////
// //
// Tracer Script (1.1) Written by Mikee Franklin //
// //
//////////////////////////////////////////////////////
Â
Â
function delegateDom( that, thatMethod)
{
var _params = [];
if(arguments.length > 2)
{
for(var n = 2; n < arguments.length; ++n) {
_params.push(arguments[n]);
}
}
_params.unshift(null);
return function(e) {_params[0]=e;return thatMethod.apply(that, _params);}
}
var console = (console?console:{
'paused': false,
'created': false,
'messages': new Array(),
'log': function(a){
var message = document.createElement('pre');
message.style.borderBottom = '1px solid #999';
message.style.padding = '5px';
message.style.margin = '0px';
message.innerHTML = a;
this.messages.push(message);
if (this.created){
this.updateLogger();
}
},
'clearLogger': function (){
for (var i=(this.logcontent.childNodes.length-1); i>=0; i--){
this.logcontent.removeChild(this.logcontent.childNodes[i]);
}
},
'pauseLogger': function (){
if (this.paused){
this.paused = false;
this.pausebutton.innerHTML = 'pause';
}else {
this.paused = true;
this.pausebutton.innerHTML = 'resume';
}
},
'updateLogger': function (refresh){
if (!this.paused){
if (refresh){
this.clearLogger();
for (var i=0; i<this.messages.length; i++){
this.logcontent.appendChild(this.messages[i]);
}
}else {
this.logcontent.appendChild(this.messages[(this.messages.length-1)]);
}
this.logcontent.scrollTop = this.logcontent.scrollHeight;
}
},
'create': function(){
this.mainlogger = document.createElement("div");
this.titlebar = document.createElement("div");
this.logcontent = document.createElement("div");
this.clearlog = document.createElement("a");
this.clearlog.appendChild(document.createTextNode("clear"));
this.clearlog.style.styleFloat = 'right';
this.clearlog.style.cssFloat = 'right';
this.clearlog.style.color = '#FFFFFF';
this.clearlog.href = 'javascript:void(0);';
this.addEvent(this.clearlog, 'click', this.clearLogger);
Â
this.pausebutton = document.createElement("a");
this.pausebutton.appendChild(document.createTextNode("pause"));
this.pausebutton.style.styleFloat = 'right';
this.pausebutton.style.cssFloat = 'right';
this.pausebutton.style.marginRight = '10px';
this.pausebutton.style.color = '#FFFFFF';
this.pausebutton.href = 'javascript:void(0);';
this.addEvent(this.pausebutton, 'click', this.pauseLogger);
Â
this.mainlogger.id = 'logger';
this.mainlogger.style.backgroundColor = '#FFFFFF';
this.mainlogger.style.position = 'absolute';
this.mainlogger.style.top = (this.dim().height - 205) + 'px';
this.mainlogger.style.left = '10px';
this.mainlogger.style.width = '70%';
this.mainlogger.style.fontFamily = 'Verdana';
this.mainlogger.style.fontSize = '11px';
this.mainlogger.style.color = '#000000';
this.mainlogger.style.border = '1px solid #000';
this.logcontent.style.overflow = 'auto';
this.logcontent.style.height = '170px';
this.logcontent.style.width = '100%';
Â
this.titlebar.style.backgroundColor = '#444';
this.titlebar.style.color = '#ffffff';
this.titlebar.style.fontWeight = 'bold';
this.titlebar.style.padding = '5px 5px';
Â
this.created = true;
this.titlebar.appendChild(this.clearlog);
this.titlebar.appendChild(this.pausebutton);
this.titlebar.appendChild(document.createTextNode("Console"));
Â
this.mainlogger.appendChild(this.titlebar);
this.mainlogger.appendChild(this.logcontent);
Â
var body = document.getElementsByTagName('body')[0];
body.appendChild(this.mainlogger);
this.updateLogger(true);
this.logcontent.scrollTop = this.logcontent.scrollHeight;
this.addEvent(this.titlebar, 'mousedown', this.dragStart, this.mainlogger.id);
},
'addEvent': function (obj, eventName, thatMethod){
var _params = [this,thatMethod];
if(arguments.length > 3)
{
for(var n = 3; n < arguments.length; ++n) {
_params.push(arguments[n]);
}
}
var dlg = delegateDom.apply(this, _params);
if (!obj.delegates){obj.delegates = {};}
obj.delegates[eventName]=dlg;
if (obj.addEventListener){
obj.addEventListener(eventName, dlg, true);
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+eventName, dlg);
}
},
'browser': function() {
if (!this.browserObj){
Â
this.browserObj = {};
Â
var ua, s, i;
Â
this.browserObj.isIE = false;
this.browserObj.isNS = false;
this.browserObj.version = null;
ua = navigator.userAgent;
Â
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.browserObj.isIE = true;
this.browserObj.version = parseFloat(ua.substr(i + s.length));
Â
}
Â
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.browserObj.isNS = true;
this.browserObj.version = parseFloat(ua.substr(i + s.length));
Â
}
Â
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.browserObj.isNS = true;
this.browserObj.version = 6.1;
}
}
return this.browserObj;
},
'dragObj': {
'zIndex': 0
},
'dragStart': function (event, id) {
var el;
var x, y;
Â
// If an element id was given, find it. Otherwise use the element being
// clicked on.
if (id)
this.dragObj.elNode = document.getElementById(id);
else {
if (this.browser().isIE)
this.dragObj.elNode = window.event.srcElement;
if (this.browser().isNS)
this.dragObj.elNode = event.target;
// If this is a text node, use its parent element.
Â
if (this.dragObj.elNode.nodeType == 3)
this.dragObj.elNode = this.dragObj.elNode.parentNode;
}
Â
// Get cursor position with respect to the page.
Â
if (this.browser().isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (this.browser().isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
Â
// Save starting positions of cursor and element.
Â
this.dragObj.cursorStartX = x;
this.dragObj.cursorStartY = y;
this.dragObj.elStartLeft = parseInt(this.dragObj.elNode.style.left, 10);
this.dragObj.elStartTop = parseInt(this.dragObj.elNode.style.top, 10);
Â
if (isNaN(this.dragObj.elStartLeft)) this.dragObj.elStartLeft = 0;
if (isNaN(this.dragObj.elStartTop)) this.dragObj.elStartTop = 0;
// Update element's z-index.
Â
this.dragObj.elNode.style.zIndex = ++this.dragObj.zIndex;
Â
// Capture mousemove and mouseup events on the page.
if (this.dragObj.elStartTop < 1){
this.dragObj.elStartTop = this.dim().height - (this.dragObj.elNode.clientHeight+parseInt(this.dragObj.elNode.style.bottom, 10));
}
this.addEvent(document, "mousemove", this.dragGo);
this.addEvent(document, "mouseup", this.dragStop);
},
'dragGo': function (event) {
Â
var x, y;
Â
// Get cursor position with respect to the page.
Â
if (this.browser().isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (this.browser().isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Move drag element by the same amount the cursor has moved.
this.dragObj.elNode.style.left = (this.dragObj.elStartLeft + x - this.dragObj.cursorStartX) + "px";
this.dragObj.elNode.style.top = (this.dragObj.elStartTop + y - this.dragObj.cursorStartY) + "px";
if (this.browser().isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (this.browser().isNS)
event.preventDefault();
},
'dragStop': function(event) {
this.removeEvent(document, "mousemove");
this.removeEvent(document, "mouseup");
},
'removeEvent': function(obj,eventName) {
var dlg = obj.delegates[eventName];
obj.delegates[eventName]=null;
if (obj.detachEvent ) {
obj.detachEvent( 'on'+eventName, dlg );
obj[eventName+dlg] = null;
} else
obj.removeEventListener( eventName, dlg, false );
dlg=null;
},
'dim': function(){
if (self.innerWidth)
{
Â
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
}
else if (document.body)
{
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
}
var x,y;
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight
if (test1 > test2) // all but Explorer Mac
{
x = document.body.scrollWidth;
y = document.body.scrollHeight;
}
else // Explorer Mac;
//would also work in Explorer 6 Strict, Mozilla and Safari
{
Â
x = document.body.offsetWidth;
y = document.body.offsetHeight;
}
var bd = {'width' : frameWidth, 'height' : frameHeight, 'scrolledWidth' : x, 'scrolledHeight' : y};
return bd;
}
});
var trace = {
'enabled': true,
'initiated': false,
'delegate': function(that, thatMethod)
{
if(arguments.length > 2){
var _params = [];
for(var n = 2; n < arguments.length; ++n) _params.push(arguments[n]);
return function(e) {_params.unshift(e); return thatMethod.apply(that, _params);}
}else
return function() { return thatMethod.call(that);
}
},
'init': function(){
try {if (this.enabled){console.create();}}catch(e){}
},
'log': function(a ){
if (!this.initiated){
if (callWhenDOMLoaded){
if (!domLoaded){
callWhenDOMLoaded(this.delegate(this, this.init));
}else {
this.init();
}
}else {
window.onload = this.delegate(this, this.init);
}
this.initiated = true;
}
(this.enabled?console.log(a ):function(){})
|
