|
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.
|
Sep
6
|
|
[note for non-US readers - by pimped I mean - 'tricked out' or 'blingbling' as in Pimp My Ride - nothing to do with prostitution]
Recently, I managed to convince the nice folks that run blogs.sun.com to host the Dojo toolkit - which they did. Subsequently I've been meaning to find the time to add some Dojo widgets to this blog and finally got around to it - see the Fisheye Category chooser at the top of the page. Hold off with the feedback for now - this is just a first hack and I know it needs some buffing.
What I thought might take an hour or so took much longer. My initial inclination was to use a tabbed layout for the categories but I ran into considerable 'impedence mismatch' between Roller's model and Dojo's so I dropped it and went for the much less intrusive FishEye instead. The tabbed layout will be a much better fit for the right-hand nav bar (and save space too). There are some other layout containers that might be a good fit for actual entries.
I've noticed that the image scaling is rather sucky with Firefox but is much cleaner on IE - though on IE the whole thing is badly broken - sorry IE users - you'll need one of these 
- I probably need to experiment with larger image sizes but I was trying to keep them as lean as possible. Note - I used transparent PNGs (ie. they have no background) - that's a pretty neat Photoshop trick.
I'll post some code when it's been tidied up a bit
Technorati Tags: dojo, javascript, roller, pimped
