diff options
Diffstat (limited to 'includes/js/dojox/presentation/tests/test_presentation.html')
| -rw-r--r-- | includes/js/dojox/presentation/tests/test_presentation.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/includes/js/dojox/presentation/tests/test_presentation.html b/includes/js/dojox/presentation/tests/test_presentation.html new file mode 100644 index 0000000..d9e86b5 --- /dev/null +++ b/includes/js/dojox/presentation/tests/test_presentation.html @@ -0,0 +1,162 @@ +<html> +<head> + + <title>dojox.presentation - Presentation Mechanism</title> + + <script type="text/javascript"> djConfig = { isDebug: true, parseOnLoad: true }; </script> + <script type="text/javascript" src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../../../dijit/form/Button.js"></script> + + + <script type="text/javascript"> + dojo.require("dojox.presentation"); + dojo.require("dijit._Calendar"); + dojo.require("dijit.TitlePane"); + dojo.require("dojo.parser"); + dojo.require("dojo.fx"); + dojo.require("dojo.dnd.move"); + </script> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../resources/Show.css"; + </style> + + <script type="text/javascript"> + var externalAnimation = null; + var titleCount=0; + var titles = [ + "Just Kidding", + "The Title Will keep changing", + "but you can click to advance", + "nonthing fancy", + "just an example of", + "an external function controlling a slide." + ]; + function playIt() { + var node = dijit.byId('animated').slideTitle; + console.debug(node); + // this is the fanciest animation chain i could thing of atm + tmpTitle = titles[titleCount++] || titles[0]; + + externalAnimation = dojo.fx.chain([ + dojo.fadeOut({ node: node, + duration: 500, + onEnd: dojo.hitch(this,function(){ + node.innerHTML = tmpTitle; + }) + }), + dojo.animateProperty({ + node: node, + duration: 10, + properties: { letterSpacing: { + end:-26.3, unit: 'em', start:3.2 + } + } + + }), + dojo.fadeIn({ node: node, + duration:300 + }), + dojo.animateProperty({ + node: node, + duration: 800, + properties: { letterSpacing: { + end:2.8, unit: 'em' , start:-26.0 + } + } + }) + ]); + setTimeout(function(){externalAnimation.play();},50); + } + + function makeDraggable(node) { + var tmp = new dojo.dnd.Moveable(node); + } + + </script> + +</head> +<body class="tundra"> + <div dojoType="dojox.presentation.Deck" id="testPresentation"> + <div dojoType="dojox.presentation.Slide" id="myFirstSlide" title="Introduction"> + + <p>This is a brief overview of what this presentation widget is capable of.</p> + + <div dojoType="dojox.presentation.Part" as="one">... it's new, and completely different, so watch close</div> + + <input dojoType="dojox.presentation.Action" forSlide="one" toggle="fade" duration="3000"> + <input dojoType="dojox.presentation.Action" forSlide="one" toggle="wipe"> + + </div> + + <div dojoType="dojox.presentation.Slide" title="Basic Actions"> + <p>Click, and more text will appear</p> + + <div dojoType="dojox.presentation.Part" as="one"> + <p>Lorem something something. I am text, hear me _roar_.</p> + </div> + <input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade"> + + <div dojoType="dojox.presentation.Part" as="me"> + I am here to make sure click-advancing is disabled on normal input type elements: + <ul> + <li><a href="#">href</a></li> + <li>Input: <input type="text" name="foo"></li> + </ul> + + </div> + <input dojoType="dojox.presentation.Action" forslide="me" toggle="slide"> + + + </div> + <div dojoType="dojox.presentation.Slide" title="Automatically Advance"> + + <p dojoType="dojox.presentation.Part" as="one">First You See me ...</p> + <p dojoType="dojox.presentation.Part" as="two">Then you see ME ...</p> + <p dojoType="dojox.presentation.Part" as="three" style="padding:20px;">oh yeah!</p> + + + <input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade" delay="1500"> + <input dojoType="dojox.presentation.Action" forSlide="two" toggle="wipe" delay="1500"> + <input dojoType="dojox.presentation.Action" forSlide="three" toggle="wipe" delay="1500"> + + </div> + <!-- + <div dojoType="dojox.presentation.Slide" title="Remote Slide" href="_ext1.html"></div> + --> + <div dojoType="dojox.presentation.Slide" title="Click Blocking" id="animated"> + <p>You cannot click on this page</p> + <p dojoType="dojox.presentation.Part" as="1">I told you that you can't click ...</p> + <a href="#" onClick="playIt()">click here to move the title</a> + <input dojoType="dojox.presentation.Action" forSlide="1" toggle="wipe"> + <input dojoType="dojox.presentation.Action" forSlide="2"> + <input dojoType="dojox.presentation.Action" forSlide="1" toggle="fade"> + </div> + + <div dojoType="dojox.presentation.Slide" title="Widgets in Slide" noClick="true" id="wdijit"> + <p>There is a widget in this page:</p> + <p>clicking has been stopped on this page to demonstrate the usage ..</p> + <div dojoType="dojox.presentation.Part" as="foo" startVisible="true"> + There _should_ be a _Calendar widget here<br> + <div dojoType="dijit._Calendar"></div> + </div> + <div dojoType="dijit.TitlePane" title="foobar" id="newTitlePane" + style="width:300px; position:absolute; right:40px; top:125px;"> + I am a titlepane, you can do cool things with me. + <button onClick="makeDraggable('newTitlePane')">Make me Draggable!</button> + </div> + <div style="width:400px; position:absolute; right: 40px; bottom:40px;"> + <p>... so I'm providing a next button: <button dojoType="dijit.form.Button" value="Next" onClick="dijit.byId('testPresentation').nextSlide();">Next</button></p> + </div> + <input type="dojox.presentation.Action" forSlide="foo" toggle="slide"> + </div> + + <div dojoType="dojox.presentation.Slide" title="The End"> + <p>Thanks for watching!</p> + </div> + </div> +</body> +</html> |