You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
333 lines
13 KiB
333 lines
13 KiB
<!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" data-dojo-config="async:true"></script> |
|
<script type="text/javascript"> |
|
require([ |
|
"dijit/registry", |
|
"dojox/widget/FisheyeLite", |
|
"dojo/parser", |
|
"dojo/query", |
|
"dojo/fx/easing", |
|
"dojo/on", |
|
"dojo/_base/Deferred", |
|
"dojo/domReady!" |
|
], function(registry, FisheyeLite, parser, query, easing, on, Deferred){ |
|
|
|
var beenDestroyed = false; |
|
var hasInit = false; |
|
var init = function(e){ |
|
|
|
if(e && !beenDestroyed){ return; } |
|
e && e.preventDefault(); |
|
|
|
// turn li's in this page into fisheye items, presumtiously: |
|
query("li.bounce").instantiate(dojox.widget.FisheyeLite,{}); |
|
|
|
var l = query("span.line") |
|
.instantiate(dojox.widget.FisheyeLite,{ |
|
// make a widget from each of the lines in the lineHeightTest |
|
properties: { |
|
fontSize:1.75 |
|
}, |
|
easeOut: easing.backInOut, |
|
durationOut: 500 |
|
}); |
|
|
|
if(!hasInit){ |
|
on(l, "click",function(e){ |
|
// you can still access the onclick of the real node |
|
alert(e.target.innerHTML); |
|
}); |
|
} |
|
|
|
var lm = query("a").instantiate(dojox.widget.FisheyeLite,{ |
|
properties:{ |
|
fontSize:1.15, |
|
letterSpacing:2.85 |
|
} |
|
}); |
|
if(!hasInit){ |
|
// stop anchors from doing _anything_ |
|
on(lm, "click", function(){ |
|
//TODO: stop event |
|
}); |
|
} |
|
|
|
query(".imgBounce").instantiate(dojox.widget.FisheyeLite,{ |
|
// all the images need a width and a height (well, not need, |
|
// but to scale you do) |
|
properties: { |
|
height:1.75, |
|
width:1.75 |
|
} |
|
}); |
|
|
|
// show the new non-numeric multiplier version of fisheyelite |
|
query(".advancedProps").instantiate(dojox.widget.FisheyeLite,{ |
|
properties:{ |
|
height: { |
|
end: 100 |
|
} |
|
} |
|
}) |
|
|
|
// |
|
var vv = 0; |
|
var r = 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); |
|
|
|
beenDestroyed = false; |
|
hasInit = true; |
|
}; |
|
|
|
var destroyAll = function(e){ |
|
e && e.preventDefault(); |
|
if(confirm("really?")){ |
|
dijit.registry.filter(function(w){ |
|
return w && w.declaredClass == "dojox.widget.FisheyeLite"; |
|
}).forEach(function(w){ |
|
w.destroy(true); |
|
}); |
|
beenDestroyed = true; |
|
} |
|
}; |
|
|
|
Deferred.when(parser.parse(), function(){ |
|
init(); |
|
query("#restore").on("click",init); |
|
query("#destroy").on("click",destroyAll); |
|
}); |
|
}); |
|
</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> |
|
|
|
<div> |
|
<div data-dojo-type="dojox/widget/FisheyeLite" data-dojo-props="fontSize:1.25" style="padding:3px" |
|
><a id='destroy' href="#" class="fisheyeTarget">test destroy()</a></div> |
|
|
|
<div data-dojo-type="dojox/widget/FisheyeLite" data-dojo-props="fontSize:1.25" style="padding:3px" |
|
><a id='restore' href="#" class="fisheyeTarget">restore</a></div> |
|
</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 data-dojo-type="dojox/widget/FisheyeLite" |
|
data-dojo-props="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 class="advancedProps" style="height:25px; background:#000">Lorem</p> |
|
<p class="advancedPropsToo" data-dojo-type="dojox/widget/FisheyeLite" |
|
style="height:25px; background:#000" |
|
data-dojo-props="height:{end:150}, /*easeIn: fx._defaultEasing, easeOut: fx._defaultEasing,*/ durationOut: 175" |
|
>Lorem</p> |
|
|
|
<p>the end</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> |
|
</body> |
|
</html>
|
|
|