panel.html revision 58fdb3802104fe93b4ae18b8fb8984bd44f895a1
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering font-family: sans-serif;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering font-size:12px;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering line-height:18px;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering margin-bottom:20px;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering border-bottom:1px dotted #333;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering background:#a3350d;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering color:#f27243;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering .yui3-widget-mask {
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering background:rgba(0,0,0,0.6);
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering .yui3-panel-content {
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering box-shadow: 0 0 5px #333;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering border-radius:2px;
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering <script type="text/javascript" src="http://localhost:8888/yui3/build/yui/yui-debug.js"></script>
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering <h1><code>Y.WidgetModality</code> Manual Tests</h1>
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering <span><code>Y.WidgetModality</code> is a widget extension that can be implemented when creating a new Widget. It makes that widget appear modally, through the <code>modal</code> attribute. By default, this attribute is set to <code>false</code></span>
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering <div class="yui3-widget-hd">The new YUI3 Panel...</div>
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering <div class="yui3-widget-bd">Here's some content that should go into a modal overlay. Let's see if it works...</div>
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering <li id="openNestedPanelBtn">Open Nested Panel</li>
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering Enable modality for main panel: <input id="modalMain" type="checkbox" name="main" value="main"/>
ef3b5246879094e29cc99c4d24cbfeb19b7da49bLennart Poettering Enable modality for nested panel: <input id="modalNest" type="checkbox" name="main" value="nest"/>
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering <!-- <input type="button" id="openChartBtn" value="Launch Modal Chart"> -->
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering <p><input type="button" id="OpenPanelBtn" value="Launch Modal Panel"></p>
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elit mi, tempus in tincidunt non, imperdiet sed augue. Nullam turpis magna, gravida vel venenatis at, dignissim non augue. Phasellus posuere erat nec ligula consectetur nec facilisis purus consectetur. Integer ipsum nisi, aliquam at ultrices quis, dictum a mauris. Ut posuere ultrices justo non convallis. Nunc a diam et est pretium fermentum. Nunc eget nunc non odio vestibulum vehicula et faucibus neque. Praesent turpis ligula, pharetra id vehicula a, sollicitudin sit amet lectus. Pellentesque pellentesque ante sed leo congue ullamcorper. Praesent at metus nisl. Vivamus at tortor sed sapien aliquet volutpat. Suspendisse vehicula, dolor ac vestibulum dapibus, nisi nulla ultrices odio, ac fermentum dolor risus congue tortor. Sed vel ligula in justo lacinia condimentum vel id est. Suspendisse interdum ligula quis odio congue consequat. Suspendisse potenti. Cras id accumsan eros. Duis gravida metus ac diam volutpat et dignissim justo pulvinar. Duis semper ornare dui, non condimentum nibh pretium id. Aenean dapibus purus eu nisl hendrerit a malesuada dolor vehicula.</p>
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering <p>Nullam et enim id lectus rhoncus convallis. Vivamus molestie diam sed est hendrerit condimentum. Phasellus fringilla libero a ligula aliquet placerat. Aliquam consectetur dignissim purus non scelerisque. Integer vel sem eu lacus tincidunt auctor. Vivamus vitae lobortis urna. Suspendisse potenti. Donec hendrerit viverra felis, in faucibus odio scelerisque eu. Vestibulum sem velit, posuere at pulvinar semper, ornare ut felis. Etiam at consectetur mi. Sed id nisi est, ac feugiat eros. Nulla facilisi. Ut porttitor tellus sit amet diam consequat ac sagittis lacus porta. Suspendisse nibh justo, fringilla a congue id, faucibus sed nibh. Sed vitae lorem mattis lectus ultrices suscipit eu ac mauris.</p>
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering <a href="#a" class="randomLinks">Random Link 1</a>
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering <a href="#b" class="randomLinks">Random Link 2</a>
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering <a href="#c" class="randomLinks">Random Link 3</a>
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering <a href="#d" class="randomLinks">Random Link 4</a>
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering YUI({filter:'raw'}).use('panel', function(Y) {
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering var isMainPanelModal, isNestedPanelModal, panel, nest;
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering srcNode: "#overlay",
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering visible: false,
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering Y.one("#OpenPanelBtn").on('click', function(e){
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering isMainPanelModal = Y.one('#modalMain').get('checked');
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering panel.set('modal', isMainPanelModal);
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering Y.log('modality on panel changed to ' + isMainPanelModal);
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering Y.one("#closePanelBtn").on('click', function(e) {
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering Y.one('#openNestedPanelBtn').on('click', function(e) {
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering isNestedPanelModal = Y.one('#modalNest').get('checked');
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering if (!(nest instanceof Y.Panel)) {
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering headerContent:"My Panel Header",
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering bodyContent:"My Panel Body <a href='closeNest.html' id='closeNest'>Close</a>",
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering footerContent:"My Footer Content",
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering visible:false,
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering centered: true
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering nest.after('render', function(){
d3a86981d1ae4c1d668e18868c3e6c9d2f23c144Lennart Poettering Y.one("#closeNest").on('click', function(e){
9ca3c17f207121b3c19a44217558b056a7585944Lennart Poettering nest.render('#nestedPanel');
9ca3c17f207121b3c19a44217558b056a7585944Lennart Poettering nest.set('modal', isNestedPanelModal);