New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
author: mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> 2008-11-13 09:49:11 +0000
committer: mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> 2008-11-13 09:49:11 +0000
commit: e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree: 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/layout/tests/test_ExpandoPane.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
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>
author	mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>	2008-11-13 09:49:11 +0000
committer	mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>	2008-11-13 09:49:11 +0000
commit	e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree	95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/layout/tests/test_ExpandoPane.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2