You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
268 lines
13 KiB
268 lines
13 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>dijit/layout/BorderContainer Test</title> |
|
|
|
<script src="../boilerplate.js"></script> |
|
|
|
<style type="text/css"> |
|
/* styles for this test */ |
|
.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 } |
|
.dj_webkit #mondrian .dijitSplitter:focus { |
|
/* override orange focus border w/something easier to see (response to a11y bug report) */ |
|
outline: 5px blue; |
|
} |
|
#mondrian SPAN { display: none } |
|
#mondrian:hover SPAN { display: inline } |
|
#mondrian .dijitContentPane { padding: 0 } |
|
|
|
</style> |
|
|
|
<script type="text/javascript"> |
|
var bc, cp1, cp2, cp3; |
|
|
|
require([ |
|
"dojo/_base/array", |
|
"dojo/aspect", |
|
"dojo/dom", |
|
"dojo/dom-style", |
|
"dojo/json", |
|
"dojo/on", |
|
"dojo/parser", |
|
"dijit/registry", |
|
"dijit/layout/BorderContainer", |
|
"dijit/layout/ContentPane", |
|
"dijit/form/FilteringSelect", |
|
"dojo/domReady!" |
|
], function(array, aspect, dom, domStyle, json, on, parser, registry, BorderContainer, ContentPane, FilteringSelect){ |
|
|
|
togglePanel = function(button, id){ |
|
var leftPanel = registry.byId(id); |
|
if(leftPanel){ |
|
registry.byId('border1').removeChild(leftPanel); |
|
leftPanel.destroy(); |
|
button.innerHTML='Add left panel'; |
|
}else{ |
|
var container = registry.byId('border1'); |
|
var div = document.createElement('div'); |
|
div.innerHTML='left'; |
|
container.domNode.appendChild(div); |
|
leftPanel = new ContentPane({id: id, region:'left', style:'background-color: #acb386; width:200px', splitter:true, minSize:150, maxSize:250}, div); |
|
registry.byId('border1').addChild(leftPanel); |
|
button.innerHTML='Remove left panel'; |
|
} |
|
}; |
|
|
|
function watchSplitters(bc){ |
|
var out = dom.byId("watchedOutput"); |
|
var moveConnects = {}; |
|
array.forEach(["top", "left"], function(region){ |
|
var spl = bc.getSplitter(region); |
|
|
|
aspect.after(spl, "_startDrag", function(){ |
|
|
|
domStyle.set(spl.child.domNode, "opacity", "0.4"); |
|
moveConnects[spl.widgetId] = on(spl.domNode, "mousemove", function(evt){ |
|
|
|
out.innerHTML = spl.region + ": " + json.stringify({ |
|
x: !spl.horizontal ? spl.domNode.style[spl.region] : 0, |
|
y: spl.horizontal ? spl.domNode.style[spl.region] : 0 |
|
}); |
|
}) |
|
|
|
}); |
|
aspect.after(spl, "_stopDrag", function(evt){ |
|
domStyle.set(spl.child.domNode, "opacity", 1); |
|
moveConnects[spl.widgetId].remove(); |
|
delete moveConnects[spl.widgetId]; |
|
}); |
|
}) |
|
} |
|
|
|
parser.parse(); |
|
|
|
watchSplitters( registry.byId("watchedBC") ); |
|
|
|
bc = new BorderContainer({style:'height:400px;width:500px;border:1px solid black'}, dom.byId('main')); |
|
|
|
cp1 = new ContentPane({region:'top',style:'height:100px;background-color:red',splitter:true, id:"cp1"}); |
|
cp1.domNode.innerHTML = "top pane"; |
|
bc.addChild(cp1); |
|
|
|
cp2 = new ContentPane({region:'center',style:'background-color:green', id:'cp2'}); |
|
cp2.domNode.innerHTML = "center pane"; |
|
bc.addChild(cp2); |
|
|
|
cp3 = new ContentPane({region:'left', splitter: true, style:'width: 100px;', id:'cp3'}); |
|
cp3.domNode.innerHTML = "left pane"; |
|
|
|
bc.startup(); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body class="claro" role="region" aria-label="main"> |
|
<h2 class="testTitle">dijit/layout/BorderContainer tests</h2> |
|
<p>Headline layout (default), left is constrained - min:150, max:250</p> |
|
<div id="border1" data-dojo-type="dijit/layout/BorderContainer" |
|
data-dojo-props='style:"width: 1000px; height: 300px; border: 2px solid blue;"'> |
|
<div role="banner" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-top", region:"top", style:"background-color: #b39b86; border: 15px black solid; height: 50px;", splitter:true'> |
|
top bar (resizable) |
|
</div> |
|
<div role="navigation" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-left", region:"left", style:"background-color: #acb386; border: 10px green solid; width: 100px;", |
|
splitter:true, minSize:150, maxSize:250'> |
|
left (resizable b/w 150 → 250) |
|
</div> |
|
<div role="main" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-center", 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 aria-label="select" data-dojo-type="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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-right", region:"right", style:"background-color: #acb386; width: 100px;"'> |
|
right (fixed size) |
|
</div> |
|
<div role="contentinfo" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-bottom", region:"bottom", style:"background-color: #b39b86; height: 50px;", splitter:true'> |
|
bottom bar (resizable) |
|
</div> |
|
</div> |
|
|
|
<button id="toggleLeftButton" onClick="togglePanel(this, 'border1-left')">Remove left panel</button> |
|
<br /> |
|
|
|
<p>Sidebar layout, BiDi sensitive, liveSplitters: false</p> |
|
<div id="border2" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar", liveSplitters:false, |
|
style:"border: 20px solid black; width: 1000px; height: 300px;"'> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-leading", region:"leading", style:"background-color: #acb386; width: 100px;"'> |
|
leading (fixed size) |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-top", region:"top", style:"background-color: #b39b86; height: 80px;"'> |
|
top bar (fixed size) |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-center", 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 aria-label="select" data-dojo-type="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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-bottom", region:"bottom", style:"background-color: #b39b86; height: 80px;", splitter:true'> |
|
bottom bar (resizable) |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-trailing", region:"trailing", style:"background-color: #acb386; width: 100px;", splitter:true'> |
|
trailing (resizable) |
|
</div> |
|
</div> |
|
|
|
<p>gutters=false layout</p> |
|
|
|
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar", gutters:false, |
|
style:"border: 20px solid black; width: 1000px; height: 300px;"'> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"leading", style:"background-color: #acb386; width: 100px;"'> |
|
leading |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"background-color: #b39b86; height: 80px;"'> |
|
top bar |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='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 aria-label="select" data-dojo-type="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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"background-color: #b39b86; height: 80px;"'> |
|
bottom bar |
|
</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"trailing", style:"background-color: #acb386; width: 100px;"'> |
|
trailing |
|
</div> |
|
</div> |
|
|
|
<p>Vertical panels only with splitters</p> |
|
|
|
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar", |
|
style:"border: 2px solid black; width: 1000px; height: 300px; padding: 10px;"'> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"background-color: #b39b86; height: 80px;", splitter:true'> |
|
top bar |
|
</div> |
|
|
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='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 aria-label="select" data-dojo-type="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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"background-color: #b39b86; height: 80px;", splitter:true'> |
|
bottom bar |
|
</div> |
|
</div> |
|
|
|
<br /> |
|
<p>More fun with layouts</p> |
|
|
|
<div id="mondrian" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar", gutters:false, persist:true, style:"height: 300px; width: 400px;"'> |
|
<div id="mondrian_top" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"height: 100px", splitter:true'> |
|
<div id="mondrian_top_bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='persist:true, gutters:false, style:"height: 100px; width: 100%"'> |
|
<div id="top_a" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"leading", style:"width: 125px", splitter:true'><span>top a</span></div> |
|
<div id="top_b" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center", style:"background-color: yellow", splitter:true'><span>top b</span></div> |
|
</div> |
|
</div> |
|
<div id="mondrian_bottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"height: 100px", splitter:true'> |
|
<div id="mondrian_bottom_bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='persist:true, gutters:false, style:"height: 100px; width: 100%"'> |
|
<div id="bottom_c" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"height: 40px; background-color: blue;", splitter:true'><span>bottom c</span></div> |
|
<div id="bottom_d" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'><span>bottom d</span></div> |
|
</div> |
|
</div> |
|
<div id="mondrian_leading" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"leading", style:"width: 100px", splitter:true'> |
|
<div id="mondrian_leading_bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='persist:true, gutters:false, style:"height: 300px; width: 100%"'> |
|
<div id="leading_e" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'><span>leading e</span></div> |
|
<div id="leading_f" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"height: 100px; background-color: red", splitter:true'><span>leading f</span></div> |
|
</div> |
|
</div> |
|
<div id="trailing_g" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center", splitter:true'><span>trailing g</span></div> |
|
<div id="trailing_h" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"trailing", style:"width: 100px", splitter:true'><span>trailing g</span></div> |
|
</div> |
|
|
|
<br /> |
|
<p>Watching the splitter events</p> |
|
<div id="watchedBC" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='persist:false, gutters:false, style:"height: 200px; width: 100%"'> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", splitter:true, style:"background-color: #ccffcc; height: 50px;"'>Top:</div> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"background-color: #ccccff; width: 40px", splitter:true'><span>Left</span></div> |
|
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center", style:"background-color: #ffffcc"'><span>Center</span></div> |
|
</div> |
|
|
|
<p>Splitter coords output:</p> |
|
<div id="watchedOutput" style="border: 1px solid #999">nothing moving</div> |
|
|
|
|
|
<h2 class="testTitle">dijit/layout/BorderContainer programmatic test</h2> |
|
<div id='main'></div> |
|
|
|
<button id="addLeft" onclick="bc.addChild(cp3);">add left pane</button> |
|
<button id="removeLeft" onclick="bc.removeChild(cp3);">remove left pane</button> |
|
<button id="addTop" onclick="bc.addChild(cp1);">add top pane</button> |
|
<button id="removeTop" onclick="bc.removeChild(cp1);">remove top pane</button> |
|
</body> |
|
</html>
|
|
|