--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>dojox.layout.SizingPane</title>
+
+ <script type="text/javascript" src="../../../dojo/dojo.js"></script>
+ <script type="text/javascript">
+ dojo.require("dijit.dijit");
+ dojo.require("dojo.fx");
+ </script>
+ <style type="text/css">
+ @import "../../../dojo/resources/dojo.css";
+ @import "../../../dijit/themes/dijit.css";
+ @import "../../../dijit/themes/tundra/tundra.css";
+ @import "../../../dijit/tests/css/dijitTests.css";
+
+ body { background:#ededed; color:#666; }
+
+ #nav {
+ position:absolute;
+ top:100px;
+ left:10px;
+ width:200px;
+ -moz-border-radius:8pt 8pt;
+ background:#fff;
+ border:2px solid #ccc;
+ }
+
+ #box1 {
+ overflow:hidden;
+ position:absolute;
+ display:block;
+ width:25px;
+ height:25px;
+ -moz-border-radius:8pt 8pt;
+ radius:8pt;
+ -webkit-border-radius:8pt 8pt;
+ background:#fff;
+ border:2px solid #ccc;
+ padding:7px;
+ }
+
+ </style>
+ <script>
+ var animationMethod = "chain"; // || combine
+ var _showing = false;
+ var animG, offsetW, offsetH = null;
+ var box1 = null;
+ var boxMixin = {
+ startWidth: 25,
+ startHeight: 25,
+ endWidth: 320,
+ endHeight: 320,
+ duration: 300
+ };
+
+ dojo.addOnLoad(function() {
+ box1 = dojo.byId('box1');
+ centerNode(box1);
+ dojo.connect(box1,"onmouseover",null,"show");
+ dojo.connect(box1,"onmouseout",null,"hideCheck");
+ //dojo.connect(box1,"onmouseout",null,"hideCheck");
+ //dojo.connect(but1,"onclick",null,"show");
+ });
+
+ function hideCheck(node) {
+ if (_showing) {
+ setTimeout(function(){hide('box1');},125);
+ }
+ }
+
+ function centerNode(node) {
+ var viewport = dijit.getViewport();
+ var mb = dojo.marginBox(node);
+ var style = node.style;
+ offsetW = mb.w - style.width;
+ offsetH = mb.h - style.height;
+ style.left = (viewport.l + (viewport.w - mb.w)/2) + "px";
+ style.top = (viewport.t + (viewport.h - mb.h)/2) + "px";
+ }
+
+ function doUnderlay() {
+ console.debug('make underlay');
+
+ }
+
+ function show() {
+ if (_showing) { return; }
+ if (animG && animG.status == "playing") { animG.stop(); }
+ _showing = true;
+ var viewport = dijit.getViewport();
+
+ var newLeft = (viewport.l + (viewport.w - boxMixin.endWidth)/2);
+ var newTop = (viewport.t + (viewport.h - boxMixin.endHeight)/2);
+
+ var style = box1.style;
+ var anim1 = dojo.animateProperty({
+ node: box1,
+ duration: boxMixin.duration/2,
+ properties: {
+ width: { /* start: boxMixin.startWidth, */ end: boxMixin.endWidth, unit:"px" },
+ left: { end: newLeft, unit:"px" }
+ },
+ beforeBegin: doUnderlay()
+ });
+ var anim2 = dojo.animateProperty({
+ node: box1,
+ duration: boxMixin.duration/2,
+ properties: {
+ height: { /*start: boxMixin.startHeight, */ end: boxMixin.endHeight, unit:"px" },
+ top: { end: newTop, unit: "px" }
+ },
+ onEnd: function() { _showing = true; }
+
+ });
+ animG = dojo.fx[animationMethod]([anim1,anim2]).play();
+ // chain:
+
+ // animate width / left position
+ // animate height / top position
+ // onend: fadeIn content?
+ }
+
+ function hide(node) {
+ if (!_showing) return;
+ if (animG && animG.status() == "playing") { animG.stop(); }
+
+ var viewport = dijit.getViewport();
+ var newLeft = (viewport.l + (viewport.w - boxMixin.startWidth)/2);
+ var newTop = (viewport.t + (viewport.h - boxMixin.startHeight)/2);
+
+ var style = node.style;
+ var anim1 = dojo.animateProperty({
+ node: box1,
+ duration: boxMixin.duration/2,
+ properties: {
+ width: { end: boxMixin.startWidth, unit:"px" },
+ left: { end: newLeft, unit:"px" }
+ }
+ });
+ var anim2 = dojo.animateProperty({
+ node: box1,
+ duration: boxMixin.duration/2,
+ properties: {
+ height: { end: boxMixin.startHeight, unit:"px" },
+ top: { end: newTop, unit: "px" }
+ },
+ onEnd: function() { _showing = false; }
+ });
+ // if we chain, do anim2 first [because height/top is how anim2 in show() ends]
+ animG = dojo.fx[animationMethod]([anim2,anim1]).play();
+ }
+ </script>
+
+</head>
+<body class="tundra">
+
+ <h1 class="testTitle">dojox.layout.SizingPane</h1>
+
+ <p>This is simply a test / example. There is no <i>real</i> dojox.layout.SizingPane, but this code
+ should/might become part of a dojox.fx.toggle class ... it's just "neat", isn't it?</p>
+
+ <div id="box1">
+ lorem. lorem. lorem.
+ </div>
+
+
+</body>
+</html>
projects / eow / blobdiff