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/widget/tests/test_FisheyeLite.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
1 files changed, 257 insertions, 0 deletions
diff --git a/includes/js/dojox/widget/tests/test_FisheyeLite.html b/includes/js/dojox/widget/tests/test_FisheyeLite.html
new file mode 100644
index 0000000..0935d10
--- /dev/null
+++ b/includes/js/dojox/widget/tests/test_FisheyeLite.html
@@ -0,0 +1,257 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+	<title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title>
+	<style type="text/css">
+
+	    body, html { margin:0; padding:0; width:100%;
+			font-family:Arial,sans-serif;
+		}
+		a { letter-spacing:0.1em; }
+		#list {
+			position:absolute; left:0px; cursor:pointer;
+		}
+		#container { margin:0 auto; width:400px; }
+		#list ul {
+			width:175px;
+			list-style-type:none;
+		}
+		.fisheyeTarget {
+			font-weight:bold;
+			font-size:19px;
+		}
+		#container li {
+			text-align:right;
+			padding-bottom:12px;
+		}
+		.ilk {
+			border-top:1px solid #999;
+			color:#666;
+			font:14px Arial,sans-serif;
+		}
+		#inlineList li {
+			margin-top:20px;
+			margin-bottom:20px;
+			padding:20px;
+			border:2px solid #ededed;
+			display:inline;
+			background:#fff;
+		}
+		
+		#lineHeightTest {
+			text-align:center;
+			position:relative;
+			overflow:visible;
+		}
+		span.line {
+			margin:10px;
+			padding:3px;
+			line-height:22px;
+			font:10px Arial,sans-serif;
+			display:block;
+		}
+		.imgBounce {
+			padding:0;
+			width:35px; height:35px;
+			vertical-align:middle;
+			position:relative;
+			top:0;
+		}
+	</style>
+	<script type="text/javascript">
+		var djConfig = { isDebug:true, parseOnLoad:true };
+	</script>
+	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
+	<script type="text/javascript" src="../FisheyeLite.js"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dojox.widget.FisheyeLite");
+		dojo.addOnLoad(function(){
+			
+			// turn li's in this page into fisheye items, presumtiously:	
+			dojo.query("li.bounce").forEach(function(n){
+				new dojox.widget.FisheyeLite({ },n);
+			});
+
+			dojo.query("span.line").forEach(function(n){
+				// make a widget from each of the lines in the lineHeightTest
+				new dojox.widget.FisheyeLite({
+					properties: {
+						fontSize:1.75
+					},
+					easeOut: dojox.fx.easing.backInOut,
+					durationOut: 500
+				},n);
+			}).connect("onclick",function(e){
+				// you can still access the onclick of the real node
+				alert(e.target.innerHTML);
+			});
+
+			dojo.query("a").forEach(function(n){
+				// all the anchorhs get a little letter spacing love
+				new dojox.widget.FisheyeLite({
+					properties:{
+						fontSize:1.15,
+						letterSpacing:2.85
+					}
+				},n);
+			// stop anchors from doing _anything_	
+			}).connect("onclick",dojo,"stopEvent");
+
+			dojo.query(".imgBounce").forEach(function(n){
+				// all the images need a width and a height (well, not need,
+				// but to scale you do)
+				new dojox.widget.FisheyeLite({
+					properties: {
+						height:1.75,
+						width:1.75
+					}
+				},n);
+			});
+
+			// 
+			var vv = 0;
+			var r = dijit.registry.byClass("dojox.widget.FisheyeLite")._hash;
+			for(var l in r){
+				vv++;
+			}
+			// a few in markup, mostly from the query()'ies:
+			console.log("fisheyes on this page: ", vv);
+
+		});		
+	</script>
+    </head>
+    <body class="tundra">
+		<div id="container">
+			
+			<div id="list">
+				<ul>
+					<li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
+					<li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
+					<li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li>
+					<li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
+					<li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
+					<li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li>
+					<li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li>
+					<li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li>
+				</ul>
+			</div>
+		
+			<h2>A paragraph: (with links)</h2>
+		
+				<p>
+				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
+				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
+				magna. Sed vitae risus.
+				</p>
+
+			<h3>read the fine print:</h3>
+				
+				<p>
+					<input type="button" onclick="dijit.byId('l1').show()" value="show first" />
+					<input type="button" onclick="dijit.byId('l1').hide()" value="hide first" />
+					<input type="button" onclick="dijit.byId('l3').show()" value="show third" />
+					<input type="button" onclick="dijit.byId('l3').hide()" value="hide third" />					
+				</p>
+
+				<div id="lineHeightTest">
+					<span id="l1" class="line">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</span>
+					<span class="line">imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer</span>
+					<span id="l3" class="line">lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean</span>
+					<span class="line">id mi in massa bibendum suscipit. Integer eros. Nullam suscipit</span>
+					<span id="l5" class="line">mauris. In pellentesque. Mauris ipsum est, pharetra semper,</span>
+					<span class="line">pharetra in, viverra quis, tellus. Etiam purus.</span>
+				</div>
+
+				<p>
+				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
+				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
+				magna. Sed vitae risus.
+				</p>
+				<p>
+				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
+				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
+				magna. Sed vitae risus.
+				</p>
+				<p>
+				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
+				semper iaculis.  Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum
+				magna. Sed vitae risus.
+				</p>
+				<p>
+				Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+				Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla
+				facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
+				semper iaculis.  Sed molestie tortor at ipsum. 
+				</p>
+				<h3>another list: (no target, or ilk)</h3>
+				<div style="height:125px; position:relative;">
+					<div style="position:absolute; width:600px;">
+						<ul id="inlineList">
+							<li class="bounce">Foo</li>
+							<li class="bounce">Bar</li>
+							<li class="bounce">Baz</li>
+							<li class="bounce">Bam</li>
+						</ul>	
+					</div>
+				</div>
+				
+				<h3>oh right, Images:</h3>
+				
+				<div style="position:relative; height:60px;"><div style="position:absolute">
+					<img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
+					<img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/>
+					<img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/>
+					<img src="images/fisheye_4.png" class="imgBounce" />
+					<img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/>
+					<img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/>
+					<img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
+				</div></div>
+				
+				<div style="position:relative; float:left; width:1px; left:-75px; top:0;">
+					<img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/><br>
+					<img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br>
+					<img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br>
+					<img src="images/fisheye_4.png" class="imgBounce" /><br>
+					<img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br>
+					<img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br>
+					<img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/>
+				</div>
+				
+				<p dojoType="dojox.widget.FisheyeLite"
+				   properties="{ padding:1.55 }"
+				   style="padding:12px; text-align:justify;">
+					
+				Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+				imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
+				lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
+				id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
+				mauris. In pellentesque. Mauris ipsum est, pharetra semper,
+				pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
+				tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
+				elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
+				ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
+				pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
+				massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
+				nec est. Aenean id risus blandit tortor pharetra congue.
+				Suspendisse pulvinar.
+				</p>
+				
+				<p>the end</p>
+
+		</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/widget/tests/test_FisheyeLite.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2