| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| <html> | |
| <head> | |
| <title>index</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| function boo() { | |
| } | |
| boo(); | |
| define( | |
| "ibm/PaperSheet", | |
| [ "dojo", "dijit", "dojo/_base/array", "dijit/_WidgetBase", | |
| "dojox/mobile/Container", "dojo/NodeList-traverse" ], | |
| function(dojo, dijit, array, _WidgetBase, Container) { | |
| return dojo | |
| .declare( | |
| "ibm.PaperSheet", | |
| [ dijit._WidgetBase, dojox.mobile.Container ], | |
| { | |
| _sideMargin : 15, | |
| _topMargin : 20, | |
| _bottomMargin : 40, | |
| _bottomLeft : null, | |
| _bottomRight : null, | |
| _bottomCenter : null, | |
| _leftSide : null, | |
| _rightSide : null, | |
| constructor : function() { | |
| }, | |
| postMixInProperties : function() { | |
| }, | |
| postCreate : function() { | |
| dojo.style(this.domNode, | |
| "marginLeft", "auto"); | |
| dojo.style(this.domNode, | |
| "marginRight", "auto"); | |
| dojo.style(this.domNode, | |
| "marginBottom", "50px"); | |
| dojo.style(this.domNode, | |
| "position", "relative"); | |
| dojo.style(this.domNode, | |
| "backgroundColor", "white"); | |
| dojo | |
| .style(this.domNode, | |
| "backgroundImage", | |
| "-webkit-linear-gradient(bottom, #F0F0F0 40%, #FFFFFF 100%)"); | |
| this._createSides(); | |
| this._createBottom(); | |
| }, | |
| // react to the parent resizing | |
| resize : function() { | |
| array.forEach(this.getChildren(), | |
| function(child) { | |
| if (child.resize) { | |
| child.resize(); | |
| } | |
| }); | |
| var domNodeHeight = dojo | |
| .position(this.domNode).h; | |
| var screenSize = dojox.mobile | |
| .getScreenSize(); | |
| var containerWidth = screenSize.w | |
| - (2 * this._sideMargin); | |
| dojo.style(this.domNode, "width", | |
| containerWidth + "px"); | |
| dojo.style(this.domNode, "top", | |
| this._topMargin + "px"); | |
| var bottomWidth = Math.min(300, | |
| (containerWidth / 2) + 10); | |
| // bottom left | |
| dojo | |
| .style(this._bottomLeft, | |
| "width", | |
| bottomWidth + "px"); | |
| dojo.style(this._bottomLeft, | |
| "height", "26px"); | |
| dojo.style(this._bottomLeft, | |
| "left", "-10px"); | |
| dojo.style(this._bottomLeft, "top", | |
| domNodeHeight + "px"); | |
| // bottom right | |
| dojo.style(this._bottomRight, | |
| "height", "26px"); | |
| dojo | |
| .style(this._bottomRight, | |
| "width", | |
| bottomWidth + "px"); | |
| dojo.style(this._bottomRight, | |
| "position", "absolute"); | |
| dojo | |
| .style( | |
| this._bottomRight, | |
| "left", | |
| ((containerWidth - bottomWidth) + 10) | |
| + "px"); | |
| dojo | |
| .style(this._bottomRight, | |
| "top", | |
| domNodeHeight | |
| + "px"); | |
| // bottom center | |
| dojo.style(this._bottomCenter, | |
| "height", "26px"); | |
| dojo | |
| .style(this._bottomCenter, | |
| "top", | |
| domNodeHeight | |
| + "px"); | |
| dojo.style(this._bottomCenter, | |
| "left", (bottomWidth - 10) | |
| + "px"); | |
| dojo | |
| .style( | |
| this._bottomCenter, | |
| "width", | |
| (Math | |
| .max( | |
| 0, | |
| containerWidth | |
| + 20 | |
| - (2 * bottomWidth))) | |
| + "px"); | |
| // left | |
| dojo.style(this._leftSide, "width", | |
| "10px"); | |
| dojo.style(this._leftSide, | |
| "height", domNodeHeight | |
| + "px"); | |
| dojo.style(this._leftSide, "left", | |
| "-10px"); | |
| // right | |
| dojo.style(this._rightSide, | |
| "width", "10px"); | |
| dojo.style(this._rightSide, | |
| "height", domNodeHeight | |
| + "px"); | |
| dojo.style(this._rightSide, "left", | |
| containerWidth + "px"); | |
| }, | |
| _createBottom : function() { | |
| this._bottomLeft = dojo.create( | |
| "div", {}, this.domNode, | |
| "last"); | |
| dojo.style(this._bottomLeft, | |
| "position", "absolute"); | |
| // set background | |
| dojo | |
| .style( | |
| this._bottomLeft, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/left_bottom_shadow.png") | |
| + "')"); | |
| dojo.style(this._bottomLeft, | |
| "backgroundPosition", | |
| "top left"); | |
| dojo.style(this._bottomLeft, | |
| "backgroundRepeat", | |
| "no-repeat"); | |
| this._bottomCenter = dojo.create( | |
| "div", {}, this.domNode, | |
| "last"); | |
| dojo.style(this._bottomCenter, | |
| "position", "absolute"); | |
| dojo | |
| .style( | |
| this._bottomCenter, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/middle_bottom_shadow.png") | |
| + "')"); | |
| dojo | |
| .style( | |
| this._bottomCenter, | |
| "backgroundPosition", | |
| "top"); | |
| dojo.style(this._bottomCenter, | |
| "backgroundRepeat", | |
| "repeat-x"); | |
| this._bottomRight = dojo.create( | |
| "div", {}, this.domNode, | |
| "last"); | |
| dojo.style(this._bottomRight, | |
| "position", "absolute"); | |
| // set the shadow background | |
| dojo | |
| .style( | |
| this._bottomRight, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/right_bottom_shadow.png") | |
| + "')"); | |
| dojo.style(this._bottomRight, | |
| "backgroundPosition", | |
| "top right"); | |
| dojo.style(this._bottomRight, | |
| "backgroundRepeat", | |
| "no-repeat"); | |
| }, | |
| _createSides : function() { | |
| this._leftSide = dojo.create("div", | |
| {}, this.domNode, "first"); | |
| dojo.style(this._leftSide, | |
| "position", "absolute"); | |
| dojo.style(this._leftSide, "top", | |
| "0px"); | |
| // set background | |
| dojo | |
| .style( | |
| this._leftSide, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/left_shadow.png") | |
| + "')"); | |
| dojo.style(this._leftSide, | |
| "backgroundPosition", | |
| "top left"); | |
| this._rightSide = dojo.create( | |
| "div", {}, this.domNode, | |
| "last"); | |
| dojo.style(this._rightSide, | |
| "position", "absolute"); | |
| dojo.style(this._rightSide, "top", | |
| "0px"); | |
| // set background | |
| dojo | |
| .style( | |
| this._rightSide, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/right_shadow.png") | |
| + "')"); | |
| dojo.style(this._rightSide, | |
| "backgroundPosition", | |
| "top right"); | |
| } | |
| }); | |
| }); | |
| <!-- | |
| define( | |
| "ibm/PaperSheet", | |
| [ "dojo", "dijit", "dojo/_base/array", "dijit/_WidgetBase", | |
| "dojox/mobile/Container", "dojo/NodeList-traverse" ], | |
| function(dojo, dijit, array, _WidgetBase, Container) { | |
| return dojo | |
| .declare( | |
| "ibm.PaperSheet", | |
| [ dijit._WidgetBase, dojox.mobile.Container ], | |
| { | |
| _sideMargin : 15, | |
| _topMargin : 20, | |
| _bottomMargin : 40, | |
| _bottomLeft : null, | |
| _bottomRight : null, | |
| _bottomCenter : null, | |
| _leftSide : null, | |
| _rightSide : null, | |
| constructor : function() { | |
| }, | |
| postMixInProperties : function() { | |
| }, | |
| postCreate : function() { | |
| dojo.style(this.domNode, | |
| "marginLeft", "auto"); | |
| dojo.style(this.domNode, | |
| "marginRight", "auto"); | |
| dojo.style(this.domNode, | |
| "marginBottom", "50px"); | |
| dojo.style(this.domNode, | |
| "position", "relative"); | |
| dojo.style(this.domNode, | |
| "backgroundColor", "white"); | |
| dojo | |
| .style(this.domNode, | |
| "backgroundImage", | |
| "-webkit-linear-gradient(bottom, #F0F0F0 40%, #FFFFFF 100%)"); | |
| this._createSides(); | |
| this._createBottom(); | |
| }, | |
| // react to the parent resizing | |
| resize : function() { | |
| array.forEach(this.getChildren(), | |
| function(child) { | |
| if (child.resize) { | |
| child.resize(); | |
| } | |
| }); | |
| var domNodeHeight = dojo | |
| .position(this.domNode).h; | |
| var screenSize = dojox.mobile | |
| .getScreenSize(); | |
| var containerWidth = screenSize.w | |
| - (2 * this._sideMargin); | |
| dojo.style(this.domNode, "width", | |
| containerWidth + "px"); | |
| dojo.style(this.domNode, "top", | |
| this._topMargin + "px"); | |
| var bottomWidth = Math.min(300, | |
| (containerWidth / 2) + 10); | |
| // bottom left | |
| dojo | |
| .style(this._bottomLeft, | |
| "width", | |
| bottomWidth + "px"); | |
| dojo.style(this._bottomLeft, | |
| "height", "26px"); | |
| dojo.style(this._bottomLeft, | |
| "left", "-10px"); | |
| dojo.style(this._bottomLeft, "top", | |
| domNodeHeight + "px"); | |
| // bottom right | |
| dojo.style(this._bottomRight, | |
| "height", "26px"); | |
| dojo | |
| .style(this._bottomRight, | |
| "width", | |
| bottomWidth + "px"); | |
| dojo.style(this._bottomRight, | |
| "position", "absolute"); | |
| dojo | |
| .style( | |
| this._bottomRight, | |
| "left", | |
| ((containerWidth - bottomWidth) + 10) | |
| + "px"); | |
| dojo | |
| .style(this._bottomRight, | |
| "top", | |
| domNodeHeight | |
| + "px"); | |
| // bottom center | |
| dojo.style(this._bottomCenter, | |
| "height", "26px"); | |
| dojo | |
| .style(this._bottomCenter, | |
| "top", | |
| domNodeHeight | |
| + "px"); | |
| dojo.style(this._bottomCenter, | |
| "left", (bottomWidth - 10) | |
| + "px"); | |
| dojo | |
| .style( | |
| this._bottomCenter, | |
| "width", | |
| (Math | |
| .max( | |
| 0, | |
| containerWidth | |
| + 20 | |
| - (2 * bottomWidth))) | |
| + "px"); | |
| // left | |
| dojo.style(this._leftSide, "width", | |
| "10px"); | |
| dojo.style(this._leftSide, | |
| "height", domNodeHeight | |
| + "px"); | |
| dojo.style(this._leftSide, "left", | |
| "-10px"); | |
| // right | |
| dojo.style(this._rightSide, | |
| "width", "10px"); | |
| dojo.style(this._rightSide, | |
| "height", domNodeHeight | |
| + "px"); | |
| dojo.style(this._rightSide, "left", | |
| containerWidth + "px"); | |
| }, | |
| _createBottom : function() { | |
| this._bottomLeft = dojo.create( | |
| "div", {}, this.domNode, | |
| "last"); | |
| dojo.style(this._bottomLeft, | |
| "position", "absolute"); | |
| // set background | |
| dojo | |
| .style( | |
| this._bottomLeft, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/left_bottom_shadow.png") | |
| + "')"); | |
| dojo.style(this._bottomLeft, | |
| "backgroundPosition", | |
| "top left"); | |
| dojo.style(this._bottomLeft, | |
| "backgroundRepeat", | |
| "no-repeat"); | |
| this._bottomCenter = dojo.create( | |
| "div", {}, this.domNode, | |
| "last"); | |
| dojo.style(this._bottomCenter, | |
| "position", "absolute"); | |
| dojo | |
| .style( | |
| this._bottomCenter, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/middle_bottom_shadow.png") | |
| + "')"); | |
| dojo | |
| .style( | |
| this._bottomCenter, | |
| "backgroundPosition", | |
| "top"); | |
| dojo.style(this._bottomCenter, | |
| "backgroundRepeat", | |
| "repeat-x"); | |
| this._bottomRight = dojo.create( | |
| "div", {}, this.domNode, | |
| "last"); | |
| dojo.style(this._bottomRight, | |
| "position", "absolute"); | |
| // set the shadow background | |
| dojo | |
| .style( | |
| this._bottomRight, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/right_bottom_shadow.png") | |
| + "')"); | |
| dojo.style(this._bottomRight, | |
| "backgroundPosition", | |
| "top right"); | |
| dojo.style(this._bottomRight, | |
| "backgroundRepeat", | |
| "no-repeat"); | |
| }, | |
| _createSides : function() { | |
| this._leftSide = dojo.create("div", | |
| {}, this.domNode, "first"); | |
| dojo.style(this._leftSide, | |
| "position", "absolute"); | |
| dojo.style(this._leftSide, "top", | |
| "0px"); | |
| // set background | |
| dojo | |
| .style( | |
| this._leftSide, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/left_shadow.png") | |
| + "')"); | |
| dojo.style(this._leftSide, | |
| "backgroundPosition", | |
| "top left"); | |
| this._rightSide = dojo.create( | |
| "div", {}, this.domNode, | |
| "last"); | |
| dojo.style(this._rightSide, | |
| "position", "absolute"); | |
| dojo.style(this._rightSide, "top", | |
| "0px"); | |
| // set background | |
| dojo | |
| .style( | |
| this._rightSide, | |
| "backgroundImage", | |
| "url('" | |
| + require | |
| .toUrl("ibm/images/right_shadow.png") | |
| + "')"); | |
| dojo.style(this._rightSide, | |
| "backgroundPosition", | |
| "top right"); | |
| } | |
| }); | |
| }); | |
| //--> | |
| </script> | |
| </body> | |
| </html> |