summaryrefslogtreecommitdiff
path: root/includes/js/dojox/gfx/demos/roundedPane.html
diff options
context:
space:
mode:
Diffstat (limited to 'includes/js/dojox/gfx/demos/roundedPane.html')
-rw-r--r--includes/js/dojox/gfx/demos/roundedPane.html191
1 files changed, 191 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/demos/roundedPane.html b/includes/js/dojox/gfx/demos/roundedPane.html
new file mode 100644
index 0000000..4abb775
--- /dev/null
+++ b/includes/js/dojox/gfx/demos/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>