diff options
Diffstat (limited to 'includes/js/dojox/fx/tests')
19 files changed, 2291 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/_animation.css b/includes/js/dojox/fx/tests/_animation.css new file mode 100644 index 0000000..efab455 --- /dev/null +++ b/includes/js/dojox/fx/tests/_animation.css @@ -0,0 +1,97 @@ +.testBox { + border:1px solid #333; + width:75px; + height:75px; +} +.absolutely { position:absolute; + top:0; left:0; +} +.floating { + float:left; +} +.wide { + width:200px; +} +.tall { + height:200px; +} +.tiny { + width:3px; + height:3px; +} +.black { + color:#fff; + background-color:#000; +} +.white { + color:#666; + background-color:#fff; +} +.green { + color:#000; + background-color:#eef; +} +.red { + color:#fff; + background-color:#ffe; +} +.blue { + color:#000; + background-color:#fef !important; +} +.baseFont { + line-height:14px; + font:12px Arial,sans-serif; + letter-spacing:0.1em; +} +.spacedVertical { + line-height:42px; +} +.spacedHorizontal { + letter-spacing:0.42em; +} +.fontSizeTest { + font:20px Arial,sans-serif; +} +.bigMargin { + margin:30px; +} +.noMargin { + margin:0; +} +.mediumMargin { + margin:15px; +} +.bigMarginLeft { + margin-left:150px; +} +.padded { + padding:3px; +} +.noPadding { + padding:0; +} +.topPadding { + padding-top:50px; +} +.bigPadding { + padding:30px; +} +.offsetSome { + top:50px; + left:75px; +} +.topLeft { + top:0; + left:0; +} +.bottomRight { + bottom:0; + right:0; +} +.bothAxis { + top:10px; + left:10px; + right:10px; + bottom:10px; +} diff --git a/includes/js/dojox/fx/tests/_animation.css.commented.css b/includes/js/dojox/fx/tests/_animation.css.commented.css new file mode 100644 index 0000000..ba01d03 --- /dev/null +++ b/includes/js/dojox/fx/tests/_animation.css.commented.css @@ -0,0 +1,113 @@ +.testBox { + border:1px solid #333; + width:75px; + height:75px; +} +.absolutely { position:absolute; + top:0; left:0; +} +.floating { + float:left; +} +.wide { + width:200px; +} +.tall { + height:200px; +} +.tiny { + width:3px; + height:3px; +} + + +.black { + color:#fff; + background-color:#000; +} + +.white { + color:#666; + background-color:#fff; +} + +.green { + color:#000; + background-color:#eef; +} +.red { + color:#fff; + background-color:#ffe; +} +.blue { + color:#000; + background-color:#fef !important; +} + +/* font sizes */ +.baseFont { + line-height:14px; + font:12px Arial,sans-serif; + letter-spacing:0.1em; +} + +.spacedVertical { + line-height:42px; +} +.spacedHorizontal { + letter-spacing:0.42em; +} +.fontSizeTest { + font:20px Arial,sans-serif; +} + +/* margins */ +.bigMargin { + margin:30px; +} +.noMargin { + margin:0; +} +.mediumMargin { + margin:15px; +} +.bigMarginLeft { + margin-left:150px; +} + +/* padding */ +.padded { + padding:3px; +} +.noPadding { + padding:0; +} +.topPadding { + padding-top:50px; +} +.bigPadding { + padding:30px; +} + +/* positioning */ + +.offsetSome { + top:50px; + left:75px; +} + +.topLeft { + top:0; + left:0; +} +.bottomRight { + bottom:0; + right:0; +} + +.bothAxis { + top:10px; + left:10px; + right:10px; + bottom:10px; +} diff --git a/includes/js/dojox/fx/tests/example_Line.html b/includes/js/dojox/fx/tests/example_Line.html new file mode 100644 index 0000000..4177e96 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_Line.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>using a dojo._Line and dojo._Animation</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + #node { + position:absolute; + top:100px; left:100px; + width:400px; + height:400px; + padding:12px; + -moz-border-radius:5pt; + overflow:hidden; + border:1px solid #333; + } + </style> + <script type="text/javascript" + djConfig="parseOnLoad: true, isDebug:false" + src="../../../dojo/dojo.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojox.fx.easing"); + dojo.require("dojox.gfx"); + + var surface, shape, line, node; + dojo.addOnLoad(function(){ + // dojo._Line is just a simple class to hold some numbers, and return a given point + // on the line as a percentage, essentially + var _line = new dojo._Line(20,75); // a holder for the numbers 20 .. 75 + node = dojo.byId('node'); + + surface = dojox.gfx.createSurface(node,400,400); + shape = surface.createCircle({ cx: 200, cy: 200, r: 20 }) + .setFill([0,0,255]) + .setStroke({ color:[128,128,128], width: 1}); + + // so we just make a raw _Animation + var _anim = new dojo._Animation({ + // the id of the shape + node: node, + // some easing options + easing: dojox.fx.easing.easeInOut, + // our radius start and end values + curve:_line, + // call transform on the shape with the values + onAnimate: function(){ + shape.setShape({ r: arguments[0] }); + }, + duration:1200 // ms + // rate:100 // ms, so duration/rate iterations + }); + + + dojo.connect(_anim,"onEnd",function(){ + dojo.animateProperty({ + node: node, + duration:1000, + properties: { + left: { end: 300, unit:"px" } + }, + onEnd: function(){ + dojo.fadeOut({ node: node, duration:3000 }).play(); + } + }).play(500); + }); + _anim.play(2000); + }); + </script> +</head> +<body class="tundra"> + + <h1>an "animateProperty" for dojox.gfx</h1> + <div id="node"></div> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/example_backgroundPosition.html b/includes/js/dojox/fx/tests/example_backgroundPosition.html new file mode 100644 index 0000000..5011213 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_backgroundPosition.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Animated background position example | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></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"; + + #theNode { + background:#dedede url('images/longBg.png') 0px 0px; + padding:3px 10px 3px 10px; + border:1px solid #b7b7b7; + color:#666; + cursor:pointer; + } + + </style> + <script type="text/javascript"> + dojo.require("dojo.fx"); + var anim = null; + var init = function(){ + var node = dojo.byId('theNode'); + anim = new dojo._Animation({ + curve: new dojo._Line(0,-500), + duration: 3000, + onEnd: (function(){ anim.play(); }), // loop indefinately + onAnimate: function(){ + var str = Math.floor(parseInt(arguments[0]))+"px 0px"; + dojo.style(node,"backgroundPosition",str); + } + }); + + // dojo.query "magic" + dojo.query("#theNode") + .connect("onmouseenter",anim,"play") + .connect("onmouseout",anim,"pause") + .connect("onclick",function(){ + alert('clicked the button'); + }); + }; + dojo.addOnLoad(init); + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojo._Animation test:</h1> + + <p> + <div class="dijitInline" id="theNode">Test</div> + </p> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/example_dojoAnimations.html b/includes/js/dojox/fx/tests/example_dojoAnimations.html new file mode 100644 index 0000000..2365ea1 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_dojoAnimations.html @@ -0,0 +1,442 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + + <title>skeleton page | The Dojo Toolkit</title> + + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + body, html { + width:100%; + margin:0; + padding:0; + font:11pt Arial,sans-serif; + color:#666; + } + + #container { + width:760px; + margin:0 auto; + } + + div.testBox { + border:2px solid #ededed; + background:#fefefe; + height:200px; + margin:0 auto; + position:relative; + } + + div.testItem { + position:absolute; + background:#fff url('images/averycutedog.jpg') no-repeat center center; + border:2px solid #f0f0f0; + margin:0; + padding:0; + height:175px; + width:175px; + top:10px; + left:10px; + } + + .altItem { + position:absolute; + top:10px; + left:295px; + } + + .pad { + padding:4px; + } + + .trick { + height:175px; + width:175px; + visibility:hidden; + } + .odd, + .even { margin-left:1px; } + + #lorem { + position:absolute; + top:10px; + left:15px; + font:8pt Arial,sans-serif; + width:175px; + padding:4px; + background:#ededed; + } + + #fisheyeList { + width:95px; + background:#666; + padding:7px; + } + #fisheyeList li { + color:#fff; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad:true, isDebug:true"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Button"); // for the tests + + // core animations: + dojo.require("dojo.fx"); + + // provides dojo.query() animations: + dojo.require("dojo.NodeList-fx"); + dojo.require("dojox.fx.ext-dojo.NodeList"); + + // core dojox package: + dojo.require("dojox.fx"); + dojo.require("dojox.fx._core"); // _Line + + // addons: + dojo.require("dojox.fx.style"); + dojo.require("dojox.fx.easing"); + + // examples inline: + dojo.require("dojox.widget.FisheyeLite"); + </script> + +</head> +<body class="tundra"> + <div id="container"> + + <h2>Dojo FX: base animations</h2> + + <button dojoType="dijit.form.Button"> + Fade In/Out + <script type="dojo/method" event="onClick"> + dojo.fadeOut({ node:"testSlide", + onEnd:function(){ + dojo.fadeIn({ node:"testSlide", delay:300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + animateProperty: height + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"testSlide", + properties:{ height:{ end:1, unit:"px" } }, + onEnd:function(){ + dojo.animateProperty({ + node:"testSlide", + delay:300, + properties:{ height:{ end:175, unit:"px" } } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + animateProperty: width + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"testSlide", + properties:{ width:{ end:1, unit:"px" } }, + onEnd:function(){ + dojo.animateProperty({ + node:"testSlide", + delay:300, + properties:{ width:{ end:175, unit:"px" } } + }).play(); + } + }).play(); + </script> + </button> + + <div class="testBox" id="testSlideWrapper"> + <div class="testItem" id="testSlide"> + <div class="trick"> </div> + </div> + </div> + + + <h2>Animate CSS Properties:</h2> + + <button dojoType="dijit.form.Button"> + marginLeft + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + marginLeft:{ end:322, unit:"px", start:1 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + marginLeft:{ end:1, start:322, unit:"px" } + }, + delay:300 + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + left / paddingTop + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + left: { + end: dojo.marginBox("cssNodeWrap").w - 195, + unit:"px" + }, + paddingTop:{ end:17, unit:"px", start:4 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + paddingTop:{ end:4, start:17, unit:"px" }, + left: { end: 10, unit:"px" } + }, + delay:300 + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + fontSize / width + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + width: { end:700, unit:"px", start:175 }, + fontSize:{ end:21, unit:"pt", start:11 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + width: { end:175, unit:"px" }, + fontSize:{ end:11, start:21, unit:"pt" } + }, + delay:700 + }).play(); + } + }).play(); + </script> + </button> + + <div class="testBox" id="cssNodeWrap"> + <div id="cssNode"> + <p id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. + Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. + Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. + In erat. + </p> + </div> + </div> + + <h2>dojo.fx - Core animations</h2> + + <button dojoType="dijit.form.Button"> + Slide + <script type="dojo/method" event="onClick"> + // we're 175px, slide to containerWidth - 195 + var left = dojo.marginBox("testSlideWrapper").w - 195; + // make and play the animation + dojo.fx.slideTo({ + top:10, + left:left, + node:"testSlideToo", + onEnd: function(){ + // slide'er back: + dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play(); + } + }).play() + </script> + </button> + + <button dojoType="dijit.form.Button"> + Combine Slide / Fade + <script type="dojo/method" event="onClick"> + var anim1 = dojo.fx.slideTo({ + top: 10, + left: dojo.marginBox("testSlideWrapper").w - 195, + node: "testSlideToo", + onEnd: function(){ + // slide'er back: + dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play(); + } + }); + var anim2 = dojo.fadeOut({ + node: "testSlideToo", + onEnd: function(){ + // we could switch out the backgroundImage property here. + dojo.fadeIn({ node:"testSlideToo" }).play(); + } + }); + var combined = dojo.fx.combine([anim1,anim2]); + combined.play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + Chain (4) + <script type="dojo/method" event="onClick"> + var anim1 = dojo.fadeOut({ node:"testSlideToo", + // so anim1 is over, making this onEnd and anim2 basically + // a combine() (depending on the duration: ) + onEnd:function(){ + var delay = 125; + dojo.fadeIn({ node:'testSlideToo' }).play(delay); + } + }); + + var anim2 = dojo.animateProperty({ + node:"testSlideToo", + properties:{ + left:{ + end: dojo.marginBox("testSlideTooWrap").w - 195, + unit: "px" + } + }, + onEnd: function(){ + dojo.fx.slideTo({ node:"testSlideToo", top:10, left:10 }).play(123); + } + }); + dojo.fx.chain([anim1,anim2]).play(); + </script> + </button> + + <div class="testBox" id="testSlideTooWrap"> + <div class="testItem" id="testSlideToo"> + <div class="trick"></div> + </div> + </div> + + <h2>dojo.query FX</h2> + + <button dojoType="dijit.form.Button"> + fade .even + <script type="dojo/method" event="onClick"> + dojo.query(".even","queryUl").fadeOut({ + onEnd:function(){ + dojo.query(".even","queryUl").fadeIn({ delay: 300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + fade .odd + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").fadeOut({ + onEnd:function(){ + dojo.query(".odd","queryUl").fadeIn({ delay: 300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + shift .odd + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").animateProperty({ + properties:{ + marginLeft:{ end:34, unit:"px" } + }, + duration:300, + onEnd:function(){ + dojo.query(".odd","queryUl").animateProperty({ + delay: 300, + properties:{ + marginLeft:{ end:1, unit:"px" } + } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + mmm, easing + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").animateProperty({ + easing:dojox.fx.easing.backOut, + properties:{ + marginLeft:{ end:34, unit:"px" } + }, + duration:600, + onEnd:function(){ + dojo.query(".odd","queryUl").animateProperty({ + delay: 300, + duration:1300, + easing:dojox.fx.easing.bounceOut, + properties:{ + marginLeft:{ end:1, unit:"px" } + } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + Setup FisheyeList + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + dojo.query("li","fisheyeList").forEach(function(n){ + new dojox.widget.FisheyeLite({ + properties:{ + marginLeft:17, + width:1.175 + }, + onClick:function(){ + dojo.byId("clickAlert").innerHTML = "clicked: " + this.id; + }, + easeIn:dojox.fx.easing.elasticOut, + durationIn:1700 + },n).startup(); + }).style("cursor","pointer"); + </script> + </button> + + <div class="testBox" id="queryParent"> + <ul id="queryUl"> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + </ul> + <div class="altItem"> + <p>(FisheyeLite makes this easy. be creative:)</p> + <ul id="fisheyeList"> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even" id="testIdFish">with id</li> + <li class="odd">odd row</li> + </ul> + <p id="clickAlert"></p> + </div> + </div> + + </div> +</body> +</html> diff --git a/includes/js/dojox/fx/tests/example_easingChart2D.html b/includes/js/dojox/fx/tests/example_easingChart2D.html new file mode 100644 index 0000000..fd0d171 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_easingChart2D.html @@ -0,0 +1,147 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> + <title>visualising dojo._Animation.easing via dojox.charting</title> + + <link rel="stylesheet" type="text/css" media="screen" + href="../../../dojo/resources/dojo.css"> + + <link rel="stylesheet" type="text/css" media="screen" + href="../../../dijit/themes/tundra/tundra.css"> + + <style type="text/css"> + .box { padding:14px; + border:1px solid #b7b7b7; + -moz-border-radius:8pt; + } + </style> + + <script type="text/javascript" djConfig="isDebug:false, parseOnLoad: true" + src="../../../dojo/dojo.js"></script> + + <script type="text/javascript"> + // one simple theme, and the charting engine: + dojo.require("dojox.charting.Chart2D"); + // and easing functions: + dojo.require("dojox.fx.easing"); + + var d=0; + var masterData = {}; + var makeSeries = function(/* string */str, /* Function */ func){ + // make some data by running a 2sec animation with an easing function + // and adding it to the chart + var seriesData = []; + if(str in masterData){ + seriesData=masterData[str]; + } + + if(!seriesData.length){ + var func = func || dojox.fx.easing[str]; + func = (dojo.isFunction(func) ? func : dojo._defaultEasing); + + for(var i=0; i<=120; i++){ + var pct = i/120; + seriesData.push({ y: 30 * func(pct), x: (pct) * 30}); + } + if(!str.match(/^dynSeries/)){ + masterData[str] = seriesData; + } + chart.addSeries(str, + seriesData, + { stroke: { color: "black", width: 0 }, fill: "rgba(30,0,255,0.10)" } + ).render(); + }else{ + chart.updateSeries(str, seriesData).render(); + } + }; + + var removeSeries = function(str){ + chart.updateSeries(str, []); + if(!clearAll){ chart.render(); } + }; + + var toggleChart = function(widget, str){ + if(!chart) return; + if(widget.checked){ + makeSeries(str); + }else{ + removeSeries(str); + } + } + + var chart; + var clearAll=false; + + dojo.addOnLoad(function(){ + + // setup our chart + chart = new dojox.charting.Chart2D("easingChart"); + chart.addAxis("x", { + fixLower: "major", + fixUpper: "major", + majorTickStep: 10, + minorTickStep: 1, + minorLabels: false, + htmlLabels: false + }); + chart.addAxis("y", { + vertical: true, + fixLower: "major", + fixUpper: "major", + majorTickStep: 10, + minorTickStep: 1, + htmlLabels: false + }); + chart.addPlot("default", {type: "Areas"}); + }); + + var opt; + dojo.addOnLoad(function(){ + + var c = dojo.query(".clone")[0]; + opt = dojo.byId("select"); + + for(var i in dojox.fx.easing){ + var n = opt.appendChild(dojo.clone(c)); + n.value = n.innerHTML = i + // n.innerHTML = i; + } + + dojo.connect(opt,"onchange",function(e){ + dojo.query("option",opt) + // we only want "selected" nodes + .filter(function(n){ return n.selected; }) + // yay, here they are: + .forEach(function(n){ + console.log(n); + }); + makeSeries(opt.value,dojox.fx.easing[opt.value]); + }); + + dojo.query(".box").connect("onclick",function(e){ + console.log(opt.value,dojox.fx.easing[opt.value]); + }); + + makeSeries("visible",dojo._defaultEasing); + + }); + + </script> +</head> +<body class="tundra" style="padding:20px"> + + <h1>dojox.fx.easing</h1> + + <p>this chart shows time (x axis) vs. position (y axis) for a movement from 0px to 30px modified by easing functions</p> + + <select id="select" multiple="true" size="7" name="easing"> + <option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option> + </select> + + <div class="box"> + <div id="easingChart" style="height:300px"></div> + </div> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/images/averycutedog.jpg b/includes/js/dojox/fx/tests/images/averycutedog.jpg Binary files differnew file mode 100644 index 0000000..335855e --- /dev/null +++ b/includes/js/dojox/fx/tests/images/averycutedog.jpg diff --git a/includes/js/dojox/fx/tests/images/dot.png b/includes/js/dojox/fx/tests/images/dot.png Binary files differnew file mode 100644 index 0000000..1287a73 --- /dev/null +++ b/includes/js/dojox/fx/tests/images/dot.png diff --git a/includes/js/dojox/fx/tests/images/longBg.png b/includes/js/dojox/fx/tests/images/longBg.png Binary files differnew file mode 100644 index 0000000..f89d23a --- /dev/null +++ b/includes/js/dojox/fx/tests/images/longBg.png diff --git a/includes/js/dojox/fx/tests/test_Nodelist-fx.html b/includes/js/dojox/fx/tests/test_Nodelist-fx.html new file mode 100644 index 0000000..75c7a94 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_Nodelist-fx.html @@ -0,0 +1,282 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojo.NodeList-fx and dojox.fx.ext-dojo.Nodelist | fx add-ons to dojo.query()</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></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"; + + .testBoxContainer { + position:relative; + width:418px; + height:240px; + margin-left:50px; + border-top:1px dashed #b7b7b7; + border-bottom:1px dashed #b7b7b7; + } + + .testBox { + position:absolute; + top:0; left:0; + width:50px; + height:50px; + background:#ededed; + border:1px solid #b7b7b7; + -moz-border-radius:6pt; + -webkit-border-radius:5pt; + overflow:hidden; + } + .rowOne { top:0; } + .rowTwo { top:60px; } + .rowThree { top:120px; } + .rowFour { top:180px; } + + .iOne { left:0; } + .iTwo { left:60px; } + .iThree { left:120px; } + .iFour { left:180px; } + .iFive { left:240px; } + .iSix { left:300px; } + .iSeven { left:360px; } + + </style> + <script type="text/javascript"> + + dojo.require("dojox.fx.ext-dojo.NodeList"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.CheckBox"); + + // its funny... + var dQuery = dojo.query; + var d$ = dQuery; + + var anim2 = null; + + var init = function(){ + var anim = d$(".rowOne").highlight({ + duration:700, + onEnd: function(){ + d$(".rowTwo").fadeTo({ end: 0.5, + duration:700, + onEnd: function(){ + + anim2 = d$(".rowThree").fadeOut({ + top:20, left:20, + duration:500 + }).play(700); + } + }).play(300); + } + }); + + dojo.connect(anim,"onEnd",function(){ + + var q1v = true; + var q1 = ".iSix"; // colum six + // this will setup a connection on each of the nodes to toggle their fade state + d$(q1).connect("onclick",function(){ + d$(q1)[(q1v ? "fadeOut" : "fadeIn")]().play(); + q1v = !q1v; + }); + + // this highlights all the nodes via a mouseenter event, which automatically + // + d$(".testBox").connect("onmouseenter",function(e){ + dojox.fx.highlight({ node: e.target, duration:250 }).play(); + }); + + + var q3 = ".rowOne.iSeven"; // top right node + d$(q3).connect("onclick",function(){ + d$(q3).sizeTo({ + width:300, height:300, duration:300, + onEnd: function(){ + // FIXME: sizeTo isn't calculating it's start value properly + d$(q3).sizeTo({ width: 50, height:50, duration:115, delay:1000, method:"combine" }).play(); + } + }).play(); + }); + + + + }); + // main animation + anim.play(700); + }; + // start the code + dojo.addOnLoad(init); + + // for our dojo.query() form, some animations take different params which would be kind of difficult + // to make both dynamic and robust and easy to explain. see each function individually in the API + // for the breakdown. just going to hard-code some values in for somet things: + var animArgs = { + // dojo.NodeList-fx ones: + animateProperty: { + properties: { + borderWidth: { end: 5, unit:"px" }, + marginTop: { end: 8, unit:"px" } + } + + }, + + slideTo: { top:0, left: 0 }, + + // dojox extension ones: + sizeTo: { + width: 75, height:75 + }, + fadeTo: { + end: 0.35 + }, + slideBy: { + top:55, left: 55 + }, + + // mix these into every 'custom query animation' + defaultArgs: { + // duration: 500 //, + // onEnd: function(){ console.log('ended animation') } + } + }; + + + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">NodeList and dojo.query "magic"</h1> + + <div style="width:200px; float:right; padding:10px"> + <h4>stuff going on:</h4> + <ul> + <li>watch the startup cycle</li> + <li>click col 6</li> + <li>click top right box</li> + <li>hover to highlight() node</li> + </ul> + </div> + + <div style="width:200px; float:right; padding:10px"> + <h4>custom query:</h4> + <form id="whichAnim"> + <p> + dojo.query("<input type="text" name="str" id="customStr" value=".noIdHere" size="10" />"); + <br>(dojo:)<br> + <input type="radio" name="g2" id="g2rb1" value="fadeIn" dojoType="dijit.form.RadioButton" checked="checked"/> + <label for="g2rb1">.fadeIn</label><br> + + <input type="radio" name="g2" id="g2rb2" value="fadeOut" dojoType="dijit.form.RadioButton"/> + <label for="g2rb2">.fadeOut</label><br> + + <input type="radio" name="g2" id="g2rb3" value="wipeOut" dojoType="dijit.form.RadioButton"/> + <label for="g2rb3">.wipeOut</label><br> + + <input type="radio" name="g2" id="g2rb4" value="wipeIn" dojoType="dijit.form.RadioButton"/> + <label for="g2rb4">.wipeIn</label><br> + + <input type="radio" name="g2" id="g2rb0" value="slideTo" dojoType="dijit.form.RadioButton"/> + <label for="g2rb0">.slideTo</label> (x: 0, y:0)<br> + + <br>(dojox:)<br> + + <input type="radio" name="g2" id="g2rb5" value="highlight" dojoType="dijit.form.RadioButton"/> + <label for="g2rb5">.highlight</label><br> + + <input type="radio" name="g2" id="g2rb6" value="sizeTo" dojoType="dijit.form.RadioButton"/> + <label for="g2rb6">.sizeTo (a fixed size)</label><br> + + <input type="radio" name="g2" id="g2rb7" value="slideBy" dojoType="dijit.form.RadioButton"/> + <label for="g2rb7">.slideBy (top: left: offset fixed)</label><br> + + <input type="radio" name="g2" id="g2rb8" value="fadeTo" dojoType="dijit.form.RadioButton"/> + <label for="g2rb8">.fadeTo (35% opacity)</label><br> + + </p> + <script type="dojo/method" event="onSubmit"> + // it's like cheating, but we don't event want this form to submit. you can type + // a query(), use the arrows to select a method, and hit enter. (or should be able to) + return false; + </script> + + <button dojoType="dijit.form.Button" type="submit" id="runnerButton" /> + Run + <script type="dojo/method" event="onClick"> + // our runner / submit button + var str = dojo.byId("customStr").value; + var animType; + dojo.query('.dijitRadioChecked').forEach(function(n){ + animType = dijit.byNode(n).getValue(); + }); + if(str && animType){ + var theseArgs = animArgs[animType] || {}; + // combine our base args with 'theseArgs' if they exist + var args = dojo.mixin(theseArgs,animArgs.defaultArgs) + //var nodelist = dojo.query(str); + dojo.query(str)[(animType)](args).play(); + } + return false; + </script> + </button> + + </form> + </div> + + <div class="testBoxContainer"> + <div id="node1" class="testBox rowOne iOne">1</div> + <div id="node2" class="testBox rowOne iTwo">2</div> + <div class="testBox noIdHere rowOne iThree">3</div> + <div class="testBox noIdHere rowOne iFour">4</div> + <div class="testBox noIdHere rowOne iFive">5</div> + <div class="testBox noIdHere rowOne iSix">6</div> + <div class="testBox noIdHere rowOne iSeven">7</div> + + <div id="node4" class="testBox rowTwo iOne">2</div> + <div class="testBox noIdHere rowTwo iTwo"></div> + <div id="node6" class="testBox rowTwo iThree"></div> + <div class="testBox noIdHere rowTwo iFour"></div> + <div class="testBox noIdHere rowTwo iFive"></div> + <div class="testBox noIdHere rowTwo iSix"></div> + <div class="testBox noIdHere rowTwo iSeven"></div> + + <div id="node7" class="testBox rowThree iOne">3</div> + <div class="testBox noIdHere rowThree iTwo"></div> + <div id="node9" class="testBox rowThree iThree"></div> + <div class="testBox noIdHere rowThree iFour"></div> + <div class="testBox noIdHere rowThree iFive"></div> + <div class="testBox noIdHere rowThree iSix"></div> + <div id="aNode" class="testBox rowThree iSeven"></div> + + <div id="node7" class="testBox rowFour iOne">4</div> + <div class="testBox noIdHere rowFour iTwo"></div> + <div id="node9" class="testBox rowFour iThree"></div> + <div class="testBox noIdHere rowFour iFour"></div> + <div class="testBox noIdHere rowFour iFive"></div> + <div id="randomNode" class="testBox rowFour iSix"></div> + <div class="testBox noIdHere rowFour iSeven"></div> + + </div> + + <br style="clear:both;"> + HTML AFTER + <br> + + <h3>classes available to play with:</h3> + + <code><pre> + .testBox + .noIdHere + each row: .rowOne .rowTwo .rowThree .rowFour + each col: .iOne .iTwo .. iSeven + #randomNode, #node9, #node7, #aNode, #node1, #node2, #node4, #node6 + </pre></code> + + <p>the dojo.query() isn't limited to the testDiv, it parses the body. try: dojo.query("fieldset") and slideBy animation</p> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_Shadow.html b/includes/js/dojox/fx/tests/test_Shadow.html new file mode 100644 index 0000000..fd21fd2 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_Shadow.html @@ -0,0 +1,93 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.Shadow - Drop Shadows for DomNodes | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../Shadow.js"></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"; + </style> + <script type="text/javascript"> + dojo.require("dojo.dnd.Moveable"); + dojo.require("dojox.layout.FloatingPane"); + dojo.require("dijit._Calendar"); + var enabled = true, randInt=0; + dojo.addOnLoad(function(){ + + dojo.query(".hasShadow").forEach(function(n){ + var foo = new dojox.fx.Shadow({ node:n }); + foo.startup(); + + if(++randInt%2===0){ + var tmp = new dojo.dnd.Moveable(n); + } + + setTimeout(dojo.hitch(foo,"resize"),4000); + //setTimeout(dojo.hitch(foo,"setOpacity","0.6",{ duration: 500 }),2000); + dojo.connect(n,"onmouseover",dojo.hitch(foo,function(){ + this.setOpacity(1); + })); + dojo.connect(n,"onmouseout",dojo.hitch(foo,function(){ + if(!dojo.isIE){ + this.setOpacity(0.5); + } + })); + dojo.connect(n,"onclick",dojo.hitch(foo,function(){ + this.setDisabled(!this.disabled); + })); + + }); + + /* + var div = document.createElement('div'); + var testNode = document.createElement('div'); + + testNode.appendChild(div); + div.innerHTML = "Lorem Ipsum"; + dojo.body().appendChild(testNode); + + //dojo.addClass(testNode,"dijitInline"); + + var aDijit = new dijit._Calendar({},div); + aDijit.startup(); + + var testShadow = new dojox.fx.Shadow({ node: aDijit.domNode }); + testShadow.startup(); + testShadow.resize(); + */ + }); + + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.Shadow tests</h1> + + <div> + <h2>with margin:</h2> + <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; margin:20px;"> <p>Lorem</p> </div> + + <h2>with padding:</h2> + <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; padding:10px; "> <p>Lorem</p> </div> + + <h2>no padding:</h2> + <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px;"> <p>Lorem</p> </div> + + <h2>position:absolute</h2> + <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; position:absolute; top:0px; left:200px; "> <p>Lorem</p> </div> + + <br style="clear:both;"> + </div> + + + <br><br> + + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_animateClass.html b/includes/js/dojox/fx/tests/test_animateClass.html new file mode 100644 index 0000000..c963ca1 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_animateClass.html @@ -0,0 +1,222 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.style - animatated CSS functions | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../style.js"></script><!-- debugging --> + <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"; + @import "_animation.css"; /* external stylesheets to enhance readability in this test */ + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.style"); + dojo.require("dijit.form.Button"); + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.style tests</h1> + + <p id="fontTest"> + dojox.fx.style provides a few methods to animate the changes that would occur + when adding or removing a class from a domNode. + </p> + <ul class="testUl" id="test1"> + <li class="baseFont">dojox.fx.addClass(/* Object */)args); // Returns dojo._Animation</li> + <li class="baseFont">dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation</li> + <li class="baseFont">dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)</li> + </ul> + + <button dojoType="dijit.form.Button"> + spacing test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"spacedHorizontal")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <button dojoType="dijit.form.Button"> + line-height test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"spacedVertical")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <button dojoType="dijit.form.Button"> + font-size test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"fontSizeTest")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <h2>testing sizes</h2> + + <button dojoType="dijit.form.Button" id="addTall"> + add .tall + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.addClass({ + node:n, + cssClass:"tall", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('removeTall').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="removeTall" disabled="true"> + remove .tall + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.removeClass({ + node:n, + cssClass:"tall", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('addTall').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="addWide"> + add .wide + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.addClass({ + node:n, + cssClass:"wide", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('removeWide').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="removeWide" disabled="true"> + remove .wide + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.removeClass({ + node:n, + cssClass:"wide", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('addWide').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .tiny + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("#colorTest > .testBox").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"tiny")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <div id="colorTest"> + <div id="colorTest1" class="floating testBox white"></div> + <div id="colorTest2" class="floating testBox black"></div> + <div id="colorTest3" class="floating testBox green"></div> + </div> + + <br style="clear:both"> + + <h2>testing position</h2> + <p>This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos. + normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar + will take precedent. the below position test shows the results of this: + </p> + + <button dojoType="dijit.form.Button"> + .offsetSome + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","offsetSome").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + .topLeft + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","topLeft").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + .bottomRight + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","bottomRight").play(); + </script> + </button> + + <div style="position:relative; height:175px; width:500px; border:1px solid #666;" id="positionBlock"> + <div class="testBox absolutely" id="positionTest"></div> + </div> + + <button dojoType="dijit.form.Button"> + toggle .green + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","green").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .black + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","black").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .blue + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","blue").play(); + </script> + </button> + + <p>Some properties + cannot be modified (fontFace, and so on), so to ensure the results at the end + of the animation are applied correctly and fully, the class name is set on the node + via dojo.add/removeClass(). + </p> + +</body> +</html> + diff --git a/includes/js/dojox/fx/tests/test_crossFade.html b/includes/js/dojox/fx/tests/test_crossFade.html new file mode 100644 index 0000000..330a34a --- /dev/null +++ b/includes/js/dojox/fx/tests/test_crossFade.html @@ -0,0 +1,145 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx - animation sets to use!</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></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"; + + #crossfade { + position:absolute; + top:0; + left:300px; + border:2px solid #ededed; + width:50px; height:50px; + background:#fff; + text-align:center; + } + + table tr { padding:5px; margin:5px; border:1px solid #ccc; } + + .box { + width:75px; height:75px; float:left; + border:1px solid #ededed; + padding:20px; + background-color:#fee; + } + .two { background-color:#c7bedd; } + .nopad { padding:0 !important; + width:100px; height:100px; border:0; + } + .hidden { + opacity:0; + } + </style> + <script type="text/javascript"> + dojo.require("dijit.form.Button"); + dojo.require("dijit.TitlePane"); + + function basicXfade(){ + dojox.fx.crossFade({ + nodes: [dojo.byId('node1'),dojo.byId('node2')], + duration: 1000 + }).play(); + }; + + function absoluteXfade(){ + dojox.fx.crossFade({ + nodes: ["node3","node4"], + duration:1000 + }).play(); + }; + + var _anim; + function simpleLoop(){ + dojo.byId('button').disabled = "disabled"; + _anim = dojox.fx.crossFade({ + nodes: ["node5","node6"], + duration:1000 + }); + dojo.connect(_anim,"onEnd","simpleLoop"); + _anim.play(500); + }; + function stopLoop(){ _anim.stop(); } + + function buttonExample(){ + dojox.fx.crossFade({ + nodes: [ + // FIXME: fails in ie6?!? + dijit.byId('node7').domNode, + dijit.byId('node8').domNode + ], + duration: 350 + }).play(); + } + + dojo.addOnLoad(function(){ + // this is a hack to make nodes with class="hidden" hidden + // because ie6 is a horrible wretched beast + dojo.query(".hidden").forEach(function(node){ + dojo.style(node,"opacity","0"); + }); + + + }); + + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.crossFade test</h1> + + + <h3>a simple demonstration of two nodes fading simultaneously</h3> + <div> + <input type="button" onclick="basicXfade()" value="run" /> + <div style="padding:20px"> + <div id="node1" style="display:inline;" class="box hidden">box1</div> + <div id="node2" class="box">box2</div> + </div> + <br style="clear:both"> + </div> + + <h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3> + <input type="button" onclick="absoluteXfade()" value="run" /> + <div> + <div style="width:100px; height:100px; position:relative; border:1px solid #666; "> + <div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div> + <div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div> + </div> + <br style="clear:both"> + </div> + + <h3>simple looping crossfade</h3> + <input type="button" onclick="simpleLoop()" value="run" id="button" /> + <div> + <div style="padding:20px;"> + <div id="node5" class="box nopad">box one</div> + <div id="node6" class="box two nopad hidden">box two</div> + </div> + <br style="clear:both"> + </div> + + <!-- FIXME: acting oddly, only in IE though + <h3>An example of cross-fading a dijit.form.Button</h3> + <input type="button" onclick="buttonExample()" value="run" id="button" /> + <div> + <div style="position:relative;"> + <div dojoType="dijit.TitlePane" id="node7" + style="position:absolute; top:0; left:0;">Lorem content two</div> + <div dojoTYpe="dijit.TitlePane" id="node8" class="hidden" + style="position:absolute; top:0; left:0;">Lorem content one</div> + </div> + <br style="clear:both;"> + </div> + --> + + <h3>that's all, folks...</h3> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_easing.html b/includes/js/dojox/fx/tests/test_easing.html new file mode 100644 index 0000000..fa7bf41 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_easing.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.easing functions:</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></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"; + + .bounce { + position:absolute; + top:300px; + left:400px; + width:25px; + height:25px; + border:1px solid #b7b7b7; + background:#ededed; + } + + .block { + width:200px; + height:100px; + background:#666; + border:1px solid #ccc; + display:block; + color:#fff; + text-align:center; + } + + </style> + <script type="text/javascript"> + dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work) + dojo.require("dojox.fx.easing"); + + + var allAnim = null; + dojo.addOnLoad(function(){ + + var easeInAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeIn', + duration:2000, + easing: dojox.fx.easing.easeIn + }), + dojo.fadeIn({ + node: 'easeIn', + duration:2000, + easing: dojox.fx.easing.easeIn + }) + ]); + + + var easeOutAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeOut', + duration:2000, + easing: dojox.fx.easing.easeOut + }), + dojo.fadeIn({ + node: 'easeOut', + duration:2000, + easing: dojox.fx.easing.easeOut + }) + ]); + + var easeInOutAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeInOut', + duration:2000 + }), + dojo.fadeIn({ + node: 'easeInOut', + duration:2000 + }) + ]); + + var linearEaseAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'linearEase', + duration:2000, + easing: dojox.fx.easing.linear + }), + dojo.fadeIn({ + node: 'linearEase', + duration:2000, + easing: dojox.fx.easing.linear + }) + ]); + + dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play"); + dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play"); + dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play"); + dojo.connect(dojo.byId('linearEase'),"onclick",linearEaseAnim,"play"); + dojo.connect(window,"onclick",function(e){ + dojo.fx.slideTo({ + node:"bounce", + top:e.pageY, left:e.pageX, + easing: dojox.fx.easing.easeOutBack + }).play(); + }); + + // argh! FIXME: combine and chain are destructive to the animations. :( + // allAnim = dojo.fx.combine([easeInAnim,easeOutAnim,easeInOutAnim]); + allAnim = { play: function(){ + console.log("can't do this via fx.combine - destructive"); + easeInAnim.play(); + easeOutAnim.play(); + easeInOutAnim.play(); + linearEaseAnim.play(); + } + }; + + }); // dojo.addOnLoad + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.easing function tests:</h1> + + (click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>) + + <div id="easeIn" class="block">dojox.fx.easing.easeIn</div> + <br><br> + <div id="easeOut" class="block">dojox.fx.easing.easeOut</div> + <br><br> + <div id="linearEase" class="block">dojox.fx.easing.linear</div> + <br><br> + <div id="easeInOut" class="block">dojo default easing</div> + + <p> + dojox.fx.easing is stand-alone, and does not require the dojox.fx base files. to see a chart + of these functions see <a href="example_easingChart2D.html">example_easingChart2D.html</a> + </p> + + <div id="bounce" class="bounce">bounce</div> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_highlight.html b/includes/js/dojox/fx/tests/test_highlight.html new file mode 100644 index 0000000..1d5947e --- /dev/null +++ b/includes/js/dojox/fx/tests/test_highlight.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.highlight</title> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true"></script> + <script type="text/javascript"> + dojo.require("dojox.fx"); + dojo.require("dojox.fx.ext-dojo.NodeList"); + </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"; + </style> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.highlight tests</h1> + + <div id="attention" style="position:absolute; left:300px; top:200px; padding:10px;" > + <h3>This is the default highlight</h3> + </div> + + <div id="attention2" style="position:absolute; left:300px; top:80px; padding:10px;" > + <h3>BRING ATTENTION HERE!</h3> + </div> + + <div id="attention3" style="position:absolute; left:350px; top:150px; padding:10px; background-color:#CCCCCC" > + <h3>Highlight me</h3> + </div> + + <a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention'}).play()">test #1 (default)</a> + <br> + <a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention', repeat:1}).play()">test #2 (default - play twice)</a> + <br> + <a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention2', color:'#0066FF', duration:800}).play()">test #3</a> + <br> + <a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention3', color:'#0066FF', duration:800}).play()">test #4</a> + <br> + <a href="javascript:void(0)" onClick="dojo.query('a').highlight().play(100)">highlight via dojo.query</a> + + +</body></html> diff --git a/includes/js/dojox/fx/tests/test_scroll.html b/includes/js/dojox/fx/tests/test_scroll.html new file mode 100644 index 0000000..a3ec9ed --- /dev/null +++ b/includes/js/dojox/fx/tests/test_scroll.html @@ -0,0 +1,98 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.scroll</title> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true"></script> + <style type="text/css"> + @import "../../../dijit/themes/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + <!-- <script type="text/javascript" src="../scroll.js"></script> --> + <script type="text/javascript"> + dojo.require("dojox.fx.easing"); + dojo.require("dojox.fx.scroll"); + + function gotoName(name){ + // summary; searches for a <a name=""></a> attrib, and scrolls to it + dojo.query('a[name="'+name+'"]').forEach(function(node){ + // first one wins + var anim = dojox.fx.smoothScroll({ + node: node, + win:window, + duration:300, + easing:dojox.fx.easing.easeOut + }).play(); + return; + }); + } + + dojo.addOnLoad(function(){ + /*dojo.connect(dojo.byId("goToHeader0"), "onclick", function (e) { + var h2s = dojo.html.iframeContentDocument(dojo.byId("embed0")).getElementsByTagName('h2'); + var h2 = h2s[h2s.length-1]; + var anm = new dojo.lfx.smoothScroll(h2,dojo.html.iframeContentWindow(dojo.byId("embed0")),null,500); + anm.play(); + }); + */ + + dojo.connect(dojo.byId("goToHeader"), "onclick", function (e) { + var node = dojo.byId('targetHeader3'); + var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:500, easing:dojox.fx.easing.easeOut }); + anim0.play(); + }); + + dojo.connect(dojo.byId("goToHeader1"), "onclick", function(/* Event */e){ + var node = dojo.byId('targetHeader1'); + var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:1000, easing:dojox.fx.easing.easeOut }); + anim0.play(); + }); + }); + </script> +</head> +<body class="tundra"> + + <a name="top"></a> + <h1 class="testTitle">dojox.fx.scroll tests</h1> + + <div id="targetHeader3" style="position:absolute; left:0px; top:3000px; padding:100px;" ><h3>YOU FOUND ME!</h3> + <p>neat.</p> + </div> + + <p>dojox.fx.scroll provides:</p> + <ul> + <li>dojox.fx.smoothScroll()</li> + </ul> + <p> + which will create and return a dojo._Animation to scroll + a window to a desired offset. (or a node that has overflow:auto/hidden, if you pass the domNode as the win: argument) + </p> + + + <h2><code>getScroll</code></h2> + <p> + Scroll top: <span id="scrollTop">0</span><br> + Scroll left: <span id="scrollLeft">0</span> + </p> + + <table style="position:fixed;top:20px;right:20px;"> + <tr><td> + <!-- <input type="button" id="goToHeader0" value="scroll only the iframe (to a node in iframe)"><br> --> + <input type="button" id="goToHeader" value="scroll to to far node"><br> + <input type="button" id="goToHeader1" value="scroll to a node in top window"> + </td></tr> + </table> + + <p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p> + + + <h2 id='targetHeader1'><code>getElementsByClass</code></h2> + + <p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p> + + <h3 id='targetHeader2'>ContainsAny</h3> + <input type="button" onclick="gotoName('top');" value="back to top"> + <p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">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 vitaerisus.</p> + + +</body></html> diff --git a/includes/js/dojox/fx/tests/test_sizeTo.html b/includes/js/dojox/fx/tests/test_sizeTo.html new file mode 100644 index 0000000..0c21e9b --- /dev/null +++ b/includes/js/dojox/fx/tests/test_sizeTo.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.sizeTo | experimental fx add-ons for the Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></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"; + .testBox { + position:absolute; + top:0; left:0; + width:50px; + height:50px; + background:#ededed; + border:1px solid #b7b7b7; + -moz-border-radius:6pt; + -webkit-border-radius:5pt; + overflow:hidden; + } + </style> + <script type="text/javascript"> + + dojo.require("dojox.fx.ext-dojo.NodeList"); + + var test1 = function(e){ + // this is our click test, + dojox.fx.sizeTo({ + node: e.target, + width: 120, + height:120, + duration:250 + }).play(5); + }; + + var testundo = function(e){ + dojox.fx.sizeTo({ + node: e.target, + width:50, + height:50, + duration:320 + }).play(5); + + + }; + + var test2 = function(e){ + dojox.fx.sizeTo({ + node: e.target, + width: 120, + height:120, + duration:120, + method:"combine" + }).play(5); + }; + + var noIdTest = function(){ + var myNode = dojo.query(".noIdHere")[0]; // first one wins + if(myNode){ + // mmm, fake events (all we're using is the target anyway ... ) + (!dojo.hasClass(myNode,"testRun") ? test2 : testundo)({ target: myNode }); + dojo.toggleClass(myNode,"testRun"); + } + }; + + var init = function(){ + + // lets setup out connections, etc ... + dojo.connect(dojo.byId("sizer1"),"onmousedown","test1"); + dojo.connect(dojo.byId("sizer1"),"onmouseup","testundo"); // generic resest + + // did you know dojo normalizes onmouseenter onmouseleave!?!? neat. ie got _one_ thing right. + dojo.connect(dojo.byId("sizer2"),"onmouseenter","test2"); + dojo.connect(dojo.byId("sizer2"),"onmouseout","testundo"); + + // example using dojo.query to get a couple of nodes and roll into one anim + var hasRun = false; + dojo.connect(dojo.byId("sizer3"),"onclick",function(e){ + var _anims = []; + dojo.query(".testBox").forEach(function(n){ + _anims.push( + dojox.fx.sizeTo({ node: n, + width: ( hasRun ? "50" : "150"), + height: ( hasRun ? "50" : "150"), + method:"chain", + duration:720 + }) + ); + }); + hasRun=!hasRun; + var anim = dojo.fx.combine(_anims); + anim.play(); + }); + }; + dojo.addOnLoad(init); + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.sizeTo test</h1> + + <p>quick sizeTo API overview:</p> + + <pre> + dojox.fx.sizeTo({ + // basic requirements: + node: "aDomNodeId", // or a domNode reference + width: 200, // measured in px + height: 200, // measured in px + method: "chain" // is default, or "combine" + }); + </pre> + <p> + little test blocks (works in FF/win/mac + ie6) <a href="javascript:void(0)" onClick="dojo.query('.testBox').sizeTo({ width: 200, height: 200, duration:400 }).play()">dojo.query() test</a> + </p> + + <div style="position:relative; height:60px; width:600px; margin:0 auto;"> + <div id="sizer1" class="testBox"> + mouse down / mouse up + </div> + <div id="sizer2" class="testBox" style="left:60px;" > + hover / exit + </div> + <div class="testBox noIdHere" style="left:120px; "> + <a href="javascript:noIdTest()">noIdTest()</a> + </div> + <div class="testBox" id="sizer3" style="left:180px;"> + all of em' + </div> + </div> + <br style="clear:both;"> + + (click the box labeled "all of em'" again to reset all nodes) + + HTML AFTER + <br> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_slideBy.html b/includes/js/dojox/fx/tests/test_slideBy.html new file mode 100644 index 0000000..a1a1960 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_slideBy.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx - animation sets to use!</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></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"; + + + #sizeToTest { + position:absolute; + top:0; + left:300px; + border:2px solid #ededed; + width:50px; height:50px; + background:#fff; + text-align:center; + } + .test { width:100px; height:50px; border:3px solid #333; + position:absolute; + } + .box1 { top:20px; left:10px; } + .box2 { top:85px; left:10px; } + .box3 { top:170px; left:10px; } + .holder { position:relative; height:300px; } + + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.ext-dojo.NodeList"); + + function chainTest(){ + // FIXME: not recalculating mixin in init? or not re-mixing, rather. + // happens to a lot of propertyAnimations, actually when chaining, with a + // fixed 'start' property in the mixin. see _base/fx.js:slideBy() + dojo.fx.chain([ + dojox.fx.slideBy({ node: 'sizeToTest', top:50, left:50, duration:400 }), + dojox.fx.slideBy({ node: 'sizeToTest', top:25, left:-25, duration:400 }) + ]).play(); + } + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.slideBy test</h1> + + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:50, duration:200 }).play()">top: 50, left:50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:50, duration:400 }).play()">top:-50, left:50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:-50, duration:400 }).play()">top:-50, left:-50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:-50, duration:400 }).play()">top:50, left:-50</a> + <a href="#" onclick="javascript:dojo.query('.test').slideBy({ top:0, left:300 }).play()">dojo.query()</a> + <a href="#" onclick="javascript:chainTest()">chainTest</a> + + <div id="sizeToTest"> + lorem. ipsum. + </div> + + <br style="clear:both;"> + + <div class="holder"> + <div class="test box1">a</div><div class="test box2">b</div><div class="test box3">c</div> + </div> + + + HTML AFTER + <br> + + + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_wipeTo.html b/includes/js/dojox/fx/tests/test_wipeTo.html new file mode 100644 index 0000000..539453b --- /dev/null +++ b/includes/js/dojox/fx/tests/test_wipeTo.html @@ -0,0 +1,109 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.wipeTo | experimental fx add-ons for the Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></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"; + .testBox { + margin:8px; + width:80px; + height:80px; + background:#ededed; + border:1px solid #b7b7b7; + -moz-border-radius:6pt; + -webkit-border-radius:5pt; + } + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.ext-dojo.NodeList"); + dojo.require("dojox.fx"); + dojo.require("dojo.fx"); + dojo.require("dijit.form.Button"); + var delayAnims = function(obj){ + console.log('yo'); + var delay = 0; + var _anims = []; + dojo.query(".testBox").forEach(function(n){ + _anims.push( + dojox.fx.wipeTo(dojo.mixin({ node:n, delay:(delay+=200) },obj)) + ); + }); + console.log(_anims); + dojo.fx.combine(_anims).play(); + + } + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.wipeTo test</h1> + + <p>quick sizeTo API overview:</p> + + <pre> + dojox.fx.wipeTo({ + // basic requirements: + node: "aDomNodeId", // or a domNode reference + width: 200 // measured in px + // height: 200 // measured in px (only one at a time, see sizeTo) + }); + </pre> + + <p>Some test boxes: (id="box1,box2,box3" etc ...)</p> + + <button dojoType="dijit.form.Button"> + wipeTo width: 400 + <script type="dojo/method" event="onClick"> + delayAnims({ width: 400 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo width: 100 + <script type="dojo/method" event="onClick"> + delayAnims({ width: 100 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 400 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 400 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 25 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 25 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 100 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 100 }); + </script> + </button> + + <div class="testBox" id="box1"> + I am some small text + </div> + + <div class="testBox" id="box2"> + I am some small text + </div> + + <div class="testBox" id="box3"> + I am some small text + </div> + + + <br style="clear:both;"> + + <br> + +</body> +</html> |
