| /* |
| Copyright (c) 2004-2006, The Dojo Foundation |
| All Rights Reserved. |
| |
| Licensed under the Academic Free License version 2.1 or above OR the |
| modified BSD license. For more information on Dojo licensing, see: |
| |
| http://dojotoolkit.org/community/licensing.shtml |
| */ |
| |
| dojo.provide("dojo.html.util"); |
| dojo.require("dojo.html.layout"); |
| |
| dojo.html.getElementWindow = function(/* HTMLElement */element){ |
| // summary |
| // Get the window object where the element is placed in. |
| return dojo.html.getDocumentWindow( element.ownerDocument ); // Window |
| } |
| |
| dojo.html.getDocumentWindow = function(doc){ |
| // summary |
| // Get window object associated with document doc |
| |
| // With Safari, there is not wa to retrieve the window from the document, so we must fix it. |
| if(dojo.render.html.safari && !doc._parentWindow){ |
| /* |
| This is a Safari specific function that fix the reference to the parent |
| window from the document object. |
| */ |
| |
| var fix=function(win){ |
| win.document._parentWindow=win; |
| for(var i=0; i<win.frames.length; i++){ |
| fix(win.frames[i]); |
| } |
| } |
| fix(window.top); |
| } |
| |
| //In some IE versions (at least 6.0), document.parentWindow does not return a |
| //reference to the real window object (maybe a copy), so we must fix it as well |
| //We use IE specific execScript to attach the real window reference to |
| //document._parentWindow for later use |
| if(dojo.render.html.ie && window !== document.parentWindow && !doc._parentWindow){ |
| /* |
| In IE 6, only the variable "window" can be used to connect events (others |
| may be only copies). |
| */ |
| doc.parentWindow.execScript("document._parentWindow = window;", "Javascript"); |
| //to prevent memory leak, unset it after use |
| //another possibility is to add an onUnload handler which seems overkill to me (liucougar) |
| var win = doc._parentWindow; |
| doc._parentWindow = null; |
| return win; // Window |
| } |
| |
| return doc._parentWindow || doc.parentWindow || doc.defaultView; // Window |
| } |
| |
| dojo.html.gravity = function(/* HTMLElement */node, /* DOMEvent */e){ |
| // summary |
| // Calculates the mouse's direction of gravity relative to the centre |
| // of the given node. |
| // <p> |
| // If you wanted to insert a node into a DOM tree based on the mouse |
| // position you might use the following code: |
| // <pre> |
| // if (gravity(node, e) & gravity.NORTH) { [insert before]; } |
| // else { [insert after]; } |
| // </pre> |
| // |
| // @param node The node |
| // @param e The event containing the mouse coordinates |
| // @return The directions, NORTH or SOUTH and EAST or WEST. These |
| // are properties of the function. |
| node = dojo.byId(node); |
| var mouse = dojo.html.getCursorPosition(e); |
| |
| with (dojo.html) { |
| var absolute = getAbsolutePosition(node, true); |
| var bb = getBorderBox(node); |
| var nodecenterx = absolute.x + (bb.width / 2); |
| var nodecentery = absolute.y + (bb.height / 2); |
| } |
| |
| with (dojo.html.gravity) { |
| return ((mouse.x < nodecenterx ? WEST : EAST) | (mouse.y < nodecentery ? NORTH : SOUTH)); // integer |
| } |
| } |
| |
| dojo.html.gravity.NORTH = 1; |
| dojo.html.gravity.SOUTH = 1 << 1; |
| dojo.html.gravity.EAST = 1 << 2; |
| dojo.html.gravity.WEST = 1 << 3; |
| |
| dojo.html.overElement = function(/* HTMLElement */element, /* DOMEvent */e){ |
| // summary |
| // Returns whether the mouse is over the passed element. |
| // Element must be display:block (ie, not a <span>) |
| element = dojo.byId(element); |
| var mouse = dojo.html.getCursorPosition(e); |
| var bb = dojo.html.getBorderBox(element); |
| var absolute = dojo.html.getAbsolutePosition(element, true, dojo.html.boxSizing.BORDER_BOX); |
| var top = absolute.y; |
| var bottom = top + bb.height; |
| var left = absolute.x; |
| var right = left + bb.width; |
| |
| return (mouse.x >= left |
| && mouse.x <= right |
| && mouse.y >= top |
| && mouse.y <= bottom |
| ); // boolean |
| } |
| |
| dojo.html.renderedTextContent = function(/* HTMLElement */node){ |
| // summary |
| // Attempts to return the text as it would be rendered, with the line breaks |
| // sorted out nicely. Unfinished. |
| node = dojo.byId(node); |
| var result = ""; |
| if (node == null) { return result; } |
| for (var i = 0; i < node.childNodes.length; i++) { |
| switch (node.childNodes[i].nodeType) { |
| case 1: // ELEMENT_NODE |
| case 5: // ENTITY_REFERENCE_NODE |
| var display = "unknown"; |
| try { |
| display = dojo.html.getStyle(node.childNodes[i], "display"); |
| } catch(E) {} |
| switch (display) { |
| case "block": case "list-item": case "run-in": |
| case "table": case "table-row-group": case "table-header-group": |
| case "table-footer-group": case "table-row": case "table-column-group": |
| case "table-column": case "table-cell": case "table-caption": |
| // TODO: this shouldn't insert double spaces on aligning blocks |
| result += "\n"; |
| result += dojo.html.renderedTextContent(node.childNodes[i]); |
| result += "\n"; |
| break; |
| |
| case "none": break; |
| |
| default: |
| if(node.childNodes[i].tagName && node.childNodes[i].tagName.toLowerCase() == "br") { |
| result += "\n"; |
| } else { |
| result += dojo.html.renderedTextContent(node.childNodes[i]); |
| } |
| break; |
| } |
| break; |
| case 3: // TEXT_NODE |
| case 2: // ATTRIBUTE_NODE |
| case 4: // CDATA_SECTION_NODE |
| var text = node.childNodes[i].nodeValue; |
| var textTransform = "unknown"; |
| try { |
| textTransform = dojo.html.getStyle(node, "text-transform"); |
| } catch(E) {} |
| switch (textTransform){ |
| case "capitalize": |
| var words = text.split(' '); |
| for(var i=0; i<words.length; i++){ |
| words[i] = words[i].charAt(0).toUpperCase() + words[i].substring(1); |
| } |
| text = words.join(" "); |
| break; |
| case "uppercase": text = text.toUpperCase(); break; |
| case "lowercase": text = text.toLowerCase(); break; |
| default: break; // leave as is |
| } |
| // TODO: implement |
| switch (textTransform){ |
| case "nowrap": break; |
| case "pre-wrap": break; |
| case "pre-line": break; |
| case "pre": break; // leave as is |
| default: |
| // remove whitespace and collapse first space |
| text = text.replace(/\s+/, " "); |
| if (/\s$/.test(result)) { text.replace(/^\s/, ""); } |
| break; |
| } |
| result += text; |
| break; |
| default: |
| break; |
| } |
| } |
| return result; // string |
| } |
| |
| dojo.html.createNodesFromText = function(/* string */txt, /* boolean? */trim){ |
| // summary |
| // Attempts to create a set of nodes based on the structure of the passed text. |
| if(trim) { txt = txt.replace(/^\s+|\s+$/g, ""); } |
| |
| var tn = dojo.doc().createElement("div"); |
| // tn.style.display = "none"; |
| tn.style.visibility= "hidden"; |
| dojo.body().appendChild(tn); |
| var tableType = "none"; |
| if((/^<t[dh][\s\r\n>]/i).test(txt.replace(/^\s+/))) { |
| txt = "<table><tbody><tr>" + txt + "</tr></tbody></table>"; |
| tableType = "cell"; |
| } else if((/^<tr[\s\r\n>]/i).test(txt.replace(/^\s+/))) { |
| txt = "<table><tbody>" + txt + "</tbody></table>"; |
| tableType = "row"; |
| } else if((/^<(thead|tbody|tfoot)[\s\r\n>]/i).test(txt.replace(/^\s+/))) { |
| txt = "<table>" + txt + "</table>"; |
| tableType = "section"; |
| } |
| tn.innerHTML = txt; |
| if(tn["normalize"]){ |
| tn.normalize(); |
| } |
| |
| var parent = null; |
| switch(tableType) { |
| case "cell": |
| parent = tn.getElementsByTagName("tr")[0]; |
| break; |
| case "row": |
| parent = tn.getElementsByTagName("tbody")[0]; |
| break; |
| case "section": |
| parent = tn.getElementsByTagName("table")[0]; |
| break; |
| default: |
| parent = tn; |
| break; |
| } |
| |
| /* this doesn't make much sense, I'm assuming it just meant trim() so wrap was replaced with trim |
| if(wrap){ |
| var ret = []; |
| // start hack |
| var fc = tn.firstChild; |
| ret[0] = ((fc.nodeValue == " ")||(fc.nodeValue == "\t")) ? fc.nextSibling : fc; |
| // end hack |
| // tn.style.display = "none"; |
| dojo.body().removeChild(tn); |
| return ret; |
| } |
| */ |
| var nodes = []; |
| for(var x=0; x<parent.childNodes.length; x++){ |
| nodes.push(parent.childNodes[x].cloneNode(true)); |
| } |
| tn.style.display = "none"; // FIXME: why do we do this? |
| dojo.html.destroyNode(tn); |
| return nodes; // array |
| } |
| |
| dojo.html.placeOnScreen = function( |
| /* HTMLElement */node, |
| /* integer */desiredX, |
| /* integer */desiredY, |
| /* integer */padding, |
| /* boolean? */hasScroll, |
| /* string? */corners, |
| /* boolean? */tryOnly |
| ){ |
| // summary |
| // Keeps 'node' in the visible area of the screen while trying to |
| // place closest to desiredX, desiredY. The input coordinates are |
| // expected to be the desired screen position, not accounting for |
| // scrolling. If you already accounted for scrolling, set 'hasScroll' |
| // to true. Set padding to either a number or array for [paddingX, paddingY] |
| // to put some buffer around the element you want to position. |
| // Set which corner(s) you want to bind to, such as |
| // |
| // placeOnScreen(node, desiredX, desiredY, padding, hasScroll, "TR") |
| // placeOnScreen(node, [desiredX, desiredY], padding, hasScroll, ["TR", "BL"]) |
| // |
| // The desiredX/desiredY will be treated as the topleft(TL)/topright(TR) or |
| // BottomLeft(BL)/BottomRight(BR) corner of the node. Each corner is tested |
| // and if a perfect match is found, it will be used. Otherwise, it goes through |
| // all of the specified corners, and choose the most appropriate one. |
| // By default, corner = ['TL']. |
| // If tryOnly is set to true, the node will not be moved to the place. |
| // |
| // NOTE: node is assumed to be absolutely or relatively positioned. |
| // |
| // Alternate call sig: |
| // placeOnScreen(node, [x, y], padding, hasScroll) |
| // |
| // Examples: |
| // placeOnScreen(node, 100, 200) |
| // placeOnScreen("myId", [800, 623], 5) |
| // placeOnScreen(node, 234, 3284, [2, 5], true) |
| |
| // TODO: make this function have variable call sigs |
| // kes(node, ptArray, cornerArray, padding, hasScroll) |
| // kes(node, ptX, ptY, cornerA, cornerB, cornerC, paddingArray, hasScroll) |
| if(desiredX instanceof Array || typeof desiredX == "array") { |
| tryOnly = corners; |
| corners = hasScroll; |
| hasScroll = padding; |
| padding = desiredY; |
| desiredY = desiredX[1]; |
| desiredX = desiredX[0]; |
| } |
| |
| if(corners instanceof String || typeof corners == "string"){ |
| corners = corners.split(","); |
| } |
| |
| if(!isNaN(padding)) { |
| padding = [Number(padding), Number(padding)]; |
| } else if(!(padding instanceof Array || typeof padding == "array")) { |
| padding = [0, 0]; |
| } |
| |
| var scroll = dojo.html.getScroll().offset; |
| var view = dojo.html.getViewport(); |
| |
| node = dojo.byId(node); |
| var oldDisplay = node.style.display; |
| node.style.display=""; |
| var bb = dojo.html.getBorderBox(node); |
| var w = bb.width; |
| var h = bb.height; |
| node.style.display=oldDisplay; |
| |
| if(!(corners instanceof Array || typeof corners == "array")){ |
| corners = ['TL']; |
| } |
| |
| var bestx, besty, bestDistance = Infinity, bestCorner; |
| |
| for(var cidex=0; cidex<corners.length; ++cidex){ |
| var corner = corners[cidex]; |
| var match = true; |
| var tryX = desiredX - (corner.charAt(1)=='L' ? 0 : w) + padding[0]*(corner.charAt(1)=='L' ? 1 : -1); |
| var tryY = desiredY - (corner.charAt(0)=='T' ? 0 : h) + padding[1]*(corner.charAt(0)=='T' ? 1 : -1); |
| if(hasScroll) { |
| tryX -= scroll.x; |
| tryY -= scroll.y; |
| } |
| |
| if(tryX < 0){ |
| tryX = 0; |
| match = false; |
| } |
| |
| if(tryY < 0){ |
| tryY = 0; |
| match = false; |
| } |
| |
| var x = tryX + w; |
| if(x > view.width) { |
| x = view.width - w; |
| match = false; |
| } else { |
| x = tryX; |
| } |
| x = Math.max(padding[0], x) + scroll.x; |
| |
| var y = tryY + h; |
| if(y > view.height) { |
| y = view.height - h; |
| match = false; |
| } else { |
| y = tryY; |
| } |
| y = Math.max(padding[1], y) + scroll.y; |
| |
| if(match){ //perfect match, return now |
| bestx = x; |
| besty = y; |
| bestDistance = 0; |
| bestCorner = corner; |
| break; |
| }else{ |
| //not perfect, find out whether it is better than the saved one |
| var dist = Math.pow(x-tryX-scroll.x,2)+Math.pow(y-tryY-scroll.y,2); |
| if(bestDistance > dist){ |
| bestDistance = dist; |
| bestx = x; |
| besty = y; |
| bestCorner = corner; |
| } |
| } |
| } |
| |
| if(!tryOnly){ |
| node.style.left = bestx + "px"; |
| node.style.top = besty + "px"; |
| } |
| |
| return { left: bestx, top: besty, x: bestx, y: besty, dist: bestDistance, corner: bestCorner}; // object |
| } |
| |
| dojo.html.placeOnScreenPoint = function(node, desiredX, desiredY, padding, hasScroll) { |
| dojo.deprecated("dojo.html.placeOnScreenPoint", "use dojo.html.placeOnScreen() instead", "0.5"); |
| return dojo.html.placeOnScreen(node, desiredX, desiredY, padding, hasScroll, ['TL', 'TR', 'BL', 'BR']); |
| } |
| |
| dojo.html.placeOnScreenAroundElement = function( |
| /* HTMLElement */node, |
| /* HTMLElement */aroundNode, |
| /* integer */padding, |
| /* string? */aroundType, |
| /* string? */aroundCorners, |
| /* boolean? */tryOnly |
| ){ |
| // summary |
| // Like placeOnScreen, except it accepts aroundNode instead of x,y |
| // and attempts to place node around it. aroundType (see |
| // dojo.html.boxSizing in html/layout.js) determines which box of the |
| // aroundNode should be used to calculate the outer box. |
| // aroundCorners specify Which corner of aroundNode should be |
| // used to place the node => which corner(s) of node to use (see the |
| // corners parameter in dojo.html.placeOnScreen) |
| // aroundCorners: {'TL': 'BL', 'BL': 'TL'} |
| |
| var best, bestDistance=Infinity; |
| aroundNode = dojo.byId(aroundNode); |
| var oldDisplay = aroundNode.style.display; |
| aroundNode.style.display=""; |
| var mb = dojo.html.getElementBox(aroundNode, aroundType); |
| var aroundNodeW = mb.width; |
| var aroundNodeH = mb.height; |
| var aroundNodePos = dojo.html.getAbsolutePosition(aroundNode, true, aroundType); |
| aroundNode.style.display=oldDisplay; |
| |
| for(var nodeCorner in aroundCorners){ |
| var pos, desiredX, desiredY; |
| var corners = aroundCorners[nodeCorner]; |
| |
| desiredX = aroundNodePos.x + (nodeCorner.charAt(1)=='L' ? 0 : aroundNodeW); |
| desiredY = aroundNodePos.y + (nodeCorner.charAt(0)=='T' ? 0 : aroundNodeH); |
| |
| pos = dojo.html.placeOnScreen(node, desiredX, desiredY, padding, true, corners, true); |
| if(pos.dist == 0){ |
| best = pos; |
| break; |
| }else{ |
| //not perfect, find out whether it is better than the saved one |
| if(bestDistance > pos.dist){ |
| bestDistance = pos.dist; |
| best = pos; |
| } |
| } |
| } |
| |
| if(!tryOnly){ |
| node.style.left = best.left + "px"; |
| node.style.top = best.top + "px"; |
| } |
| return best; // object |
| } |
| |
| dojo.html.scrollIntoView = function(/* HTMLElement */node){ |
| // summary |
| // Scroll the passed node into view, if it is not. |
| if(!node){ return; } |
| |
| // don't rely on that node.scrollIntoView works just because the function is there |
| // it doesnt work in Konqueror or Opera even though the function is there and probably |
| // not safari either |
| // dont like browser sniffs implementations but sometimes you have to use it |
| if(dojo.render.html.ie){ |
| //only call scrollIntoView if there is a scrollbar for this menu, |
| //otherwise, scrollIntoView will scroll the window scrollbar |
| if(dojo.html.getBorderBox(node.parentNode).height <= node.parentNode.scrollHeight){ |
| node.scrollIntoView(false); |
| } |
| }else if(dojo.render.html.mozilla){ |
| // IE, mozilla |
| node.scrollIntoView(false); |
| }else{ |
| var parent = node.parentNode; |
| var parentBottom = parent.scrollTop + dojo.html.getBorderBox(parent).height; |
| var nodeBottom = node.offsetTop + dojo.html.getMarginBox(node).height; |
| if(parentBottom < nodeBottom){ |
| parent.scrollTop += (nodeBottom - parentBottom); |
| }else if(parent.scrollTop > node.offsetTop){ |
| parent.scrollTop -= (parent.scrollTop - node.offsetTop); |
| } |
| } |
| } |