+++ /dev/null
-<!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>
projects / eow / blobdiff