Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
--- a/master/examples/roundedPane.html
+++ b/master/examples/roundedPane.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+
+		<title>rounded skeleton page | The Dojo Toolkit</title>
+			
+		<script type="text/javascript" src="../../../dojo/dojo.js"
+				djConfig="parseOnLoad:true, isDebug:true"></script>
+
+		<script type="text/javascript">
+		
+			dojo.require("dijit.layout.ContentPane");
+			dojo.require("dijit._Templated");
+			dojo.require("dojox.gfx");
+			dojo.require("dojo.dnd.TimedMoveable");
+			
+			dojo.declare("my.RoundedContentPane",[dijit.layout.ContentPane,dijit._Templated],{
+				// radius: Integer
+				//		radius of the corners
+				radius:15,
+				// moveable: Boolean
+				// 		if true, the node is movable by either the containerNode, or an optional node
+				//		found by the handle attribute
+				moveable:false,
+				// handle: String
+				// 		a CSS3 selector query to match the handle for this node, scoped to this.domNode
+				handle:".handle",
+				
+				// template:
+				templateString:
+					'<div><div style="position:relative;">' +
+						'<div dojoAttachPoint="surfaceNode"></div>' +
+						'<div dojoAttachPoint="containerNode"></div>' +
+					'</div></div>',
+				
+				startup:function(){
+					
+					this.inherited(arguments);
+					this._initSurface();
+					dojo.style(this.surfaceNode,{
+						position:"absolute",
+						top:0,
+						left:0
+					});
+					
+					if(this.moveable){
+						this._mover = new dojo.dnd.TimedMoveable(this.domNode,{
+							handle: dojo.query(this.handle,this.domNode)[0] ||this.containerNode,
+							timeout:69
+						});
+					}
+			
+				},
+				
+				_initSurface: function(){
+			
+					var s = dojo.marginBox(this.domNode);
+					var stroke = 2;
+					
+					this.surface = dojox.gfx.createSurface(this.surfaceNode, s.w + stroke * 2, s.h + stroke * 2);
+					this.roundedShape = this.surface.createRect({
+							r: this.radius,
+							width: s.w,
+							height: s.h
+						})
+						.setFill([0, 0, 0, 0.5]) // black, 50% transparency
+						.setStroke({ color:[255,255,255,1], width:stroke }) // solid white
+					;
+					this.resize(s);
+					
+				},
+				
+				resize:function(size){
+					
+					if(!this.surface){ this._initSurfce(); }
+			
+					this.surface.setDimensions(size.w,size.h);
+					this.roundedShape.setShape({
+						width: size.w,
+						height: size.h
+					});
+			
+					var _offset = Math.floor(this.radius / 2);		
+					dojo.style(this.containerNode,{
+						color: "#fff",
+						position: "absolute",
+						overflow: "auto",
+						top: _offset + "px",
+						left: _offset + "px",
+						height: (size.h - _offset * 2) + "px",
+						width: (size.w - _offset * 2) + "px"
+					});
+					
+				}
+				
+			});
+		</script>
+			
+		<style type="text/css">
+			body { background:#ededed; }
+		</style>
+	
+    </head>
+    <body>
+		
+		<h1>Some gfx + ContentPane's</h1>
+
+		<div dojoType="my.RoundedContentPane" radius="55" title="Pane 2" style="width:200px; height:400px; float:right">
+			<h3>YO!</h3>
+			<p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p>
+		</div>
+
+		<div style="width:400px; height:200px;" dojoType="my.RoundedContentPane">
+			LOREM, ipsum, dollllllllllor:
+			.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}<p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p><p>.roundedContent {
+				padding: 31px;
+				font-family: 'Tahoma';
+				font-size: 12px;
+				color:#fff; 
+			}</p>
+			
+		</div>
+	
+	
+		<div radius="45" style="width:400px; height:200px;" moveable="true" dojoType="my.RoundedContentPane" handle=".myHandle">
+			<h4 class="myHandle" style="cursor:move; margin-top:0; border:1px solid #666">Moveable Handle</h4>
+			LOREM, ipsum, dollllllllllor:			
+		</div>
+	
+	
+		<div dojoType="my.RoundedContentPane" title="Pane 1" moveable="true" style="width:100px; height:100px;">
+			lorem ipsum (small moveable)
+		</div>		
+	
+    </body>
+</html>