84765788c559bfdead67172a79759ac60c77231bTilo Mitra font-family:sans-serif;
84765788c559bfdead67172a79759ac60c77231bTilo Mitra line-height:120%;
84765788c559bfdead67172a79759ac60c77231bTilo Mitra font-size:90%;
84765788c559bfdead67172a79759ac60c77231bTilo Mitra width:100px;
84765788c559bfdead67172a79759ac60c77231bTilo Mitra height:100px;
84765788c559bfdead67172a79759ac60c77231bTilo Mitra background:red;
84765788c559bfdead67172a79759ac60c77231bTilo Mitra<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra <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>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra Create a basic modal panel which focuses when I click outside it, and closes when escape key is pressed</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra <div id="defaultContainer">Test content for default panel.</div>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra <input type="button" value="Default Panel" id="defaultBtn">
84765788c559bfdead67172a79759ac60c77231bTilo Mitra Create a modal panel that hides on click on the mask (test autohide)</p>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra <div id="autohideContainer">Test content for autohide panel.</div>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra <input type="button" value="Autohide on mask click" id="autohideBtn">
84765788c559bfdead67172a79759ac60c77231bTilo Mitra Create a non-modal panel that hides when an element on the page is clicked
84765788c559bfdead67172a79759ac60c77231bTilo Mitra <div id="testNode">Click me when the panel is up</div>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra <div id="nodeAutohideContainer">Test content for node autohide panel.</div>
84765788c559bfdead67172a79759ac60c77231bTilo Mitra <input type="button" value="Autohide on Node Click" id="nodeAutohideBtn">
84765788c559bfdead67172a79759ac60c77231bTilo Mitra YUI({filter:"raw"}).use('panel', function(Y) {
84765788c559bfdead67172a79759ac60c77231bTilo Mitra var defaultBtn = Y.one("#defaultBtn"),
84765788c559bfdead67172a79759ac60c77231bTilo Mitra autohideBtn = Y.one('#autohideBtn'),
84765788c559bfdead67172a79759ac60c77231bTilo Mitra nodeAutohideBtn = Y.one("#nodeAutohideBtn"),
84765788c559bfdead67172a79759ac60c77231bTilo Mitra launchDefault = function() {
84765788c559bfdead67172a79759ac60c77231bTilo Mitra visible:true,
84765788c559bfdead67172a79759ac60c77231bTilo Mitra centered:true,
84765788c559bfdead67172a79759ac60c77231bTilo Mitra srcNode: '#defaultContainer'
84765788c559bfdead67172a79759ac60c77231bTilo Mitra panel = new Y.Panel(cfg);
84765788c559bfdead67172a79759ac60c77231bTilo Mitra launchAutohide = function() {
84765788c559bfdead67172a79759ac60c77231bTilo Mitra eventName: "clickoutside"
84765788c559bfdead67172a79759ac60c77231bTilo Mitra srcNode: "#autohideContainer",
84765788c559bfdead67172a79759ac60c77231bTilo Mitra visible:true,
84765788c559bfdead67172a79759ac60c77231bTilo Mitra centered:true,
84765788c559bfdead67172a79759ac60c77231bTilo Mitra panel = new Y.Panel(cfg);
84765788c559bfdead67172a79759ac60c77231bTilo Mitra launchNodeAutohide = function() {
84765788c559bfdead67172a79759ac60c77231bTilo Mitra visible:true,
84765788c559bfdead67172a79759ac60c77231bTilo Mitra centered:true,
84765788c559bfdead67172a79759ac60c77231bTilo Mitra modal:false,
84765788c559bfdead67172a79759ac60c77231bTilo Mitra srcNode: '#nodeAutohideContainer',
84765788c559bfdead67172a79759ac60c77231bTilo Mitra node: Y.one('#testNode'),
84765788c559bfdead67172a79759ac60c77231bTilo Mitra eventName: "click"
84765788c559bfdead67172a79759ac60c77231bTilo Mitra panel = new Y.Panel(cfg);
84765788c559bfdead67172a79759ac60c77231bTilo Mitra defaultBtn.on('click', launchDefault);
84765788c559bfdead67172a79759ac60c77231bTilo Mitra autohideBtn.on('click', launchAutohide);
84765788c559bfdead67172a79759ac60c77231bTilo Mitra nodeAutohideBtn.on('click', launchNodeAutohide);