Simple Effects

The lazr.slide_in() Effect

Slide-in content

Some content that should be hidden as the slider rolls in.

Usage

var LAZR_YUI_CONFIG = {
    filter: "min",
    base: "../../build/",
    modules: LAZR_MODULES,
};
YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) {

    var reset_height = null;
    var slide_node;

    Y.on('click', function(e) {
        slide_node = Y.get('#slide-in .widget-bd');
        reset_height = (reset_height == null) ? slide_node.getComputedStyle('height') : reset_height;
        slide_node.setStyle('height', reset_height);
        Y.lazr.effects.slide_in(slide_node).run();
    }, '#slide-in-example button');
});

The lazr.slide_out() Effect

Slide-out content

Some content that should be revealed as the slider rolls out.

Usage

var LAZR_YUI_CONFIG = {
    filter: "min",
    base: "../../build/",
    modules: LAZR_MODULES,
};
YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) {

    var reset_height = null;
    var slide_node;

    Y.on('click', function(e) {
        slide_node = Y.get('#slide-out .widget-bd');
        slide_node.setStyle('display', 'none');
        Y.lazr.effects.slide_out(slide_node).run();
    }, '#slide-out-example button');
});

Reversing the slide effects

Reversible slide

Some content that should be revealed as the slider rolls.

Usage

Because the slide functions return an instance of Y.Anim, we can simply reverse the animation to reverse the slide direction.

NOTE Reversing an animation reuses the calculated object height from when the animation was first run. If you have nested expanders the running 'reverse' could lead to some unexpected outcomes. In these cases it may be best to simply call the slide animation function again.

var LAZR_YUI_CONFIG = {
    filter: "min",
    base: "../../build/",
    modules: LAZR_MODULES,
};
YUI(LAZR_YUI_CONFIG).use('node', 'event', 'lazr.effects', function(Y) {

    var slide;

    Y.on('click', function(e) {
        if (!slide) {
            slide = Y.lazr.effects.slide_in('#slide-reverse .widget-bd');
        } else {
            // Since this is a Y.Anim instance, we can just set its
            // 'reverse' property.
            slide.set('reverse', !slide.get('reverse'));
        }
        slide.stop();  // In case we are half-way through another animation.
        slide.run();

    }, '#slide-reverse-example button');
});

The async_slideout() Function

The asycn_slideout() function fetches content over-the-wire when the user first clicks, then reveals the content using a slide-out drawer. From that point onwards, clicking on the link collapses and re-opens the content, same as any other slider.

Usage

var LAZR_YUI_CONFIG = {
    filter: "min",
    base: "../../build/",
    modules: LAZR_MODULES,
};
YUI(LAZR_YUI_CONFIG).use('lazr.effects-async', function(Y) {

Y.lazr.effects.async_slideout(
    '#drawer',        // The node to slide opened and closed.
    '#open-close',    // The clickable element that opens and closes the drawer.
    'http://some.url', // The URL we will fetch content from.
    '#container'      // (Optional) The container inside the sliding node that
                      // will receive the new HTML.
);

});