Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Flick Panel (gallery-flickpanel) on cdn

Last Updated: 08/1/12

+ 0 -

James Alley

YUI Contributor

See 1 more by this user.

Created: 06/5/12
Last CDN Push: 06/27/12
Build Tag: gallery-2012.06.27-20-10
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.0
Free for use.

Abstract

Flick Panel was created so that you can easily tuck a sidebar or other panel out of view. By flicking the page, you slide open the flickPanel.

Features

You can animate the main element of your page to the side along with the flickPanel, or the flickPanel can slide over the main element.

FlickPanel offers a pullTab. Typically you'd style this so it appears to be a tab on the side of your panel. You can then drag the panel open via the tab. This is nice if you'd prefer to have it feel very physical, with direct user control. You can also make the pullTab full-height and transparent, so that it appears that you're dragging the flickPanel open just by dragging from anywhere on the edge of the page.

You can open the flickPanel by firing an event, "flickpanel.toggle.click". This means you can wire up a toggle button anywhere in your UI and have it control the flickPanel. This is nice if you'd rather control it via an explicit button rather than a harder-to-discover gesture. You can also have both!

To gauge user interest in the feature, FlickPanel fires events "flickpanel.open" and "flickpanel.close".

FlickPanel is a YUI3 plugin, so it can easily be plugged and unplugged. For instance, if there's not enough viewport to contain your panel, you can plug it in. If the user changes orientation or resizes their window, you can unplug it.

FlickPanel has some rather sophisticated interpreting of user gesture intent, so that a diagonal flick to scroll the page doesn't get interpreted as a flick to open the flickPanel.

Setup

Some setup is required for the elements you wish to interact with. Typically you'd set up a main div with a sidebar positioned absolutely beside it, just off screen. E.g.,

.flickPanel {
position: absolute;
width: 15em;
left: -15em;
}

FlickPanel will handle the rest. If FlickPanel is not initialized, the panel will stay off-screen. When plugged, FlickPanel measures the width of the panel and translates both main and panel the appropriate distance.

The following code listens for flicks on the entire page body. When the user flicks right, the flickPanel will slide open. Since animateMain is set to true, the main div will also slide to the right. (If it was set to false, the main div would stay put and the flickPanel would slide over it.)

A little setup and customization is required, as the flickPanel must be position:absolute just off-screen to the left of the main div.

Code Sample

<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.27-20-10'
}).use('gallery-flickpanel', function(Y) {
 
    Y.one('body').plug(Y.FlickPanelPlugin,{
            flickPanel: Y.one('.flickPanel'),
            main: Y.one('#web'),
            animateMain: true
    });
 
});