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/gfx/demos/tooltip.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
1 files changed, 238 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/demos/tooltip.html b/includes/js/dojox/gfx/demos/tooltip.html
new file mode 100644
index 0000000..96bb694
--- /dev/null
+++ b/includes/js/dojox/gfx/demos/tooltip.html
@@ -0,0 +1,238 @@
+<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+	<title>A Sample ToolTip using dijit and dojox.gfx</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<style type="text/css">
+		@import "../../../dojo/resources/dojo.css";
+		@import "../../../dijit/tests/css/dijitTests.css";
+		@import "../../../dijit/themes/tundra/tundra.css";
+		.tooltipBody {
+			color:#fff;
+		}
+	</style>
+	<!--
+	The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
+	<script type="text/javascript" src="Silverlight.js"></script>
+	-->
+	<script type="text/javascript" djConfig="parseOnLoad:true, isDebug:true" src="../../../dojo/dojo.js"></script>
+	<script type="text/javascript">
+		dojo.require("dijit.form.Button");
+	
+		dojo.require("dojox.gfx");
+		dojo.require("dojox.gfx.move");
+		dojo.require("dijit._Widget"); dojo.require("dijit._Templated");
+		
+		dojo.declare("demo.Tooltip",[dijit._Widget,dijit._Templated],{
+			
+			// attachId: String|DomNode?
+			// 		the Id or domNode to attach this tooltip to
+			attachId:"",
+
+			// attachHover: Boolean
+			// 		disable hover behavior for the target
+			attachHover:true,
+
+			// attachParent: Boolean
+			//		automatically attach to our parentnode rather than byId or query
+			attachParent:false,
+
+			// attachQuery: String?
+			//		an optional selector query to attach this tooltip to
+			attachQuery:"",
+
+			// attachScope: String|DomNode?
+			//		and optional scope to run the query against, passed as the
+			//		second arg to dojo.query()
+			queryScope:"",
+
+			// hideDelay: Int
+			// 		time in my to delay automatically closing the node
+			hideDelay: 123, // ms
+
+			// persists: Boolean
+			//		if true, the node will stay visible until explicitly closed
+			//		via _hide() or click on closeIcon
+			persists:false,
+			
+			templateString:
+				'<div class="foo">'
+					+'<div style="position:relative;">'
+						+'<div dojoAttachPoint="surfaceNode"></div>'
+						+'<div class="tooltipBody" dojoAttachPoint="containerNode"></div>'
+					+'</div>'
+				+'</div>',
+			
+			postCreate:function(){
+				// call _Widget postCreate first
+				this.inherited(arguments);
+				// gfx version of "_Templated" idea:
+				this._initSurface();
+				
+				if(this.attachParent){
+					// over-ride and reuse attachId as domNode from now on
+					this.attachId = this.domNode.parentNode;
+				}
+				if(this.attachId){
+					// domNode again. setup connections
+					this.attachId = dojo.byId(this.attachId);
+					if(this.attachHover){
+						this.connect(this.attachId,"onmouseenter","_show");
+					}
+					if(!this.persists){
+						this.connect(this.attachId,"onmouseleave","_initHide");
+					}
+				}else if(this.attachQuery){
+					// setup connections via dojo.query for multi-tooltips
+					var nl = dojo.query(this.attachQuery,this.queryScope);
+					if(this.attachHover){ nl.connect("onmouseenter",this,"_show") }
+					if(!this.persists){ nl.connect("onmouseleave",this,"_initHide") }
+				}
+				// place the tooltip			
+				dojo.body().appendChild(this.domNode);
+				dojo.style(this.domNode,{
+					position:"absolute"
+				});
+				// could do this in css:
+				dojo.style(this.containerNode,{
+					position:"absolute",
+					top:"15px",
+					left:"12px",
+					height:"83px",
+					width:"190px"
+				});
+				// setup our animations
+				this._hideAnim = dojo.fadeOut({ node:this.domNode, duration:150 });
+				this._showAnim = dojo.fadeIn({ node:this.domNode, duration:75 });
+				this.connect(this._hideAnim,"onEnd","_postHide");
+				if(!this.persists){
+					this.connect(this.domNode,"onmouseleave","_initHide");
+				}
+				// hide quickly
+				this._postHide();
+			},
+			
+			_initHide: function(e){
+				// summary: start the timer for the hideDelay
+				if(!this.persists && this.hideDelay){
+					this._delay = setTimeout(dojo.hitch(this,"_hide",e||null),this.hideDelay);
+				}
+			},
+			
+			_clearDelay: function(){
+				// summary: clear our hide delay timeout
+				if(this._delay){ clearTimeout(this._delay); }
+			},
+			
+			_show: function(e){
+				// summary: show the widget
+				this._clearDelay();
+				var pos = dojo.coords(e.target || this.attachId,true)
+				// we need to more accurately position the domNode:
+				dojo.style(this.domNode,{
+					top: pos.y - (pos.h / 2) - 50,
+					left: pos.x + pos.w - 25,
+					display:"block"
+				});
+				dojo.fadeIn({ node: this.domNode, duration:75 }).play();
+			},
+			
+			_hide: function(e){
+				// summary: hide the tooltip
+				this._hideAnim.play();
+			},
+			
+			_postHide: function(){
+				// summary: after hide animation cleanup
+				dojo.style(this.domNode,"display","none");
+			},
+			
+			_initSurface:function(){
+				// made generally from an SVG file:
+				this.surface = dojox.gfx.createSurface(this.surfaceNode,220,120);
+				this.tooltip = this.surface.createGroup();
+				this.tooltip.createPath("M213,101.072c0,6.675-5.411,12.086-12.086,12.086H13.586 c-6.675,0-12.086-5.411-12.086-12.086V21.004c0-6.675,5.411-12.086,12.086-12.086h187.328c6.675,0,12.086,5.411,12.086,12.086 V101.072z")
+					.setFill("rgba(0,0,0,0.25)");
+				
+				this.tooltip.createPath("M211.5,97.418c0,6.627-5.373,12-12,12 h-186c-6.627,0-12-5.373-12-12v-79.5c0-6.627,5.373-12,12-12h186c6.627,0,12,5.373,12,12V97.418z")
+					.setStroke({ width:2, color:"#FFF" })
+					.setFill("rgba(0,0,0,0.5)")
+					.connect("onmouseover",dojo.hitch(this,"_clearDelay"));
+				
+				if(this.persists){
+					// make the close icon
+					this._toolButton = this.surface.createGroup();
+					this._toolButton.createEllipse({ cx:207.25, cy:12.32, rx: 7.866, ry: 7.099 })
+						.setFill("#ededed");
+					this._toolButton.createCircle({ cx:207.25, cy: 9.25, r:8.25 })
+						.setStroke({ width:2, color:"#FFF" })
+						.setFill("#000")
+					;
+					this._toolButton.connect("onclick",dojo.hitch(this,"_hide"));	
+					// the X	
+					this._toolButton.createLine({ x1:203.618, y1:5.04, x2: 210.89, y2:12.979 })
+						.setStroke({ width:2, color:"#d6d6d6" });
+					this._toolButton.createLine({ x1:203.539, y1:12.979, x2: 210.89, y2:5.04 })
+						.setStroke({ width:2, color:"#d6d6d6" });
+				}
+			}	
+		});
+	</script>
+	
+</head>
+<body class="tundra">
+
+	<h1>dojox.gfx: A Sample tooltip</h1>
+
+	<ul style="width:150px; border:2px solid #ededed; cursor:pointer">
+		
+	
+		<!-- you can put any content you want in there -->
+		<li id="warn2">
+			Tooltip + Button
+			<div attachId="warn2" id="warn2tt" dojoType="demo.Tooltip"><p style="margin-top:0">Canvas renderer doesn't implement event handling.
+				<button dojoType="dijit.form.Button">
+					Button
+					<script type="dojo/method" event="onClick">
+						alert(" woo hoo! ");
+						dijit.byId("warn2tt")._hide();
+					</script>
+				</button>
+			</p></div>
+		</li>
+
+		<!-- a simple tooltip -->
+		<li id="warn1">
+			Hover trigger / persists
+			<div persists="true" attachId="warn1" dojoType="demo.Tooltip">Canvas renderer doesn't implement event handling.</div>
+		</li>
+
+		<!-- these get the same tooltip from the attachQuery=".multitip" below -->
+		<li class="multitip">MultiTip trigger 1</li>
+		<li>I do nothing</li>
+		<li class="multitip">Trigger two</li>
+
+		<li><a href="#" onclick="dijit.byId('nohover')._show(arguments[0])">show this way
+			<label dojoType="demo.Tooltip" attachParent="true" attachHover="false" id="nohover">some text</label>
+			</a>	
+		</li>
+
+		<!-- attachParent makes the tooltip look for domNode.parentNode before moving to body() -->
+		<li>
+			Parent Attached Tooltip
+			<div attachParent="true" persists="true" dojoType="demo.Tooltip">
+				<form id="fooForm">
+					<p style="margin-top:0;">
+					Name:<br> <input type="text" name="username" style="border:1px solid #ededed" /><br>
+					Pass:<br> <input type="password" name="password" style="border:1px solid #ededed" />
+					</p>
+				</form>
+			</div>
+		</li>
+
+	</ul>
+
+	<!-- attach a single tooltip message to a number of nodes at once -->
+	<div attachQuery=".multitip" dojoType="demo.Tooltip">Canvas renderer doesn't implement event handling. (shared tooltip)</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/gfx/demos/tooltip.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2