--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <title>Testing dojo.fx</title>
+ <script type="text/javascript" src="../dojo.js" djConfig="isDebug: true"></script>
+ <script type="text/javascript">
+ dojo.require("doh.runner");
+ dojo.require("dojo.fx");
+
+ dojo.addOnLoad(function(){
+ doh.register("t",
+ [
+ function slideTo(t){
+ var s = dojo.fx.slideTo({
+ node: "foo",
+ duration: 500,
+ left: 500,
+ top: 50
+ }).play();
+ var d = new doh.Deferred();
+ dojo.connect(s, "onEnd", function(){
+ doh.is(dojo.style("foo", "left"), 500);
+ doh.is(dojo.style("foo", "top"), 50);
+ with(dojo.byId("foo").style){
+ position = left = top = "";
+ }
+ d.callback(true);
+ });
+ s.play();
+ return d;
+ },
+
+ function wipeOut(t){
+ dojo.byId("foo").style.height = "";
+ var d = new doh.Deferred();
+ var s = dojo.fx.wipeOut({
+ node: "foo",
+ onEnd: function(){
+ doh.t(dojo.style("foo", "height") < 5);
+ d.callback(true);
+ }
+ }).play();
+ return d;
+ },
+
+ function wipeIn(t){
+ var d = new doh.Deferred();
+ setTimeout(function(){
+ dojo.fx.wipeIn({
+ node: "foo",
+ onEnd: function(){
+ console.debug(dojo.style("foo", "height"));
+ doh.t(dojo.style("foo", "height") > 10);
+ d.callback(true);
+ }
+ }).play();
+ }, 10);
+ return d;
+ },
+
+ {
+ name: "chain",
+ timeout: 1500,
+ runTest: function(t){
+ dojo.byId("foo").style.height = "0px";
+ var d = new doh.Deferred();
+ var w = dojo.fx.wipeIn({
+ node: "foo",
+ duration: 500
+ });
+ var f = dojo.fadeOut({
+ node: "foo",
+ duration: 500
+ });
+ var a = dojo.fx.chain([w,f]);
+ dojo.connect(a, "onEnd", function(){
+ doh.t((w.status()=="stopped"&&f.status()=="stopped"));
+ d.callback(true);
+ });
+ a.play();
+ return d;
+ }
+ },
+
+ {
+ name: "combine",
+ timeout: 1500,
+ runTest: function(t){
+ dojo.byId("foo").style.height = "0px";
+ var d = new doh.Deferred();
+ var w = dojo.fx.wipeIn({
+ node: "foo",
+ duration: 500
+ });
+ var f = dojo.fadeIn({
+ node: "foo",
+ duration: 1000
+ });
+ var a = dojo.fx.combine([w,f]);
+ dojo.connect(a, "onEnd", function(){
+ doh.t((w.status()=="stopped"&&f.status()=="stopped"));
+ d.callback(true);
+ });
+ a.play();
+ return d;
+ }
+ },
+ {
+ name:"combineBeforeBegin",
+ timeout:1500,
+ runTest: function(t){
+ var d = new doh.Deferred();
+ var a = dojo.fadeOut({ node:"foo2", duration:400 });
+ var b = dojo.fadeIn({ node:"foo2", duration:400 });
+ var chain = dojo.fx.combine([a,b]);
+ dojo.connect(chain,"beforeBegin",dojo.hitch(d,"callback",true));
+ chain.play();
+ return d;
+ }
+
+ },
+ {
+ name:"delayTest",
+ timeout:2000,
+ runTest:function(t){
+ var d = new doh.Deferred();
+ var delay = 100;
+ var _anims = [];
+ var nodes = ["a","b","c","d"];
+ dojo.forEach(nodes,function(n){
+ _anims.push(dojo.fadeOut({ node:n, duration:100, delay: delay += 100 }));
+ });
+ var a = dojo.fx.combine(_anims);
+ var timer = (new Date()).getTime();
+ dojo.connect(a,"onEnd",function(){
+ console.warn("delayTest running time:", (new Date()).getTime() - timer, "ms, expected:", a.duration, "ms");
+ d.callback(true);
+ });
+ a.play();
+ return d;
+ }
+ },
+ {
+ name:"delayTestChain",
+ timeout:2200,
+ runTest:function(t){
+ var d = new doh.Deferred();
+ var delay = 100;
+ var _anims = [];
+ var nodes = ["a","b","c","d"];
+ dojo.forEach(nodes,function(n){
+ _anims.push(dojo.fadeIn({ node:n, duration:100, delay: delay += 100 }));
+ });
+ var a = dojo.fx.chain(_anims);
+ var timer = (new Date()).getTime();
+ dojo.connect(a,"onEnd",function(){
+ console.warn("delayTestChain running time:", (new Date()).getTime() - timer, "ms, expected:", a.duration, "ms");
+ d.callback(true);
+ });
+ a.play();
+ return d;
+ }
+ },
+ {
+ name:"combineOnEnd",
+ timeout:1500,
+ runTest: function(t){
+ var d = new doh.Deferred();
+ var a = dojo.fadeOut({ node:"foo2", duration:400 });
+ var b = dojo.fadeIn({ node:"foo2", duration:400 });
+ var combine = dojo.fx.combine([a,b]);
+ dojo.connect(combine,"onEnd",dojo.hitch(d,"callback",true));
+ combine.play();
+ return d;
+ }
+
+ },
+ {
+ name:"combineOnPlay",
+ timeout:1500,
+ runTest: function(t){
+ var d = new doh.Deferred();
+ var a = dojo.fadeOut({ node:"foo2", duration:400 });
+ var b = dojo.fadeIn({ node:"foo2", duration:400 });
+ var combine = dojo.fx.combine([a,b]);
+ dojo.connect(combine,"onPlay",dojo.hitch(d,"callback",true));
+ combine.play();
+ return d;
+ }
+
+ },
+ {
+ name:"chainOnEnd",
+ timeout:1500,
+ runTest: function(t){
+ var d = new doh.Deferred();
+ var a = dojo.fadeOut({ node:"foo2", duration:400 });
+ var b = dojo.fadeIn({ node:"foo2", duration:400 });
+ var chain = dojo.fx.chain([a,b]);
+ dojo.connect(chain,"onEnd",dojo.hitch(d,"callback",true));
+ chain.play();
+ return d;
+ }
+
+ },
+ {
+ name:"chainOnPlay",
+ timeout:1500,
+ runTest: function(t){
+
+ var d = new doh.Deferred();
+ var a = dojo.fadeOut({ node:"foo2", duration:200 });
+ var b = dojo.fadeIn({ node:"foo2", duration:200 });
+ var chain = dojo.fx.chain([a,b]);
+ dojo.connect(chain,"onPlay",dojo.hitch(d,"callback",true));
+ chain.play();
+ return d;
+ }
+
+ },
+
+ function Toggler(){
+ var d = new doh.Deferred();
+ var t = new dojo.fx.Toggler({
+ node: "foo",
+ hideDuration: 100,
+ hideFunc: dojo.fx.wipeOut,
+ showFunc: dojo.fx.wipeIn
+ });
+ t.hide();
+ setTimeout(function(){
+ var sa = t.show();
+ dojo.connect(sa, "onEnd", dojo.hitch(d, "callback", true));
+ }, 50);
+ return d;
+ }
+ ]
+ );
+ doh.run();
+ });
+ </script>
+ <style type="text/css">
+ @import "../resources/dojo.css";
+
+ body {
+ text-shadow: 0px 0px;
+ margin: 1em;
+ background-color: #DEDEDE;
+ }
+
+ .box {
+ color: #292929;
+ /* color: #424242; */
+ /* text-align: left; */
+ width: 300px;
+ border: 1px solid #BABABA;
+ background-color: white;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-left: 10px;
+ margin-bottom: 1em;
+ -o-border-radius: 10px;
+ -moz-border-radius: 12px;
+ -webkit-border-radius: 10px;
+ -webkit-box-shadow: 0px 3px 7px #adadad;
+ /* -opera-border-radius: 10px; */
+ border-radius: 10px;
+ -moz-box-sizing: border-box;
+ -opera-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -khtml-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+ /* position: absolute; */
+ }
+ </style>
+ </head>
+ <body>
+ <div class="box" id="a">a</div><div class="box" id="b">b</div>
+ <div class="box" id="c">c</div><div class="box" id="d">d</div>
+
+ <div id="foo" class="box">
+ <p>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+ semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
+ Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
+ facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
+ semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
+ magna. Sed vitae risus.
+ </p>
+ <p>
+ Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+ imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer
+ lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean
+ id mi in massa bibendum suscipit. Integer eros. Nullam suscipit
+ mauris. In pellentesque. Mauris ipsum est, pharetra semper,
+ pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas,
+ tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus
+ elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae
+ ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum,
+ pede purus imperdiet lacus, ut semper velit ante id metus. Praesent
+ massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam
+ nec est. Aenean id risus blandit tortor pharetra congue.
+ Suspendisse pulvinar.
+ </p>
+ </div>
+ <div id="foo2">foo2</div>
+ </body>
+</html>
projects / eow / blobdiff