|
Dec
3
|
|
A couple of months ago I added a category chooser that uses Dojo (a powerful JavaScript library) to create a Fisheye effect. So, somewhat belatedly and as promised here's the code and a bit of explanation. Note, this was pre-Roller 3.0 so uses some of the old Roller macros.
First, you need to pull in the right JS libraries. On blogs.sun.com - the Dojo library is installed under roller-ui/dojo.
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: false};
</script>
<script type="text/javascript" src="$url.absoluteSite/roller-ui/dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.FisheyeList");
dojo.hostenv.writeIncludes();
</script>
Next is a little JS function to display a category :
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function selectCategory(catname){
var url;
if (catname == 'All' ) {
url="$url.home"
}
else {
url="${url.home}category/"+catname
}
window.location.replace ( url );
}
</SCRIPT>
Next you create the Dojo Fisheye component :
<div class="chooser">
<div class="dojo-FisheyeList"
dojo:itemWidth="110" dojo:itemHeight="40"
dojo:itemMaxWidth="250" dojo:itemMaxHeight="90"
dojo:orientation="horizontal"
dojo:effectUnits="1"
dojo:itemPadding="0"
dojo:attachEdge="top"
dojo:labelEdge="bottom"
dojo:enableCrappySvgSupport="false" >
<div class="dojo-FisheyeListItem" onClick="selectCategory('All');"
dojo:iconsrc="$IMAGES/cat-All.png"
</div>
<div class="dojo-FisheyeListItem" onClick="selectCategory('About Me');"
dojo:iconsrc="$IMAGES/cat-AboutMe.png">
</div>
<div class="dojo-FisheyeListItem" onClick="selectCategory('Books');"
dojo:iconsrc="$IMAGES/cat-Books.png">
</div>
<div class="dojo-FisheyeListItem" onClick="selectCategory('Roller');"
dojo:iconsrc="$IMAGES/cat-Hacking.png">
</div>
<div class="dojo-FisheyeListItem" onClick="selectCategory('General');"
dojo:iconsrc="$IMAGES/cat-General.png">
</div>
<div class="dojo-FisheyeListItem" onClick="selectCategory('Java');"
dojo:iconsrc="$IMAGES/cat-Java.png">
</div>
<div class="dojo-FisheyeListItem" onClick="selectCategory('Home Life');"
dojo:iconsrc="$IMAGES/cat-HomeLife.png">
</div>
<div class="dojo-FisheyeListItem" onClick="selectCategory('Gadgets');"
dojo:iconsrc="$IMAGES/cat-Gadgets.png">
</div>
<div class="dojo-FisheyeListItem" onClick="selectCategory('W3');"
dojo:iconsrc="$IMAGES/cat-W3.png">
</div>
</div>
</div>
You should make this code generic by iterating through the categories but you'd need to label your images consistently. The only reason I did this cut and paste iteration was to aid debugging. I'll tidy it up at some point.
All the code above is in the Weblog template - which I have uploaded here. You'll also need some CSS so I've uploaded my template here. Feel free to hack, use, abuse as you see fit but shoot me a mail or leave a comment if you make any useful improvements.
I'm well aware this doesn't work in MS IE - I have no idea why; and don't have the tools to debug it. As Dojo is browser independent (or claims to be) - the problem is likely mine. Leave a comment if you can see what is wrong.
