📄 util.js
字号:
/* 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); } }}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -