It seems that the first version of the jQuery Who's Who library is finished. I present here what I've done and some feedbacks on the use of jQuery.

How it works

It is very simple to use. You just have to include the javascript files (jquery and jquery.whoswho) and the stylesheet files (a CSS file I provided for the example). Then you must configure it :

• IMAGE_ID : this the id of the image you would like to tag.
• JSON_URL : URL which will provide content to the list. The format of this file must be :

{
 10:{"first_name" : "Kylie","last_name" : "Minogue"},
 20:{"first_name" : "Robbie","last_name" : "Williams"},
 30:{"first_name" : "Mickael","last_name" : "Jackson"},
 40:{"first_name" : "Madonna","last_name" : ""},
 50:{"first_name" : "Christina","last_name" : "Aguilera"},
...
}

• SQUARE_BOUNDARY : size of the square. By default, I set it to 100px.

I have tested it a lot but some bugs may remain. Just tell me.

Structure of the package

This is how I have organized the package :

• data : some data for the tests
• lib : where the libs are placed : jQuery 1.2.3 and jQuery Dump Plugin (for debug and dev purpose only)
• packed : the packed versions of the jQuery Who's Who library and the CSS file.
• source : the source. :-D
• LICENSE : the license : GPL 3.0.
• pack.bat / pack.sh : a little script to easily pack the files (reduces the files size to 50%). It requires the YUI Compressor (BSD).
• README : the readme file, describes how to install this plugin.
• test.html / test.packed.html : a test file to demonstrate the use of the jQuery Who's Who library.

Best practices

And a little feedback of my jQuery's use.

It's very easy to use it and to bind functions to events, however, this tutorial recomands to bind a function to an event only when it is required.

It may occur that the DOM you would like to access doesn't exist at the moment you are running it. It means that if your code is appending HTML after a DOM node on a button click, you would like to access and manipulate this new fresh inserted code. It is not possible unless you call the bind function at the perfect moment.

$(document).ready( function(){


$("#button").click(function(){


$("#test").append('<div id="inner"></div>');

});


});

In this exemple, when we click on the button element (could be a real HTML input button, or not), jQuery inserts some HTML (a new div in this case) at the end of the inner HTML of the test element. So you have a new div which wasn't there before.

Then you can bind some event on this new element by adding code just after the append function has been called. The issue is that at each click, you will bind the event. Then after two clicks, the HTML code will be appended two times rather than one time as expected. The solution is to separate the functions adding content to the DOM and the functions that bind it. The way to do it is to concretely create a function outside the click bind and put our new bind inside it. Then, at the end of the click bind function, we just call the function we have created.

The other point is the way to develop and to debug your own application :

• the visibility of the function and the variables is reduced to the anonymous function declared in the $(document).ready() call. So it's a bit difficult to access it from outside and to know what is the value of the variable. I've found the provided plugin on the net, it is very useful and allow to easily debug your application.

• the use of FireBug allows to quickly test the javascript, line by line. Moreover, you can test a piece of script in the console command line and inspect it in the DOM Inspector.

Next Step

And finally, the next step is to integrate this library in eZPublish, I thought about some interesting features like a generic db connector to extract data from db and output JSON. By the way, it will use eZComponents...