StratifiedJS waitfor/and

by John Schulz

HTML

<script src="http://code.onilabs.com/0.9.2/oni-apollo.js"></script>
<script type="text/sjs">

    var button = document.getElementById("button");
    waitforEvent(button, "click");
    waitfor {
        animate("red_box", 10);
    }
    and {
        animate("green_box", 30);
    }
    print("all done.");
    
    function print(s) {
        document.getElementById("output").innerHTML += s + " ";
    }
 
    function waitforEvent(elem, event) 
    {
        try {
            waitfor(rv) {
                var r = resume;
                if (elem.addEventListener) elem.addEventListener(event, r, true);
                else elem.attachEvent("on"+event, r);
            }
        }
        finally {
            if (elem.removeEventListener) elem.removeEventListener(event, r, true);
            else elem.detachEvent("on"+event, r);
        }
        return rv;
    }
 
    function animate(id, delay) 
    {
        var elem = document.getElementById(id);

        for (var x=0; x<400; ++x) {
            elem.style.left = x+'px';
            hold(delay);
        }
        print(id+" done...");
    }
</script>
<div class="demo" style="width:420px;">
    <button id="button">Run animation</button> 
    <div style="position:relative; width:20px; height:20px;background-color:red;" id="red_box"></div> 
    <div style="position:relative; width:20px; height:20px;background-color:green;"id="green_box"></div> 
    <div id="output">&nbsp;</div> 
</div>

CSS

.demo { background-color: #FCC; }