--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/overlay/overlay-stdmod.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,521 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Standard Module 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: Standard Module Support</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><style type="text/css" scoped>
+/* Hide overlay markup while loading, if js is enabled */
+.yui3-js-enabled .yui3-overlay-loading {
+ top:-1000em;
+ left:-1000em;
+ position:absolute;
+}
+
+/* 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;
+}
+
+
+.yui3-overlay-content .yui3-widget-ft {
+ padding: 0.4em 0.6em 0.5em;
+ background-color:#DFE3F5;
+ border-radius: 0 0 2px 2px;
+}
+
+/* Example Layout CSS */
+.overlay-example {
+ padding:5px;
+ zoom:1;
+}
+
+.overlay-example .fields {
+ float:left;
+ width:23em;
+}
+
+.overlay-example .contenttype {
+ margin-bottom:0px;
+ padding-bottom:0px;
+}
+
+.overlay-example .note {
+ margin:0px;
+ padding:0px;
+}
+
+.overlay-example label {
+ display:block;
+ font-weight:bold;
+ margin-bottom:3px
+}
+
+.overlay-example select {
+ width:19em;
+}
+
+.overlay-example textarea {
+ width:19em;
+ height:15em;
+}
+
+.overlay-example .filler {
+ margin-left:24em;
+ margin-top:1em;
+ color:#999;
+}
+
+.overlay-example:after {
+ content:".";
+ display:block;
+ height:0;
+ visibility:hidden;
+ clear:both;
+}
+</style>
+
+<div class="intro">
+ <p>This example shows how you can work either the <code>headerContent, bodyContent, footerContent</code> attributes, to replace content in the Overlay's standard module sections, or use the <code>setStdModContent(section, content, where)</code> method to insert content <em>before</em>, or append it <em>after</em> existing content in the section.</p>
+</div>
+
+<div class="example">
+ <div class="overlay-example" id="overlay-stdmod">
+ <div id="overlay" class="yui3-overlay-loading">
+ <div class="yui3-widget-hd">Overlay Header</div>
+ <div class="yui3-widget-bd">Overlay Body</div>
+ <div class="yui3-widget-ft">Overlay Footer</div>
+ </div>
+
+ <div class="fields">
+ <div>
+ <label for="content">New content:</label>
+ <textarea name="content" id="content"></textarea>
+ <p>
+ <strong>Note:</strong> while <a href="#setting-content">Overlay accepts HTML strings and Nodes</a> as content, for this example, all HTML will be escaped.
+ </p>
+ </div>
+ <p>
+ <label for="section">Section to add content to:</label>
+ <select name="section" id="section">
+ <option value="header">Header</option>
+ <option value="body">Body</option>
+ <option value="footer">Footer</option>
+ </select>
+ </p>
+ <p>
+ <label for="where">Replace, insert before or append after existing content:</label>
+ <select name="where" id="where">
+ <option value="before">Before</option>
+ <option value="after">After</option>
+ <option value="replace">Replace</option>
+ </select>
+ </p>
+ <button type="button" id="setHTML">Set Content</button>
+ </div>
+ <div class="filler">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tellus pede, aliquet vitae, faucibus quis, lobortis non, metus. Pellentesque at metus ac mi condimentum egestas. In vel neque a massa porttitor ultrices. Nunc lorem. Vivamus ullamcorper fringilla tortor. Etiam at nunc pellentesque lectus cursus pretium. Integer velit. In quis nunc eget leo rhoncus scelerisque. In in ante ac ante pharetra vestibulum. Praesent sit amet metus. Nam egestas ipsum. Nulla facilisi. Quisque rhoncus, eros sed convallis faucibus, erat felis pretium nisi, non bibendum magna mauris non metus. Integer mauris eros, volutpat non, pretium vitae, rutrum at, tellus.
+ </div>
+</div>
+
+<script type="text/javascript">
+YUI().use("overlay", "escape", function(Y) {
+
+ var overlay = new Y.Overlay({
+ srcNode:"#overlay",
+ width:"20em",
+ align: {
+ node:"#overlay-stdmod > .filler",
+ points:["tl", "tl"]
+ }
+ });
+ overlay.render();
+
+ var content = Y.one("#content");
+ var where = Y.one("#where");
+ var section = Y.one("#section");
+
+ Y.on("click", function() {
+ var newContent = Y.Escape.html(content.get("value"));
+ overlay.setStdModContent(section.get("value"), newContent, where.get("value"));
+ }, "#setHTML");
+});
+</script>
+
+</div>
+
+<h2>Overlay's Standard Module Support</h2>
+
+<h3>Setting Up The YUI Instance</h3>
+
+<p>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">YUI({...}).use("overlay", function(Y) {
+ // We'll write example code here, where we have a Y.Overlay class available.
+});</pre>
+
+
+<p>Note, 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>Creating The Overlay From Markup</h3>
+
+<p>For this example, we'll create the overlay instance from markup which already exists on the page, and is shown below. We mark the existing markup with the <code>yui3-overlay-loading</code> class, so that we can hide it while the rich control is being instantiated:</p>
+
+<pre class="code prettyprint"><div id="overlay" class="yui3-overlay-loading">
+ <div class="yui3-widget-hd">Overlay Header</div>
+ <div class="yui3-widget-bd">Overlay Body</div>
+ <div class="yui3-widget-ft">Overlay Footer</div>
+</div></pre>
+
+
+<h3>Instantiating The Overlay</h3>
+
+<p>To create an overlay instance, we use the overlay constructor <code>Y.Overlay</code>, and pass it the <code>srcNode</code> reference for the existing markup on the page:</p>
+
+<pre class="code prettyprint">var overlay = new Y.Overlay({
+ srcNode:"#overlay",
+ width:"20em",
+ align: {
+ node:"#overlay-stdmod > .filler",
+ points:["tl", "tl"]
+ }
+});
+overlay.render();</pre>
+
+
+<p>We also set it's width and align it to the filler paragraph in the example box ("#overlay-stdmod > .filler"). We don't pass any node references to the <code>render</code> method, so the Overlay is rendered in the location of the contentBox provided.</p>
+
+<h3 id="setting-content">Setting Content</h3>
+
+<p>
+The example provides a set of input fields, allowing the user to set content in either of the 3 standard module sections which Overlay supports using Overlay's <code>setStdModContent</code> method.
+The content can either be inserted before, appended after, or replace existing content in the specified section.</p>
+
+<p>
+Additionally the new content can be converted to a node instance before being added to the specified section. Although it has no impact on the example, if the new content is added as a string, innerHTML is used to insert before or append after the existing section content, removing any event listeners which may have been attached to elements inside the section.
+</p>
+
+<pre class="code prettyprint">// Hold onto input field references.
+var content = Y.one("#content");
+var where = Y.one("#where");
+var section = Y.one("#section");
+
+Y.on("click", function() {
+
+ // New content to be added. For this example, we escape the HTML since it's
+ // coming from an unknown source, however Overlay accepts HTML strings as
+ // content (you should ensure it's coming from a trusted source).
+ var newContent = Y.Escape.html(content.get("value"));
+
+ overlay.setStdModContent(section.get("value"), newContent, where.get("value"));
+
+}, "#setHTML");</pre>
+
+
+<h3>CSS: Overlay Look/Feel</h3>
+
+<p>As with the other basic overlay examples, 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, body and footer sections:</p>
+
+<pre class="code prettyprint">/* Hide overlay markup while loading, if js is enabled */
+.yui3-js-enabled .yui3-overlay-loading {
+ top:-1000em;
+ left:-1000em;
+ position:absolute;
+}
+
+/* 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" id="overlay-stdmod">
+ <div id="overlay" class="yui3-overlay-loading">
+ <div class="yui3-widget-hd">Overlay Header</div>
+ <div class="yui3-widget-bd">Overlay Body</div>
+ <div class="yui3-widget-ft">Overlay Footer</div>
+ </div>
+
+ <div class="fields">
+ <div>
+ <label for="content">New content:</label>
+ <textarea name="content" id="content"></textarea>
+ <p>
+ <strong>Note:</strong> while <a href="#setting-content">Overlay accepts HTML strings and Nodes</a> as content, for this example, all HTML will be escaped.
+ </p>
+ </div>
+ <p>
+ <label for="section">Section to add content to:</label>
+ <select name="section" id="section">
+ <option value="header">Header</option>
+ <option value="body">Body</option>
+ <option value="footer">Footer</option>
+ </select>
+ </p>
+ <p>
+ <label for="where">Replace, insert before or append after existing content:</label>
+ <select name="where" id="where">
+ <option value="before">Before</option>
+ <option value="after">After</option>
+ <option value="replace">Replace</option>
+ </select>
+ </p>
+ <button type="button" id="setHTML">Set Content</button>
+ </div>
+ <div class="filler">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tellus pede, aliquet vitae, faucibus quis, lobortis non, metus. Pellentesque at metus ac mi condimentum egestas. In vel neque a massa porttitor ultrices. Nunc lorem. Vivamus ullamcorper fringilla tortor. Etiam at nunc pellentesque lectus cursus pretium. Integer velit. In quis nunc eget leo rhoncus scelerisque. In in ante ac ante pharetra vestibulum. Praesent sit amet metus. Nam egestas ipsum. Nulla facilisi. Quisque rhoncus, eros sed convallis faucibus, erat felis pretium nisi, non bibendum magna mauris non metus. Integer mauris eros, volutpat non, pretium vitae, rutrum at, tellus.
+ </div>
+</div>
+
+<script type="text/javascript">
+YUI().use("overlay", "escape", function(Y) {
+
+ var overlay = new Y.Overlay({
+ srcNode:"#overlay",
+ width:"20em",
+ align: {
+ node:"#overlay-stdmod > .filler",
+ points:["tl", "tl"]
+ }
+ });
+ overlay.render();
+
+ var content = Y.one("#content");
+ var where = Y.one("#where");
+ var section = Y.one("#section");
+
+ Y.on("click", function() {
+ var newContent = Y.Escape.html(content.get("value"));
+ overlay.setStdModContent(section.get("value"), newContent, where.get("value"));
+ }, "#setHTML");
+});
+</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-stdmod',
+ title: 'Standard Module 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>