port anim examples to mustache

unoduetre · Jul 25, 2011 · 1f08a84 · 1f08a84
1 parent 2989b62
commit 1f08a84
Show file tree

Hide file tree

Showing 21 changed files with 1,186 additions and 0 deletions.
diff --git a/src/anim/docs/alt-iterations.mustache b/src/anim/docs/alt-iterations.mustache
@@ -0,0 +1,82 @@
+<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">
+<div class="intro">
+    <p>This demonstrates how to use the <code>iterations</code> attribute to run multiple iterations of the animation.</p>
+    <p>Mouse over the link to begin the animation.</p>
+</div>
+
+<div class="example">
+{{>alt-iterations-source}}
+</div>
+
+<h2>Setting up the HTML</h2>
+<p>First we add some HTML to animate.</p>
+
+```
+<a href="#" id="demo">hover me</a>
+```
+
+<h2>Creating the Anim Instance</h2>
+<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the final properties and their values.</p>
+<p>Adding an <code>iterations</code> attribute of "infinite" means that the animation will run continuously.</p>
+<p>The <code>direction</code> attribute of "alternate" means that the animation reverses every other iteration.</p>
+
+```
+var node = Y.one('#demo');
+
+var anim = new Y.Anim({
+    node: node,
+    from: {
+        backgroundColor:node.getStyle('backgroundColor'),
+        color: node.getStyle('color'),
+        borderColor: node.getStyle('borderTopColor')
+    },
+
+    to: {
+        color: '#fff',
+        backgroundColor:'#ffa928',
+        borderColor: '#71241a'
+    },
+
+    duration: 0.5,
+    iterations: 'infinite',
+    direction: 'alternate'
+});
+```
+
+<h2>Changing Attributes</h2>
+<p>We don't want the animation running when the link is not hovered over, so we will change the animation attributes depending on whether or not we are over the link.</p>
+<p>We can use a single handler for both mouse the mouseOver and mouseOut events, and set the <code>reverse</code> attribute depending on which event fired.</p>
+
+```
+var hover = function(e) {
+    var reverse = false,
+        iterations = 'infinite';
+
+    if (anim.get('running')) {
+        anim.pause();
+    }
+    if (e.type === 'mouseout') {
+        reverse = true;
+        iterations = 1;
+    }
+    anim.setAttrs({
+        'reverse': reverse,
+        'iterations': iterations
+    });
+
+    anim.run();
+};
+```
+
+<h2>Running the Animation</h2>
+<p>Finally we add event handlers to run the animation.</p>
+
+```
+node.on('mouseover', hover);
+node.on('mouseout', hover);
+```
+
+<h2>Complete Example Source</h2>
+```
+{{>alt-iterations-source}}
+```
diff --git a/src/anim/docs/anim-xy.mustache b/src/anim/docs/anim-xy.mustache
@@ -0,0 +1,58 @@
+<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">
+<div class="intro">
+    <p>This demonstrates how to animate the <code>xy</code> position of an element.</p>
+    <p> Click anywhere to move the element to your click position.</p>
+</div>
+
+<div class="example">
+{{>anim-xy-source}}
+</div>
+
+<h3>Setting up the HTML</h3>
+<p>First we add some HTML to animate.</p>
+
+```
+<div id="demo" class="yui3-module">
+    <div class="yui3-hd">
+        <h4>Animation Demo</h4>
+        <a title="remove module" class="yui3-remove"><em>x</em></a>
+    </div>
+    <div class="yui3-bd">
+        <p>This an example of what you can do with the YUI Animation Utility.</p>
+        <p><em>Follow the instructions above to see the animation in action.</em></p>
+    </div>
+</div>
+```
+
+<h3>Creating the Anim Instance</h3>
+<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate. We will set the <code>to</code> attribute later when then animation runs.</p>
+
+```
+var anim = new Y.Anim({
+    node: '#demo',
+    duration: 0.5,
+    easing: Y.Easing.elasticOut
+});
+```
+
+<h3>Changing Attributes</h3>
+<p>Next we need a <code>click</code> handler to set the <code>to</code> attribute for the <code>xy</code> behavior and run the animation.</p>
+
+```
+var onClick = function(e) {
+    anim.set('to', { xy: [e.pageX, e.pageY] });
+    anim.run();
+};
+```
+
+<h3>Running the Animation</h3>
+<p>Finally we add an event handler to run the animation when the document is clicked.</p>
+
+```
+Y.one('document').on('click', onClick);
+```
+
+<h2>Complete Example Source</h2>
+```
+{{>anim-xy-source}}
+```
diff --git a/src/anim/docs/assets/anim.css b/src/anim/docs/assets/anim.css
@@ -0,0 +1,142 @@
+/* color and iteration examples */
+a#demo {
+    background:#8dd5e7;
+    border:1px solid #004c6d;
+    color:#004c6d;
+    display:block;
+    height:2em;
+    line-height:2em;
+    width:6em;
+    text-align:center;
+}
+
+/* xy and curve examples */
+span#demo {
+    background:#ffa928;
+    display:block;
+    height:10px;
+    width:10px;
+}
+
+/* module examples */
+div#demo {
+    width:22em;
+    overflow:hidden;
+}
+
+div#demo {
+    border-bottom:1px solid #7a97bb;
+}
+
+div#demo .yui3-hd {
+    background: #406ed9;
+    border:1px solid #243356;
+    zoom:1;
+}
+
+div#demo .yui3-hd h3 {
+    border:0;
+    color:#fff;
+    margin:0;
+}
+
+#demo .yui3-hd a { /* module control (close remove, etc) */
+    background:url(sprite.png) no-repeat;
+    color:#abceff;
+    cursor:pointer;
+    cursor:hand;
+    display: inline; /* prevent IE margin doubling */
+    float: right;
+    margin-top: -18px;
+    height:12px;
+    width:24px;
+    overflow:hidden;
+    text-align: right;
+    text-decoration:none;
+    text-indent:9999px;
+}
+
+div#demo .yui3-bd {
+    background:#abceff;
+    border:solid #7a97bb;
+    border-width:0 1px;
+    clear: both;
+    overflow:hidden;
+    zoom:1;
+}
+
+div#demo .yui3-hd,
+div#demo .yui3-bd p {
+    margin:0;
+    padding:0.5em 1em;
+}
+
+div#demo div.yui3-bd p {
+    margin:0.3em 10px 0 0; /* right margin for scrollbar space */
+}
+
+div#demo .yui3-bd p em {
+    font-weight:bold;
+}
+
+/* basic example */
+div#demo a.yui3-remove {
+    background-position:0 -300px;
+    height:16px;
+    width:26px;
+}
+
+/* scroll example */
+#demo.yui3-scroll {
+    position: relative;
+}
+
+.yui3-scroll .yui3-hd {
+    position: relative;
+}
+.yui3-scroll .yui3-bd {
+    height:10em;
+    overflow:hidden;
+}
+
+#demo .yui3-hd .yui3-scroll-controls { /* fake scrollbar */
+    background:#dfdfdf;
+    border-left:1px solid #7a97bb;
+    height:10em;
+    width:13px;
+    position:absolute;
+    right:0;
+    bottom:-10.1em;
+    overflow:hidden;
+}
+
+#demo .yui3-hd .yui3-scroll-controls a {
+    margin: 0;
+    position:absolute;
+    top:0;
+    right:0;
+    height:14px;
+    width:14px;
+    Xborder:1px solid #000;
+}
+
+#demo .yui3-scroll-controls a.yui3-scrollup {
+    background-position:-12px -752px; /* scroll up icon */
+}
+
+#demo .yui3-scroll-controls a.yui3-scrolldown {
+    background-position:-12px -804px; /* scroll down icon */
+    top:auto;
+    bottom:0;
+}
+
+/* reverse and easing examples */
+#demo a.yui3-toggle {
+    background-position:0 -400px; /* close (minus) icon */
+    height:15px;
+    width:15px;
+}
+
+#demo.yui3-closed a.yui3-toggle {
+    background-position:0 -350px; /* open (plus) icon */
+}
diff --git a/src/anim/docs/assets/sprite.png b/src/anim/docs/assets/sprite.png
diff --git a/src/anim/docs/basic.mustache b/src/anim/docs/basic.mustache
@@ -0,0 +1,56 @@
+<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">
+<div class="intro">
+    <p>This demonstrates how to animate the <code>opacity</code> of an element.</p>
+    <p> Click the X in the header to fade the element out.</p>
+</div>
+
+<div class="example">
+{{>basic-source}}
+</div>
+
+<h2>Setting up the HTML</h2>
+<p>First we add some HTML to animate.</p>
+
+```
+<div id="demo" class="yui3-module">
+    <div class="yui3-hd">
+        <h3>Animation Demo</h3>
+        <a href="remove.php?id=demo" title="remove module" class="yui3-remove"><em>x</em></a>
+    </div>
+    <div class="yui3-bd">
+        <p>This an example of what you can do with the YUI Animation Utility.</p>
+        <p><em>Follow the instructions above to see the animation in action.</em></p>
+    </div>
+</div>
+```
+
+<h2>Creating the Anim Instance</h2>
+<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the final properties and their values.</p>
+
+```
+var anim = new Y.Anim({
+    node: '#demo',
+    to: { opacity: 0 }
+});
+```
+
+<h2>Handling the Click Event</h2>
+<p>Clicking the toggle control should start the animation, so we'll need to handle that click, including preventing the default action of following the url.</p>
+
+```
+var onClick = function(e) {
+    e.preventDefault();
+    anim.run();
+};
+```
+
+<h2>Running the Animation</h2>
+<p>Finally we add an event listener to run the animation.</p>
+```
+Y.one('#demo .yui3-remove').on('click', onClick);
+```
+
+<h2>Complete Example Source</h2>
+```
+{{>basic-source}}
+```