+++ /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