00001 /* 00002 Copyright (c) 2004-2006, The Dojo Foundation 00003 All Rights Reserved. 00004 00005 Licensed under the Academic Free License version 2.1 or above OR the 00006 modified BSD license. For more information on Dojo licensing, see: 00007 00008 http://dojotoolkit.org/community/licensing.shtml 00009 */ 00010 00011 00012 00013 dojo.provide("dojo.html.layout"); 00014 dojo.require("dojo.html.common"); 00015 dojo.require("dojo.html.style"); 00016 dojo.require("dojo.html.display"); 00017 dojo.html.sumAncestorProperties = function (node, prop) { 00018 node = dojo.byId(node); 00019 if (!node) { 00020 return 0; 00021 } 00022 var retVal = 0; 00023 while (node) { 00024 if (dojo.html.getComputedStyle(node, "position") == "fixed") { 00025 return 0; 00026 } 00027 var val = node[prop]; 00028 if (val) { 00029 retVal += val - 0; 00030 if (node == dojo.body()) { 00031 break; 00032 } 00033 } 00034 node = node.parentNode; 00035 } 00036 return retVal; 00037 }; 00038 dojo.html.setStyleAttributes = function (node, attributes) { 00039 node = dojo.byId(node); 00040 var splittedAttribs = attributes.replace(/(;)?\s*$/, "").split(";"); 00041 for (var i = 0; i < splittedAttribs.length; i++) { 00042 var nameValue = splittedAttribs[i].split(":"); 00043 var name = nameValue[0].replace(/\s*$/, "").replace(/^\s*/, "").toLowerCase(); 00044 var value = nameValue[1].replace(/\s*$/, "").replace(/^\s*/, ""); 00045 switch (name) { 00046 case "opacity": 00047 dojo.html.setOpacity(node, value); 00048 break; 00049 case "content-height": 00050 dojo.html.setContentBox(node, {height:value}); 00051 break; 00052 case "content-width": 00053 dojo.html.setContentBox(node, {width:value}); 00054 break; 00055 case "outer-height": 00056 dojo.html.setMarginBox(node, {height:value}); 00057 break; 00058 case "outer-width": 00059 dojo.html.setMarginBox(node, {width:value}); 00060 break; 00061 default: 00062 node.style[dojo.html.toCamelCase(name)] = value; 00063 } 00064 } 00065 }; 00066 dojo.html.boxSizing = {MARGIN_BOX:"margin-box", BORDER_BOX:"border-box", PADDING_BOX:"padding-box", CONTENT_BOX:"content-box"}; 00067 dojo.html.getAbsolutePosition = dojo.html.abs = function (node, includeScroll, boxType) { 00068 node = dojo.byId(node, node.ownerDocument); 00069 var ret = {x:0, y:0}; 00070 var bs = dojo.html.boxSizing; 00071 if (!boxType) { 00072 boxType = bs.CONTENT_BOX; 00073 } 00074 var nativeBoxType = 2; 00075 var targetBoxType; 00076 switch (boxType) { 00077 case bs.MARGIN_BOX: 00078 targetBoxType = 3; 00079 break; 00080 case bs.BORDER_BOX: 00081 targetBoxType = 2; 00082 break; 00083 case bs.PADDING_BOX: 00084 default: 00085 targetBoxType = 1; 00086 break; 00087 case bs.CONTENT_BOX: 00088 targetBoxType = 0; 00089 break; 00090 } 00091 var h = dojo.render.html; 00092 var db = document["body"] || document["documentElement"]; 00093 if (h.ie) { 00094 with (node.getBoundingClientRect()) { 00095 ret.x = left - 2; 00096 ret.y = top - 2; 00097 } 00098 } else { 00099 if (document.getBoxObjectFor) { 00100 nativeBoxType = 1; 00101 try { 00102 var bo = document.getBoxObjectFor(node); 00103 ret.x = bo.x - dojo.html.sumAncestorProperties(node, "scrollLeft"); 00104 ret.y = bo.y - dojo.html.sumAncestorProperties(node, "scrollTop"); 00105 } 00106 catch (e) { 00107 } 00108 } else { 00109 if (node["offsetParent"]) { 00110 var endNode; 00111 if ((h.safari) && (node.style.getPropertyValue("position") == "absolute") && (node.parentNode == db)) { 00112 endNode = db; 00113 } else { 00114 endNode = db.parentNode; 00115 } 00116 if (node.parentNode != db) { 00117 var nd = node; 00118 if (dojo.render.html.opera) { 00119 nd = db; 00120 } 00121 ret.x -= dojo.html.sumAncestorProperties(nd, "scrollLeft"); 00122 ret.y -= dojo.html.sumAncestorProperties(nd, "scrollTop"); 00123 } 00124 var curnode = node; 00125 do { 00126 var n = curnode["offsetLeft"]; 00127 if (!h.opera || n > 0) { 00128 ret.x += isNaN(n) ? 0 : n; 00129 } 00130 var m = curnode["offsetTop"]; 00131 ret.y += isNaN(m) ? 0 : m; 00132 curnode = curnode.offsetParent; 00133 } while ((curnode != endNode) && (curnode != null)); 00134 } else { 00135 if (node["x"] && node["y"]) { 00136 ret.x += isNaN(node.x) ? 0 : node.x; 00137 ret.y += isNaN(node.y) ? 0 : node.y; 00138 } 00139 } 00140 } 00141 } 00142 if (includeScroll) { 00143 var scroll = dojo.html.getScroll(); 00144 ret.y += scroll.top; 00145 ret.x += scroll.left; 00146 } 00147 var extentFuncArray = [dojo.html.getPaddingExtent, dojo.html.getBorderExtent, dojo.html.getMarginExtent]; 00148 if (nativeBoxType > targetBoxType) { 00149 for (var i = targetBoxType; i < nativeBoxType; ++i) { 00150 ret.y += extentFuncArray[i](node, "top"); 00151 ret.x += extentFuncArray[i](node, "left"); 00152 } 00153 } else { 00154 if (nativeBoxType < targetBoxType) { 00155 for (var i = targetBoxType; i > nativeBoxType; --i) { 00156 ret.y -= extentFuncArray[i - 1](node, "top"); 00157 ret.x -= extentFuncArray[i - 1](node, "left"); 00158 } 00159 } 00160 } 00161 ret.top = ret.y; 00162 ret.left = ret.x; 00163 return ret; 00164 }; 00165 dojo.html.isPositionAbsolute = function (node) { 00166 return (dojo.html.getComputedStyle(node, "position") == "absolute"); 00167 }; 00168 dojo.html._sumPixelValues = function (node, selectors, autoIsZero) { 00169 var total = 0; 00170 for (var x = 0; x < selectors.length; x++) { 00171 total += dojo.html.getPixelValue(node, selectors[x], autoIsZero); 00172 } 00173 return total; 00174 }; 00175 dojo.html.getMargin = function (node) { 00176 return {width:dojo.html._sumPixelValues(node, ["margin-left", "margin-right"], (dojo.html.getComputedStyle(node, "position") == "absolute")), height:dojo.html._sumPixelValues(node, ["margin-top", "margin-bottom"], (dojo.html.getComputedStyle(node, "position") == "absolute"))}; 00177 }; 00178 dojo.html.getBorder = function (node) { 00179 return {width:dojo.html.getBorderExtent(node, "left") + dojo.html.getBorderExtent(node, "right"), height:dojo.html.getBorderExtent(node, "top") + dojo.html.getBorderExtent(node, "bottom")}; 00180 }; 00181 dojo.html.getBorderExtent = function (node, side) { 00182 return (dojo.html.getStyle(node, "border-" + side + "-style") == "none" ? 0 : dojo.html.getPixelValue(node, "border-" + side + "-width")); 00183 }; 00184 dojo.html.getMarginExtent = function (node, side) { 00185 return dojo.html._sumPixelValues(node, ["margin-" + side], dojo.html.isPositionAbsolute(node)); 00186 }; 00187 dojo.html.getPaddingExtent = function (node, side) { 00188 return dojo.html._sumPixelValues(node, ["padding-" + side], true); 00189 }; 00190 dojo.html.getPadding = function (node) { 00191 return {width:dojo.html._sumPixelValues(node, ["padding-left", "padding-right"], true), height:dojo.html._sumPixelValues(node, ["padding-top", "padding-bottom"], true)}; 00192 }; 00193 dojo.html.getPadBorder = function (node) { 00194 var pad = dojo.html.getPadding(node); 00195 var border = dojo.html.getBorder(node); 00196 return {width:pad.width + border.width, height:pad.height + border.height}; 00197 }; 00198 dojo.html.getBoxSizing = function (node) { 00199 var h = dojo.render.html; 00200 var bs = dojo.html.boxSizing; 00201 if (((h.ie) || (h.opera)) && node.nodeName.toLowerCase() != "img") { 00202 var cm = document["compatMode"]; 00203 if ((cm == "BackCompat") || (cm == "QuirksMode")) { 00204 return bs.BORDER_BOX; 00205 } else { 00206 return bs.CONTENT_BOX; 00207 } 00208 } else { 00209 if (arguments.length == 0) { 00210 node = document.documentElement; 00211 } 00212 var sizing; 00213 if (!h.ie) { 00214 sizing = dojo.html.getStyle(node, "-moz-box-sizing"); 00215 if (!sizing) { 00216 sizing = dojo.html.getStyle(node, "box-sizing"); 00217 } 00218 } 00219 return (sizing ? sizing : bs.CONTENT_BOX); 00220 } 00221 }; 00222 dojo.html.isBorderBox = function (node) { 00223 return (dojo.html.getBoxSizing(node) == dojo.html.boxSizing.BORDER_BOX); 00224 }; 00225 dojo.html.getBorderBox = function (node) { 00226 node = dojo.byId(node); 00227 return {width:node.offsetWidth, height:node.offsetHeight}; 00228 }; 00229 dojo.html.getPaddingBox = function (node) { 00230 var box = dojo.html.getBorderBox(node); 00231 var border = dojo.html.getBorder(node); 00232 return {width:box.width - border.width, height:box.height - border.height}; 00233 }; 00234 dojo.html.getContentBox = function (node) { 00235 node = dojo.byId(node); 00236 var padborder = dojo.html.getPadBorder(node); 00237 return {width:node.offsetWidth - padborder.width, height:node.offsetHeight - padborder.height}; 00238 }; 00239 dojo.html.setContentBox = function (node, args) { 00240 node = dojo.byId(node); 00241 var width = 0; 00242 var height = 0; 00243 var isbb = dojo.html.isBorderBox(node); 00244 var padborder = (isbb ? dojo.html.getPadBorder(node) : {width:0, height:0}); 00245 var ret = {}; 00246 if (typeof args.width != "undefined") { 00247 width = args.width + padborder.width; 00248 ret.width = dojo.html.setPositivePixelValue(node, "width", width); 00249 } 00250 if (typeof args.height != "undefined") { 00251 height = args.height + padborder.height; 00252 ret.height = dojo.html.setPositivePixelValue(node, "height", height); 00253 } 00254 return ret; 00255 }; 00256 dojo.html.getMarginBox = function (node) { 00257 var borderbox = dojo.html.getBorderBox(node); 00258 var margin = dojo.html.getMargin(node); 00259 return {width:borderbox.width + margin.width, height:borderbox.height + margin.height}; 00260 }; 00261 dojo.html.setMarginBox = function (node, args) { 00262 node = dojo.byId(node); 00263 var width = 0; 00264 var height = 0; 00265 var isbb = dojo.html.isBorderBox(node); 00266 var padborder = (!isbb ? dojo.html.getPadBorder(node) : {width:0, height:0}); 00267 var margin = dojo.html.getMargin(node); 00268 var ret = {}; 00269 if (typeof args.width != "undefined") { 00270 width = args.width - padborder.width; 00271 width -= margin.width; 00272 ret.width = dojo.html.setPositivePixelValue(node, "width", width); 00273 } 00274 if (typeof args.height != "undefined") { 00275 height = args.height - padborder.height; 00276 height -= margin.height; 00277 ret.height = dojo.html.setPositivePixelValue(node, "height", height); 00278 } 00279 return ret; 00280 }; 00281 dojo.html.getElementBox = function (node, type) { 00282 var bs = dojo.html.boxSizing; 00283 switch (type) { 00284 case bs.MARGIN_BOX: 00285 return dojo.html.getMarginBox(node); 00286 case bs.BORDER_BOX: 00287 return dojo.html.getBorderBox(node); 00288 case bs.PADDING_BOX: 00289 return dojo.html.getPaddingBox(node); 00290 case bs.CONTENT_BOX: 00291 default: 00292 return dojo.html.getContentBox(node); 00293 } 00294 }; 00295 dojo.html.toCoordinateObject = dojo.html.toCoordinateArray = function (coords, includeScroll, boxtype) { 00296 if (coords instanceof Array || typeof coords == "array") { 00297 dojo.deprecated("dojo.html.toCoordinateArray", "use dojo.html.toCoordinateObject({left: , top: , width: , height: }) instead", "0.5"); 00298 while (coords.length < 4) { 00299 coords.push(0); 00300 } 00301 while (coords.length > 4) { 00302 coords.pop(); 00303 } 00304 var ret = {left:coords[0], top:coords[1], width:coords[2], height:coords[3]}; 00305 } else { 00306 if (!coords.nodeType && !(coords instanceof String || typeof coords == "string") && ("width" in coords || "height" in coords || "left" in coords || "x" in coords || "top" in coords || "y" in coords)) { 00307 var ret = {left:coords.left || coords.x || 0, top:coords.top || coords.y || 0, width:coords.width || 0, height:coords.height || 0}; 00308 } else { 00309 var node = dojo.byId(coords); 00310 var pos = dojo.html.abs(node, includeScroll, boxtype); 00311 var marginbox = dojo.html.getMarginBox(node); 00312 var ret = {left:pos.left, top:pos.top, width:marginbox.width, height:marginbox.height}; 00313 } 00314 } 00315 ret.x = ret.left; 00316 ret.y = ret.top; 00317 return ret; 00318 }; 00319 dojo.html.setMarginBoxWidth = dojo.html.setOuterWidth = function (node, width) { 00320 return dojo.html._callDeprecated("setMarginBoxWidth", "setMarginBox", arguments, "width"); 00321 }; 00322 dojo.html.setMarginBoxHeight = dojo.html.setOuterHeight = function () { 00323 return dojo.html._callDeprecated("setMarginBoxHeight", "setMarginBox", arguments, "height"); 00324 }; 00325 dojo.html.getMarginBoxWidth = dojo.html.getOuterWidth = function () { 00326 return dojo.html._callDeprecated("getMarginBoxWidth", "getMarginBox", arguments, null, "width"); 00327 }; 00328 dojo.html.getMarginBoxHeight = dojo.html.getOuterHeight = function () { 00329 return dojo.html._callDeprecated("getMarginBoxHeight", "getMarginBox", arguments, null, "height"); 00330 }; 00331 dojo.html.getTotalOffset = function (node, type, includeScroll) { 00332 return dojo.html._callDeprecated("getTotalOffset", "getAbsolutePosition", arguments, null, type); 00333 }; 00334 dojo.html.getAbsoluteX = function (node, includeScroll) { 00335 return dojo.html._callDeprecated("getAbsoluteX", "getAbsolutePosition", arguments, null, "x"); 00336 }; 00337 dojo.html.getAbsoluteY = function (node, includeScroll) { 00338 return dojo.html._callDeprecated("getAbsoluteY", "getAbsolutePosition", arguments, null, "y"); 00339 }; 00340 dojo.html.totalOffsetLeft = function (node, includeScroll) { 00341 return dojo.html._callDeprecated("totalOffsetLeft", "getAbsolutePosition", arguments, null, "left"); 00342 }; 00343 dojo.html.totalOffsetTop = function (node, includeScroll) { 00344 return dojo.html._callDeprecated("totalOffsetTop", "getAbsolutePosition", arguments, null, "top"); 00345 }; 00346 dojo.html.getMarginWidth = function (node) { 00347 return dojo.html._callDeprecated("getMarginWidth", "getMargin", arguments, null, "width"); 00348 }; 00349 dojo.html.getMarginHeight = function (node) { 00350 return dojo.html._callDeprecated("getMarginHeight", "getMargin", arguments, null, "height"); 00351 }; 00352 dojo.html.getBorderWidth = function (node) { 00353 return dojo.html._callDeprecated("getBorderWidth", "getBorder", arguments, null, "width"); 00354 }; 00355 dojo.html.getBorderHeight = function (node) { 00356 return dojo.html._callDeprecated("getBorderHeight", "getBorder", arguments, null, "height"); 00357 }; 00358 dojo.html.getPaddingWidth = function (node) { 00359 return dojo.html._callDeprecated("getPaddingWidth", "getPadding", arguments, null, "width"); 00360 }; 00361 dojo.html.getPaddingHeight = function (node) { 00362 return dojo.html._callDeprecated("getPaddingHeight", "getPadding", arguments, null, "height"); 00363 }; 00364 dojo.html.getPadBorderWidth = function (node) { 00365 return dojo.html._callDeprecated("getPadBorderWidth", "getPadBorder", arguments, null, "width"); 00366 }; 00367 dojo.html.getPadBorderHeight = function (node) { 00368 return dojo.html._callDeprecated("getPadBorderHeight", "getPadBorder", arguments, null, "height"); 00369 }; 00370 dojo.html.getBorderBoxWidth = dojo.html.getInnerWidth = function () { 00371 return dojo.html._callDeprecated("getBorderBoxWidth", "getBorderBox", arguments, null, "width"); 00372 }; 00373 dojo.html.getBorderBoxHeight = dojo.html.getInnerHeight = function () { 00374 return dojo.html._callDeprecated("getBorderBoxHeight", "getBorderBox", arguments, null, "height"); 00375 }; 00376 dojo.html.getContentBoxWidth = dojo.html.getContentWidth = function () { 00377 return dojo.html._callDeprecated("getContentBoxWidth", "getContentBox", arguments, null, "width"); 00378 }; 00379 dojo.html.getContentBoxHeight = dojo.html.getContentHeight = function () { 00380 return dojo.html._callDeprecated("getContentBoxHeight", "getContentBox", arguments, null, "height"); 00381 }; 00382 dojo.html.setContentBoxWidth = dojo.html.setContentWidth = function (node, width) { 00383 return dojo.html._callDeprecated("setContentBoxWidth", "setContentBox", arguments, "width"); 00384 }; 00385 dojo.html.setContentBoxHeight = dojo.html.setContentHeight = function (node, height) { 00386 return dojo.html._callDeprecated("setContentBoxHeight", "setContentBox", arguments, "height"); 00387 }; 00388
For more help developing with SiT! see http://sitracker.org/wiki/DevelopmentHowTo