Y.eZ.FlyOut how to

example.txt

Example of how to use Y.eZ.FlyOut, here we're gonna show the debug output after a scroll from the user.

1. First enable the site.ini/[DebugSettings]/DebugOutput
2. Add the test_flyout.js and test_flyout.css files in design.ini, for instance in extension/ezdemodesign/settings/design.ini.append.php this gives:

<?php /*

[ExtensionSettings]
DesignExtensions[]=ezdemodesign

# List of javascripts to use in footer
[JavaScriptSettings]
JavaScriptFooterList[]

FrontendJavaScriptList[]=ezjsc::yui3
FrontendJavaScriptList[]=handle_transition.js
FrontendJavaScriptList[]=ezflyout.js
## here!
FrontendJavaScriptList[]=test_flyout.js

## and here!
[StylesheetSettings]
FrontendCSSFileList[]=test_flyout.css

*/ ?>

3. clear all cache
4. result is http://youtu.be/Q8zUwFvSmPs

test_flyout.css

/* just initialise the style of #debug so that it's outside of the view port and can be shown with a sexy transition :-) */
#debug
{
position:fixed;
top: 100px;
width:350px;
right:-370px;
height:350px;
overflow:auto;
background:#fff;
border:1px solid red;
}

test_flyout.js

YUI(YUI3_config).use('event-base', 'ezflyout', function (Y) {
    Y.on('domready', function () {
        // all configurations options are detailed in the inline documentation of the JS component
        var fly = new Y.eZ.FlyOut({
            element: '#debug',
            scrollTrigger: '.block-view-3_items1', // can also be a number of pixel see doc in ezflyout.js
            // for transition configuration see http://yuilibrary.com/yui/docs/transition/
            // in addition, each value can be function
            showTransition: {
                right: 0,
                duration:0.6
            },
            hideTransition: {
                right:"-370px",
                duration:0.6
            }
        });

    });
});