details.js

Built to leverage Handlebars templates and JSON datasets. Improved animations and scrolling performance with Velocity. Responsive aware

Coded with care and love.

Demos

Multiple panels on top Single panel between rows Single panel replacing grid

Getting Started

Install using bower, or download project archive.

$ bower install --save details.js

# dependencies
$ bower install --save handlebars
$ bower install --save velocity
$ bower install --save imagesloaded # use imagesloaded.pkgd.min.js

Usage

$(function() {
    var collection = $('.selector').details(
        // extend default settings
    );
});

Default Settings

{
    dataset: {},                // JSON dataset to be compiled by Handlebars
    fadein: true,               // fade in on imagesloaded callback
    fadeinSpeed: 800,           // fade in speed in milliseconds
    panel: {
        classes: "",            // additional CSS classes to be added to panel element
        position: "top",        // "top", "between rows" or "over grid"
        stacked: true,          // allow stacking of multiple panels (boolean)
        speed: 400,             // animation speed (int)
        delay: 100,             // open panel delay (int)
        easing: {
            open: "ease-out",   // animation easing "ease-in", "ease-out" or "linear"
            close: "ease-out"   // animation easing "ease-in", "ease-out" or "linear"
        },
    },
    scroll: {
        offset: 0,              // scroll top offset (int)
        speed: 600,             // scroll speed in milliseconds (int)
        easing: "ease-out"      // scroll easing "ease-in", "ease-out" or "linear"
    },
    onInit: $.noop,             // function() { do something };
    onOpen: $.noop,             // …
    onClose: $.noop,            // …
    onComplete: $.noop,         // …
    onStart: $.noop,            // …
    onEnd: $.noop               // …
}

HTML data-attributes

Add any of these data attributes to elements in your template. (Optional)

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

<!-- example -->
<a href="#" data-role="close">Close</a>

Callbacks and Public Methods

onInit

onInit: function() {}           // called after grid template has been compiled

onOpen

onOpen: function() {}           // called before transition starts

onClose

onClose: function() {}          // called before transition starts

onComplete

onComplete: function(event) {} // called after transition ends
                               // event: "open", "close"

onStart

onStart: function() {}          // called on first item view

onEnd

onEnd: function() {}            // called on last item view

Calling methods programmatically

.close(element, callback);      // @param: dom panel element, or undefined
                                // @param: callback fn

.open(element);                 // open panel, @param: dom grid element

// example using .close() method
var collection = $('.selector').details();

$('.selector').on('click', function(event) {
    event.preventDefault();
    collection.close(undefined, function() {});
});

// example using .open() method
var collection = $('.selector').details();

$(window).on('load', function() {
    var element = $("figure:nth-child(2)");
    collection.open(element);
});

Handlebars Templates

Handlebars provides the power necessary to build semantic templates effectively with no frustration. If you are not familiar with Handlebars, complete details can be found here.

Grid

Class item is the only required class name below.

<script data-role="grid" type="text/x-handlebars-template">
    {{#each items}}
        <figure class="item"> <!-- figure or div tag -->
            <!-- be creative -->
        </figure>
    {{/each}}
</script>

Panel

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

JSON Dataset

The panel template uses the same dataset “context” as grid template. They are “connected” based on index position.

{
    "items": [
        // The data structure is entirely up to you.
        { "key": "value", … },
        { "key": "value", … }
        …
    ]
}

CSS

/* required (don’t forget to add browser prefix) */
.selector                { display: flex; flex-flow: row wrap; }
.selector .panel         { width: 100%; position: relative; overflow: hidden; }

/* optional */
.selector .item          { }
.selector .on            { }
.selector .disabled      { }

Dependencies

• Handlebars
• Velocity
• imagesLoaded

Browser Support

• Chrome
• Firefox
• Safari view issues
• IE 10+

License

This software is free to use under the MIT license.