You are viewing a plain text version of this content. The canonical link for it is here.
Posted to xap-commits@incubator.apache.org by jm...@apache.org on 2006/06/27 22:38:18 UTC
svn commit: r417612 - in /incubator/xap/trunk/src/dojo/src/html:
__package__.js extras.js shadow.js
Author: jmargaris
Date: Tue Jun 27 15:38:18 2006
New Revision: 417612
URL: http://svn.apache.org/viewvc?rev=417612&view=rev
Log:
dojo 0.3
Added:
incubator/xap/trunk/src/dojo/src/html/__package__.js (with props)
incubator/xap/trunk/src/dojo/src/html/extras.js (with props)
incubator/xap/trunk/src/dojo/src/html/shadow.js
Added: incubator/xap/trunk/src/dojo/src/html/__package__.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/dojo/src/html/__package__.js?rev=417612&view=auto
==============================================================================
--- incubator/xap/trunk/src/dojo/src/html/__package__.js (added)
+++ incubator/xap/trunk/src/dojo/src/html/__package__.js Tue Jun 27 15:38:18 2006
@@ -0,0 +1,14 @@
+/*
+ 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.kwCompoundRequire({
+ common: ["dojo.html", "dojo.html.extras", "dojo.html.shadow"]
+});
+dojo.provide("dojo.html.*");
Propchange: incubator/xap/trunk/src/dojo/src/html/__package__.js
------------------------------------------------------------------------------
svn:eol-style = native
Added: incubator/xap/trunk/src/dojo/src/html/extras.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/dojo/src/html/extras.js?rev=417612&view=auto
==============================================================================
--- incubator/xap/trunk/src/dojo/src/html/extras.js (added)
+++ incubator/xap/trunk/src/dojo/src/html/extras.js Tue Jun 27 15:38:18 2006
@@ -0,0 +1,428 @@
+/*
+ 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.require("dojo.html");
+dojo.provide("dojo.html.extras");
+dojo.require("dojo.string.extras");
+
+/**
+ * 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.
+ */
+dojo.html.gravity = function(node, e){
+ node = dojo.byId(node);
+ var mouse = dojo.html.getCursorPosition(e);
+
+ with (dojo.html) {
+ var nodecenterx = getAbsoluteX(node, true) + (getInnerWidth(node) / 2);
+ var nodecentery = getAbsoluteY(node, true) + (getInnerHeight(node) / 2);
+ }
+
+ with (dojo.html.gravity) {
+ return ((mouse.x < nodecenterx ? WEST : EAST) |
+ (mouse.y < nodecentery ? NORTH : SOUTH));
+ }
+}
+
+dojo.html.gravity.NORTH = 1;
+dojo.html.gravity.SOUTH = 1 << 1;
+dojo.html.gravity.EAST = 1 << 2;
+dojo.html.gravity.WEST = 1 << 3;
+
+
+/**
+ * Attempts to return the text as it would be rendered, with the line breaks
+ * sorted out nicely. Unfinished.
+ */
+dojo.html.renderedTextContent = function(node){
+ 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.style.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.style.getStyle(node, "text-transform");
+ } catch(E) {}
+ switch (textTransform){
+ case "capitalize": text = dojo.string.capitalize(text); 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;
+}
+
+dojo.html.createNodesFromText = function(txt, trim){
+ if(trim) { txt = dojo.string.trim(txt); }
+
+ var tn = document.createElement("div");
+ // tn.style.display = "none";
+ tn.style.visibility= "hidden";
+ document.body.appendChild(tn);
+ var tableType = "none";
+ if((/^<t[dh][\s\r\n>]/i).test(dojo.string.trimStart(txt))) {
+ txt = "<table><tbody><tr>" + txt + "</tr></tbody></table>";
+ tableType = "cell";
+ } else if((/^<tr[\s\r\n>]/i).test(dojo.string.trimStart(txt))) {
+ txt = "<table><tbody>" + txt + "</tbody></table>";
+ tableType = "row";
+ } else if((/^<(thead|tbody|tfoot)[\s\r\n>]/i).test(dojo.string.trimStart(txt))) {
+ 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";
+ document.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?
+ document.body.removeChild(tn);
+ return nodes;
+}
+
+/* TODO: merge placeOnScreen and placeOnScreenPoint to make 1 function that allows you
+ * to define which corner(s) you want to bind to. Something like so:
+ *
+ * kes(node, desiredX, desiredY, "TR")
+ * kes(node, [desiredX, desiredY], ["TR", "BL"])
+ *
+ * TODO: make this function have variable call sigs
+ *
+ * kes(node, ptArray, cornerArray, padding, hasScroll)
+ * kes(node, ptX, ptY, cornerA, cornerB, cornerC, paddingArray, hasScroll)
+ */
+
+/**
+ * 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.
+ * 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)
+ */
+dojo.html.placeOnScreen = function(node, desiredX, desiredY, padding, hasScroll) {
+ if(dojo.lang.isArray(desiredX)) {
+ hasScroll = padding;
+ padding = desiredY;
+ desiredY = desiredX[1];
+ desiredX = desiredX[0];
+ }
+
+ if(!isNaN(padding)) {
+ padding = [Number(padding), Number(padding)];
+ } else if(!dojo.lang.isArray(padding)) {
+ padding = [0, 0];
+ }
+
+ var scroll = dojo.html.getScrollOffset();
+ var view = dojo.html.getViewportSize();
+
+ node = dojo.byId(node);
+ var w = node.offsetWidth + padding[0];
+ var h = node.offsetHeight + padding[1];
+
+ if(hasScroll) {
+ desiredX -= scroll.x;
+ desiredY -= scroll.y;
+ }
+
+ var x = desiredX + w;
+ if(x > view.w) {
+ x = view.w - w;
+ } else {
+ x = desiredX;
+ }
+ x = Math.max(padding[0], x) + scroll.x;
+
+ var y = desiredY + h;
+ if(y > view.h) {
+ y = view.h - h;
+ } else {
+ y = desiredY;
+ }
+ y = Math.max(padding[1], y) + scroll.y;
+
+ node.style.left = x + "px";
+ node.style.top = y + "px";
+
+ var ret = [x, y];
+ ret.x = x;
+ ret.y = y;
+ return ret;
+}
+
+/**
+ * Like placeOnScreenPoint except that it attempts to keep one of the node's
+ * corners at desiredX, desiredY. Favors the bottom right position
+ *
+ * Examples placing node at mouse position (where e = [Mouse event]):
+ * placeOnScreenPoint(node, e.clientX, e.clientY);
+ */
+dojo.html.placeOnScreenPoint = function(node, desiredX, desiredY, padding, hasScroll) {
+ if(dojo.lang.isArray(desiredX)) {
+ hasScroll = padding;
+ padding = desiredY;
+ desiredY = desiredX[1];
+ desiredX = desiredX[0];
+ }
+
+ if(!isNaN(padding)) {
+ padding = [Number(padding), Number(padding)];
+ } else if(!dojo.lang.isArray(padding)) {
+ padding = [0, 0];
+ }
+
+ var scroll = dojo.html.getScrollOffset();
+ var view = dojo.html.getViewportSize();
+
+ node = dojo.byId(node);
+ var oldDisplay = node.style.display;
+ node.style.display="";
+ var w = dojo.style.getInnerWidth(node);
+ var h = dojo.style.getInnerHeight(node);
+ node.style.display=oldDisplay;
+
+ if(hasScroll) {
+ desiredX -= scroll.x;
+ desiredY -= scroll.y;
+ }
+
+ var x = -1, y = -1;
+ //dojo.debug((desiredX+padding[0]) + w, "<=", view.w, "&&", (desiredY+padding[1]) + h, "<=", view.h);
+ if((desiredX+padding[0]) + w <= view.w && (desiredY+padding[1]) + h <= view.h) { // TL
+ x = (desiredX+padding[0]);
+ y = (desiredY+padding[1]);
+ //dojo.debug("TL", x, y);
+ }
+
+ //dojo.debug((desiredX-padding[0]), "<=", view.w, "&&", (desiredY+padding[1]) + h, "<=", view.h);
+ if((x < 0 || y < 0) && (desiredX-padding[0]) <= view.w && (desiredY+padding[1]) + h <= view.h) { // TR
+ x = (desiredX-padding[0]) - w;
+ y = (desiredY+padding[1]);
+ //dojo.debug("TR", x, y);
+ }
+
+ //dojo.debug((desiredX+padding[0]) + w, "<=", view.w, "&&", (desiredY-padding[1]), "<=", view.h);
+ if((x < 0 || y < 0) && (desiredX+padding[0]) + w <= view.w && (desiredY-padding[1]) <= view.h) { // BL
+ x = (desiredX+padding[0]);
+ y = (desiredY-padding[1]) - h;
+ //dojo.debug("BL", x, y);
+ }
+
+ //dojo.debug((desiredX-padding[0]), "<=", view.w, "&&", (desiredY-padding[1]), "<=", view.h);
+ if((x < 0 || y < 0) && (desiredX-padding[0]) <= view.w && (desiredY-padding[1]) <= view.h) { // BR
+ x = (desiredX-padding[0]) - w;
+ y = (desiredY-padding[1]) - h;
+ //dojo.debug("BR", x, y);
+ }
+
+ if(x < 0 || y < 0 || (x + w > view.w) || (y + h > view.h)) {
+ return dojo.html.placeOnScreen(node, desiredX, desiredY, padding, hasScroll);
+ }
+
+ x += scroll.x;
+ y += scroll.y;
+
+ node.style.left = x + "px";
+ node.style.top = y + "px";
+
+ var ret = [x, y];
+ ret.x = x;
+ ret.y = y;
+ return ret;
+}
+
+/**
+ * For IE z-index schenanigans
+ * Two possible uses:
+ * 1. new dojo.html.BackgroundIframe(node)
+ * Makes a background iframe as a child of node, that fills area (and position) of node
+ *
+ * 2. new dojo.html.BackgroundIframe()
+ * Attaches frame to document.body. User must call size() to set size.
+ */
+dojo.html.BackgroundIframe = function(node) {
+ if(dojo.render.html.ie) {
+ var html=
+ "<iframe "
+ +"style='position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
+ + "z-index: -1; filter:Alpha(Opacity=\"0\");' "
+ +">";
+ this.iframe = document.createElement(html);
+ if(node){
+ node.appendChild(this.iframe);
+ this.domNode=node;
+ }else{
+ document.body.appendChild(this.iframe);
+ this.iframe.style.display="none";
+ }
+ }
+}
+dojo.lang.extend(dojo.html.BackgroundIframe, {
+ iframe: null,
+
+ // TODO: this function shouldn't be necessary but setting width=height=100% doesn't work!
+ onResized: function(){
+ if(this.iframe && this.domNode){
+ var w = dojo.style.getOuterWidth(this.domNode);
+ var h = dojo.style.getOuterHeight(this.domNode);
+ if (w == 0 || h == 0 ){
+ dojo.lang.setTimeout(this, this.onResized, 50);
+ return;
+ }
+ var s = this.iframe.style;
+ s.width = w + "px";
+ s.height = h + "px";
+ }
+ },
+
+ // Call this function if the iframe is connected to document.body rather
+ // than the node being shadowed (TODO: erase)
+ size: function(node) {
+ if(!this.iframe) { return; }
+
+ coords = dojo.style.toCoordinateArray(node, true);
+
+ var s = this.iframe.style;
+ s.width = coords.w + "px";
+ s.height = coords.h + "px";
+ s.left = coords.x + "px";
+ s.top = coords.y + "px";
+ },
+
+ setZIndex: function(node /* or number */) {
+ if(!this.iframe) { return; }
+
+ if(dojo.dom.isNode(node)) {
+ this.iframe.style.zIndex = dojo.html.getStyle(node, "z-index") - 1;
+ } else if(!isNaN(node)) {
+ this.iframe.style.zIndex = node;
+ }
+ },
+
+ show: function() {
+ if(!this.iframe) { return; }
+ this.iframe.style.display = "block";
+ },
+
+ hide: function() {
+ if(!this.ie) { return; }
+ var s = this.iframe.style;
+ s.display = "none";
+ },
+
+ remove: function() {
+ dojo.dom.removeNode(this.iframe);
+ }
+});
Propchange: incubator/xap/trunk/src/dojo/src/html/extras.js
------------------------------------------------------------------------------
svn:eol-style = native
Added: incubator/xap/trunk/src/dojo/src/html/shadow.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/dojo/src/html/shadow.js?rev=417612&view=auto
==============================================================================
--- incubator/xap/trunk/src/dojo/src/html/shadow.js (added)
+++ incubator/xap/trunk/src/dojo/src/html/shadow.js Tue Jun 27 15:38:18 2006
@@ -0,0 +1,79 @@
+/*
+ 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.shadow");
+
+dojo.require("dojo.lang");
+dojo.require("dojo.uri");
+
+dojo.html.shadow = function(node) {
+ this.init(node);
+}
+
+dojo.lang.extend(dojo.html.shadow, {
+
+ shadowPng: dojo.uri.dojoUri("src/html/images/shadow"),
+ shadowThickness: 8,
+ shadowOffset: 15,
+
+ init: function(node){
+ this.node=node;
+
+ // make all the pieces of the shadow, and position/size them as much
+ // as possible (but a lot of the coordinates are set in sizeShadow
+ this.pieces={};
+ var x1 = -1 * this.shadowThickness;
+ var y0 = this.shadowOffset;
+ var y1 = this.shadowOffset + this.shadowThickness;
+ this._makePiece("tl", "top", y0, "left", x1);
+ this._makePiece("l", "top", y1, "left", x1, "scale");
+ this._makePiece("tr", "top", y0, "left", 0);
+ this._makePiece("r", "top", y1, "left", 0, "scale");
+ this._makePiece("bl", "top", 0, "left", x1);
+ this._makePiece("b", "top", 0, "left", 0, "crop");
+ this._makePiece("br", "top", 0, "left", 0);
+ },
+
+ _makePiece: function(name, vertAttach, vertCoord, horzAttach, horzCoord, sizing){
+ var img;
+ var url = this.shadowPng + name.toUpperCase() + ".png";
+ if(dojo.render.html.ie){
+ img=document.createElement("div");
+ img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"'"+
+ (sizing?", sizingMethod='"+sizing+"'":"") + ")";
+ }else{
+ img=document.createElement("img");
+ img.src=url;
+ }
+ img.style.position="absolute";
+ img.style[vertAttach]=vertCoord+"px";
+ img.style[horzAttach]=horzCoord+"px";
+ img.style.width=this.shadowThickness+"px";
+ img.style.height=this.shadowThickness+"px";
+ this.pieces[name]=img;
+ this.node.appendChild(img);
+ },
+
+ size: function(width, height){
+ var sideHeight = height - (this.shadowOffset+this.shadowThickness+1);
+ with(this.pieces){
+ l.style.height = sideHeight+"px";
+ r.style.height = sideHeight+"px";
+ b.style.width = (width-1)+"px";
+ bl.style.top = (height-1)+"px";
+ b.style.top = (height-1)+"px";
+ br.style.top = (height-1)+"px";
+ tr.style.left = (width-1)+"px";
+ r.style.left = (width-1)+"px";
+ br.style.left = (width-1)+"px";
+ }
+ }
+});
+