Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!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("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>