# HG changeset patch # User Steve Losh # Date 1267630133 18000 # Node ID 2b83293c583f4237e19c968955d44a424e4dc548 # Parent ddcf364d3ffb1951bd3f5c718a415fedc7784f4c Add MODI to my javascript utils. diff -r ddcf364d3ffb -r 2b83293c583f media/js/utils/modi.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/media/js/utils/modi.js Wed Mar 03 10:28:53 2010 -0500 @@ -0,0 +1,941 @@ +/******** + + Mouseover DOM Inspector + version 2.0.2 + last rev: 05.12.2005 + + steve@slayeroffice.com + + Thanks to Aaron Barker of zelph.com for his additions to v1.x. + + Should you modify/improve upon this, please let me know about it so that + I can update the version hosted on slayeroffice. + + PLEASE LEAVE THIS NOTICE IN TACT + +TODO: + -- add identifiers to MODI created objects to prevent them from appearing during manual DOM walk + -- fix firstChild selections + -- fix outline reversion + - Replace outline's with an abs-pos DIV to emulate the outlines. (maybe) +********/ + +// prevent IE from making tons of requests to background images +if(document.execCommand && document.all && !window.opera) document.execCommand("BackgroundImageCache",false,true); + +var d=document; +var mObj,cssObj; +var isActive = false; +var activeObj = null; +var pause = false; + +var treeIndex = 0; +var clonedObj = null; +var mDown = false; +var offsetX,offsetY; + + +if(d.all && !window.opera) { + var statusImg = new Array("gray.png",""); +} else { + var statusImg = new Array("gray.png","outline.png",""); +} +var keyboardObjIndex = 0; +var modiHiddenObjects = new Array(); +var modiFocused = false; +if(d.contentType) { + var isAppXML = document.contentType.indexOf("application/xhtml") > -1; +} else { + var isAppXML = false; +} + +// default preferences +var pref_showAttr = true; +var pref_showDim = true; +var pref_showParents = true; +var pref_highlights = 0; +var pref_freeze = true; +var pref_backgroundHighlightColor = "#C0C0C0"; +var pref_childHighlightColor = "#FAFAFA"; +var pref_outlineColor = "#FF0000"; +var pref_outlineWidth = "2px"; +var pref_visible = true; +var pref_alwaysTransparent = false; +var pref_alwaysTransparentValue = 60; +var pref_allDataListsCollapsed = false; +var pref_showChildren = true; + +var oHighlightColor = pref_backgroundHighlightColor; +var so_host = "http://slayeroffice.com/tools/modi/v2.0/"; +var so_lbl = new Array(); + +// See: http://www.quirksmode.org/dom/getstyles.html +function getStyle(obj,styleProp) +{ + if (obj.currentStyle) + var y = obj.currentStyle[styleProp]; + else if (window.getComputedStyle) + var y = document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleProp); + return y; +} + +function so_init() { + try { + if(prefFile != "") { + nPrefs = d.getElementsByTagName("head")[0].appendChild(d.createElement("script")); + nPrefs.type = "text/javascript"; + nPrefs.src = prefFile; + oHighlightColor = pref_backgroundHighlightColor; + } + } catch(err) { } + d.onmousemove = so_captureMouseMoveEvent; + d.onkeydown = so_captureKeyDownEvent; + window.onscroll = so_keepModiInView; + so_prepInputs(); + + all = d.getElementsByTagName("*"); + for(i=0;i winHeight) return; + if(mObj.offsetTop < _returnScrollDimensions(1)) { + mObj.style.top = _returnScrollDimensions(1)+"px"; + } + + if(mObj.offsetTop+mObj.offsetHeight > winHeight + _returnScrollDimensions(1)) { + mObj.style.top = (_returnScrollDimensions(1) + winHeight) - mObj.offsetHeight + "px"; + } +} + +function so_captureMouseMoveEvent(e) { + x=d.all?window.event.clientX:e.clientX; + y=d.all?window.event.clientY:e.pageY; + + if(pause || pref_freeze) { + if(mDown) { + x-=offsetX; + y-=offsetY; + if(mDown) { + mObj.style.top = y+"px"; + mObj.style.left = x+"px"; + } + return; + } + } + + if(activeObj == null && !modiFocused) { + so_setOpacity(mObj,40); + } else { + so_setOpacity(mObj,99); + } + + if(pref_freeze) { + so_keepModiInView(); + return; + } + + if(d.all && !window.opera) { + x+=_returnScrollDimensions(0); + y+=_returnScrollDimensions(1); + } + + if(x+mObj.offsetWidth > d.getElementsByTagName("body")[0].offsetWidth) { + mObj.style.left = (x-mObj.offsetWidth)+"px"; + } else { + mObj.style.left = (x+15) + "px"; + } + if(mObj.offsetLeft < 0) mObj.style.left = "0px" + + yOffset = _returnScrollDimensions(1); + + if(y-mObj.offsetHeight<=0 || (y-mObj.offsetHeight)maxValue) pref_highlights = 0; + if(activeObj) so_setObjHighlight(activeObj); + d.getElementById("so_h2").style.backgroundImage = "url(" + so_host +""+ statusImg[pref_highlights] + ")"; + break; + case 67: + so_randomColor(); + break; + case 68: + if(pause)return; + pref_visible = pref_visible?false:true; + mObj.style.visibility = pref_visible?"visible":"hidden"; + break; + case 69: + so_removeWidth(); + break; + case 70: + if(pause)return; + pref_freeze = pref_freeze?false:true; + if(!pref_freeze)mDown = false; + break; + case 71: + so_changeListState(); + break; + case 72: + so_hideObject(); + break; + case 74: + so_showModiHiddenObjects(); + break; + case 75: + so_removeLables(); + break; + case 76: + so_labelObj(activeObj); + break; + case 78: + so_showFirstChild(); + break; + case 79: + if(activeObj) so_outlineObj(activeObj); + break; + case 80: + if(!activeObj) return; + pause = pause?false:true; + if(pause)d.getElementById("so_h2").appendChild(d.createTextNode(" [paused]")); + so_setOpacity(mObj,99); + break; + case 82: + so_removeObj(); + break; + case 83: + so_insertClonedObj(); + break; + case 84: + if(d.getElementsByTagName("*")[treeIndex].xid == "modi") { + do { + treeIndex++; + if(treeIndex>=d.getElementsByTagName("*").length)treeIndex = 0; + } while(d.getElementsByTagName("*")[treeIndex].xid == "modi"); + } + so_walkDOMTree(); + treeIndex++; + break; + case 85: + pref_alwaysTransparent = pref_alwaysTransparent?false:true; + so_setOpacity(mObj,pref_alwaysTransparent?60:99); + break; + case 86: + so_createEditWindow(activeObj); + break; + case 87: + so_showParentObj(); + break; + case 89: + if(d.getElementsByTagName("*")[treeIndex].xid == "modi") { + do { + treeIndex--; + if(treeIndex<0)treeIndex = d.getElementsByTagName("*").length-1; + } while(d.getElementsByTagName("*")[treeIndex].xid == "modi"); + } + so_walkDOMTree(); + treeIndex--; + break; + } +} + +function so_snapWindow(corner) { + if(!pref_freeze)pref_freeze = true; + switch(corner) { + case 0: + y = _returnScrollDimensions(1); + mObj.style.left = "10px"; + mObj.style.top = y+"px"; + break; + case 1: + + break; + } +} + +function so_changeListState() { + if(!pref_allDataListsCollapsed) { + d.getElementById("attributeData").style.display = "none"; + d.getElementById("parentData").style.display = "none"; + d.getElementById("dimensionData").style.display = "none"; + d.getElementById("childData").style.display = "none"; + pref_showAttr = false; pref_showDim = false; pref_showParents = false; pref_showChildren = false; + pref_allDataListsCollapsed = true; + } else { + d.getElementById("attributeData").style.display = "block"; + d.getElementById("parentData").style.display = "block"; + d.getElementById("dimensionData").style.display = "block"; + d.getElementById("childData").style.display = "block"; + pref_showAttr = true; pref_showDim = true; pref_showParents = true; pref_showChildren = true; + pref_allDataListsCollapsed = false; + } +} + +function so_removeLables() { + for(i=0;i400) mObj.style.width="400px"; + } + + function so_wrapAttributeValue(attrValue) { + // IE has a word-break css property. no need to do anything if this is IE + if(d.all && !window.opera) return attrValue; + // attribute value has a space in it. return. + if(attrValue.indexOf(" ")>-1) return attrValue; + for(ee=0;ee0; i--){ + li = ul.appendChild(d.createElement("li")); + li.appendChild(d.createTextNode(parents[i])); + if(parentObjRef[i].getAttribute("id")) li.appendChild(d.createTextNode(" id=\"" + parentObjRef[i].getAttribute("id") +"\"")); + if(parentObjRef[i].className) li.appendChild(d.createTextNode(" class=\"" + parentObjRef[i].className + "\"")); + + li.myObj = parentObjRef[i]; + li.className = "parentStructure"; + li.onmouseover = function() { + this.myObj.so_prevBGColor = this.myObj.style.backgroundColor; + so_setObjHighlight(this.myObj); + } + li.onmouseout = function() { + so_unsetObjHighlight(this.myObj); + } + } + +} + +function so_showParentObj() { + if(pause)return; + so_unsetObjHighlight(activeObj); + if(activeObj.parentNode && activeObj.tagName != "HTML") { + activeObj = activeObj.parentNode + activeObj.so_prevBGColor = activeObj.style.backgroundColor; + so_setObjHighlight(activeObj); + so_buildDataDisplay(activeObj); + } +} + +function so_labelObj(obj) { + if(pause || !activeObj) return; + lblText = obj.tagName.toLowerCase(); + len = so_lbl.length; + so_lbl[len] = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); + so_lbl[len].appendChild(d.createTextNode(lblText)); + so_lbl[len].className = "modi_label"; + so_lbl[len].style.top = so_findPosition(obj,0) + "px"; + so_lbl[len].style.left = so_findPosition(obj,1) + "px"; + so_lbl[len].onclick = function() { + this.parentNode.removeChild(this); + } +} + +function so_removeObj() { + if(pause)return; + activeObj.parentNode.removeChild(activeObj); +} + +function so_cleanUp() { + d.getElementsByTagName("head")[0].removeChild(d.getElementById("modiCSS")); + d.getElementsByTagName("body")[0].removeChild(d.getElementById("modiContainer")); + // id is "modi" if invoked on its own, "sss" if invoked from the favelet suite + if(d.getElementById("modi")) { + d.getElementsByTagName("body")[0].removeChild(d.getElementById("modi")); + } else { + d.getElementsByTagName("body")[0].removeChild(d.getElementById("sss")); + } + d.onkeydown = null; + d.onmousemove = null; + + all = d.getElementsByTagName("*"); + for(i=0;i=d.getElementsByTagName("*").length) treeIndex = 0; + if(treeIndex<0) treeIndex = d.getElementsByTagName("*").length - 1; + + activeObj = d.getElementsByTagName("*")[treeIndex]; + if(d.all && !window.opera) { + if(activeObj.tagName == "!") { + treeIndex++; + activeObj = d.getElementsByTagName("*")[treeIndex]; + } + } + so_buildDataDisplay(activeObj); + so_setObjHighlight(activeObj); + if(!pref_freeze) { + mObj.style.top = so_findPosition(activeObj,0)+15 + "px"; + mObj.style.left = so_findPosition(activeObj,1)+15 + "px"; + } +} + +function so_tagAsMODI() { + modiChildren = mObj.getElementsByTagName("*"); + for(m=0;m