panel.html revision 1b94590fd02ca19669dfb4b5deb563a290459d81
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye font-family: sans-serif;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye font-size:12px;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye line-height:18px;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye margin-bottom:20px;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye border-bottom:1px dotted #333;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye #desc span {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye background:#fffcb2;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye padding:2px;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye .yui3-widget-mask {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye background:rgba(0,0,0,0.6);
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye .yui3-widget {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye /*outline:none;*/
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye .yui3-panel {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye background:white;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye box-shadow: 0 0 5px #333;
45d862b9c655542aa44c02958011065f6994f512Trond Norbye padding:15px;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye border-radius:5px;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye /* outline:none;*/
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye margin:10px 10px 10px 10px;
8e28c545e8647b609b3f2668073159e3a074a564Jorgen Austvik max-width: 800px;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye height:200px;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye display:none;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye .yui3-datatable {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye outline:none;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye/* .yui3-datatable-hidden, .yui3-chart-hidden, .yui3-panel-hidden {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye display:none;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye <script type="text/javascript" src="http://localhost:8888/yui3/build/yui/yui-debug.js"></script>
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye <h1><code>Y.WidgetModality</code> Manual Tests</h1>
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye <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>
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye Here's some content that should go into a modal overlay. Let's see if it works...
04eceded116c11ab5ed16e40196adbe969b94aabJorgen Austvik <p><input type="button" id="closeOverlayBtn" value="Close Overlay"></p>
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye <p><input type="button" id="openNestedOverlayBtn" value="Open Nested Overlay"></p>
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye Enable modality for main panel: <input id="modalMain" type="checkbox" name="main" value="main"/>
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye Enable modality for nested panel: <input id="modalNest" type="checkbox" name="main" value="nest"/>
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye <!-- <input type="button" id="openChartBtn" value="Launch Modal Chart"> -->
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye <p><input type="button" id="OpenOverlayBtn" value="Launch Modal Overlay"></p>
8e28c545e8647b609b3f2668073159e3a074a564Jorgen Austvik <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>
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye <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>
f01a1f69c66d9e36d0d0341db966968bc6ad2f40Knut Anders Hatlen <a href="#a" class="randomLinks">Random Link 1</a>
f01a1f69c66d9e36d0d0341db966968bc6ad2f40Knut Anders Hatlen <a href="#b" class="randomLinks">Random Link 2</a>
f01a1f69c66d9e36d0d0341db966968bc6ad2f40Knut Anders Hatlen <a href="#c" class="randomLinks">Random Link 3</a>
8e28c545e8647b609b3f2668073159e3a074a564Jorgen Austvik <a href="#d" class="randomLinks">Random Link 4</a>
8e28c545e8647b609b3f2668073159e3a074a564Jorgen Austvik YUI({filter:'raw'}).use('panel', function(Y) {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye var isMainPanelModal, isNestedPanelModal, panel, nest;
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye panel = new Y.Panel({
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye srcNode: "#overlay",
190673381ffa7a24ec9cad406784a9a84644e04fTrond Norbye height: 300,
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye visible: false,
f0ca07e08967a974684daffd32316cc9f9b98150Trond Norbye centered: true
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye Y.one("#OpenOverlayBtn").on('click', function(e){
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye isMainPanelModal = Y.one('#modalMain').get('checked');
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye panel.set('modal', isMainPanelModal);
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye Y.log('modality on panel changed to ' + isMainPanelModal);
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye Y.one("#closeOverlayBtn").on('click', function(e) {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye Y.one('#openNestedOverlayBtn').on('click', function(e) {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye isNestedPanelModal = Y.one('#modalNest').get('checked');
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye if (!(nest instanceof Y.Panel)) {
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye headerContent:"My Overlay Header",
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye bodyContent:"My Overlay Body <a href='closeNest.html' id='closeNest'>Close</a>",
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye footerContent:"My Footer Content",
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye visible:false,
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye centered: true
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye nest.after('render', function(){
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye Y.one("#closeNest").on('click', function(e){
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye nest.render('#nestedOverlay');
523201f786f6b12b7cf54091c6e5be167878cbeeTrond Norbye nest.set('modal', isNestedPanelModal);