/* *********************************************************** Example 4-3 (DHTMLAPI.js) "Dynamic HTML:The Definitive Reference" 2nd Edition by Danny Goodman Published by O'Reilly & Associates ISBN 1-56592-494-0 http://www.oreilly.com Copyright 2002 Danny Goodman. All Rights Reserved. ************************************************************ */ // DHTMLapi.js custom API for cross-platform // object positioning by Danny Goodman (http://www.dannyg.com). // Release 2.0. Supports NN4, IE, and W3C DOMs. // Global variables var isCSS, isW3C, isIE4, isNN4, isIE6CSS; // Initialize upon load to let all browsers establish content objects function initDHTMLAPI() { if (document.images) { isCSS = (document.body && document.body.style) ? true : false; isW3C = (isCSS && document.getElementById) ? true : false; isIE4 = (isCSS && document.all) ? true : false; isNN4 = (document.layers) ? true : false; isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false; } } // Set event handler to initialize API window.onload = initDHTMLAPI; // Seek nested NN4 layer from string name function seekLayer(doc, name) { var theObj; for (var i = 0; i < doc.layers.length; i++) { if (doc.layers[i].name == name) { theObj = doc.layers[i]; break; } // dive into nested layers if necessary if (doc.layers[i].document.layers.length > 0) { theObj = seekLayer(document.layers[i].document, name); } } return theObj; } // Convert object name string or object reference // into a valid element object reference function getRawObject(obj) { var theObj; if (typeof obj == "string") { if (isW3C) { theObj = document.getElementById(obj); } else if (isIE4) { theObj = document.all(obj); } else if (isNN4) { theObj = seekLayer(document, obj); } } else { // pass through object reference theObj = obj; } return theObj; } // Convert object name string or object reference // into a valid style (or NN4 layer) reference function getObject(obj) { var theObj = getRawObject(obj); if (theObj && isCSS) { theObj = theObj.style; } return theObj; } // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) { var theObj = getObject(obj); if (theObj) { if (isCSS) { // equalize incorrect numeric value type var units = (typeof theObj.left == "string") ? "px" : 0 theObj.left = x + units; theObj.top = y + units; } else if (isNN4) { theObj.moveTo(x,y) } } } // Move an object by x and/or y pixels function shiftBy(obj, deltaX, deltaY) { var theObj = getObject(obj); if (theObj) { if (isCSS) { // equalize incorrect numeric value type var units = (typeof theObj.left == "string") ? "px" : 0 theObj.left = getObjectLeft(obj) + deltaX + units; theObj.top = getObjectTop(obj) + deltaY + units; } else if (isNN4) { theObj.moveBy(deltaX, deltaY); } } } // Set the z-order of an object function setZIndex(obj, zOrder) { var theObj = getObject(obj); if (theObj) { theObj.zIndex = zOrder; } } // Set the background color of an object function setBGColor(obj, color) { var theObj = getObject(obj); if (theObj) { if (isNN4) { theObj.bgColor = color; } else if (isCSS) { theObj.backgroundColor = color; } } } // Set the visibility of an object to visible function show(obj) { var theObj = getObject(obj); if (theObj) { theObj.visibility = "visible"; } } // Set the visibility of an object to hidden function hide(obj) { var theObj = getObject(obj); if (theObj) { theObj.visibility = "hidden"; } } // Retrieve the x coordinate of a positionable object function getObjectLeft(obj) { var elem = getRawObject(obj); var result = 0; if (document.defaultView) { var style = document.defaultView; var cssDecl = style.getComputedStyle(elem, ""); result = cssDecl.getPropertyValue("left"); } else if (elem.currentStyle) { result = elem.currentStyle.left; } else if (elem.style) { result = elem.style.left; } else if (isNN4) { result = elem.left; } return parseInt(result); } // Retrieve the y coordinate of a positionable object function getObjectTop(obj) { var elem = getRawObject(obj); var result = 0; if (document.defaultView) { var style = document.defaultView; var cssDecl = style.getComputedStyle(elem, ""); result = cssDecl.getPropertyValue("top"); } else if (elem.currentStyle) { result = elem.currentStyle.top; } else if (elem.style) { result = elem.style.top; } else if (isNN4) { result = elem.top; } return parseInt(result); } // Retrieve the rendered width of an element function getObjectWidth(obj) { var elem = getRawObject(obj); var result = 0; if (elem.offsetWidth) { result = elem.offsetWidth; } else if (elem.clip && elem.clip.width) { result = elem.clip.width; } else if (elem.style && elem.style.pixelWidth) { result = elem.style.pixelWidth; } return parseInt(result); } // Retrieve the rendered height of an element function getObjectHeight(obj) { var elem = getRawObject(obj); var result = 0; if (elem.offsetHeight) { result = elem.offsetHeight; } else if (elem.clip && elem.clip.height) { result = elem.clip.height; } else if (elem.style && elem.style.pixelHeight) { result = elem.style.pixelHeight; } return parseInt(result); } // Return the available content width space in browser window function getInsideWindowWidth() { if (window.innerWidth) { return window.innerWidth; } else if (isIE6CSS) { // measure the html element's clientWidth return document.body.parentElement.clientWidth } else if (document.body && document.body.clientWidth) { return document.body.clientWidth; } return 0; } // Return the available content height space in browser window function getInsideWindowHeight() { if (window.innerHeight) { return window.innerHeight; } else if (isIE6CSS) { // measure the html element's clientHeight return document.body.parentElement.clientHeight } else if (document.body && document.body.clientHeight) { return document.body.clientHeight; } return 0; }
// Global holds reference to selected element var selectedObj; // Globals hold location of click relative to element var offsetX, offsetY; // Set global reference to element being engaged and dragged function setSelectedElem(evt) { var target = (evt.target) ? evt.target : evt.srcElement; var divID = (target.name && target.src) ? target.name + "Wrap" : ""; if (divID) { if (document.layers) { selectedObj = document.layers[divID]; } else if (document.all) { selectedObj = document.all(divID); } else if (document.getElementById) { selectedObj = document.getElementById(divID); } setZIndex(selectedObj, 100); return; } selectedObj = null; return; } // Turn selected element on function engage(evt) { evt = (evt) ? evt : event; setSelectedElem(evt); if (selectedObj) { if (document.body && document.body.setCapture) { // engage event capture in IE/Win document.body.setCapture(); } if (evt.pageX) { offsetX = evt.pageX - ((selectedObj.offsetLeft) ? selectedObj.offsetLeft : selectedObj.left); offsetY = evt.pageY - ((selectedObj.offsetTop) ? selectedObj.offsetTop : selectedObj.top); } else if (typeof evt.offsetX != "undefined") { offsetX = evt.offsetX - ((evt.offsetX < -2) ? 0 : document.body.scrollLeft); offsetX -= (document.body.parentElement && document.body.parentElement.scrollLeft) ? document.body.parentElement.scrollLeft : 0 offsetY = evt.offsetY - ((evt.offsetY < -2) ? 0 : document.body.scrollTop); offsetY -= (document.body.parentElement && document.body.parentElement.scrollTop) ? document.body.parentElement.scrollTop : 0 } else if (typeof evt.clientX != "undefined") { offsetX = evt.clientX - ((selectedObj.offsetLeft) ? selectedObj.offsetLeft : 0); offsetY = evt.clientY - ((selectedObj.offsetTop) ? selectedObj.offsetTop : 0); } return false; } } // Drag an element function dragIt(evt) { evt = (evt) ? evt : event; if (selectedObj) { if (evt.pageX) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)); } else if (evt.clientX || evt.clientY) { shiftTo(selectedObj, (evt.clientX - offsetX), (evt.clientY - offsetY)); } evt.cancelBubble = true; return false; } } // Turn selected element off function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0); if (document.body && document.body.releaseCapture) { // stop event capture in IE/Win document.body.releaseCapture(); } selectedObj = null; } } // Assign event handlers used by both Navigator and IE function initDrag() { if (document.layers) { // turn on event capture for these events in NN4 event model document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); return; } else if (document.body & document.body.addEventListener) { // turn on event capture for these events in W3C DOM event model document.addEventListener("mousedown", engage, true); document.addEventListener("mousemove", dragIt, true); document.addEventListener("mouseup", release, true); return; } document.onmousedown = engage; document.onmousemove = dragIt; document.onmouseup = release; return; }