diff options
Diffstat (limited to 'includes/js/dojox/widget/tests/test_FisheyeLite.html')
| -rw-r--r-- | includes/js/dojox/widget/tests/test_FisheyeLite.html | 257 |
1 files changed, 257 insertions, 0 deletions
diff --git a/includes/js/dojox/widget/tests/test_FisheyeLite.html b/includes/js/dojox/widget/tests/test_FisheyeLite.html new file mode 100644 index 0000000..0935d10 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_FisheyeLite.html @@ -0,0 +1,257 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title> + <style type="text/css"> + + body, html { margin:0; padding:0; width:100%; + font-family:Arial,sans-serif; + } + a { letter-spacing:0.1em; } + #list { + position:absolute; left:0px; cursor:pointer; + } + #container { margin:0 auto; width:400px; } + #list ul { + width:175px; + list-style-type:none; + } + .fisheyeTarget { + font-weight:bold; + font-size:19px; + } + #container li { + text-align:right; + padding-bottom:12px; + } + .ilk { + border-top:1px solid #999; + color:#666; + font:14px Arial,sans-serif; + } + #inlineList li { + margin-top:20px; + margin-bottom:20px; + padding:20px; + border:2px solid #ededed; + display:inline; + background:#fff; + } + + #lineHeightTest { + text-align:center; + position:relative; + overflow:visible; + } + span.line { + margin:10px; + padding:3px; + line-height:22px; + font:10px Arial,sans-serif; + display:block; + } + .imgBounce { + padding:0; + width:35px; height:35px; + vertical-align:middle; + position:relative; + top:0; + } + </style> + <script type="text/javascript"> + var djConfig = { isDebug:true, parseOnLoad:true }; + </script> + <script type="text/javascript" src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../FisheyeLite.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojox.widget.FisheyeLite"); + dojo.addOnLoad(function(){ + + // turn li's in this page into fisheye items, presumtiously: + dojo.query("li.bounce").forEach(function(n){ + new dojox.widget.FisheyeLite({ },n); + }); + + dojo.query("span.line").forEach(function(n){ + // make a widget from each of the lines in the lineHeightTest + new dojox.widget.FisheyeLite({ + properties: { + fontSize:1.75 + }, + easeOut: dojox.fx.easing.backInOut, + durationOut: 500 + },n); + }).connect("onclick",function(e){ + // you can still access the onclick of the real node + alert(e.target.innerHTML); + }); + + dojo.query("a").forEach(function(n){ + // all the anchorhs get a little letter spacing love + new dojox.widget.FisheyeLite({ + properties:{ + fontSize:1.15, + letterSpacing:2.85 + } + },n); + // stop anchors from doing _anything_ + }).connect("onclick",dojo,"stopEvent"); + + dojo.query(".imgBounce").forEach(function(n){ + // all the images need a width and a height (well, not need, + // but to scale you do) + new dojox.widget.FisheyeLite({ + properties: { + height:1.75, + width:1.75 + } + },n); + }); + + // + var vv = 0; + var r = dijit.registry.byClass("dojox.widget.FisheyeLite")._hash; + for(var l in r){ + vv++; + } + // a few in markup, mostly from the query()'ies: + console.log("fisheyes on this page: ", vv); + + }); + </script> + </head> + <body class="tundra"> + <div id="container"> + + <div id="list"> + <ul> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + <li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + <li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + </ul> + </div> + + <h2>A paragraph: (with links)</h2> + + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + + <h3>read the fine print:</h3> + + <p> + <input type="button" onclick="dijit.byId('l1').show()" value="show first" /> + <input type="button" onclick="dijit.byId('l1').hide()" value="hide first" /> + <input type="button" onclick="dijit.byId('l3').show()" value="show third" /> + <input type="button" onclick="dijit.byId('l3').hide()" value="hide third" /> + </p> + + <div id="lineHeightTest"> + <span id="l1" class="line">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</span> + <span class="line">imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer</span> + <span id="l3" class="line">lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean</span> + <span class="line">id mi in massa bibendum suscipit. Integer eros. Nullam suscipit</span> + <span id="l5" class="line">mauris. In pellentesque. Mauris ipsum est, pharetra semper,</span> + <span class="line">pharetra in, viverra quis, tellus. Etiam purus.</span> + </div> + + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. + </p> + <h3>another list: (no target, or ilk)</h3> + <div style="height:125px; position:relative;"> + <div style="position:absolute; width:600px;"> + <ul id="inlineList"> + <li class="bounce">Foo</li> + <li class="bounce">Bar</li> + <li class="bounce">Baz</li> + <li class="bounce">Bam</li> + </ul> + </div> + </div> + + <h3>oh right, Images:</h3> + + <div style="position:relative; height:60px;"><div style="position:absolute"> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/> + <img src="images/fisheye_4.png" class="imgBounce" /> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + </div></div> + + <div style="position:relative; float:left; width:1px; left:-75px; top:0;"> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/><br> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br> + <img src="images/fisheye_4.png" class="imgBounce" /><br> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + </div> + + <p dojoType="dojox.widget.FisheyeLite" + properties="{ padding:1.55 }" + style="padding:12px; text-align:justify;"> + + 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> + + <p>the end</p> + + </div> + </body> +</html> |