--- /dev/null
+<!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>
projects / eow / blobdiff