--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/panel/panel-animate.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Creating an Animated Panel</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: Creating an Animated Panel</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><div class="intro">
+ <p>
+ This example demonstrates how to instantiate a panel and use it in conjunction with the <code>"transition"</code> module to create an animated panel.
+ </p>
+</div>
+
+<div class="example newwindow">
+ <a href="panel-animate-example.html" target="_blank" class="button">
+ View Example in New Window
+ </a>
+</div>
+
+<h2>Creating an animated panel</h2>
+
+<h3>Setting Up The YUI Instance</h3>
+
+<p>
+To create an instance of a Panel on your page, the only module you need to request is the <code>panel</code> module. The <code>panel</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>, <code>widget-stdmod</code>, <code>widget-buttons</code>, <code>widget-modality</code> and <code>widget-autohide</code> extensions it uses.
+</p>
+
+<p>
+For this example, we also need to use the <code>transition</code> module. This module allows us to easily create animations using CSS3 transitions, with a JavaScript timer fallback.
+</p>
+
+<pre class="code prettyprint lang-javascript">YUI().use('panel', 'transition', function (Y) {
+ // We'll write example code here
+});</pre>
+
+
+<p>
+Note, using the <code>panel</code> module, will also pull down the default CSS required for panel. The CSS that styles the Panel requires you to have the class <code>yui3-skin-sam</code> on a parent element, commonly the <code><body></code> tag.
+</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 Panel</h3>
+
+<p>
+For this example, we'll instantiate a modal panel, set its visibility to false, and set some CSS properties. The following HTML will be used as the markup for the panel.
+</p>
+
+<pre class="code prettyprint lang-html"><div id="panelContent">
+ <div class="yui3-widget-hd">
+ Showing an animated panel
+ </div>
+ <div class="yui3-widget-bd">
+ <p>Making panels animate is easy with the "transition" module!</p>
+ </div>
+</div></pre>
+
+
+<p>The JavaScript to instantiate the panel is as follows:</p>
+
+<pre class="code prettyprint lang-javascript">var panel = new Y.Panel({
+ srcNode: '#panelContent',
+ width : 330,
+ xy : [300, -300],
+ zIndex : 5,
+ modal : true,
+ visible: false,
+ render : true,
+ buttons: [
+ {
+ value : 'Close the panel',
+ section: 'footer',
+ action : function (e) {
+ e.preventDefault();
+ hidePanel();
+ }
+ }
+ ]
+});</pre>
+
+
+<h3>Adding Animation</h3>
+
+<p>
+To create the animations, we need to set up transition properties on the panel's <code>boundingBox</code>. These properties consist of key/value pairs of CSS properties that we want to alter.
+</p>
+
+<p>
+We define two methods <code>showPanel()</code> and <code>hidePanel()</code> that define transitions. We could also use the <code>visibleChange</code> event to toggle the animation based on the state. However, the benefit of this method is that it allows us to use callback functions after the <code>transition</code> has ended.
+</p>
+
+
+<pre class="code prettyprint lang-javascript">function showPanel() {
+ panel.show();
+ bb.transition({
+ duration: 0.5,
+ top : '80px'
+ });
+}
+
+function hidePanel() {
+ bb.transition({
+ duration: 0.5,
+ top : '-300px'
+ }, function () {
+ panel.hide();
+ });
+}</pre>
+
+
+<h3>Adding Buttons to toggle visibility</h3>
+
+<p>
+Finally, we create two buttons, one to show the panel and one to hide it.
+</p>
+
+<p>
+The button to close the panel was specified in the instantiation of the panel. The button to open the panel can be defined as:
+</p>
+
+<pre class="code prettyprint lang-javascript">// Add Panel show button.
+openBtn.on('click', function (e) {
+ showPanel();
+});</pre>
+
+
+<h3>Complete Example Source</h3>
+
+<pre class="code prettyprint"><style type="text/css">
+
+.yui3-panel {
+ outline: none;
+}
+
+.yui3-panel #panelContent {
+ -webkit-box-shadow: 0px 0px 2px black;
+ -moz-box-shadow: 0px 0px 2px black;
+ box-shadow: 0px 0px 2px black;
+}
+.yui3-panel #panelContent .yui3-widget-hd {
+ font-weight: bold;
+ padding: 5px;
+}
+
+#panelContent .yui3-widget-bd {
+ padding: 15px;
+ background: white;
+ text-align: center;
+}
+
+#panelContent.yui3-widget-loading {
+ display: none;
+}
+
+.yui3-skin-sam .yui3-widget-mask {
+ background-color: #223460;
+ opacity: 0.9;
+}
+
+</style>
+
+<h2>Creating an animated panel using transitions</h2>
+
+<p>
+This example shows an animated modal form.
+<button id="openButton">Open Panel</button>
+</p>
+
+<p>
+Now let's fill this space with some text so that the modality kicks in.
+</p>
+
+<p>
+Vestibulum quis purus metus. Quisque in adipiscing erat. Class aptent taciti
+sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vitae
+lacus tellus, non iaculis arcu. Donec nec risus diam. Vivamus sed mauris eros,
+nec ultrices nibh. Phasellus scelerisque aliquet mauris, faucibus aliquam ipsum
+tempor quis. Integer quis risus sed tellus ornare venenatis quis ut magna.
+Integer erat mauris, hendrerit faucibus iaculis eu, feugiat vitae massa. Aliquam
+mi augue, tincidunt id porttitor ut, lacinia sed eros. Vestibulum ante ipsum
+primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum
+fringilla urna vel cursus. Etiam et suscipit eros. In ornare lacinia est, sed
+bibendum ligula blandit nec. Vestibulum tristique pulvinar nunc, quis lacinia
+eros facilisis vel. Duis tristique porttitor risus, vel laoreet ligula mollis
+vitae. Nam ornare justo a turpis mattis cursus.
+</p>
+
+<div id="panelContent" class="yui3-widget-loading">
+ <div class="yui3-widget-hd">
+ Showing an animated panel
+ </div>
+ <div class="yui3-widget-bd">
+ <p>Making panels animate is easy with the "transition" module!</p>
+ </div>
+</div>
+
+
+<script type="text/javascript">
+YUI().use('transition', 'panel', function (Y) {
+
+ var openBtn = Y.one('#openButton'),
+ panel, bb;
+
+ function showPanel() {
+ panel.show();
+ bb.transition({
+ duration: 0.5,
+ top : '80px'
+ });
+ }
+
+ function hidePanel() {
+ bb.transition({
+ duration: 0.5,
+ top : '-300px'
+ }, function () {
+ panel.hide();
+ });
+ }
+
+ panel = new Y.Panel({
+ srcNode: '#panelContent',
+ width : 330,
+ xy : [300, -300],
+ zIndex : 5,
+ modal : true,
+ visible: false,
+ render : true,
+ buttons: [
+ {
+ value : 'Close the panel',
+ section: 'footer',
+ action : function (e) {
+ e.preventDefault();
+ hidePanel();
+ }
+ }
+ ]
+ });
+
+ bb = panel.get('boundingBox');
+
+ openBtn.on('click', function (e) {
+ showPanel();
+ });
+
+});
+
+</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 multiple Panel instances, and use nested modality to interact with a Datatable.">
+ <a href="panel-form.html">Creating a Modal Form</a>
+ </li>
+
+
+
+ <li data-description="Shows how to create a panel that animates as it is shown and hidden">
+ <a href="panel-animate.html">Creating an Animated Panel</a>
+ </li>
+
+
+
+ <li data-description="Shows how to create a dialog instance that can be reused for multiple messages and confirmations.">
+ <a href="dialog.html">Creating a Reusable Dialog</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/panel',
+ name: 'panel-animate',
+ title: 'Creating an Animated Panel',
+ newWindow: 'true',
+ auto: false
+};
+YUI.Env.Tests.examples.push('panel-form');
+YUI.Env.Tests.examples.push('panel-animate');
+YUI.Env.Tests.examples.push('dialog');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>