[483] | 1 | define([ |
---|
| 2 | "dojo/_base/array", // array.forEach array.map array.some |
---|
| 3 | "dojo/dom-geometry", // domGeometry.position |
---|
| 4 | "dojo/dom-style", // domStyle.getComputedStyle |
---|
| 5 | "dojo/_base/kernel", // kernel.deprecated |
---|
| 6 | "dojo/_base/window", // win.body |
---|
| 7 | "./Viewport", // getEffectiveBox |
---|
| 8 | "./main" // dijit (defining dijit.place to match API doc) |
---|
| 9 | ], function(array, domGeometry, domStyle, kernel, win, Viewport, dijit){ |
---|
| 10 | |
---|
| 11 | // module: |
---|
| 12 | // dijit/place |
---|
| 13 | |
---|
| 14 | |
---|
| 15 | function _place(/*DomNode*/ node, choices, layoutNode, aroundNodeCoords){ |
---|
| 16 | // summary: |
---|
| 17 | // Given a list of spots to put node, put it at the first spot where it fits, |
---|
| 18 | // of if it doesn't fit anywhere then the place with the least overflow |
---|
| 19 | // choices: Array |
---|
| 20 | // Array of elements like: {corner: 'TL', pos: {x: 10, y: 20} } |
---|
| 21 | // Above example says to put the top-left corner of the node at (10,20) |
---|
| 22 | // layoutNode: Function(node, aroundNodeCorner, nodeCorner, size) |
---|
| 23 | // for things like tooltip, they are displayed differently (and have different dimensions) |
---|
| 24 | // based on their orientation relative to the parent. This adjusts the popup based on orientation. |
---|
| 25 | // It also passes in the available size for the popup, which is useful for tooltips to |
---|
| 26 | // tell them that their width is limited to a certain amount. layoutNode() may return a value expressing |
---|
| 27 | // how much the popup had to be modified to fit into the available space. This is used to determine |
---|
| 28 | // what the best placement is. |
---|
| 29 | // aroundNodeCoords: Object |
---|
| 30 | // Size of aroundNode, ex: {w: 200, h: 50} |
---|
| 31 | |
---|
| 32 | // get {x: 10, y: 10, w: 100, h:100} type obj representing position of |
---|
| 33 | // viewport over document |
---|
| 34 | var view = Viewport.getEffectiveBox(node.ownerDocument); |
---|
| 35 | |
---|
| 36 | // This won't work if the node is inside a <div style="position: relative">, |
---|
| 37 | // so reattach it to <body>. (Otherwise, the positioning will be wrong |
---|
| 38 | // and also it might get cutoff.) |
---|
| 39 | if(!node.parentNode || String(node.parentNode.tagName).toLowerCase() != "body"){ |
---|
| 40 | win.body(node.ownerDocument).appendChild(node); |
---|
| 41 | } |
---|
| 42 | |
---|
| 43 | var best = null; |
---|
| 44 | array.some(choices, function(choice){ |
---|
| 45 | var corner = choice.corner; |
---|
| 46 | var pos = choice.pos; |
---|
| 47 | var overflow = 0; |
---|
| 48 | |
---|
| 49 | // calculate amount of space available given specified position of node |
---|
| 50 | var spaceAvailable = { |
---|
| 51 | w: { |
---|
| 52 | 'L': view.l + view.w - pos.x, |
---|
| 53 | 'R': pos.x - view.l, |
---|
| 54 | 'M': view.w |
---|
| 55 | }[corner.charAt(1)], |
---|
| 56 | h: { |
---|
| 57 | 'T': view.t + view.h - pos.y, |
---|
| 58 | 'B': pos.y - view.t, |
---|
| 59 | 'M': view.h |
---|
| 60 | }[corner.charAt(0)] |
---|
| 61 | }; |
---|
| 62 | |
---|
| 63 | // Clear left/right position settings set earlier so they don't interfere with calculations, |
---|
| 64 | // specifically when layoutNode() (a.k.a. Tooltip.orient()) measures natural width of Tooltip |
---|
| 65 | var s = node.style; |
---|
| 66 | s.left = s.right = "auto"; |
---|
| 67 | |
---|
| 68 | // configure node to be displayed in given position relative to button |
---|
| 69 | // (need to do this in order to get an accurate size for the node, because |
---|
| 70 | // a tooltip's size changes based on position, due to triangle) |
---|
| 71 | if(layoutNode){ |
---|
| 72 | var res = layoutNode(node, choice.aroundCorner, corner, spaceAvailable, aroundNodeCoords); |
---|
| 73 | overflow = typeof res == "undefined" ? 0 : res; |
---|
| 74 | } |
---|
| 75 | |
---|
| 76 | // get node's size |
---|
| 77 | var style = node.style; |
---|
| 78 | var oldDisplay = style.display; |
---|
| 79 | var oldVis = style.visibility; |
---|
| 80 | if(style.display == "none"){ |
---|
| 81 | style.visibility = "hidden"; |
---|
| 82 | style.display = ""; |
---|
| 83 | } |
---|
| 84 | var bb = domGeometry.position(node); |
---|
| 85 | style.display = oldDisplay; |
---|
| 86 | style.visibility = oldVis; |
---|
| 87 | |
---|
| 88 | // coordinates and size of node with specified corner placed at pos, |
---|
| 89 | // and clipped by viewport |
---|
| 90 | var |
---|
| 91 | startXpos = { |
---|
| 92 | 'L': pos.x, |
---|
| 93 | 'R': pos.x - bb.w, |
---|
| 94 | 'M': Math.max(view.l, Math.min(view.l + view.w, pos.x + (bb.w >> 1)) - bb.w) // M orientation is more flexible |
---|
| 95 | }[corner.charAt(1)], |
---|
| 96 | startYpos = { |
---|
| 97 | 'T': pos.y, |
---|
| 98 | 'B': pos.y - bb.h, |
---|
| 99 | 'M': Math.max(view.t, Math.min(view.t + view.h, pos.y + (bb.h >> 1)) - bb.h) |
---|
| 100 | }[corner.charAt(0)], |
---|
| 101 | startX = Math.max(view.l, startXpos), |
---|
| 102 | startY = Math.max(view.t, startYpos), |
---|
| 103 | endX = Math.min(view.l + view.w, startXpos + bb.w), |
---|
| 104 | endY = Math.min(view.t + view.h, startYpos + bb.h), |
---|
| 105 | width = endX - startX, |
---|
| 106 | height = endY - startY; |
---|
| 107 | |
---|
| 108 | overflow += (bb.w - width) + (bb.h - height); |
---|
| 109 | |
---|
| 110 | if(best == null || overflow < best.overflow){ |
---|
| 111 | best = { |
---|
| 112 | corner: corner, |
---|
| 113 | aroundCorner: choice.aroundCorner, |
---|
| 114 | x: startX, |
---|
| 115 | y: startY, |
---|
| 116 | w: width, |
---|
| 117 | h: height, |
---|
| 118 | overflow: overflow, |
---|
| 119 | spaceAvailable: spaceAvailable |
---|
| 120 | }; |
---|
| 121 | } |
---|
| 122 | |
---|
| 123 | return !overflow; |
---|
| 124 | }); |
---|
| 125 | |
---|
| 126 | // In case the best position is not the last one we checked, need to call |
---|
| 127 | // layoutNode() again. |
---|
| 128 | if(best.overflow && layoutNode){ |
---|
| 129 | layoutNode(node, best.aroundCorner, best.corner, best.spaceAvailable, aroundNodeCoords); |
---|
| 130 | } |
---|
| 131 | |
---|
| 132 | // And then position the node. Do this last, after the layoutNode() above |
---|
| 133 | // has sized the node, due to browser quirks when the viewport is scrolled |
---|
| 134 | // (specifically that a Tooltip will shrink to fit as though the window was |
---|
| 135 | // scrolled to the left). |
---|
| 136 | |
---|
| 137 | var top = best.y, |
---|
| 138 | side = best.x, |
---|
| 139 | body = win.body(node.ownerDocument); |
---|
| 140 | |
---|
| 141 | if(/relative|absolute/.test(domStyle.get(body, "position"))){ |
---|
| 142 | // compensate for margin on <body>, see #16148 |
---|
| 143 | top -= domStyle.get(body, "marginTop"); |
---|
| 144 | side -= domStyle.get(body, "marginLeft"); |
---|
| 145 | } |
---|
| 146 | |
---|
| 147 | var s = node.style; |
---|
| 148 | s.top = top + "px"; |
---|
| 149 | s.left = side + "px"; |
---|
| 150 | s.right = "auto"; // needed for FF or else tooltip goes to far left |
---|
| 151 | |
---|
| 152 | return best; |
---|
| 153 | } |
---|
| 154 | |
---|
| 155 | var reverse = { |
---|
| 156 | // Map from corner to kitty-corner |
---|
| 157 | "TL": "BR", |
---|
| 158 | "TR": "BL", |
---|
| 159 | "BL": "TR", |
---|
| 160 | "BR": "TL" |
---|
| 161 | }; |
---|
| 162 | |
---|
| 163 | var place = { |
---|
| 164 | // summary: |
---|
| 165 | // Code to place a DOMNode relative to another DOMNode. |
---|
| 166 | // Load using require(["dijit/place"], function(place){ ... }). |
---|
| 167 | |
---|
| 168 | at: function(node, pos, corners, padding, layoutNode){ |
---|
| 169 | // summary: |
---|
| 170 | // Positions node kitty-corner to the rectangle centered at (pos.x, pos.y) with width and height of |
---|
| 171 | // padding.x * 2 and padding.y * 2, or zero if padding not specified. Picks first corner in corners[] |
---|
| 172 | // where node is fully visible, or the corner where it's most visible. |
---|
| 173 | // |
---|
| 174 | // Node is assumed to be absolutely or relatively positioned. |
---|
| 175 | // node: DOMNode |
---|
| 176 | // The node to position |
---|
| 177 | // pos: dijit/place.__Position |
---|
| 178 | // Object like {x: 10, y: 20} |
---|
| 179 | // corners: String[] |
---|
| 180 | // Array of Strings representing order to try corners of the node in, like ["TR", "BL"]. |
---|
| 181 | // Possible values are: |
---|
| 182 | // |
---|
| 183 | // - "BL" - bottom left |
---|
| 184 | // - "BR" - bottom right |
---|
| 185 | // - "TL" - top left |
---|
| 186 | // - "TR" - top right |
---|
| 187 | // padding: dijit/place.__Position? |
---|
| 188 | // Optional param to set padding, to put some buffer around the element you want to position. |
---|
| 189 | // Defaults to zero. |
---|
| 190 | // layoutNode: Function(node, aroundNodeCorner, nodeCorner) |
---|
| 191 | // For things like tooltip, they are displayed differently (and have different dimensions) |
---|
| 192 | // based on their orientation relative to the parent. This adjusts the popup based on orientation. |
---|
| 193 | // example: |
---|
| 194 | // Try to place node's top right corner at (10,20). |
---|
| 195 | // If that makes node go (partially) off screen, then try placing |
---|
| 196 | // bottom left corner at (10,20). |
---|
| 197 | // | place(node, {x: 10, y: 20}, ["TR", "BL"]) |
---|
| 198 | var choices = array.map(corners, function(corner){ |
---|
| 199 | var c = { |
---|
| 200 | corner: corner, |
---|
| 201 | aroundCorner: reverse[corner], // so TooltipDialog.orient() gets aroundCorner argument set |
---|
| 202 | pos: {x: pos.x,y: pos.y} |
---|
| 203 | }; |
---|
| 204 | if(padding){ |
---|
| 205 | c.pos.x += corner.charAt(1) == 'L' ? padding.x : -padding.x; |
---|
| 206 | c.pos.y += corner.charAt(0) == 'T' ? padding.y : -padding.y; |
---|
| 207 | } |
---|
| 208 | return c; |
---|
| 209 | }); |
---|
| 210 | |
---|
| 211 | return _place(node, choices, layoutNode); |
---|
| 212 | }, |
---|
| 213 | |
---|
| 214 | around: function( |
---|
| 215 | /*DomNode*/ node, |
---|
| 216 | /*DomNode|dijit/place.__Rectangle*/ anchor, |
---|
| 217 | /*String[]*/ positions, |
---|
| 218 | /*Boolean*/ leftToRight, |
---|
| 219 | /*Function?*/ layoutNode){ |
---|
| 220 | |
---|
| 221 | // summary: |
---|
| 222 | // Position node adjacent or kitty-corner to anchor |
---|
| 223 | // such that it's fully visible in viewport. |
---|
| 224 | // description: |
---|
| 225 | // Place node such that corner of node touches a corner of |
---|
| 226 | // aroundNode, and that node is fully visible. |
---|
| 227 | // anchor: |
---|
| 228 | // Either a DOMNode or a rectangle (object with x, y, width, height). |
---|
| 229 | // positions: |
---|
| 230 | // Ordered list of positions to try matching up. |
---|
| 231 | // |
---|
| 232 | // - before: places drop down to the left of the anchor node/widget, or to the right in the case |
---|
| 233 | // of RTL scripts like Hebrew and Arabic; aligns either the top of the drop down |
---|
| 234 | // with the top of the anchor, or the bottom of the drop down with bottom of the anchor. |
---|
| 235 | // - after: places drop down to the right of the anchor node/widget, or to the left in the case |
---|
| 236 | // of RTL scripts like Hebrew and Arabic; aligns either the top of the drop down |
---|
| 237 | // with the top of the anchor, or the bottom of the drop down with bottom of the anchor. |
---|
| 238 | // - before-centered: centers drop down to the left of the anchor node/widget, or to the right |
---|
| 239 | // in the case of RTL scripts like Hebrew and Arabic |
---|
| 240 | // - after-centered: centers drop down to the right of the anchor node/widget, or to the left |
---|
| 241 | // in the case of RTL scripts like Hebrew and Arabic |
---|
| 242 | // - above-centered: drop down is centered above anchor node |
---|
| 243 | // - above: drop down goes above anchor node, left sides aligned |
---|
| 244 | // - above-alt: drop down goes above anchor node, right sides aligned |
---|
| 245 | // - below-centered: drop down is centered above anchor node |
---|
| 246 | // - below: drop down goes below anchor node |
---|
| 247 | // - below-alt: drop down goes below anchor node, right sides aligned |
---|
| 248 | // layoutNode: Function(node, aroundNodeCorner, nodeCorner) |
---|
| 249 | // For things like tooltip, they are displayed differently (and have different dimensions) |
---|
| 250 | // based on their orientation relative to the parent. This adjusts the popup based on orientation. |
---|
| 251 | // leftToRight: |
---|
| 252 | // True if widget is LTR, false if widget is RTL. Affects the behavior of "above" and "below" |
---|
| 253 | // positions slightly. |
---|
| 254 | // example: |
---|
| 255 | // | placeAroundNode(node, aroundNode, {'BL':'TL', 'TR':'BR'}); |
---|
| 256 | // This will try to position node such that node's top-left corner is at the same position |
---|
| 257 | // as the bottom left corner of the aroundNode (ie, put node below |
---|
| 258 | // aroundNode, with left edges aligned). If that fails it will try to put |
---|
| 259 | // the bottom-right corner of node where the top right corner of aroundNode is |
---|
| 260 | // (ie, put node above aroundNode, with right edges aligned) |
---|
| 261 | // |
---|
| 262 | |
---|
| 263 | // If around is a DOMNode (or DOMNode id), convert to coordinates. |
---|
| 264 | var aroundNodePos; |
---|
| 265 | if(typeof anchor == "string" || "offsetWidth" in anchor){ |
---|
| 266 | aroundNodePos = domGeometry.position(anchor, true); |
---|
| 267 | |
---|
| 268 | // For above and below dropdowns, subtract width of border so that popup and aroundNode borders |
---|
| 269 | // overlap, preventing a double-border effect. Unfortunately, difficult to measure the border |
---|
| 270 | // width of either anchor or popup because in both cases the border may be on an inner node. |
---|
| 271 | if(/^(above|below)/.test(positions[0])){ |
---|
| 272 | var anchorBorder = domGeometry.getBorderExtents(anchor), |
---|
| 273 | anchorChildBorder = anchor.firstChild ? domGeometry.getBorderExtents(anchor.firstChild) : {t:0,l:0,b:0,r:0}, |
---|
| 274 | nodeBorder = domGeometry.getBorderExtents(node), |
---|
| 275 | nodeChildBorder = node.firstChild ? domGeometry.getBorderExtents(node.firstChild) : {t:0,l:0,b:0,r:0}; |
---|
| 276 | aroundNodePos.y += Math.min(anchorBorder.t + anchorChildBorder.t, nodeBorder.t + nodeChildBorder.t); |
---|
| 277 | aroundNodePos.h -= Math.min(anchorBorder.t + anchorChildBorder.t, nodeBorder.t+ nodeChildBorder.t) + |
---|
| 278 | Math.min(anchorBorder.b + anchorChildBorder.b, nodeBorder.b + nodeChildBorder.b); |
---|
| 279 | } |
---|
| 280 | }else{ |
---|
| 281 | aroundNodePos = anchor; |
---|
| 282 | } |
---|
| 283 | |
---|
| 284 | // Compute position and size of visible part of anchor (it may be partially hidden by ancestor nodes w/scrollbars) |
---|
| 285 | if(anchor.parentNode){ |
---|
| 286 | // ignore nodes between position:relative and position:absolute |
---|
| 287 | var sawPosAbsolute = domStyle.getComputedStyle(anchor).position == "absolute"; |
---|
| 288 | var parent = anchor.parentNode; |
---|
| 289 | while(parent && parent.nodeType == 1 && parent.nodeName != "BODY"){ //ignoring the body will help performance |
---|
| 290 | var parentPos = domGeometry.position(parent, true), |
---|
| 291 | pcs = domStyle.getComputedStyle(parent); |
---|
| 292 | if(/relative|absolute/.test(pcs.position)){ |
---|
| 293 | sawPosAbsolute = false; |
---|
| 294 | } |
---|
| 295 | if(!sawPosAbsolute && /hidden|auto|scroll/.test(pcs.overflow)){ |
---|
| 296 | var bottomYCoord = Math.min(aroundNodePos.y + aroundNodePos.h, parentPos.y + parentPos.h); |
---|
| 297 | var rightXCoord = Math.min(aroundNodePos.x + aroundNodePos.w, parentPos.x + parentPos.w); |
---|
| 298 | aroundNodePos.x = Math.max(aroundNodePos.x, parentPos.x); |
---|
| 299 | aroundNodePos.y = Math.max(aroundNodePos.y, parentPos.y); |
---|
| 300 | aroundNodePos.h = bottomYCoord - aroundNodePos.y; |
---|
| 301 | aroundNodePos.w = rightXCoord - aroundNodePos.x; |
---|
| 302 | } |
---|
| 303 | if(pcs.position == "absolute"){ |
---|
| 304 | sawPosAbsolute = true; |
---|
| 305 | } |
---|
| 306 | parent = parent.parentNode; |
---|
| 307 | } |
---|
| 308 | } |
---|
| 309 | |
---|
| 310 | var x = aroundNodePos.x, |
---|
| 311 | y = aroundNodePos.y, |
---|
| 312 | width = "w" in aroundNodePos ? aroundNodePos.w : (aroundNodePos.w = aroundNodePos.width), |
---|
| 313 | height = "h" in aroundNodePos ? aroundNodePos.h : (kernel.deprecated("place.around: dijit/place.__Rectangle: { x:"+x+", y:"+y+", height:"+aroundNodePos.height+", width:"+width+" } has been deprecated. Please use { x:"+x+", y:"+y+", h:"+aroundNodePos.height+", w:"+width+" }", "", "2.0"), aroundNodePos.h = aroundNodePos.height); |
---|
| 314 | |
---|
| 315 | // Convert positions arguments into choices argument for _place() |
---|
| 316 | var choices = []; |
---|
| 317 | function push(aroundCorner, corner){ |
---|
| 318 | choices.push({ |
---|
| 319 | aroundCorner: aroundCorner, |
---|
| 320 | corner: corner, |
---|
| 321 | pos: { |
---|
| 322 | x: { |
---|
| 323 | 'L': x, |
---|
| 324 | 'R': x + width, |
---|
| 325 | 'M': x + (width >> 1) |
---|
| 326 | }[aroundCorner.charAt(1)], |
---|
| 327 | y: { |
---|
| 328 | 'T': y, |
---|
| 329 | 'B': y + height, |
---|
| 330 | 'M': y + (height >> 1) |
---|
| 331 | }[aroundCorner.charAt(0)] |
---|
| 332 | } |
---|
| 333 | }) |
---|
| 334 | } |
---|
| 335 | array.forEach(positions, function(pos){ |
---|
| 336 | var ltr = leftToRight; |
---|
| 337 | switch(pos){ |
---|
| 338 | case "above-centered": |
---|
| 339 | push("TM", "BM"); |
---|
| 340 | break; |
---|
| 341 | case "below-centered": |
---|
| 342 | push("BM", "TM"); |
---|
| 343 | break; |
---|
| 344 | case "after-centered": |
---|
| 345 | ltr = !ltr; |
---|
| 346 | // fall through |
---|
| 347 | case "before-centered": |
---|
| 348 | push(ltr ? "ML" : "MR", ltr ? "MR" : "ML"); |
---|
| 349 | break; |
---|
| 350 | case "after": |
---|
| 351 | ltr = !ltr; |
---|
| 352 | // fall through |
---|
| 353 | case "before": |
---|
| 354 | push(ltr ? "TL" : "TR", ltr ? "TR" : "TL"); |
---|
| 355 | push(ltr ? "BL" : "BR", ltr ? "BR" : "BL"); |
---|
| 356 | break; |
---|
| 357 | case "below-alt": |
---|
| 358 | ltr = !ltr; |
---|
| 359 | // fall through |
---|
| 360 | case "below": |
---|
| 361 | // first try to align left borders, next try to align right borders (or reverse for RTL mode) |
---|
| 362 | push(ltr ? "BL" : "BR", ltr ? "TL" : "TR"); |
---|
| 363 | push(ltr ? "BR" : "BL", ltr ? "TR" : "TL"); |
---|
| 364 | break; |
---|
| 365 | case "above-alt": |
---|
| 366 | ltr = !ltr; |
---|
| 367 | // fall through |
---|
| 368 | case "above": |
---|
| 369 | // first try to align left borders, next try to align right borders (or reverse for RTL mode) |
---|
| 370 | push(ltr ? "TL" : "TR", ltr ? "BL" : "BR"); |
---|
| 371 | push(ltr ? "TR" : "TL", ltr ? "BR" : "BL"); |
---|
| 372 | break; |
---|
| 373 | default: |
---|
| 374 | // To assist dijit/_base/place, accept arguments of type {aroundCorner: "BL", corner: "TL"}. |
---|
| 375 | // Not meant to be used directly. Remove for 2.0. |
---|
| 376 | push(pos.aroundCorner, pos.corner); |
---|
| 377 | } |
---|
| 378 | }); |
---|
| 379 | |
---|
| 380 | var position = _place(node, choices, layoutNode, {w: width, h: height}); |
---|
| 381 | position.aroundNodePos = aroundNodePos; |
---|
| 382 | |
---|
| 383 | return position; |
---|
| 384 | } |
---|
| 385 | }; |
---|
| 386 | |
---|
| 387 | /*===== |
---|
| 388 | place.__Position = { |
---|
| 389 | // x: Integer |
---|
| 390 | // horizontal coordinate in pixels, relative to document body |
---|
| 391 | // y: Integer |
---|
| 392 | // vertical coordinate in pixels, relative to document body |
---|
| 393 | }; |
---|
| 394 | place.__Rectangle = { |
---|
| 395 | // x: Integer |
---|
| 396 | // horizontal offset in pixels, relative to document body |
---|
| 397 | // y: Integer |
---|
| 398 | // vertical offset in pixels, relative to document body |
---|
| 399 | // w: Integer |
---|
| 400 | // width in pixels. Can also be specified as "width" for backwards-compatibility. |
---|
| 401 | // h: Integer |
---|
| 402 | // height in pixels. Can also be specified as "height" for backwards-compatibility. |
---|
| 403 | }; |
---|
| 404 | =====*/ |
---|
| 405 | |
---|
| 406 | return dijit.place = place; // setting dijit.place for back-compat, remove for 2.0 |
---|
| 407 | }); |
---|