diff options
Diffstat (limited to 'includes/js/dojox/layout/tests/test_ExpandoPane.html')
| -rw-r--r-- | includes/js/dojox/layout/tests/test_ExpandoPane.html | 307 |
1 files changed, 307 insertions, 0 deletions
diff --git a/includes/js/dojox/layout/tests/test_ExpandoPane.html b/includes/js/dojox/layout/tests/test_ExpandoPane.html new file mode 100644 index 0000000..ceaad50 --- /dev/null +++ b/includes/js/dojox/layout/tests/test_ExpandoPane.html @@ -0,0 +1,307 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.layout.ExpandoPane</title> + <link rel="stylesheet" href="_expando.css" /> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script src="../ExpandoPane.js" type="text/javascript"></script> + <script type="text/javascript"> + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.ComboBox"); + dojo.require("dijit.Tree"); + dojo.require("dijit.layout.AccordionContainer"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.BorderContainer"); + dojo.require("dojox.layout.FloatingPane"); + dojo.require("dojox.fx.easing"); + dojo.require("dojox.rpc.Service"); + dojo.require("dojo.io.script"); + </script> + <script type="text/javascript"> + dojo.declare("demo.DemoPane",dijit.layout.ContentPane,{ + + startup: function(){ + this.inherited(arguments); + this.rpc.get({ name: this.title, + attributes:["summary","type","source","description","examples"] + }).addCallback(dojo.hitch(this,"_setSelf")); + }, + _setSelf:function(data){ + var out = ""; + dojo.forEach(data,function(d){ + console.log(d); + if(d.name){ + out += "<h2>" + d.name + " <span class='itemType'>" + d.type +"</span></h2>"; + } + if(d.summary){ + out += "<div class='summary'>" + d.summary + "</div>"; + } + }); + this.setContent(out); + + } + + }); + + var togglePane = function(e){ + + var lp = dijit.byId("leftPane"); + var sel = dojo.byId("easingSelect"); + var o = dojo.getObject("dojox.fx.easing."+sel.value); + + lp.easeIn = o; + lp.easeOut = o; + lp.duration = parseInt(dojo.byId("durationBox").value) || 1000; + lp._setupAnims(); + lp.toggle(); + }; + + var easeSelectionCode = function(){ + var sel = dojo.byId("easingSelect"); + dojo.connect(sel,"onchange",togglePane); + dojo.connect(dojo.byId("durationBox"),"onchange",togglePane); + var opt = dojo.query("#easingSelect option")[0]; + for(var i in dojox.fx.easing){ + var n = dojo.clone(opt); + n.value = i; + n.innerHTML = i; + sel.appendChild(n); + } + }; + + var _clearSearch = function(){ + dojo.query("li","searchResults").forEach(dojo._destroyElement); + }; + + var shifter = function(input){ + // convert an array to a object, just that deep + var last, output; + last = output = {}; + for(var i = 0; i < input.length; i++){ + if(i == input.length - 2){ + last[input[i]] = input[i + 1]; + break; + } + last = last[input[i]] = {}; + } + return output; + }; + + var makeTree = function(data){ + var undata = { + dojo:{}, dijit:{}, dojox:{} + }; + var items = []; + dojo.forEach(data,function(item){ + var foo = item.name.split("."); + foo.push("_meta"); + foo.push(item); + //var ns = foo.shift(); + var obj = shifter(foo); + items.push(obj); + }); + return items; + }; + + var runSearch = function(e){ + dijit.byId("centerPane").selectChild(dijit.byId("resultsPane")); + var val = dojo.byId("searchBox").value; + var li = dojo.doc.createElement('li'); + _clearSearch(); + li.appendChild(dojo.clone(dojo.query(".cloneNode")[0])); + dojo.byId("searchResults").appendChild(li); + searchHistory.push(val); + api.get({ name:val }).addCallback(function(data){ + var tree = makeTree(data); + + _clearSearch(); + + dojo.forEach(data,function(item){ + console.log(item); + var list = dojo.byId("") + var nli = dojo.doc.createElement('li'); + nli.innerHTML = "<div class='inner'>" + +"<a"+" hre"+"f='#"+ item.name +"'>"+item.name +"</a>" + +"- <span class='itemType'>"+ item.type +"</span>" + +"<div class='itty'>"+item.summary+"</div></div>"; + dojo.byId("searchResults").appendChild(nli); + }); + }) + }; + + var searchInteract = function(e){ + e.preventDefault(); + var v; + if((v = dojo.attr(e.target,"href"))){ + var tabs = dijit.byId("centerPane"); + v = v.replace(/#/g,""); + var cp = dijit.byId(v); + if(!cp){ + var cp = new demo.DemoPane({ + title:v, + closable:true, + id:v, + rpc:api + }); + cp.startup(); + tabs.addChild(cp); + } + tabs.selectChild(cp); + } + }; + + var searchHistory = []; + var rpc = null; + var apiData = {}; + var _clone = null; + var searchCode = function(){ + _clone = dojo.query(".cloneLoading")[0]; + api = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc", "documentation.smd")); + dojo.connect(dojo.byId("searchBox"),"onchange",runSearch); + dojo.connect(dojo.byId("runSearchIcon"),"onclick",runSearch); + dojo.connect(dojo.byId("searchResults"),"onclick",searchInteract); + } + + dojo.addOnLoad(easeSelectionCode); + dojo.addOnLoad(searchCode); + + </script> +</head> +<body> + <div id="bc" style="width:100%; height:100%;" dojoType="dijit.layout.BorderContainer"> + <div id="header" dojoType="dijit.layout.ContentPane" region="top">Dojo Expando Pane Test</div> + <div dojoType="dojox.layout.ExpandoPane" + splitter="true" + duration="125" + region="left" + title="Left Section" + id="leftPane" + maxWidth="275" + style="width: 275px; background: #fafafa;"> + <div dojoType="dijit.layout.TabContainer" attachParent="true" tabPosition="bottom"> + <div dojoType="dijit.layout.ContentPane" title="Search"> + <div class="searchBar"> + <p> + <span style="float: left;">Search:</span> + <input id="searchBox" name="searchBox" style="float: left;"> + <span id="runSearchIcon" style="border: none; floast: left; padding: 3px;"> + <img src="../../presentation/resources/icons/next.png" style="height:12px; width:12px;"> + </span> + </p> + </div> + + </div> + <div dojoType="dijit.layout.AccordionContainer" title="Panes" style="width:275px;" attachParent="true"> + <div dojoType="dijit.layout.AccordionPane" title="Dojo"> + <ul id="dojoList"></ul> + </div> + <div dojoType="dijit.layout.AccordionPane" title="Dijit"> + <ul id="dijitList"></ul> + </div> + <div dojoType="dijit.layout.AccordionPane" title="DojoX"> + <ul id="dojoxList"></ul> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" title="Tree View"> + <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" + url="../../../dijit/tests/_data/countries.json"></div> + <div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}" + labelAttr="name" typeAttr="type" label="Toolkit API"></div> + </div> + </div> + </div> + <div dojoType="dijit.layout.TabContainer" region="center" id="centerPane"> + <div dojoType="dijit.layout.ContentPane" title="tab 1">a</div> + <div dojoType="dijit.layout.ContentPane" title="tab 2">b</div> + <div dojoType="dijit.layout.ContentPane" title="Results" id="resultsPane"> + <div class="wrap"> + <div class="searchStuff"> + <ul id="searchResults"></ul> + </div> + </div> + </div> + </div> + <div dojoType="dojox.layout.ExpandoPane" + splitter="true" + title="Right Section" + region="right" + id="rightPane" + maxWidth="275" + style="background:#fafafa; width:275px" + easeIn="dojox.fx.easing.backOut" + easeOut="dojox.fx.easing.backInOut"> + + <div dojoType="dijit.layout.AccordionContainer" id="rightAccordion" style="width:275px;" attachParent="true"> + <div dojoType="dijit.layout.AccordionPane" title="Easing Selection"> + <div class="wrap"> + <p>This select modifies the left Expando's easing function. An Expando can have an easeIn and an easeOut parameter. This sets both.</p> + <select id="easingSelect" name="easingSelect"> + <option value="dojo._DefaultEasing">Default</option> + </select> + <p><label for="durationBox">Duration: </label> <input id="durationBox" name="durationBox" value="1000" /></p> + <p>Some easing functions break when used with width: (negative width? but how?). <em>Be warned.</em></p> + </div> + </div> + <div dojoType="dijit.layout.AccordionPane" title="Children"> + <div class="wrap"> + <p>This is a BorderContainer (the window). Each of the panes is set to one of + "left", "right", or "center". The left and right panes are ExpandoPanes (they collapse). + </p> + <p> + We can add other panes programatically: + <br> + <button dojoType="dijit.form.Button"> + Add "Bottom" + <script type="dojo/method" event="onClick"> + // create and startup a new ContentPane + var cp = new dijit.layout.ContentPane({ + region:"bottom", + style:"height:65px", + splitter:"true" + }); + cp.startup(); + this.setAttribute("disabled",true); + cp.setHref("_bottomPane.html"); + // add to our borderContainer + var bc = dijit.byId("bc"); + bc.addChild(cp); + </script> + </button> + </p> + <p>What does a FloatingPane look like here?<br> + <button dojoType="dijit.form.Button"> + Make Floater + <script type="dojo/method" event="onClick"> + var div = dojo.doc.createElement('div'); + dojo.body().appendChild(div); + var fp = new dojox.layout.FloatingPane({ + title:"A Winder.", + closeable:true, dockable:false, + href:"_floating.html" + },div); + dojo.style(fp.domNode,{ + width:"350px", + height:"255px", + top:"75px", left:"75px", + position:"absolute", + zIndex:"980" + }); + fp.startup(); + fp.show(); + </script> + </button> + </p> + </div> + </div> + <div dojoType="dijit.layout.AccordionPane" title="Acc 3">c</div> + </div> + </div> + </div> + + <div class="cloneNode">Loading <img style="width:17px; height:17px" src="../../image/resources/images/loading.gif" alt="progress" /></div> + +</body> +</html> |