tests/manual/panel-test.html

	panel-test.html revision 84765788c559bfdead67172a79759ac60c77231b
4015N/A<!DOCTYPE html>
4015N/A
4015N/A<head>
4015N/A<style>
4015N/A    body {
4015N/A        font-family:sans-serif;
4015N/A        line-height:120%;
4015N/A        font-size:90%;
6983N/A    }
6983N/A    #testNode {
4015N/A        width:100px;
4015N/A        height:100px;
4015N/A        background:red;
4015N/A    }
6983N/A</style>
6983N/A<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
6983N/A</head>
6983N/A
4015N/A<body class="yui3-skin-sam">
4015N/A    <h1>Panel Manual Tests</h1>
4015N/A    <p>The unit tests found at src/panel/tests/unit-tests.html don't do a great job at testing the auto-focus and hide functionality in panel, so this manual test was created to test those.</p>
4015N/A    <p>
4015N/A        Create a basic modal panel which focuses when I click outside it, and closes when escape key is pressed</p>
4015N/A        <div id="defaultContainer">Test content for default panel.</div>
4015N/A        <input type="button" value="Default Panel" id="defaultBtn">
4015N/A    </p>
4015N/A    <p>
4015N/A        Create a modal panel that hides on click on the mask (test autohide)</p>
4015N/A        <div id="autohideContainer">Test content for autohide panel.</div>
4015N/A        <input type="button" value="Autohide on mask click" id="autohideBtn">
4015N/A    </p>
4015N/A    <p>
4015N/A        Create a non-modal panel that hides when an element on the page is clicked
4015N/A        <div id="testNode">Click me when the panel is up</div>
4015N/A        <div id="nodeAutohideContainer">Test content for node autohide panel.</div>
4015N/A        <input type="button" value="Autohide on Node Click" id="nodeAutohideBtn">
4015N/A    </p>
4015N/A
4015N/A
4015N/A    <script type="text/javascript">
4015N/A
4015N/A    YUI({filter:"raw"}).use('panel', function(Y) {
4015N/A        var defaultBtn = Y.one("#defaultBtn"),
4015N/A        autohideBtn = Y.one('#autohideBtn'),
4015N/A        nodeAutohideBtn = Y.one("#nodeAutohideBtn"),
4015N/A
4015N/A        launchDefault = function() {
4015N/A            var cfg = {
4015N/A                visible:true,
4015N/A                centered:true,
4015N/A                modal:true,
4015N/A                width:200,
4015N/A                height:200,
4015N/A                srcNode: '#defaultContainer'
4015N/A            },
4015N/A
4015N/A            panel = new Y.Panel(cfg);
4015N/A            panel.render();
4015N/A        },
4015N/A
4015N/A        launchAutohide = function() {
4015N/A
4015N/A            var arr = [
4015N/A                {
4015N/A                    eventName: "clickoutside"
4015N/A                }
4015N/A            ],
4015N/A            cfg = {
4015N/A                srcNode: "#autohideContainer",
4015N/A                visible:true,
4015N/A                centered:true,
                width:200,
                height:200,
                modal:true,
                hideOn: arr
            },

            panel = new Y.Panel(cfg);
            panel.render();

        },

        launchNodeAutohide = function() {
            var cfg = {
                visible:true,
                centered:true,
                width:200,
                height:200,
                modal:false,
                srcNode: '#nodeAutohideContainer',
                hideOn: [
                    {
                        node: Y.one('#testNode'),
                        eventName: "click"
                    }
                ]
            },

            panel = new Y.Panel(cfg);
            panel.render();
        };


        defaultBtn.on('click', launchDefault);
        autohideBtn.on('click', launchAutohide);
        nodeAutohideBtn.on('click', launchNodeAutohide);
    });
    </script>
</body>