panels.js

---

Insert panels anywhere in your layout.
Demo

Getting Started

Installing via bower is recommended.

bower install panels.js
npm install panels.js

# panels.min.js           minified version
# panels.pkg.min.js       minified with [velocity]
# panels.pkg.all.min.js   minified with [velocity, handlebars, imagesloaded]

Usage

jQuery is not required

var panels = new Panels(document.querySelector('.selector'), {
    // settings
});

Settings

context: {},
stage: {
    fade: true,
    speed: 800
},
panel: {
    position: 'top',
    classes: '',
    speed: 600,
    easing: 'easeOutQuad'
},
scroll: {
    offset: 0,
    speed: 600,
    easing: 'easeOutQuad'
},
onInit: function() {},
onBefore: function() {},
onAfter: function() {}

Options	Description	Default	Type
context	context to compile handlebars templates	{}	str/obj
stage.fade	fade-in on imagesloaded event	true	boolean
stage.speed	fade-in speed in milliseconds	800	number
panel.position	top, between rows or a dom node	top	str/obj
panel.classes	optional CSS classes	''	string
panel.speed	animation speed in milliseconds	600	number
panel.easing	animation easing type	easeOutQuad	string
scroll.offset	scroll top offset	0	number
scroll.speed	scroll speed in milliseconds	600	number
scroll.easing	scroll easing type	easeOutQuad	string

// available easing types:
// gist.github.com/bcorreia/8b2892ebad56514a644b

If Handlebars.js library is not present, context should be a string, a path to which an ajax request is sent.

Callbacks

onInit: function() {}                   // called after stage-template compiles
onBefore: function(event, element) {}   // called before animation starts
onAfter: function(event, element) {}    // called after animation ends

// event: 'open' or 'close' (string)
// element: '.panel' (dom node)

Public Methods

.open(element, callback);               // @param: '.item' element
                                        // @param: callback after animation ends

.close(element, callback);              // @param: '.panel' element
                                        // @param: callback after animation ends

// example
// gist.github.com/bcorreia/ed2210b1e11b947187e8

HTML data-role attribute

data-role="close"       <!-- close panel -->
data-role="previous"    <!-- previous panel -->
data-role="next"        <!-- next panel -->

<!-- example -->
<a class="-button" data-role="next" href="#">Next</a>

CSS

Available classes are:

.panel              { … }
.panel .-inner      { … }
.on                 { … } /* active item */
.disabled           { … } /* disabled button */

Handlebars

Panles.js automatically detects and compiles Handlebars templates if present.
If you want to use Panels.js without Handlebars, please refer to this gist.

Stage

<script data-role="stage" type="text/x-handlebars-template">
    {{#each items}}
        <figure class="item"> <!-- required class -->
            …
        </figure>
    {{/each}}
</script>

Panel

<script data-role="panel" type="text/x-handlebars-template">
    <!-- your handlebars template -->
</script>

Context

The context object will be used to render the stage-template and panel-template.

{
    "items": [
        { "key": "value", … },
        { "key": "value", … }
        …
    ]
}

imagesLoaded

Panels.js automatically detects imagesLoaded library if present.
This library is recommended when images are being loaded in your templates.

Velocity

Velocity.js is the only dependency.
No additional programming is necessary.

---

License

This software is free to use under the MIT license.