Circular Menu with D3.js

WheelMenu is a circular menu aimed at mobile that allows you to quickly select from a small set of options quickly and with your thumb. You can see an example of the WheelMenu running in jsFiddle.
Right now the menu only works for 6 slices, but let me know if you need other number of slices.

Check the github page for more details on how to use the WheelMenu and for access to the source code. If you're using the OutSystems Platform, head over to the community and download the component.

Credits to the WheelMenu original design go to Tiago Simões and Daniel Nobre.

D3 drag and drop tree

I needed a heavily customizable drag and drop tree and I couldn't find one that really fit my needs, so I built one. It was also a great excuse to learn about D3, although most of the work was messing with the quirks of drag and drop.

Anyway, although the code is far from decent and the tree is still work under progress, I decided to make it available to whomever wants to use. I hope it's useful for you, and be sure to let me know if you have any problems.

More info and download at github!

Automatically building a cache manifest file

HTML5 has the capability to work offline and it allows you to cache files of your application on the browser by using a cache manifest. The question is, which files to cache?

Simple applications, with an HTML file, a couple of JS and CSS files are not a problem. But as soon as you move to more complex applications, the number of files explodes - think imported CSS files, background images, images within your page, etc. So here's a little help to build your cache file!

1. Start by getting the offlineHelpers.js file and put it on your website. It's easier if you put it on the folder of the page you want to cache, but you can put it anywhere. If you don't have a site yet, download the whole project and play with the provided test.html file.

2. Be sure the page you want to cache includes jQuery. This is only needed to run the offlineHelpers script, you can remove it afterwards. You don't even need to download it, just src the script from here: http://code.jquery.com/jquery-1.10.1.min.js

3. Launch chrome (yes, for now it only works on chrome). Load the offllineHelpers script by opening the console (cmd+alt+j on the Mac) and typing $.getScript('offlineHelpers.js'). Next, call offlineHelpers.getCacheFile() on the console.

4. Calling getCacheFile should result on a bunch of debug lines (in gray) followed by your cache manifest file. Something like:

Getting stylesheets
Found an import: jumbotron-responsive.css
Getting JS files
Getting Image files
CACHE MANIFEST

# CSS Files
css/bootstrap.css
img/glyphicons-halflings.png
img/glyphicons-halflings-white.png
css/jumbotron-narrow.css
css/jumbotron-responsive.css

# Javascript Files
http://code.jquery.com/jquery-1.10.1.min.js

# Image Files
img/creatures.jpg

Next, tweak the result and copy to your cache.manifest file.

Let me know how this worked for you! If the script missed a file, let me know on the comments and I'll try to fix it!

Greasemonkey tips

Greasemonkey is a great Firefox add-on that allows you to add custom JavaScript to any web page. This simple concept allows you to do extraordinary changes to a web page and you can find a lot of pre-made scripts around. But if you want to do your own scripts, there's a few things that you should know before you start...

Registering events
Let's say you want to catch a button click. Here's how to do it:

var button = document.getElementById(buttonId);
button.addEventListener('click', myFunction, false);

Don't do stuff like button.onclick = "myFunction()" or even button.onclick = myFunction. It won't work.

Accessing element properties
Suppose you want to add some information to a link that you created to use during the onclick event. You must do it with:

lnk.setAttribute("attrName", value);

and fetch it with:

lnk.getAttribute("attrName");

Doing lnk.attrName or lnk["attrName"] will not work, and will return null when you access it.

Parameters in Event Handlers
Let's say you registered an event like mentioned above. The event always receives a MouseEvent argument, so you should declare the function like myFunction(evt). This is important because if you by accident register as an event handler a function that takes a boolean paramenter, like myFunction(flag), flag will always be "true" when called from the event.

Stopping the bubble
Assuming you defined your function like mentioned earlier, myFunction(evt), you can stop the event from bubbling by calling

evt.preventDefault();

Testing functions
Because Firebug is such a great tool to debug your scripts, you may want to check for Grasemonkey functions before you use them. Do it with something like:

if (typeof(GM_getValue) != "undefined")

And you should be able to run the script outside Greasemonkey for easier debugging.

More tips
Well, so far these were the problems I faced! :-) I'll update this as I keep discovering Greasemonkey's idiosyncrasies.

Web Testing

Last week I updated my sister's in law web site to have expanding folders. The solution I implemented is far from perfect but it does the trick. And since I used the prototype framework for the JS code, I figured it shouldn't have any problems in either IE or Firefox. I was wrong...

Turns out I forgot to test the web site in IE, and the first time my wife went there to take a look, it didn't work. Apparently nextSiblings doesn't work properly in IE... so instead of:

my_element.nextSiblings()

I had to do:

Element.nextSiblings(my_element)

This is really a pain for me because it means I have to test the site in both IE and Firefox all the time. And since I use Ubuntu, that didn't seem like an easy task. Wrong again!

There's a project called IEs4Linux that allows you to run IE on any computer that runs Wine. So I followed the instructions on the website, installed the thing, and in about 5 minutes (mostly because of download times) I was running IE 6 on my Ubuntu machine. I actually found out and solved the above problem all in Ubuntu. Sweet!