Overlay: Extended XY Positioning
Extended XY Overlay Positioning - Align, Center Support
Setting Up The YUI Instance
As with the "Basic XY Positioning" example, to create an instance of an Overlay on your page, the only module you need to request is the overlay module. The overlay module will pull in the widget, widget-stack, widget-position, widget-position-ext and widget-stdmod dependencies it has.
YUI({...}).use("overlay", function(Y) { // We'll write example code here, where we have a Y.Overlay class available. });
Using the overlay module, will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.
Instantiating The Overlay
For this example, we'll instantiate an Overlay, as we did for the "Basic XY Positioning" example, however we'll set the content for the Overlay sections using the headerContent and bodyContent attributes. We won't create a footer section for this overlay:
/* Create Overlay from script, this time. With no footer */ var overlay = new Y.Overlay({ width:"10em", height:"10em", headerContent: "Aligned Overlay", bodyContent: "Click the 'Align Next' button to try a new alignment", zIndex:2 }); /* Render it as a child of the #overlay-align element */ overlay.render("#overlay-align");
Since the Overlay is created from script, and doesn't currently exist in the document, we pass the overlay.render() method a selector query ("#overlay-align") for the node under which we want the Overlay to be rendered in the DOM. If we leave out this argument to render (or if the selector query doesn't bring back a node), the Overlay will be rendered to the current document's body element.
Aligning the overlay
The WidgetPositionExt extension used to create the overlay class adds the align and centered attributes to the Overlay, which can be used to align or center the Overlay relative to another element on the page (or the viewport).
The align attribute accepts as a value an object literal with the following properties:
- node
- The node to which the Widget is to be aligned. If set to null, or not provided, the Overlay is aligned to the viewport
- points
-
A two element array, defining the two points on the Overlay and node which are to be aligned. The first element is the point on the Overlay, and the second element is the point on the node (or viewport). Supported alignment points are defined as static properties on the
WidgetPositionExtextension.e.g.
[Y.WidgetPositionExt.TR, Y.WidgetPositionExt.TL]aligns the Top-Right corner of the Overlay with the Top-Left corner of the node/viewport, and[Y.WidgetPositionExt.CC, Y.WidgetPositionExt.TC]aligns the Center of the Overlay with the Top-Center edge of the node/viewport.
The centered property can either by set to true to center the Overlay in the viewport, or set to a selector string or node reference to center the Overlay in a particular node.
The example loops around a list of 6 alignment configurations, as the "Align Next" button is clicked:
/* Setup local variable for Y.WidgetPositionExt, since we use it multiple times */ var WidgetPositionExt = Y.WidgetPositionExt; ... /* Center in #overlay-align (example box) */ overlay.set("align", {node:"#overlay-align", points:[WidgetPositionExt.CC, WidgetPositionExt.CC]}); /* Align top-left corner of overlay, with top-right corner of #align1 */ overlay.set("align", {node:"#align1", points:[WidgetPositionExt.TL, WidgetPositionExt.TR]}); /* Center overlay in #align2 */ overlay.set("centered", "#align2"); /* Align right-center edge of overlay with right-center edge of viewport */ overlay.set("align", {points:[WidgetPositionExt.RC, WidgetPositionExt.RC]}); /* Center overlay in viewport */ overlay.set("centered", true); /* Align top-center edge of overlay with bottom-center edge of #align3 */ overlay.set("align", {node:"#align3", points:[WidgetPositionExt.TC, WidgetPositionExt.BC]});
NOTE: Future verions will add support to re-align the Overlay in response to trigger events (e.g. window resize, scroll etc.) and support for constrained positioning.
CSS: Overlay Look/Feel
As mentioned in the "Basic XY Positioning" example, the overlay.css Sam Skin file (build/overlay/assets/skins/sam/overlay.css) provides the default functional CSS for the overlay. Namely the CSS rules to hide the overlay, and position it absolutely. However there's no default out-of-the-box look/feel applied to the Overlay widget.
The example provides it's own look and feel for the Overlay, by defining rules for the content box, header and body sections:
.yui-overlay-content { padding:2px; border:1px solid #000; background-color:#aaa; font-size:93%; } .yui-overlay-content .yui-widget-hd { font-weight:bold; text-align:center; padding:2px; border:2px solid #aa0000; background-color:#fff; } .yui-overlay-content .yui-widget-bd { text-align:left; padding:2px; border:2px solid #0000aa; background-color:#fff; }
