dijit._place
dojo.require("dijit");
defined in dijit/_base/place.js
Given a list of spots to put node, put it at the first spot where it fits, of if it doesn't fit anywhere then the place with the least overflow
Usage
// get {x: 10, y: 10, w: 100, h:100} type obj representing position of
// viewport over document
var view = dijit.getViewport();
// This won't work if the node is inside a <div style="position: relative">,
// so reattach it to dojo.doc.body. (Otherwise, the positioning will be wrong
// and also it might get cutoff)
if(!node.parentNode || String(node.parentNode.tagName).toLowerCase() != "body"){
dojo.body().appendChild(node);
}
var best = null;
dojo.some(choices, function(choice){
var corner = choice.corner;
var pos = choice.pos;
// configure node to be displayed in given position relative to button
// (need to do this in order to get an accurate size for the node, because
// a tooltips size changes based on position, due to triangle)
if(layoutNode){
layoutNode(node, choice.aroundCorner, corner);
}
// get node's size
var style = node.style;
var oldDisplay = style.display;
var oldVis = style.visibility;
style.visibility = "hidden";
style.display = "";
var mb = dojo.marginBox(node);
style.display = oldDisplay;
style.visibility = oldVis;
// coordinates and size of node with specified corner placed at pos,
// and clipped by viewport
var startX = (corner.charAt(1) == 'L' ? pos.x : Math.max(view.l, pos.x - mb.w)),
startY = (corner.charAt(0) == 'T' ? pos.y : Math.max(view.t, pos.y - mb.h)),
endX = (corner.charAt(1) == 'L' ? Math.min(view.l + view.w, startX + mb.w) : pos.x),
endY = (corner.charAt(0) == 'T' ? Math.min(view.t + view.h, startY + mb.h) : pos.y),
width = endX - startX,
height = endY - startY,
overflow = (mb.w - width) + (mb.h - height);
if(best == null || overflow < best.overflow){
best = {
corner: corner,
aroundCorner: choice.aroundCorner,
x: startX,
y: startY,
w: width,
h: height,
overflow: overflow
};
}
return !overflow;
});
node.style.left = best.x + "px";
node.style.top = best.y + "px";
if(best.overflow && layoutNode){
layoutNode(node, best.aroundCorner, best.corner);
}
return best;
parameter | type | description |
---|
node | DomNode | |
choices | Array | of elements like: {corner: 'TL', pos: {x: 10, y: 20} } Above example says to put the top-left corner of the node at (10,20) |
layoutNode | Function | (node aroundNodeCorner, nodeCorner) for things like tooltip, they are displayed differently (and have different dimensions) based on their orientation relative to the parent. This adjusts the popup based on orientation. |