<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Constrain Support</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Constrain Support</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><style type="text/css" scoped>
/* Overlay Look/Feel */
.yui3-overlay-content {
background-color: #ECEFFB;
border: 1px solid #9EA8C6;
border-radius: 3px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}
.yui3-overlay-content .yui3-widget-hd {
background-color: #B6BFDA;
color: #30418C;
font-size: 120%;
font-weight: bold;
padding: 0.2em 0.5em 0.3em;
border-radius: 2px 2px 0 0;
}
.yui3-overlay-content .yui3-widget-bd {
padding: 0.4em 0.6em 0.5em;
}
.yui3-overlay-content .yui3-widget-ft {
background-color:#DFE3F5;
padding: 0.4em 0.6em 0.5em;
border-radius: 0 0 2px 2px;
}
/* Example Layout CSS */
.overlay-example {
position: relative;
height: 450px;
width: 550px;
}
#constrain-box {
background-color: #F0F7F0;
border: 1px solid #DBE3DB;
position: relative;
top: 80px;
left: 80px;
width: 350px;
height: 300px;
}
.yui3-slider {
position: absolute;
background-color: transparent;
}
#x {
position: absolute;
top: 10px;
left: 30px;
}
#y {
position: absolute;
top: 30px;
left: 10px;
}
</style>
<div class="intro">
<p>
This example shows how you can use Overlay's constrained positioning support to constrain the XY position of the overlay so that it remains within another node on the page (or within the viewport).
</p>
</div>
<div class="example">
<div class="overlay-example yui3-skin-sam" id="overlay-example">
<div id="constrain-box"></div>
</div>
<script type="text/javascript">
YUI().use("overlay", "slider", function (Y) {
var constrainRegion = Y.one("#constrain-box").get("region"),
overlay, sx, yx, checkbox;
// Create Overlay from script.
overlay = new Y.Overlay({
id: "overlay",
width : "150px",
height: "120px",
headerContent: "Constrained",
bodyContent : "Use the sliders to move the overlay",
footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',
constrain: "#constrain-box",
align : {
node : "#constrain-box",
points: ["cc", "cc"]
},
render: "#overlay-example"
});
// Create horizontal Slider.
sx = new Y.Slider({
id : "x",
length: "450px",
min : constrainRegion.left - 50,
max : constrainRegion.right + 50,
value : overlay.get("x"),
render: "#overlay-example"
});
// Create vertical Slider.
sy = new Y.Slider({
id : "y",
axis : 'y',
length: "400px",
min : constrainRegion.top - 50,
max : constrainRegion.bottom + 50,
value : overlay.get("y"),
render: "#overlay-example"
});
sx.after("valueChange", function (e) {
overlay.set("x", e.newVal);
});
sy.after("valueChange", function (e) {
overlay.set("y", e.newVal);
});
function enableConstraints (constrain) {
if (constrain) {
overlay.set("constrain", "#constrain-box");
overlay.set("headerContent", "Constrained");
} else {
overlay.set("constrain", false);
overlay.set("headerContent", "Unconstrained");
}
// Sync the current values of the sliders to the overlay.
overlay.set("xy", [sx.get("value"), sy.get("value")]);
}
// Reference <code><input type="checkbox" /></code> from the Overlay's footer.
checkbox = Y.one("#constrain");
checkbox.set("checked", true);
checkbox.on("click", function (e) {
enableConstraints(this.get("checked"));
});
// Enable constraints by default.
enableConstraints(true);
});
</script>
</div>
<h2>Overlay Constrained XY Positioning</h2>
<h3>Setting Up The YUI Instance</h3>
<p>
As with the <a href="overlay-xy.html">"Basic XY Positioning"</a> example, to create an instance of an Overlay on your page, the only module you need to request is the <code>overlay</code> module. The <code>overlay</code> module will pull in the <code>widget</code>, <code>widget-stack</code>, <code>widget-position</code>, <code>widget-position-align</code>, <code>widget-position-constrain</code> and <code>widget-stdmod</code> extensions it uses.
</p>
<pre class="code prettyprint lang-javascript">YUI({...}).use("overlay", function (Y) {
// We'll write example code here, where we have a Y.Overlay class
// available, which is bundled with XY positioning, align and
// constrain support.
});</pre>
<p>
Using the <code>overlay</code> 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.
</p>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
<h3>Instantiating The Overlay</h3>
<p>
For this example, we'll instantiate an Overlay from script, as we did for the <a href="overlay-align.html">"Alignment Support"</a> example, but use the <code>render</code> attribute to specify the node under which we want the Overlay to be rendered in the DOM, and to indicate that we want it rendered on construction. The <code>render</code> attribute is a sugar attribute for the <code>render()</code> method:
</p>
<pre class="code prettyprint lang-javascript">// Create Overlay from script.
overlay = new Y.Overlay({
id: "overlay",
width : "140px",
height: "120px",
headerContent: "Constrained",
bodyContent : "Use the sliders to move the overlay",
footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',
constrain: "#constrain-box",
align : {
node : "#constrain-box",
points: ["cc", "cc"]
},
render: "#overlay-example"
});</pre>
<p>
We align the overlay to the center of the <code>#constrain-box</code> node, which we're also using as the constraining node for the overlay. The <code>constrain</code> attribute accepts a node reference (either an actual Node instance, or a string selector reference), or it can simply be set to <code>true</code> to constrain the overlay to the Viewport.
</p>
<h3>Demonstrating Constrained Support</h3>
<p>
For this example, we set up a couple of Slider instances which can be used to set the Overlay's <code>x</code> and <code>y</code> attribute values.
</p>
<pre class="code prettyprint lang-javascript">// Get the region for the constraining box.
var constrainRegion = Y.one("#constrain-box").get("region");
// Use the Overlay's current `x` and `y` to set the initial Slider values.
// Create horizontal Slider.
sx = new Y.Slider({
id : "x",
length: "450px",
min : constrainRegion.left - 50,
max : constrainRegion.right + 50,
value : overlay.get("x"),
render: "#overlay-example"
});
// Create vertical Slider.
sy = new Y.Slider({
id : "y",
axis : 'y',
length: "400px",
min : constrainRegion.top - 50,
max : constrainRegion.bottom + 50,
value : overlay.get("y"),
render: "#overlay-example"
});</pre>
<p>
We set the <code>min</code> and <code>max</code> values of the slider instances to allow the overlay to be moved beyond the edge of the constraining region, and set the initial <code>value</code> of the sliders to reflect the current centered position of the overlay.
</p>
<p>
Finally, we set up <code>valueChange</code> listeners for the sliders, when attempt to set the corresponding axis position of the overlay:
</p>
<pre class="code prettyprint lang-javascript">// Set the Overlay's `x` attribute value.
sx.after("valueChange", function (e) {
overlay.set("x", e.newVal);
});
// Set the Overlay's `y` attribute value.
sy.after("valueChange", function (e) {
overlay.set("y", e.newVal);
});</pre>
<h3>CSS: Overlay Look/Feel</h3>
<p>
As mentioned in the <a href="overlay-xy.html">"Basic XY Positioning"</a> 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.
</p>
<p>
The example provides it's own look and feel for the Overlay, by defining rules for the content box, header and body sections:
</p>
<pre class="code prettyprint">/* Overlay Look/Feel */
.yui3-overlay-content {
background-color: #ECEFFB;
border: 1px solid #9EA8C6;
border-radius: 3px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}
.yui3-overlay-content .yui3-widget-hd {
background-color: #B6BFDA;
color: #30418C;
font-size: 120%;
font-weight: bold;
padding: 0.2em 0.5em 0.3em;
border-radius: 2px 2px 0 0;
}
.yui3-overlay-content .yui3-widget-bd {
padding: 0.4em 0.6em 0.5em;
}
.yui3-overlay-content .yui3-widget-ft {
background-color:#DFE3F5;
padding: 0.4em 0.6em 0.5em;
border-radius: 0 0 2px 2px;
}</pre>
<h2>Complete Example Source</h2>
<pre class="code prettyprint"><div class="overlay-example yui3-skin-sam" id="overlay-example">
<div id="constrain-box"></div>
</div>
<script type="text/javascript">
YUI().use("overlay", "slider", function (Y) {
var constrainRegion = Y.one("#constrain-box").get("region"),
overlay, sx, yx, checkbox;
// Create Overlay from script.
overlay = new Y.Overlay({
id: "overlay",
width : "150px",
height: "120px",
headerContent: "Constrained",
bodyContent : "Use the sliders to move the overlay",
footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',
constrain: "#constrain-box",
align : {
node : "#constrain-box",
points: ["cc", "cc"]
},
render: "#overlay-example"
});
// Create horizontal Slider.
sx = new Y.Slider({
id : "x",
length: "450px",
min : constrainRegion.left - 50,
max : constrainRegion.right + 50,
value : overlay.get("x"),
render: "#overlay-example"
});
// Create vertical Slider.
sy = new Y.Slider({
id : "y",
axis : 'y',
length: "400px",
min : constrainRegion.top - 50,
max : constrainRegion.bottom + 50,
value : overlay.get("y"),
render: "#overlay-example"
});
sx.after("valueChange", function (e) {
overlay.set("x", e.newVal);
});
sy.after("valueChange", function (e) {
overlay.set("y", e.newVal);
});
function enableConstraints (constrain) {
if (constrain) {
overlay.set("constrain", "#constrain-box");
overlay.set("headerContent", "Constrained");
} else {
overlay.set("constrain", false);
overlay.set("headerContent", "Unconstrained");
}
// Sync the current values of the sliders to the overlay.
overlay.set("xy", [sx.get("value"), sy.get("value")]);
}
// Reference `<input type="checkbox" />` from the Overlay's footer.
checkbox = Y.one("#constrain");
checkbox.set("checked", true);
checkbox.on("click", function (e) {
enableConstraints(this.get("checked"));
});
// Enable constraints by default.
enableConstraints(true);
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.">
<a href="overlay-xy.html">Basic XY Positioning</a>
</li>
<li data-description="Shows how to create a simple tooltip incorporating the overlay shim feature.">
<a href="overlay-tooltip.html">Simple Tooltip</a>
</li>
<li data-description="Shows how to use the Overlay's XY alignment support, to align the Overlay relative to another element, or to the viewport.">
<a href="overlay-align.html">Alignment Support</a>
</li>
<li data-description="Shows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page.">
<a href="overlay-stack.html">Stack Support</a>
</li>
<li data-description="Shows how to modify content in the Overlay's header, body and footer sections.">
<a href="overlay-stdmod.html">Standard Module Support</a>
</li>
<li data-description="Shows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay.">
<a href="overlay-constrain.html">Constrain Support</a>
</li>
<li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.">
<a href="overlay-io-plugin.html">IO Plugin</a>
</li>
<li data-description="Shows how to create a simple plugin to animate the Overlay's movement and visibility.">
<a href="overlay-anim-plugin.html">Animation Plugin</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a>
</li>
<li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/overlay',
name: 'overlay-constrain',
title: 'Constrain Support',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('overlay-xy');
YUI.Env.Tests.examples.push('overlay-tooltip');
YUI.Env.Tests.examples.push('overlay-align');
YUI.Env.Tests.examples.push('overlay-stack');
YUI.Env.Tests.examples.push('overlay-stdmod');
YUI.Env.Tests.examples.push('overlay-constrain');
YUI.Env.Tests.examples.push('overlay-io-plugin');
YUI.Env.Tests.examples.push('overlay-anim-plugin');
YUI.Env.Tests.examples.push('node-focusmanager-button');
YUI.Env.Tests.examples.push('stylesheet-theme');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>