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, 0 insertions, 307 deletions
diff --git a/includes/js/dojox/layout/tests/test_ExpandoPane.html b/includes/js/dojox/layout/tests/test_ExpandoPane.html deleted file mode 100644 index ceaad50..0000000 --- a/includes/js/dojox/layout/tests/test_ExpandoPane.html +++ /dev/null @@ -1,307 +0,0 @@ -<!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> |