+++ /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