--- /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-example.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en" class="yui3-loading">
+<head>
+ <meta charset="utf-8">
+ <title>Creating an animated panel using transitions</title>
+ <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.10.3/build/cssreset/reset-min.css&3.10.3/build/cssfonts/fonts-min.css&3.10.3/build/cssbase/base-min.css">
+ <script src="../../build/yui/yui-min.js"></script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/panel',
+ name: 'panel-animate',
+ title: 'Creating an animated panel using transitions',
+ newWindow: '',
+ 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>
+
+
+</head>
+<body class="yui3-skin-sam">
+
+<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>
+
+
+</body>
+</html>