panel/docs/panel-animate.mustache

3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<div class="intro">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    <p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    This example demonstrates how to instantiate a panel and use it in conjunction with the `"transition"` module to create an animated panel.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    </p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra</div>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra<div class="example newwindow">
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra    <a href="panel-animate-example.html" target="_blank" class="button">
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra        View Example in New Window
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra    </a>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra</div>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo
8f0dc35284b10842ef7c44ffc3d410227804fcedTilo Mitra<h2>Creating an animated panel</h2>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Setting Up The YUI Instance</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloTo create an instance of a Panel on your page, the only module you need to request is the `panel` module. The `panel` module will pull in the `widget`, `widget-stack`, `widget-position`, `widget-position-align`, `widget-position-constrain`, `widget-stdmod`, `widget-buttons`, `widget-modality` and `widget-autohide` extensions it uses.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloFor this example, we also need to use the `transition` module. This module allows us to easily create animations using CSS3 transitions, with a JavaScript timer fallback.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```javascript
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloYUI().use('panel', 'transition', function (Y) {
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra    // We'll write example code here
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra});
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra```
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloNote, using the `panel` module, will also pull down the default CSS required for panel. The CSS that styles the Panel requires you to have the class `yui3-skin-sam` on a parent element, commonly the `<body>` tag.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Instantiating the Panel</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloFor 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.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```html
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<div id="panelContent">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    <div class="yui3-widget-hd">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        Showing an animated panel
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    </div>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    <div class="yui3-widget-bd">
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        <p>Making panels animate is easy with the "transition" module!</p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    </div>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra</div>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra```
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<p>The JavaScript to instantiate the panel is as follows:</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```javascript
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitravar panel = new Y.Panel({
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    srcNode: '#panelContent',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    width  : 330,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    xy     : [300, -300],
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    zIndex : 5,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    modal  : true,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    visible: false,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    render : true,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    buttons: [
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo            value  : 'Close the panel',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo            section: 'footer',
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo            action : function (e) {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo                e.preventDefault();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo                hidePanel();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo            }
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        }
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    ]
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra});
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra```
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Adding Animation</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloTo create the animations, we need to set up transition properties on the panel's `boundingBox`. These properties consist of key/value pairs of CSS properties that we want to alter.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloWe define two methods `showPanel()` and `hidePanel()` that define transitions. We could also use the `visibleChange` 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 `transition` has ended.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```javascript
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolofunction showPanel() {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    panel.show();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    bb.transition({
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        duration: 0.5,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        top     : '80px'
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    });
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra}
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolofunction hidePanel() {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    bb.transition({
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        duration: 0.5,
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        top     : '-300px'
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    }, function () {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo        panel.hide();
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    });
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra}
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra```
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Adding Buttons to toggle visibility</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloFinally, we create two buttons, one to show the panel and one to hide it.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo<p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloThe button to close the panel was specified in the instantiation of the panel. The button to open the panel can be defined as:
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo</p>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo```javascript
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo// Add Panel show button.
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric FerraiuoloopenBtn.on('click', function (e) {
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo    showPanel();
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra});
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra```
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra
8f0dc35284b10842ef7c44ffc3d410227804fcedTilo Mitra<h3>Complete Example Source</h3>
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra```
b314fc1188609ac757efdb7f61cc5882a070a5e7Eric Ferraiuolo{{>panel-animate-source}}
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra```