diff options
Diffstat (limited to 'includes/js/dijit/tests/layout')
27 files changed, 3059 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/layout/ContentPane.html b/includes/js/dijit/tests/layout/ContentPane.html new file mode 100644 index 0000000..8853a3e --- /dev/null +++ b/includes/js/dijit/tests/layout/ContentPane.html @@ -0,0 +1,577 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Test ContentPane</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + @import "../css/dijitTests.css"; + + .box { + border: 1px solid black; + padding: 8px; + } + + .dijitTestWidget { + border: 1px dashed red; + background-color: #C0E209 ; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true"></script> + <script type="text/javascript"> + dojo.require("doh.runner"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit._Container"); + dojo.require("dijit._Templated"); + dojo.require("dijit.layout.StackContainer"); + + // create a do nothing, only for test widget + dojo.declare("dijit.TestWidget", + [dijit._Widget, dijit._Templated], { + templateString: "<span class='dijitTestWidget'></span>" + }); + + + dojo.addOnLoad(function(){ + doh.register("pane1", + [ + { + name: "no_autoparse", + runTest: function(t){ + if(dijit.byId("pane1")){ + throw doh._AssertFailure("Page got autoparsed when it shouldn't"); + } + } + } + ] + ); + + var pane2; + + doh.registerGroup("pane2", + [ + { + name: "clear_content", + setUp: function(t){ + pane2 = new dijit.layout.ContentPane({ + preventCache: true + }, dojo.byId("pane2")); + pane2.setContent();// pass undefined on purpose + }, + runTest: function(t){ + t.assertEqual(0, dijit._Container.prototype.getChildren.call(pane2).length); + t.assertEqual("", pane2.domNode.innerHTML) + } + }, + { + name: "setContent_String", + setUp: function(){ + pane2.setContent(); + }, + runTest: function(t){ + var msg = "<h3>a simple html string</h3>"; + pane2.setContent(msg); + t.assertEqual(msg, pane2.domNode.innerHTML.toLowerCase()); + } + }, + { + name: "setContent_DOMNode", + setUp: function(t){ + var div = dojo.doc.createElement('div'); + div.innerHTML = "setContent( [DOMNode] )"; + div.setAttribute('dojoType', 'dijit.TestWidget'); + pane2.setContent(div); + }, + runTest: function(t){ + t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane2).length); + }, + tearDown: function(t){ + pane2.setContent(); // clear content for next test + } + }, + { + name: "setContent_NodeList", + setUp: function(t){ + var div = dojo.doc.createElement('div'); + div.innerHTML = "<div dojotype='dijit.TestWidget'>above</div>" + +"Testing!<div><p><span><b>Deep nested</b></span></p></div>" + +"<div dojotype='dijit.TestWidget'>below</div>"; + + var list = div.childNodes; + pane2.setContent(div.childNodes); + }, + runTest: function(t){ + t.assertEqual(2, dijit._Container.prototype.getChildren.call(pane2).length); + + //regular DOM check + var children = pane2.domNode.childNodes; + t.assertEqual(4, children.length); + t.assertEqual("Testing!", children[1].nodeValue); + t.assertEqual("div", children[2].nodeName.toLowerCase()); + t.assertEqual("<p><span><b>deep nested</b></span></p>", children[2].innerHTML.toLowerCase()); + } + }, + { + name: "setContent_dojo_NodeList", + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + var div = dojo.doc.createElement('div'); + div.innerHTML = "<div dojotype='dijit.TestWidget'>above</div>" + +"Testing!<div><p><span><b>Deep nested</b></span></p></div>" + +"<div dojotype='dijit.TestWidget'>below</div>"; + + var list = new dojo.NodeList(); + dojo.forEach(div.childNodes, function(n){ + list.push(n.cloneNode(true)); + }); + + pane2.setContent(list); + t.assertEqual(4, pane2.domNode.childNodes.length); + } + }, + { + name: "extractContent", + runTest: function(t){ + var def = pane2.extractContent; + t.assertFalse(def); + + // test that it's actually working + pane2.extractContent = true; + pane2.setContent('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ' + +'"http://www.w3.org/TR/html4/strict.dtd">' + +'<html><head><style>body{font-weight:bold;}</style></head>' + +'<body>extractContent test</body></html>'); + + t.assertEqual("extractContent test", pane2.domNode.innerHTML); + + // reset back to default + pane2.extractContent = def; + } + }, + + ///////////////////////////////////////////////////////////////////////// + // We assume that our network connection has a maximum of 1.5 sec latency + ///////////////////////////////////////////////////////////////////////// + { + name: "setHref_loading", + timeout: 1800, + setUp: function(t){ + pane2.setHref('getResponse.php?messId=1'); + }, + runTest: function(t){ + var d = new tests.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane2).length); + }) + , 1500); + return d; + } + }, + { + name: "setHref_then_cancel", + timeout: 2800, + setUp: function(t){ + pane2.setContent();// clear previous + }, + runTest: function(t){ + var msg = "This should NEVER be seen!"; + pane2.setHref('getResponse.php?delay=1000&message='+encodeURI(msg)); + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertFalse(pane2.domNode.innerHTML == msg); + } + ), 2500); + + pane2.cancel(); + + return d; + } + }, + { + // test that setHref cancels a inflight setHref + name: "setHref_cancels_previous_setHref", + timeout: 2800, + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + var msgCanceled = "This should be canceled"; + pane2.setHref("getResponse.php?delay=1000&message="+encodeURI(msgCanceled)); + + var msg = "This message should win over the previous"; + setTimeout(function(){ + pane2.setHref("getResponse.php?message="+encodeURI(msg)); + }, 900); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertEqual(msg, pane2.domNode.innerHTML); + } + ), 2500); + return d; + } + }, + { + name: "setContent_cancels_setHref", + timeout: 2800, + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + var msgCanceled = "This message be canceled"; + pane2.setHref("getResponse.php?delay=1000&message="+encodeURI(msgCanceled)); + + var msg = "This message should win over the inflight one"; + setTimeout(function(){ + pane2.setContent(msg); + }, 900); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertEqual(msg, pane2.domNode.innerHTML); + } + ), 2500); + return d; + } + }, + { + name: "refresh", + timeout: 1900, + setUp: function(t){ + pane2.setHref("getResponse.php?message="+encodeURI('initial load')); + }, + runTest: function(t){ + var msg = 'refreshed load' + setTimeout(function(){ + pane2.href = "getResponse.php?message="+encodeURI(msg); + pane2.refresh(); + }, 100); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertEqual(msg, pane2.domNode.innerHTML); + } + ), 1600); + return d; + + } + }, + { + name: "isLoaded", + timeout: 1800, + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + t.assertTrue(pane2.isLoaded); + + pane2.setHref("getResponse.php?delay=300&message=test"); + + t.assertFalse(pane2.isLoaded); + + var ilObj = {}; // a object to get a reference instead of copy + + // probe after 200ms + setTimeout(function(){ + ilObj.probed = pane2.isLoaded; + }, 200); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertTrue(pane2.isLoaded); + t.assertFalse(ilObj.probed); + } + ), 1500); + return d; + } + }, + { + // test that we does'nt load a response if we are hidden + name: "wait_with_load_when_domNode_hidden", + timeout: 1800, + setUp: function(t){ + pane2.domNode.style.display = 'none'; + pane2.setContent(); + }, + runTest: function(t){ + pane2._msg = "This text should not be loaded until after widget is shown"; + pane2.setHref("getResponse.php?message="+encodeURI(pane2._msg)); + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertFalse(pane2.domNode.innerHTML == pane2._msg); + } + ), 1500); + return d; + }, + tearDown: function(t){ + pane2.domNode.style.display = ""; + } + }, + { + name: "onDownloadError", + timeout: 1800, + setUp: function(t){ + pane2.setContent(); + }, + runTest: function(t){ + var res = {}; + var msg = "Error downloading modified message"; + var orig = pane2.onDownloadError; + + + pane2.onDownloadError = function(){ + return msg; + } + + this.onError = function(e){ + res.onError = true; + res.onError_Arg = !!e; + return "This message should be ignored as it gets invoked by dojo.connect"; + } + + var evtHandle = dojo.connect(pane2, 'onDownloadError', this, 'onError'); + + // test onDownloadError + pane2.setHref('nonexistant'); + + // do the test + var d = new t.Deferred(); + setTimeout(function(){ + try{ + if(!res.onError){ + d.errback(new doh._AssertFailure("onDownloadError was never invoked")); + } + if(!res.onError_Arg){ + d.errback(new doh._AssertFailure("onDownloadError did'nt get any argument on invokation")); + } + if(pane2.domNode.innerHTML != msg){ + d.errback(new doh._AssertFailure("custom errortext not set")); + } + d.callback(true); + }catch(e){ + d.errback(e); + }finally{ + // reset to default + dojo.disconnect(evtHandle); + pane2.onDownloadError = orig; + } + }, 1500); + + return d; + } + }, + { + name: "onLoad|Unload_onDownloadStart|End", + timeout: 2400, + setUp:function(t){ + pane2.setContent(); + }, + runTest:function(t){ + var obj = { + start:function(){ + this.start_called = 1; + // check that custom message gets set + setTimeout(function(){ + obj.start_msg = (pane2.domNode.innerHTML == msg); + }, 20); + }, + end: function(){ this.end_called = 1; }, + load: function(){ this.load_called = 1; }, + unload: function(){ this.unload_called = 1; } + }; + + //set custom message + var origStart = pane2.onDownloadStart; + var msg = "custom downloadstart message"; + pane2.onDownloadStart = function(){ return msg; }; + + var startHandler = dojo.connect(pane2, 'onDownloadStart', obj, 'start'); + var endHandler = dojo.connect(pane2, 'onDownloadEnd', obj, 'end'); + var loadHandler = dojo.connect(pane2, 'onLoad', obj, 'load'); + var unloadHandler = dojo.connect(pane2, 'onUnload', obj, 'unload'); + + pane2.setHref('getResponse.php?delay=400'); + + var d = new t.Deferred(); + setTimeout(function(){ + try{ + if(!obj.start_called){ + d.errback(new doh._AssertFailure('onDownloadStart not called')); + } + if(!obj.start_msg){ + d.errback(new doh._AssertFailure('custom download message not set')); + } + if(!obj.end_called){ + d.errback(new doh._AssertFailure('onDownloadEnd not called')); + } + if(!obj.unload_called){ + d.errback(new doh._AssertFailure('onUnload not called')); + } + if(!obj.load_called){ + d.errback(new doh._AssertFailure('onLoad not called')); + } + d.callback(true); + }catch(e){ + d.errback(e); + }finally{ + dojo.disconnect(endHandler); + dojo.disconnect(startHandler); + dojo.disconnect(unloadHandler); + dojo.disconnect(loadHandler); + + pane2.onDownloadStart = origStart; + } + }, 1900); + + return d; + } + } + + ] + ); + + var pane3, st, tmp; + + doh.registerGroup("child_to_StackContainer", + [ + { + // TODO: this test should be moved to registerGroup setUp when #3504 is fixed + // We actually dont need to test anything here, just setUp + name: "setUp_StackContainer", + setUp:function(t){ + st = dojo.byId('stackcontainer'); + dojo.addClass(st, 'box'); + st = new dijit.layout.StackContainer({}, st); + + st.addChild(new dijit.TestWidget()); + pane3 = new dijit.layout.ContentPane({ + href:'getResponse.php?delay=300&message=Loaded!', + preventCache: true + }, dojo.doc.createElement('div')); + st.addChild(pane3); + + pane3.startup(); // starts the ContentPane + }, + runTest:function(t){ + t.assertTrue(st); + t.assertEqual(2, st.getChildren().length); + } + }, + { + name: "preload_false_by_default", + runTest: function(t){ + t.assertFalse(pane3.isLoaded); + t.assertEqual('', pane3.domNode.innerHTML); + } + }, + { + name: "startLoad when selected", + timeout: 2100, + runTest: function(t){ + st.selectChild(pane3); + + var d = new t.Deferred(); + setTimeout(d.getTestCallback( + function(){ + t.assertTrue(pane3.isLoaded); + t.assertEqual('Loaded!', pane3.domNode.innerHTML); + } + ), 1800); + + return d; + } + }, + { + name: "refreshOnShow", + timeout: 2100, + setUp: function(t){ + tmp = { + onUnload: function(){ this._unload_fired = 1; }, + onLoad: function(){ this._load_fired = 1; } + }; + tmp.unload = dojo.connect(pane3, 'onUnload', tmp, 'onUnload'); + tmp.load = dojo.connect(pane3, 'onLoad', tmp, 'onLoad'); + + pane3.refreshOnShow = true; + }, + runTest: function(t){ + var d = new t.Deferred(); + st.back(); + st.forward(); + + setTimeout(d.getTestCallback(function(){ + t.assertTrue(tmp._unload_fired); + t.assertTrue(tmp._load_fired); + t.assertEqual('Loaded!', pane3.domNode.innerHTML); + }), 1800); + + return d; + }, + tearDown: function(){ + dojo.disconnect(tmp.unload); + dojo.disconnect(tmp.load); + pane3.refreshOnShow = pane3.constructor.prototype.refreshOnShow; + } + }, + { + name: "downloadTriggeredOnStartup", + timeout: 1800, + runTest: function(t){ + var href = 'getResponse.php?message=Loaded!' + var pane4 = new dijit.layout.ContentPane({ + href:href, + preventCache: true + }, dojo.doc.createElement('div')); + + dojo.place(pane4.domNode, pane3.domNode, 'after'); + + pane4.startup(); // parser should call startup when djConfig.parseOnLoad=true + + var d = new t.Deferred(); + setTimeout(d.getTestCallback(function(){ + t.assertEqual('Loaded!', pane4.domNode.innerHTML); + pane4.destroy(); + }), 1500); + return d; + } + } + ] + ); + + doh.run(); + }); + </script> +</head> +<body class="tundra"> + <h2>dijit.layout.ContentPane test</h2> + <h3>Test designed to run on localhost (minimize impact from network latency)</h3> + + <h4>This should NOT be parsed automatically</h4> + <div dojoType="dijit.layout.ContentPane" class="box" hasShadow="true" id="pane1"> + <div dojoType='dijit.TestWidget'>If this has a different background and a red border, the page parsed when it shouldn't</div> + </div> + <br/><h3>Testing ContentPane</h3> + <div id='pane2' class='box'> + Even tough the entire page isn't scanned for widgets, + any sub widgets of a ContentPane will be created when a ContentPane is created<br/> + <span id="zero" dojoType='dijit.TestWidget'>This should have a backgroundcolor and a border</span> + <div id="one" dojoType="dijit._Widget"></div> + <div id="two" dojoType="dijit._Widget"></div> + <div id="three" dojoType="dijit._Widget"></div> + </div> + <br/><br/> + <div id='stackcontainer'></div> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/ContentPane.js b/includes/js/dijit/tests/layout/ContentPane.js new file mode 100644 index 0000000..c0b53bc --- /dev/null +++ b/includes/js/dijit/tests/layout/ContentPane.js @@ -0,0 +1,9 @@ +if(!dojo._hasResource["dijit.tests.layout.ContentPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.tests.layout.ContentPane"] = true; +dojo.provide("dijit.tests.layout.ContentPane"); + +if(dojo.isBrowser){ + doh.registerUrl("dijit.tests.layout.ContentPane", dojo.moduleUrl("dijit", "tests/layout/ContentPane.html"), 30000); +} + +} diff --git a/includes/js/dijit/tests/layout/combotab.html b/includes/js/dijit/tests/layout/combotab.html new file mode 100644 index 0000000..c881761 --- /dev/null +++ b/includes/js/dijit/tests/layout/combotab.html @@ -0,0 +1,11 @@ +<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" + url="../_data/states.json"></div> +State: +<span id="editable" dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox" + editorParams="{value: 'California', store: stateStore, searchAttr: 'name', promptMessage: 'Please enter a state'}"> + <script type="dojo/connect" event="onChange"> + // connect to editable onChange event, Note that we dont need to disconnect + console.log('User selected:'+this.getValue()); + </script> +</span> + diff --git a/includes/js/dijit/tests/layout/doc0.html b/includes/js/dijit/tests/layout/doc0.html new file mode 100644 index 0000000..4c3f252 --- /dev/null +++ b/includes/js/dijit/tests/layout/doc0.html @@ -0,0 +1,12 @@ +<h1>Document 0</h1> +This document has <a href="http://www.dojotoolkit.org/">a link</a>.<br /> +(to check we're copying children around properly).<br /> +Also it's got a widget, a combo box:<br> +<select dojoType="dijit.form.ComboBox"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> +</select> +And a button too: +<button dojoType="dijit.form.Button">hello!</button> +Here's some text that comes AFTER the button. diff --git a/includes/js/dijit/tests/layout/doc1.html b/includes/js/dijit/tests/layout/doc1.html new file mode 100644 index 0000000..2bff8c5 --- /dev/null +++ b/includes/js/dijit/tests/layout/doc1.html @@ -0,0 +1,13 @@ +<!-- Used from test_RemotePane.html --> + +<h1> Document 1</h1> + +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus risus. Praesent eu lacus et enim laoreet sollicitudin. Quisque mollis mi a lectus. Cras ante. Aliquam tempus justo laoreet justo. Vestibulum egestas feugiat nisi. Nulla ultrices consequat felis. Curabitur dignissim augue vel enim. Fusce tempus tempor mauris. Praesent suscipit pede in nunc. Duis mi neque, malesuada non, volutpat et, nonummy et, ante. Aliquam neque. Nulla rhoncus, turpis eget mattis molestie, magna nulla dictum ligula, quis tempor odio justo vel pede. Donec sit amet tellus. Phasellus sapien. Nulla id massa at nunc condimentum fringilla. Fusce suscipit ipsum et lorem consequat pulvinar. Quisque lacinia sollicitudin tellus.</p> + +<p>Nulla massa lectus, porttitor vitae, dignissim vel, iaculis eget, mi. Vestibulum sed lorem. Nullam convallis elit id leo. Aliquam est purus, rutrum at, sodales non, nonummy a, justo. Proin at diam vel nibh dictum rhoncus. Duis nisl. Etiam orci. Integer hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac erat. Sed velit orci, sodales quis, commodo ut, elementum sed, nibh. Cras mattis vulputate nisl. Mauris eu nulla sed orci dignissim laoreet. Morbi commodo, est vitae pharetra ullamcorper, ante nisl ultrices velit, sit amet vulputate turpis elit id lacus. Vestibulum diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + +<p>Praesent rutrum nunc quis felis. Morbi tempor. Quisque porta magna imperdiet magna. Ut gravida, ipsum eu euismod consectetuer, nisl lectus posuere diam, vel dignissim elit nisi sit amet lorem. Curabitur non nunc. Morbi metus. Nulla facilisi. Sed et ante. Etiam ac lectus. Duis tristique molestie sem. Pellentesque nec quam. Nullam pellentesque ullamcorper sem.</p> + +<p>Duis ut massa eget arcu porttitor pharetra. Curabitur malesuada nisi id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus massa. Donec quis justo ut tortor faucibus suscipit. Vivamus commodo neque eget nulla. Donec imperdiet lacus condimentum justo. In sollicitudin magna vitae libero. Curabitur scelerisque libero et eros imperdiet cursus. Maecenas adipiscing. Integer imperdiet, neque ut fringilla semper, leo nisi tincidunt enim, id accumsan leo nisi a libero. Morbi rutrum hendrerit eros. Vestibulum eget augue vel urna congue faucibus.</p> + +<p>Morbi ante sapien, consequat non, consectetuer vitae, pharetra non, dui. Cras tempus posuere quam. Vestibulum quis neque. Duis lobortis urna in elit. Aliquam non tellus. Etiam nisi eros, posuere vel, congue id, fringilla in, risus. Duis semper rutrum risus. Nullam felis massa, lobortis sit amet, posuere tempor, mattis id, tellus. Nulla id arcu interdum risus commodo tincidunt. Vivamus pretium pulvinar pede. Vivamus eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum, enim eu venenatis tempor, nunc elit convallis tortor, sit amet vulputate turpis arcu eu pede. Praesent molestie, lacus sed vehicula convallis, enim pede fringilla nunc, at porttitor justo ante a diam. Nunc magna eros, interdum vel, varius eget, volutpat eu, orci. Nunc nec mauris. Nulla facilisi. Vivamus dictum elementum risus. Nam placerat arcu.</p> diff --git a/includes/js/dijit/tests/layout/doc2.html b/includes/js/dijit/tests/layout/doc2.html new file mode 100644 index 0000000..1173b29 --- /dev/null +++ b/includes/js/dijit/tests/layout/doc2.html @@ -0,0 +1,13 @@ +<!-- Used from test_RemotePane.html --> + +<h1> Document 2</h1> + +<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus risus. Praesent eu lacus et enim laoreet sollicitudin. Quisque mollis mi a lectus. Cras ante. Aliquam tempus justo laoreet justo. Vestibulum egestas feugiat nisi. Nulla ultrices consequat felis. Curabitur dignissim augue vel enim. Fusce tempus tempor mauris. Praesent suscipit pede in nunc. Duis mi neque, malesuada non, volutpat et, nonummy et, ante. Aliquam neque. Nulla rhoncus, turpis eget mattis molestie, magna nulla dictum ligula, quis tempor odio justo vel pede. Donec sit amet tellus. Phasellus sapien. Nulla id massa at nunc condimentum fringilla. Fusce suscipit ipsum et lorem consequat pulvinar. Quisque lacinia sollicitudin tellus.</p> + +<p>Nulla massa lectus, porttitor vitae, dignissim vel, iaculis eget, mi. Vestibulum sed lorem. Nullam convallis elit id leo. Aliquam est purus, rutrum at, sodales non, nonummy a, justo. Proin at diam vel nibh dictum rhoncus. Duis nisl. Etiam orci. Integer hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac erat. Sed velit orci, sodales quis, commodo ut, elementum sed, nibh. Cras mattis vulputate nisl. Mauris eu nulla sed orci dignissim laoreet. Morbi commodo, est vitae pharetra ullamcorper, ante nisl ultrices velit, sit amet vulputate turpis elit id lacus. Vestibulum diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + +<p>Praesent rutrum nunc quis felis. Morbi tempor. Quisque porta magna imperdiet magna. Ut gravida, ipsum eu euismod consectetuer, nisl lectus posuere diam, vel dignissim elit nisi sit amet lorem. Curabitur non nunc. Morbi metus. Nulla facilisi. Sed et ante. Etiam ac lectus. Duis tristique molestie sem. Pellentesque nec quam. Nullam pellentesque ullamcorper sem.</p> + +<p>Duis ut massa eget arcu porttitor pharetra. Curabitur malesuada nisi id eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus massa. Donec quis justo ut tortor faucibus suscipit. Vivamus commodo neque eget nulla. Donec imperdiet lacus condimentum justo. In sollicitudin magna vitae libero. Curabitur scelerisque libero et eros imperdiet cursus. Maecenas adipiscing. Integer imperdiet, neque ut fringilla semper, leo nisi tincidunt enim, id accumsan leo nisi a libero. Morbi rutrum hendrerit eros. Vestibulum eget augue vel urna congue faucibus.</p> + +<p>Morbi ante sapien, consequat non, consectetuer vitae, pharetra non, dui. Cras tempus posuere quam. Vestibulum quis neque. Duis lobortis urna in elit. Aliquam non tellus. Etiam nisi eros, posuere vel, congue id, fringilla in, risus. Duis semper rutrum risus. Nullam felis massa, lobortis sit amet, posuere tempor, mattis id, tellus. Nulla id arcu interdum risus commodo tincidunt. Vivamus pretium pulvinar pede. Vivamus eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum, enim eu venenatis tempor, nunc elit convallis tortor, sit amet vulputate turpis arcu eu pede. Praesent molestie, lacus sed vehicula convallis, enim pede fringilla nunc, at porttitor justo ante a diam. Nunc magna eros, interdum vel, varius eget, volutpat eu, orci. Nunc nec mauris. Nulla facilisi. Vivamus dictum elementum risus. Nam placerat arcu.</p> diff --git a/includes/js/dijit/tests/layout/getResponse.php b/includes/js/dijit/tests/layout/getResponse.php new file mode 100644 index 0000000..d695a4b --- /dev/null +++ b/includes/js/dijit/tests/layout/getResponse.php @@ -0,0 +1,57 @@ +<?php + // this just bounces a message as a response, and optionally emulates network latency. + + // default delay is 0 sec, to change: + // getResponse.php?delay=[Int milliseconds] + + // to change the message returned + // getResponse.php?mess=whatever%20string%20you%20want. + + // to select a predefined message + // getResponse.php?messId=0 + + error_reporting(E_ALL ^ E_NOTICE); + + $delay = 1; // 1 micro second to avoid zero division in messId 2 + if(isset($_GET['delay']) && is_numeric($_GET['delay'])){ + $delay = (intval($_GET['delay']) * 1000); + } + + if(isset($_GET['messId']) && is_numeric($_GET['messId'])){ + switch($_GET['messId']){ + case 0: + echo "<h3>WARNING This should NEVER be seen, delayed by 2 sec!</h3>"; + $delay = 2; + break; + case 1: + echo "<div dojotype='dijit.TestWidget'>Testing setHref</div>"; + break; + case 2: + echo "<div dojotype='dijit.TestWidget'>Delayed setHref test</div> + <div dojotype='dijit.TestWidget'>Delayed by " . ($delay/1000000) . " sec.</div>"; + break; + case 3: + echo "IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only"; + break; + case 4: + echo "There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever."; + break; + case 5: + echo "It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:"; + break; + default: + echo "unknown messId:{$_GET['messId']}"; + } + } + + if(isset($_GET['bounceGetStr']) && $_GET['bounceGetStr']){ + echo "<div id='bouncedGetStr'>{$_SERVER["QUERY_STRING"]}</div>"; + } + + if(isset($_GET['message']) && $_GET['message']){ + echo $_GET['message']; + } + + usleep($delay); + +?> diff --git a/includes/js/dijit/tests/layout/tab1.html b/includes/js/dijit/tests/layout/tab1.html new file mode 100644 index 0000000..a37b927 --- /dev/null +++ b/includes/js/dijit/tests/layout/tab1.html @@ -0,0 +1,6 @@ + +<h1>Tab 1</h1> + +<p>I am tab 1. I was loaded externally. <a href="http://www.weba11y.com">WebA11y</a>(something to get focus)</p> + +<div label="foo!">blah</div> diff --git a/includes/js/dijit/tests/layout/tab2.html b/includes/js/dijit/tests/layout/tab2.html new file mode 100644 index 0000000..ed1ad76 --- /dev/null +++ b/includes/js/dijit/tests/layout/tab2.html @@ -0,0 +1,3 @@ +<h1>Tab 2</h1> + +<p>I am tab 2. I was loaded externally as well.</p> diff --git a/includes/js/dijit/tests/layout/tab3.html b/includes/js/dijit/tests/layout/tab3.html new file mode 100644 index 0000000..68dca6c --- /dev/null +++ b/includes/js/dijit/tests/layout/tab3.html @@ -0,0 +1,39 @@ +<div dojoType="dijit.layout.TabContainer"> + <div dojoType="dijit.layout.ContentPane" title="Subtab #1"> + <p>This is a nested tab container BUT loaded via an href.</p> + </div> + <div dojoType="dijit.layout.ContentPane" title="Subtab #2"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam + ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque + nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus + lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus + est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis + dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, + nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent + pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos + hymenaeos. + </p> + </div> +</div>
\ No newline at end of file diff --git a/includes/js/dijit/tests/layout/tab4.html b/includes/js/dijit/tests/layout/tab4.html new file mode 100644 index 0000000..de9cd3c --- /dev/null +++ b/includes/js/dijit/tests/layout/tab4.html @@ -0,0 +1,40 @@ +<div dojoType="dijit.layout.SplitContainer" orientation="vertical"> + <div dojoType="dijit.layout.ContentPane" title="split #1"> + <p>Top of split container loaded via an href.</p> + </div> + <div dojoType="dijit.layout.ContentPane" title="split #2"> + <p>Bottom of split container loaded via an href.</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam + ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque + nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus + lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus + est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis + dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor, + nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent + pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos + hymenaeos. + </p> + </div> +</div>
\ No newline at end of file diff --git a/includes/js/dijit/tests/layout/test_AccordionContainer.html b/includes/js/dijit/tests/layout/test_AccordionContainer.html new file mode 100644 index 0000000..d8351e7 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_AccordionContainer.html @@ -0,0 +1,195 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Accordion Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <!-- uncomment for profiling + <script type="text/javascript" + src="../../../dojo/_base/html.js"></script> + <script type="text/javascript" + src="../../base/Layout.js"></script> + --> + + <script type="text/javascript"> + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var accordion, pane4; + + function init(){ + accordion = new dijit.layout.AccordionContainer({}, dojo.byId("accordionShell")); + dojo.forEach([ "pane 1", "pane 2", "pane 3" ], function(title, i){ + // add a node that will be promoted to the content widget + var refNode = document.createElement("span"); + refNode.innerHTML = "this is " + title; + document.body.appendChild(refNode); + var content = new dijit.layout.AccordionPane({title: title, selected: i==1}, refNode); + console.debug("adding content pane " + content.id); + accordion.addChild(content); + }); + accordion.startup(); + var refNode = document.createElement("span"); + var title = "pane 4"; + refNode.innerHTML = "this is " + title; + accordion.addChild(pane4=new dijit.layout.AccordionPane({title: title}, refNode)); + } + + dojo.addOnLoad(init); + + function destroyChildren(){ + accordion.destroyDescendants(); + } + function selectPane4(){ + accordion.selectChild(pane4); + } + </script> +</head> +<body style="padding: 50px;"> + + <h1 class="testTitle">AccordionContainer Tests</h1> + + <h2>Accordion from markup:</h2> + <p>HTML before</p> + <p>HTML before</p> + <p>HTML before</p> + + <div dojoType="dijit.layout.AccordionContainer" duration="200" + style="float: left; margin-right: 30px; width: 400px; height: 300px; overflow: hidden"> + <div dojoType="dijit.layout.AccordionPane" title="a"> + Hello World + </div> + <div dojoType="dijit.layout.AccordionPane" title="b"> + <p> + Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin + suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. + Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, + bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam + aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia + ac, vehicula laoreet, elit. Sed interdum augue sit amet quam + dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec + quam. + </p> + <p> + Sed arcu magna, molestie at, <input value="fringilla in, sodales"/> eu, elit. + Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum + vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat + augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non + metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus + ut elit convallis eleifend. Fusce tincidunt, justo quis tempus + euismod, magna nulla viverra libero, sit amet lacinia odio diam id + risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, + porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, + faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, + consequat quis, varius interdum, nulla. Donec neque tortor, + sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean + ut eros sit amet ante pharetra interdum. + </p> + </div> + <div dojoType="dijit.layout.AccordionPane" title="c"> + <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> + </div> + </div> + + <p style="clear: both;">HTML after</p> + <p>HTML after</p> + <p>HTML after</p> + <p></p> + <p>Accordion with widgets</p> + <div dojoType="dijit.layout.AccordionContainer" duration="200" + style="float: left; margin-right: 30px; width: 400px; height: 300px; overflow: hidden"> + <div dojoType="dijit.layout.AccordionPane" selected="true" + title="Pane 1" > + <select> + <option>red</option> + <option>blue</option> + <option>green</option> + </select> + <p> + Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin + suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. + Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, + bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam + aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia + ac, vehicula laoreet, elit. Sed interdum augue sit amet quam + dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec + quam. + </p> + <p> + Sed arcu magna, molestie at, fringilla in, sodales eu, elit. + Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum + vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat + augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non + metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus + ut elit convallis eleifend. Fusce tincidunt, justo quis tempus + euismod, magna nulla viverra libero, sit amet lacinia odio diam id + risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, + porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, + faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, + consequat quis, varius interdum, nulla. Donec neque tortor, + sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean + ut eros sit amet ante pharetra interdum. + </p> + </div> + + <!-- test lazy loading --> + <div dojoType="dijit.layout.AccordionPane" id="lazyLoadPane" title="Pane 2 (lazy load)" href="tab1.html"></div> + + <div dojoType="dijit.layout.AccordionPane" title="Pane 3 (split pane)"> + <div dojoType="dijit.layout.BorderContainer" style="height:100%; width:100%"> + <div dojoType="dijit.layout.ContentPane" region="left" style="width:50%" splitter="true"> + 1Sed arcu magna, molestie at, fringilla in, sodales eu, elit. + Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum + vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat + augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non + metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus + ut elit convallis eleifend. Fusce tincidunt, justo quis tempus + euismod, magna nulla viverra libero, sit amet lacinia odio diam id + risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, + porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, + faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, + consequat quis, varius interdum, nulla. Donec neque tortor, + sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean + ut eros sit amet ante pharetra interdum. + </div> + <div dojoType="dijit.layout.ContentPane" region="center"> + 2Sed arcu magna, molestie at, fringilla in, sodales eu, elit. + Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum + vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat + augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non + metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus + ut elit convallis eleifend. Fusce tincidunt, justo quis tempus + euismod, magna nulla viverra libero, sit amet lacinia odio diam id + risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, + porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, + faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, + consequat quis, varius interdum, nulla. Donec neque tortor, + sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean + ut eros sit amet ante pharetra interdum. + </div> + </div> + </div> + </div> + + <h2>Programatically created:</h2> + <button onclick="destroyChildren();">destroy children</button> + <button onclick="selectPane4();">select pane 4</button> + <br> + + <div id="accordionShell" style="width: 400px; height: 400px;"></div> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer.html b/includes/js/dijit/tests/layout/test_BorderContainer.html new file mode 100644 index 0000000..29fae01 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer.html @@ -0,0 +1,163 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.BorderContainer Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + .dijitContentPane:focus { color: cyan; font-weight: bold } + body { margin-left: 20px } + + #mondrian .dijitSplitter { border: 0; background: black !important } + #mondrian .dijitSplitterH { height: 10px } + #mondrian .dijitSplitterV { width: 10px } + #mondrian .dijitSplitterThumb { display: none } + #mondrian .dijitSplitterActive { background-color: blue } + #mondrian SPAN { display: none } + #mondrian:hover SPAN { display: inline } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + + function togglePanel(button, id){ + var leftPanel = dijit.byId(id); + if(leftPanel){ + dijit.byId('border1').removeChild(leftPanel); + leftPanel.destroy(); + button.innerHTML='Add left panel'; + }else{ + var container = dijit.byId('border1'); + var div = dojo.doc.createElement('div'); + div.innerHTML='left'; + container.domNode.appendChild(div); + leftPanel = new dijit.layout.ContentPane({id: id, region:'left', style:'background-color: #acb386; width:100px', splitter:true, minSize:50, maxSize:150}, div); + dijit.byId('border1').addChild(leftPanel); + button.innerHTML='Remove left panel'; + } + } + </script> +</head> +<body> + + <h2 class="testTitle">dijit.layout.BorderContainer tests</h2> + <p>Headline layout (default), left is constrained - min:50, max:150</p> + + <div id="border1" dojoType="dijit.layout.BorderContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; border: 15px black solid; height: 100px;" splitter="true"> + top bar + </div> + <div id="border1-left" dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; border: 10px green solid; width: 100px;" splitter="true" minSize="50" maxSize="150"> + left + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 30px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;"> + right + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true"> + bottom bar + </div> + </div> + + <button onClick="togglePanel(this, 'border1-left')">Remove left panel</button> + <br /> + + <p>Sidebar layout, BiDi sensitive, liveSplitters: false</p> + + <div dojoType="dijit.layout.BorderContainer" design="sidebar" liveSplitters="false" + style="border: 20px solid black; width: 90%; height: 300px; padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" region="leading" style="background-color: #acb386; width: 100px;"> + leading + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true"> + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" region="trailing" style="background-color: #acb386; width: 100px;" splitter="true"> + trailing + </div> + </div> + + <br /> + <p>Vertical panels only with splitters</p> + + <div dojoType="dijit.layout.BorderContainer" design="sidebar" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;" splitter="true"> + top bar + </div> + + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true"> + bottom bar + </div> + </div> + + <br /> + <p>More fun with layouts</p> + + <div id="mondrian" dojoType="dijit.layout.BorderContainer" design="sidebar" persist="true" style="height: 300px; width: 400px"> + <div dojoType="dijit.layout.ContentPane" region="top" style="height: 100px" splitter="true"> + <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 100px; width: 100%"> + <div dojoType="dijit.layout.ContentPane" region="leading" style="width: 125px" splitter="true"><span>top a</span></div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: yellow" splitter="true"><span>top b</span></div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="height: 100px" splitter="true"> + <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 100px; width: 100%"> + <div dojoType="dijit.layout.ContentPane" region="top" style="height: 40px" splitter="true"><span>bottom c</span></div> + <div dojoType="dijit.layout.ContentPane" region="center"><span>bottom d</span></div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="leading" style="width: 100px" splitter="true"> + <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 300px; width: 100%"> + <div dojoType="dijit.layout.ContentPane" region="center"><span>leading e</span></div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="height: 100px; background-color: red" splitter="true"><span>leading f</span></div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="trailing" style="width: 100px" splitter="true"><span>trailing g</span></div> + </div> + + <br /> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_complex.html b/includes/js/dijit/tests/layout/test_BorderContainer_complex.html new file mode 100644 index 0000000..784171c --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_complex.html @@ -0,0 +1,178 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.BorderContainer Test - complex layout</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.Editor"); + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + </script> +</head> +<body> + + <h2 class="testTitle">dijit.layout.BorderContainer tests</h2> + + <p>Complex layout:</p> + +<div dojoType="dijit.layout.BorderContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"> + <div dojoType="dijit.layout.AccordionContainer" duration="200" + region="left" style="background-color: #acb386; width: 400px;" splitter="true" + style="float: left; width: 400px; height: 300px; overflow: hidden"> + <div dojoType="dijit.layout.AccordionPane" title="a"> + left bar + </div> + <div dojoType="dijit.layout.AccordionPane" title="b"> + <p> + Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin + suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. + Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, + bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam + aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia + ac, vehicula laoreet, elit. Sed interdum augue sit amet quam + dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec + quam. + </p> + <p> + Sed arcu magna, molestie at, fringilla in, sodales eu, elit. + Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum + vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat + augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non + metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus + ut elit convallis eleifend. Fusce tincidunt, justo quis tempus + euismod, magna nulla viverra libero, sit amet lacinia odio diam id + risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, + porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, + faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, + consequat quis, varius interdum, nulla. Donec neque tortor, + sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean + ut eros sit amet ante pharetra interdum. + </p> + </div> + <div dojoType="dijit.layout.AccordionPane" title="c"> + <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> + </div> + </div> + + <div dojoType="dijit.layout.AccordionContainer" duration="200" + region="right" style="background-color: #acb386; width: 200px;" + style="float: left; width: 200px; height: 300px; overflow: hidden"> + <div dojoType="dijit.layout.AccordionPane" title="a"> + right bar + </div> + <div dojoType="dijit.layout.AccordionPane" title="b"> + <p> + Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin + suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. + Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, + bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam + aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia + ac, vehicula laoreet, elit. Sed interdum augue sit amet quam + dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec + quam. + </p> + <p> + Sed arcu magna, molestie at, fringilla in, sodales eu, elit. + Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum + vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat + augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non + metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus + ut elit convallis eleifend. Fusce tincidunt, justo quis tempus + euismod, magna nulla viverra libero, sit amet lacinia odio diam id + risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, + porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, + faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, + consequat quis, varius interdum, nulla. Donec neque tortor, + sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean + ut eros sit amet ante pharetra interdum. + </p> + </div> + <div dojoType="dijit.layout.AccordionPane" title="c"> + <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;" splitter="true"> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + + <div id="tab1" dojoType="dijit.layout.ContentPane" href="../../../dijit/tests/layout/tab1.html" title="Tab 1"></div> + + <div id="tab2" dojoType="dijit.layout.ContentPane" href="../../../dijit/tests/layout/tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div> + + <div dojoType="dijit.layout.ContentPane" title="Tab 3"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <p id="foo">tooltip on this paragraph</p> + <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div> + <button dojoType="dijit.form.Button">I'm a button </button> + <br> + <button dojoType="dijit.form.Button">So am I!</button> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + </div> + + <div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer"> + <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab1.html">SubTab 1</a> + <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab2.html" selected="true">SubTab 2</a> + </div> + + <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab3.html">Sub TabContainer from href</a> + + <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab4.html">SplitContainer from href</a> + + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;"> + <div style="border: 1px solid black;"> + <div dojoType="dijit.Editor" id="editor1"><p>bottom bar (edit me)</p></div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> +</div> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html b/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html new file mode 100644 index 0000000..46483d9 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html @@ -0,0 +1,253 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + + <title>BorderContainer Experiments | The Dojo Toolkit</title> + + <link rel="stylesheet" href="../../themes/tundra/tundra.css" /> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + #pane1 { background-color:red; + } + #pane2{ + background-color:green; + } + #pane3 { + background-color:blue; + } + #pane0 { + background-color:#ededed; + } + .wrapper { padding:25px; } + .bc { margin:10px; border:2px solid #ededed; } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad:true, isDebug:true"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Button"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.BorderContainer"); + dojo.declare("my.BorderContainer",dijit.layout.BorderContainer,{ + + opts: { + // single pane view + "a":{ + panes: [ + { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"100%" } }, + { id: "pane1", hidden:true }, + { id: "pane2", hidden:true }, + { id: "pane3", hidden:true } + ] + }, + // top / bottom view + "ah":{ + panes: [ + { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"50%" } }, + { id: "pane1", sizeable:true, region:"bottom", style: { width:"100%", height:"50%" } }, + { id: "pane2", hidden:true }, + { id: "pane3", hidden:true } + ] + }, + // left / right view + "av":{ + panes: [ + { id: "pane0", sizeable:true, region:"left", style: { width:"50%", height:"100%" } }, + { id: "pane1", sizeable:false, region:"center", style: { width:"50%", height:"100%" } }, + { id: "pane2", hidden:true }, + { id: "pane3", hidden:true } + ] + } + + }, + + _clearSplitters: function(){ + // cleanup all splitters on the page + dojo.query(".dijitSplitter",this.domNode).forEach(function(n){ + dijit.byNode(n).destroy(); + }); + dojo.query(".dijitSplitterCover").forEach(function(n){ + dojo._destroyElement(n); + }) + delete this._splitters; + this._splitters = {}; + }, + + setLayoutENUM: function(lay){ + // set the layout to a predefined setup + if(this._layoutSetting != lay){ + + this._layoutSetting = lay; + var struct = this.opts[lay] || false; + this._clearSplitters(); + + dojo.forEach(struct.panes,function(pane,i){ + // setup each pane + var d = dijit.byId(pane.id); + d.region = pane.region || "center"; + d.splitter = pane.sizeable; + if(pane.minSize){ d.minSize = pane.minSize; } + if(pane.maxSize){ d.maxSize = pane.maxSize; } + if(pane.hidden){ + // reset this widget to our hidden holder node + this.extractChild(d,dojo.byId("holder")); + d.splitter = null; + d.region = null; + d.maxSize = null; + d.minSize = null; + }else{ + if(pane.style){ + // object setter via style only in trunk: + dojo.style(d.domNode,pane.style); + } + this.addChild(d,i); + } + },this); + } + this.layout(); + }, + + extractChild: function(/*Widget*/ child, /* DomNode */node){ + // a non-destructive cleanup for the bordercontainer. + // cleanup a widget, and append it's domNode to some + // other node in the dom + var region = child.region; + var splitter = this._splitters[region]; + if(splitter){ + dijit.byNode(splitter).destroy(); + delete this._splitters[region]; + } + delete this["_"+region]; + node.appendChild(child.domNode); + if(this._started){ + this._layoutChildren(); + } + return child.domNode; + } + }); + + var open = false; + + dojo.addOnLoad(function(){ + // make buttons + dojo.forEach(["a","av","ah"],function(n){ + + var but = new dijit.form.Button({ + label: "Set "+n, + onClick: function(){ + console.log(n); + layout.setLayoutENUM(n); + } + }); + dojo.byId("buttons").appendChild(but.domNode); + but.startup(); + }) + + }); + </script> + + </head> + <body class="tundra"> + + <h1>This is a test</h1> + <p>This is only a test. An experiment in dynamically altering a BorderContainer's layout + (a seemingly unsupported feature just yet). It Demonstrates how to programatically alter/animate + the size of non-center regions though, and several simple layout configurations + </p> + + <div> + <h3>Layouts:</h3> + <div id="buttons"></div> + </div> + + <div jsId="layout" id="container" dojoType="my.BorderContainer" style="width:600px; height:300px; border:3px solid #333;"> + <div dojoType="dijit.layout.ContentPane" region="center" id="pane0"> + pane0 + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - l1 + </div> + </div> + + <div class="wrapper"> + <h3>two panes, vertical split:</h3> + + + <div class="bc" id="animBC" dojoType="dijit.layout.BorderContainer" style="height:200px"> + <div dojoType="dijit.layout.ContentPane" id="sizing1" style="background-color:red" region="left" splitter="true"> + Sinlge pane - left + </div> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - center + <button dojoType="dijit.form.Button"> + Size Me + <script type="dojo/method" event="onClick"> + var n = dijit.byId("sizing1").domNode; + dojo.animateProperty({ + node:n, + duration:1000, + properties: { width: { end: (open ? "100" : "400"), unit:"px" } }, + onEnd: function(){ + open = !open; + dijit.byId("animBC").layout(); + } + }).play(1); + </script> + </button> + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> + <div dojoType="dijit.layout.ContentPane" region="center" splitter="true"> + Sinlge pane - center (splitter) (this is unsupported, and does not work) + </div> + <div dojoType="dijit.layout.ContentPane" region="right"> + Sinlge pane - right (no splitter) + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - center (no splitter) + </div> + <div dojoType="dijit.layout.ContentPane" region="right" splitter="true"> + Sinlge pane - right (splitter) + </div> + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;"> + <div dojoType="dijit.layout.ContentPane" region="top" splitter="true"> + Sinlge pane - top (splitter) + + </div> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - center + </div> + </div> + + <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;"> + <div dojoType="dijit.layout.ContentPane" region="center"> + Sinlge pane - center + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true"> + Single Pane Bottom (splitter) + </div> + <div dojoType="dijit.layout.ContentPane" region="top" splitter="true"> + Single Pane Top (splitter) + </div> + </div> + + <div id="holder" style="visibility:hidden"> + <div dojoType="dijit.layout.ContentPane" id="pane1">pane 1</div> + <div dojoType="dijit.layout.ContentPane" id="pane2">pane 2</div> + <div dojoType="dijit.layout.ContentPane" id="pane3">pane 3</div> + </div> + + </body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_full.html b/includes/js/dijit/tests/layout/test_BorderContainer_full.html new file mode 100644 index 0000000..65386c2 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_full.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.BorderContainer Test - Full Screen</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + html, body, #main{ + width: 100%; /* make the body expand to fill the visible window */ + height: 100%; + overflow: hidden; /* erase window level scrollbars */ + padding: 0 0 0 0; + margin: 0 0 0 0; + font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + </script> +</head> +<body> + <div dojoType="dijit.layout.BorderContainer" design="sidebar" id="main"> + <div dojoType="dijit.layout.ContentPane" region="leading" style="background-color: #acb386; width: 100px;"> + leading + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true"> + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" region="trailing" style="background-color: #acb386; width: 100px;" splitter="true"> + trailing + </div> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_nested.html b/includes/js/dijit/tests/layout/test_BorderContainer_nested.html new file mode 100644 index 0000000..72bdf53 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_nested.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.BorderContainer Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + </script> +</head> +<body> + + <h2 class="testTitle">dijit.layout.BorderContainer tests</h2> + <p>Basic layout</p> + + <div dojoType="dijit.layout.BorderContainer" + style="border: 2px solid black; width: 90%; height: 500px; padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; width: 100px;"> + left + </div> + <div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;"> + right + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;"> + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 0px;"> + + <div dojoType="dijit.layout.BorderContainer" design="sidebar" + style="border: 2px solid black; height: 300px;"> + <div dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; width: 100px;"> + left + </div> + <div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;"> + right + </div> + <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;"> + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_ContentPane.html b/includes/js/dijit/tests/layout/test_ContentPane.html new file mode 100644 index 0000000..4557bef --- /dev/null +++ b/includes/js/dijit/tests/layout/test_ContentPane.html @@ -0,0 +1,94 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>ContentPane Test</title> + + <style> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + margin: 1em; + padding: 1em; + } + + .box { + position: relative; + background-color: white; + border: 2px solid black; + padding: 8px; + margin: 4px; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.InlineEditBox"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body> + <h1 class="testTitle">Dijit layout.ContentPane tests</h1> + <p>pre-container paragraph</p> + + <div dojoType="dijit.layout.ContentPane" class="box"> + some text (top-level container) + + <div dojoType="dijit.layout.ContentPane" class="box"> + + text in the inner container (1) + + <div dojoType="dijit.layout.ContentPane" class="box" href="tab2.html" hasShadow="true"> + hi + </div> + + text in the inner container (2) + + <div dojoType="dijit.layout.ContentPane" class="box"> + inner-inner 2 + </div> + + text in the inner container (3) + + <div dojoType="dijit.layout.ContentPane" class="box"> + inner-inner 3 + </div> + + text in the inner container (4) + + </div> + + some more text (top-level container) + </div> + + <p>mid-container paragraph</p> + + <div dojoType="dijit.layout.ContentPane" class="box" hasShadow="true"> + 2nd top-level container + </div> + + <p>post-container paragraph</p> + + <div id="ContentPane3" class="box" hasShadow="true"> + some content pane blah blah blah + </div> + <div dojoType="dijit.layout.ContentPane" class="box" href="combotab.html" hasShadow="true" id="test"> + <p style='background-color:yellow;border:1px solid red;text-align:center;'>This text should automatically be replaced by downloaded content from combotab.html</p> + </div> + <input type="button" value="Change pane in 3 seconds" onClick='setTimeout(function(){dijit.byId("test").setHref("tab2.html");}, 3000);'> + <script type="text/javascript"> + dojo.addOnLoad(function(){ + var tmp = new dijit.layout.ContentPane({}, dojo.byId("ContentPane3")); + tmp.startup(); + console.debug('created ' + tmp); + }); + </script> + </body> +</html> diff --git a/includes/js/dijit/tests/layout/test_LayoutCode.html b/includes/js/dijit/tests/layout/test_LayoutCode.html new file mode 100644 index 0000000..9cec35e --- /dev/null +++ b/includes/js/dijit/tests/layout/test_LayoutCode.html @@ -0,0 +1,383 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Programmatic Layout Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "css/dijitTests.css"; + + html, body{ + width: 100%; /* make the body expand to fill the visible window */ + height: 100%; + overflow: hidden; /* erase window level scrollbars */ + padding: 0 0 0 0; + margin: 0 0 0 0; + } + .dijitSplitPane{ + margin: 5px; + } + #rightPane { + margin: 0; + } + #creator, #current { + border: 3px solid blue; + padding: 10px; + margin: 10px; + } + #wrapper { + border: 3px solid green; + padding: 10px; + margin: 10px; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.layout.TabContainer"); + + // Used in doc0.html + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.form.Button"); + + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + // Simple layout container layout + var simpleLayout = { + widgetType: "LayoutContainer", + params: { id: "rootWidget" }, + style: "border: 3px solid grey; width: 95%; height: 400px;", + children: [ + { + widgetType: "ContentPane", + params: {id: "left", layoutAlign: "left"}, + style: "width: 100px; background: #ffeeff;", + innerHTML: "this is the left" + }, + { + widgetType: "ContentPane", + params: {id: "right", layoutAlign: "right"}, + style: "width: 100px; background: #ffeeff;", + innerHTML: "this is the right" + }, + { + widgetType: "ContentPane", + params: {id: "top", layoutAlign: "top"}, + style: "height: 100px; background: #eeeeee;", + innerHTML: "this is the top" + }, + { + widgetType: "ContentPane", + params: {id: "bottom", layoutAlign: "bottom"}, + style: "height: 100px; background: #eeeeee;", + innerHTML: "this is the bottom" + }, + { + widgetType: "ContentPane", + params: {id: "client", layoutAlign: "client"}, + style: "height: 100px; background: #ffffee;", + innerHTML: "this is the client" + } + ] + }; + + // split container layout + var splitLayout = { + widgetType: "SplitContainer", + params: {id: "rootWidget", orientation: "horizontal"}, + style: "border: 3px solid grey; width: 95%; height: 400px;", + children: [ + { + widgetType: "ContentPane", + params: {id: "left"}, + style: "background: #ffeeff;", + innerHTML: "left pane of split container" + }, + { + widgetType: "SplitContainer", + params: { + id: "nested", orientation: "vertical"}, + children: [ + { + widgetType: "ContentPane", + params: {id: "top"}, + style: "background: #eeffee;", + innerHTML: "center-top pane of nested split container" + }, + { + widgetType: "ContentPane", + params: {id: "bottom"}, + style: "background: #eeffee;", + innerHTML: "center-bottom pane of nested split container" + } + ] + }, + { + widgetType: "ContentPane", + params: {id: "right"}, + style: "background: #ffeeff;", + innerHTML: "right pane of split container" + } + ] + }; + + // tab container layout + var tabLayout = { + widgetType: "TabContainer", + params: {id: "rootWidget"}, + style: "width: 95%; height: 400px;", + children: [ + { + widgetType: "ContentPane", + params: {id: "content", title: "Content tab", href: "doc0.html", executeScripts: true}, + style: "background: #ffeeff;" + }, + { + widgetType: "SplitContainer", + params: {id: "nestedSplit", title: "Split pane tab", orientation: "vertical"}, + children: [ + { + widgetType: "ContentPane", + params: {id: "top"}, + style: "background: #eeffee;", + innerHTML: "top pane of nested split container" + }, + { + widgetType: "ContentPane", + params: {id: "bottom"}, + style: "background: #eeffee;", + innerHTML: "bottom pane of nested split container" + } + ] + }, + { + widgetType: "TabContainer", + params: {id: "nestedTab", title: "Nested tabs"}, + children: [ + { + widgetType: "ContentPane", + params: {id: "left", title: "Nested Tab #1"}, + style: "background: #eeffee;", + innerHTML: "tab 1 of nested tabs" + }, + { + widgetType: "ContentPane", + params: { + id: "right", title: "Nested Tab #2"}, + style: "background: #eeffee;", + innerHTML: "tab 2 of nested tabs" + } + ] + } + ] + }; + +/* + // tab container layout + var tabNoLayout = { + widgetType: "TabContainer", + params: {id: "rootWidget", doLayout: false}, + children: [ + { + widgetType: "ContentPane", + params: {id: "doc0", title: "Doc 0", href: "doc0.html", executeScripts: true}, + style: "background: #ffeeff;" + }, + { + widgetType: "ContentPane", + params: {id: "doc1", title: "Doc 1", href: "doc1.html", executeScripts: true}, + style: "background: #eeffee;" + }, + { + widgetType: "ContentPane", + params: {id: "doc2", title: "Doc 2", href: "doc2.html", executeScripts: true}, + style: "background: #ffffee;" + } + ] + }; +*/ + + // accordion container layout + var accordionLayout = { + widgetType: "AccordionContainer", + params: {id: "rootWidget"}, + style: "border: 3px solid grey; width: 95%; height: 400px;", + children: [ + { + widgetType: "AccordionPane", + params: {id: "one", title: "Pane #1"}, + style: "background: #ffeeff;", + innerHTML: "first pane contents" + }, + { + widgetType: "AccordionPane", + params: {id: "two", title: "Pane #2"}, + style: "background: #ffeeff;", + innerHTML: "second pane contents" + }, + { + widgetType: "AccordionPane", + params: {id: "three", title: "Pane #3"}, + style: "background: #ffeeff;", + innerHTML: "third pane contents" + } + ] + }; + + // Create a widget hierarchy from a JSON structure like + // {widgetType: "LayoutContainer", params: { ... }, children: { ... } } + function createWidgetHierarchy(widgetJson){ + // setup input node + var node = document.createElement("div"); + document.body.appendChild(node); // necessary for tab contianer ??? + if(widgetJson.style){ + node.style.cssText = widgetJson.style; + } + if(widgetJson.innerHTML){ + node.innerHTML=widgetJson.innerHTML; + } + + // create the widget + var widget = new dijit.layout[widgetJson.widgetType](widgetJson.params, node); + + // add its children (recursively) + if(widgetJson.children){ + dojo.forEach(widgetJson.children, + function(child){ widget.addChild(createWidgetHierarchy(child)); }); + } + widget.startup(); //TODO: this is required now, right? + + return widget; + } + + // create the widgets specified in layout and add them to widget "rootWidget" + function create(layout){ + + // erase old widget hierarchy (if it exists) + var rootWidget = dijit.byId("rootWidget"); + if(rootWidget){ + rootWidget.destroyRecursive(); + } + + // create new widget + rootWidget = createWidgetHierarchy(layout); + + // and display it + var wrapper = dojo.byId("wrapper"); + wrapper.innerHTML=""; // just to erase the initial HTML message + wrapper.appendChild(rootWidget.domNode); + // rootWidget.onResized(); + + // make/update the menu of operations on each widget + makeOperationTable(); + } + + // write out a menu of operations on each widget + function makeOperationTable(){ + var html = "<table border=1>"; + dijit.registry.forEach(function(widget){ + html += "<tr><td>" + widget.id + "</td><td>"; + html += "<button onclick='removeFromParent(\"" + widget.id + "\");'> destroy </button> "; + if(/Container/.test(widget.declaredClass)){ + html += "<button onclick='addChild(\"" + widget.id + "\");'> add a child </button> "; + } + html += "</td></tr>"; + }); + html += "</table>"; + dojo.byId("operations").innerHTML = html; + } + + // remove a widget from it's parent and destroy it + function removeFromParent(widget){ + widget = dijit.byId(widget); + if(widget.parent){ + widget.parent.removeChild(widget); + } + widget.destroy(); + + // reset the operation table so this widget is no longer shown + makeOperationTable(); + } + + // add a child to given widget + function addChild(widget){ + widget = dijit.byId(widget); + + // setup input node + var node = document.createElement("div"); + node.style.cssText = "height: 70px; width: 150px; overflow: auto; background: #cccccc; border: dotted black 2px;"; // necessary if parent is LayoutContainer + // create the widget + var alignments = ["top","bottom","left","right"]; + var hrefs = ["doc0.html", "doc1.html", "doc2.html"]; + var child = new dijit.layout.ContentPane( + { + title: "Widget " + cnt, // necessary if parent is tab + layoutAlign: alignments[cnt%4], // necessary if parent is LayoutContainer + executeScripts: true, + href: hrefs[cnt%3] + }, + node); + cnt++; + + if(/AccordionContainer/.test(widget.declaredClass)){ + var pane = new dijit.layout.AccordionPane({ + title: "AccordionWidget " + cnt + }); + pane.setContent(child); + child = pane; + } + // add it to the parent + widget.addChild(child); + + // reset the operation table so the new widget is shown + makeOperationTable(); + } + var cnt=1; + + // show a widget + function show(widget){ + widget = dijit.byId(widget); + widget.show(); + } + + // hide a widget + function hide(widget){ + widget = dijit.byId(widget); + widget.hide(); + } + </script> +</head> +<body> + <h1>Test of layout code programmatic creation</h1> + <table width="100%"> + <tr> + <td id="creator" valign="top"> + <h4>Creator</h4> + <p>Pressing a button will programatically add a hierarchy of widgets</p> + <button onClick="create(simpleLayout);">Simple Layout</button> + <button onClick="create(splitLayout);">Split Layout</button> + <button onClick="create(tabLayout);">Tab Layout</button> +<!-- <button onClick="create(tabNoLayout);">Tab Non-Layout</button> --> + <button onClick="create(accordionLayout);">Accordion Layout</button> + </td> + <td id="current"> + <h4>Current widgets</h4> + This pane will let you try certain operations on each of the widgets. + <div id="operations" style="height: 200px; overflow: auto;"></div> + </td> + </tr> + </table> + <hr> + <div id="wrapper"> + When you press a button, this will be filled in with the generated widgets + </div> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_LayoutContainer.html b/includes/js/dijit/tests/layout/test_LayoutContainer.html new file mode 100644 index 0000000..cbe08f6 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_LayoutContainer.html @@ -0,0 +1,174 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dijit.layout.LayoutContainer Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.form.FilteringSelect"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + +</head> +<body class="tundra"> +<h2>Dijit layout.LayoutContainer tests</h2> +<p>Basic layout. Tabindex="0" added to each pane to test for tab order matching source code order. Tab order +should be: left, right, top, middle/main, bottom</p> + +<div dojoType="dijit.layout.LayoutContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" +> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;" tabindex="0"> + left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #acb386;" tabindex="0"> + right + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; " tabindex="0"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;" tabindex="0"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86;" tabindex="0"> + bottom bar + </div> + +</div> + +<p>Advanced layout. Tabindex="0" added to each pane to test for tab order matching source code order. Tab order +should be: left, top, bottom, inner left, inner middle, inner right. This is not an ideal tab order. See below to use nested +layout containers to achieve a tab order which matches presentation and source code order.</p> +<div dojoType="dijit.layout.LayoutContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" +> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0"> + left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0"> + + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner left + </div> + + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner right + </div> +</div> + +<p>Advanced layout with nested containers. Tabindex="0" added to content panes to show tab order. Order should be: +left, top, inner left, inner middle, inner right, bottom. This is the preferred tab order for this type of layout.</p> +<div dojoType="dijit.layout.LayoutContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" +> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0"> + left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;" > + <div dojoType="dijit.layout.LayoutContainer" style="height:90%;border: 2px solid black;padding: 10px;"> + + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;"> + <div dojoType="dijit.layout.LayoutContainer" style="height:80%;border: 2px solid black;padding: 10px;"> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner right + </div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0" > + bottom bar + </div> + </div> + </div> +</div> + +<p>Goofy spiral layout. Match of source code order to tab order can not be achieved with this type of layout.</p> +<div dojoType="dijit.layout.LayoutContainer" + style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;" +> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #663333; color: white; width: 100px;"> + outer left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #333366; color: white; height: 50px;"> + outer top + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #663333; color: white; width: 100px;"> + outer right + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #333366; color: white; height: 50px;"> + outer bottom + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #99CC99; width: 100px;"> + inner left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #999966; height: 50px;"> + inner top + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #99CC99; width: 100px;"> + inner right + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #999966; height: 50px;"> + inner bottom + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="padding: 10px;"> + main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br /> + (to check we're copying children around properly).<br /> + <select dojoType="dijit.form.FilteringSelect"> + <option value="1">foo</option> + <option value="2">bar</option> + <option value="3">baz</option> + </select> + Here's some text that comes AFTER the combo box. + </div> +</div> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_SplitContainer.html b/includes/js/dijit/tests/layout/test_SplitContainer.html new file mode 100644 index 0000000..f71d2dd --- /dev/null +++ b/includes/js/dijit/tests/layout/test_SplitContainer.html @@ -0,0 +1,116 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>SplitContainer Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dojoContentPane { + padding:1em; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.layout.ContentPane"); + + // these exist inside our href splitcontainer + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.ComboBox"); + var programaticExample = function(){ + + var rootNode = dojo.byId("holderNode"); + // add two children + var pane1 = rootNode.appendChild(document.createElement('div')); + var pane2 = rootNode.appendChild(document.createElement('div')); + var pane3 = rootNode.appendChild(document.createElement('div')); + + // set the content. can use xhrGet, also + pane1.innerHTML = "Pane one test"; pane2.innerHTML = "Pane two test"; + + // should use css, but this works: + dojo.style(rootNode,"height","150px"); + dojo.style(rootNode,"border","1px solid #333"); + + // make them contentpanes + var cp1 = new dijit.layout.ContentPane({ sizeShare:20 },pane1); + var cp2 = new dijit.layout.ContentPane({ sizeShare:30 },pane2); + var cp3 = new dijit.layout.ContentPane({ + href: "doc0.html", + sizeShare:30 + },pane3).startup(); + + // init the splitcontainer + var split = new dijit.layout.SplitContainer({ + orientation:"horizontal", + sizerWidth:7 + },rootNode).startup(); + + }; + dojo.addOnLoad(programaticExample); + + </script> +</head> +<body> + <h1 class="testTitle">Dijit Split Container Test</h1> + <p>HTML before</p> + + <div dojoType="dijit.layout.SplitContainer" + orientation="vertical" + sizerWidth="7" + activeSizing="false" + style="border: 1px solid #bfbfbf; float: left; margin-right: 30px; width: 400px; height: 300px;" + > + <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50"> + this box has three split panes + </div> + <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="50" + style="background-color: yellow; border: 3px solid purple;"> + in vertical mode + </div> + <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50"> + without active resizing + </div> + </div> + + <div dojoType="dijit.layout.SplitContainer" + orientation="horizontal" + sizerWidth="7" + activeSizing="true" + style="border: 1px solid #bfbfbf; float: left; width: 400px; height: 300px;"> + <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20"> + this box has two horizontal panes + </div> + <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50"> + with active resizing, a smaller sizer, different starting sizes and minimum sizes + </div> + </div> + + <p style="clear: both;">HTML after</p> + +the following splitter contains two iframes, see whether the resizer works ok in this situation +<div dojoType="dijit.layout.SplitContainer" + orientation="horizontal" + sizerWidth="5" + activeSizing="false" + style="border: 2px solid black; float: left; width: 100%; height: 300px;" +> + <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20"> + <iframe style="width: 100%; height: 100%"></iframe> + </div> + <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50"> + <iframe style="width: 100%; height: 100%"></iframe> + </div> +</div> + +<h3>Programatic Example:</h3> +<div id="holderNode"></div> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_StackContainer.html b/includes/js/dijit/tests/layout/test_StackContainer.html new file mode 100644 index 0000000..834b874 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_StackContainer.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>StackContainer Demo</title> + + <style> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dijitStackController .dijitToggleButtonChecked button { + background-color: white; + background-image: none; + } + .dijit_a11y .dijitStackController .dijitToggleButtonChecked button { + border-style: dashed !important; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.StackContainer"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function selected(page){ + console.debug("page selected " + page.id); + var widget=dijit.byId("myStackContainer"); + dijit.byId("previous").setAttribute("disabled", page.isFirstChild); + dijit.byId("next").setAttribute("disabled", page.isLastChild); + dijit.byId("previous2").setAttribute("disabled", page.isFirstChild); + dijit.byId("next2").setAttribute("disabled", page.isLastChild); + } + dojo.subscribe("myStackContainer-selectChild", selected); + </script> +</head> + +<body> + <h1 class="testTitle">A Tale Of Two Cities</h1> + + <button dojoType="dijit.form.Button" id="previous" + onClick="dijit.byId('myStackContainer').back()"><</button> + <span dojoType="dijit.layout.StackController" containerId="myStackContainer"></span> + <button dojoType="dijit.form.Button" id="next" + onClick="dijit.byId('myStackContainer').forward()">></button> + + <div id="myStackContainer" dojoType="dijit.layout.StackContainer" + style="width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;"> + <p id="page1" dojoType="dijit.layout.ContentPane" title="page 1">IT WAS the best of times, it <input value="was the worst" /> of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p> + <p id="page2" dojoType="dijit.layout.ContentPane" title="page 2">There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of <a href="http://www.france.com">France</a>. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p> + <p id="page3" dojoType="dijit.layout.ContentPane" title="page 3">It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:</p> + </div> + + <button dojoType="dijit.form.Button" id="previous2" onClick="dijit.byId('myStackContainer').back()"><</button> + <span dojoType="dijit.layout.StackController" containerId="myStackContainer"></span> + <button dojoType="dijit.form.Button" id="next2" onClick="dijit.byId('myStackContainer').forward()">></button> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_StackContainer_code.html b/includes/js/dijit/tests/layout/test_StackContainer_code.html new file mode 100644 index 0000000..137cc6e --- /dev/null +++ b/includes/js/dijit/tests/layout/test_StackContainer_code.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>StackContainer Demo</title> + + <style> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + .dijitStackController .dijitToggleButtonChecked button { + background-color: white; + background-image: none; + } + .dijit_a11y .dijitStackController .dijitToggleButtonChecked button { + border-style: dashed !important; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.StackContainer"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var i = 1; + var codeExample = function(){ + // make the container + var stack = new dijit.layout.StackContainer({ },"myStackContainer"); + // make each paragraph a ContentPane, and add a button to select this child + dojo.query("p","myStackContainer").forEach(function(n){ + var cp = new dijit.layout.ContentPane({},n); + var tmpNode = dojo.byId("holder").appendChild(dojo.doc.createElement('div')); + var butt = new dijit.form.Button({ + label: "Page "+(i++), + onClick: function(e){ + stack.selectChild(cp); + } + },tmpNode); + }); + // startup stack + children + stack.startup(); + }; + dojo.addOnLoad(codeExample); + </script> +</head> + +<body> + <h1 class="testTitle">A Tale Of Two Cities</h1> + + <div id="holder">Links: </div> + + <div id="myStackContainer" style="width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;"> + <p id="page1">IT WAS the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p> + <p id="page2">There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of <a href="http://www.france.com">France</a>. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p> + <p id="page3">It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:</p> + </div> + + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_TabContainer.html b/includes/js/dijit/tests/layout/test_TabContainer.html new file mode 100644 index 0000000..5d51a8a --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainer.html @@ -0,0 +1,183 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function testClose(pane,tab){ + return confirm("Please confirm that you want tab "+tab.title+" closed"); + } + + startTime = new Date(); + dojo.addOnLoad(function(){ + var elapsed = new Date().getTime() - startTime; + var p = document.createElement("p"); + p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms")); + document.body.appendChild(p); + // dojo.parser.parse(dojo.body()); + }); + + dojo.addOnLoad(function(){ + var tc = dijit.byId("mainTabContainer"); + var cp = new dijit.layout.ContentPane({ title: 'Programmatically created tab' }); + cp.domNode.innerHTML = "I was created programmatically!"; + tc.addChild(cp, 3); + }); + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer tests</h1> + + <p>These tabs are made up of local and external content. Tab 1 and Tab 2 are loading + files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already + part of this page. Tab2 is initially selected. + </p> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + + <div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + + <div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div> + + <div dojoType="dijit.layout.ContentPane" title="Tab 3"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <p id="foo">tooltip on this paragraph</p> + <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div> + <button dojoType="dijit.form.Button">I'm a button </button> + <br> + <button dojoType="dijit.form.Button">So am I!</button> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + </div> + + <div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer"> + <a dojoType="dijit.layout.LinkPane" href="tab1.html">SubTab 1</a> + <a dojoType="dijit.layout.LinkPane" href="tab2.html" selected="true">SubTab 2</a> + </div> + + <a dojoType="dijit.layout.LinkPane" href="tab3.html">Sub TabContainer from href</a> + + <a dojoType="dijit.layout.LinkPane" href="tab4.html">SplitContainer from href</a> + + </div> + + <p> + The next example is with closable tabs. + Tab 1 and Tab 3 can be closed; Tab 3 has a confirm box. + </p> + + <div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;" + onfocus="console.log('user focus handler')" + onblur="console.log('user blur handler')" + > + <div id="ttab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="First" closable="true"></div> + <div id="ttab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Second"></div> + <div dojoType="dijit.layout.ContentPane" title="Third" onClose="testClose" closable="true"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <p>If you try to close me there should be a confirm dialog.</p> + </div> + </div> + + <p>Tabs with titles on the bottom:</p> + + <div id="btabs" dojoType="dijit.layout.TabContainer" tabPosition="bottom" style="width: 100%; height: 10em;"> + <div id="btab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1" closable="true"></div> + <div id="btab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" onLoad="console.debug('Tab2 onLoad');" title="Tab 2"></div> + </div> + + <p>Tabs with titles on the left:</p> + + <div id="lhtabs" dojoType="dijit.layout.TabContainer" tabPosition="left-h" style="width: 100%; height: 10em;"> + <div id="lhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + <div id="lhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div> + </div> + + <p>Tabs with titles on the right:</p> + + <div id="lrtabs" dojoType="dijit.layout.TabContainer" tabPosition="right-h" style="width: 100%; height: 10em;"> + <div id="rhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + <div id="rhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div> + </div> + +<p></p> + <div dojoType="dijit.layout.TabContainer" style="width:500px;height:100px" tabPosition="left-h"> + <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap"> + Once upon a time there was a dear little girl who was loved by + every one who looked at her, but most of all by her grandmother, + and there was nothing that she would not have given to the child. + </div> + <div id="HanselGretel" dojoType="dijit.layout.ContentPane" + title="Hansel and Gretel" closable="true" selected="true"> + Hard by a great forest dwelt a poor wood-cutter with his wife + and his two children. The boy was called Hansel and the girl Gretel. + He had little to bite and to break, and once when great dearth fell + on the land, he could no longer procure even daily bread. + </div> + <div id="GreenTwigs" dojoType="dijit.layout.ContentPane" + title="The Three Green Twigs"> + There was once upon a time a hermit who lived in a forest at the foot + of a mountain, and passed his time in prayer and good works, + and every evening he carried, to the glory of God, two pails of water + up the mountain. + </div> + + <h3>Typical rendering time</h3> + <table border=1> + <tr><th>IE</th><th>Firefox (mac)</th></tr> + <tr><td>1719</td><td>922</td></tr> + </table> + <h3>Rendering time</h3> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_TabContainerTitlePane.html b/includes/js/dijit/tests/layout/test_TabContainerTitlePane.html new file mode 100644 index 0000000..139eb2b --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainerTitlePane.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer Nested TitlePane Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.TitlePane"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + startTime = new Date(); + dojo.addOnLoad(function(){ + var elapsed = new Date().getTime() - startTime; + var p = document.createElement("p"); + p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms")); + document.body.appendChild(p); + // dojo.parser.parse(dojo.body()); + }); + + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer nested TitlePane tests</h1> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + + <div dojoType="dijit.layout.ContentPane" title="Tab 1"> + <h1>I am tab 1</h1> + <div dojoType="dijit.TitlePane" title="Title pane" width="300"> + <p>This is a title pane, containing another tab container ...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum... + </p> + <div id="subTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;"> + <div id="tab3" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 3"></div> + <div id="tab4" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 4" selected="true"></div> + </div> + </div> + </div> + <div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" title="Tab 2"></div> + + </div> + + + <h3>Typical rendering time</h3> + <table border=1> + <tr><th>IE</th><th>Firefox (mac)</th></tr> + <tr><td>1719</td><td>922</td></tr> + </table> + <h3>Rendering time</h3> + +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_TabContainer_noLayout.html b/includes/js/dijit/tests/layout/test_TabContainer_noLayout.html new file mode 100644 index 0000000..3fb8d15 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainer_noLayout.html @@ -0,0 +1,104 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer doLayout=false Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function testClose(pane,tab){ + return confirm("Please confirm that you want tab "+tab.title+" closed"); + } + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer doLayout=false tests</h1> + + <p> + This tests tabs in doLayout=false mode, in which case the tab container's height == + the height of the currently selected tab. + </p> + <p>With doLayout=false mode tabs to the left or right are not supported and tabs at the bottom are a bit buggy in FireFox. + </p> + + + <!-- 1ST TABCONTAINER --> + + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" doLayout="false"> + + <div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div> + + <div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div> + + <div dojoType="dijit.layout.ContentPane" title="Tab 3"> + <h1>I am tab 3</h1> + <p>And I was already part of the page! That's cool, no?</p> + <span id="foo">tooltip on this span</span> + <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div> + <button dojoType="dijit.form.Button">I'm a button </button> + <br> + <button dojoType="dijit.form.Button">So am I!</button> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin + porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. + Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. + Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae + risus. + </p> + <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem + nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in + massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In + pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra + quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia, + felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut + quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla + rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut + semper velit ante id metus. Praesent massa dolor, porttitor sed, + pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit + tortor pharetra congue. Suspendisse pulvinar. + </p> + </div> + + <div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer"> + <a dojoType="dijit.layout.LinkPane" href="tab1.html">SubTab 1</a> + <a dojoType="dijit.layout.LinkPane" href="tab2.html" selected="true">SubTab 2</a> + </div> + + <a dojoType="dijit.layout.LinkPane" href="tab3.html">Sub TabContainer from href</a> + </div> + + <p> + Some text here. This should appear directly below the TabContainer, + and the position will change based on the current height of the TabContainer. + </p> +</body> +</html> diff --git a/includes/js/dijit/tests/layout/test_TabContainer_remote.html b/includes/js/dijit/tests/layout/test_TabContainer_remote.html new file mode 100644 index 0000000..19515a9 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_TabContainer_remote.html @@ -0,0 +1,109 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>TabContainer Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + + body { + font-family : sans-serif; + margin:20px; + } + + /* add padding to each contentpane inside the tab container, and scrollbar if necessary */ + .dojoTabPane { + padding : 10px 10px 10px 10px; + overflow: auto; + } + </style> + + <script type="text/javascript" djConfig="isDebug: true,parseOnLoad:true" + src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.Tooltip"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dijit.form.Button"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var tabCounter; + function testClose(pane, tab){ + // remove html from title + var title = dojo.trim(tab.title.replace(/<\/?[a-z][a-z0-9]*[^>]*>/ig, "")); + return confirm("Please confirm that you want tab "+title+" closed"); + } + + function randomMessageId(){ + return Math.floor(Math.random() * 3) + 3; + } + + function createTab(){ + if(!tabCounter){ tabCounter = 3; } + + var title = '<img src="../images/plus.gif" style="background-color:#95B7D3;"/> Tab ' +(++tabCounter); + var refreshOnShow = !!(tabCounter % 2); + + var newTab = new dijit.layout.ContentPane({ + title: title + (refreshOnShow ? ' <i>refreshOnShow</i>': ''), + closable:true, + refreshOnShow: refreshOnShow, + href: 'getResponse.php?delay=1000&messId='+randomMessageId() + +"&message="+encodeURI("<h1>Programmatically created Tab "+tabCounter+"</h1>") + }, dojo.doc.createElement('div')); + + dijit.byId('ttabs').addChild(newTab); + + newTab.startup(); // find parent TabContainer and subscribe to selectChild event + } + + startTime = new Date(); + dojo.addOnLoad(function(){ + var elapsed = new Date().getTime() - startTime; + var p = document.createElement("p"); + p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms")); + document.body.appendChild(p); + }); + </script> +</head> +<body> + + <h1 class="testTitle">Dijit layout.TabContainer (delayed) remote tests</h1> + + <p>These tabs are made up of external content. Loading is delayed to make it easier to see if refreshOnShow and preload = 'false' is working.<br/> + The tabs also tests to insert html in the Tab title + </p> + + <div dojoType='dijit.form.Button' onClick='createTab()'>Create a Tab</div> + <div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 20em;"> + <a id="ttab1" dojoType="dijit.layout.LinkPane" + href="getResponse.php?messId=3&delay=1000" + closable="true" + ><img src='../images/copy.gif'/> Tab1</a> + <a id="ttab2" dojoType="dijit.layout.LinkPane" + href="getResponse.php?messId=4&delay=1000" + refreshOnShow="true" title="Tab 2 " + selected='true' + closable='true' + ><i>refreshOnShow</i> + <img src='../images/cut.gif'/> + </a> + <a dojoType="dijit.layout.LinkPane" + href="getResponse.php?messId=5&delay=1000" + onClose="testClose" + closable="true" + > + <b>Tab 3</b> + <img src='../images/paste.gif'/> + </a> + </div> + + <h3>Rendering time</h3> + +</body> +</html> |