Archive for the ‘Google Summer of Code’ Category


The final bits of GSoC

September 16, 2007

I am now considering finalized my work on the GSoC project (from now on call it voluntary work… ;)). After a lot of bug fixing and some documentation, I am releasing the 1.0 version of both NestedSortables jQuery plugins. Please, visit the plugins’ homepage to check out and comment on the documentation. I have compiled the scripts into compressed format and they are now about 75% smaller, and will download pretty fast.

After a lot of helpful comments from folks at the WP-Hackers list, I improved a few details in the WordPress page ordering. I also managed to fix all the remaining problems I mentioned in my last post (more about them later on), so I believe it is now ready to be rolled out in the development version. To try it out, you can check my sandbox (user: test / pass: test), download the development version of WordPress with it (up-to-date as of 19-Sep 2007 16-Sep-2007 WP from trunk), or apply it to your own working copy of WordPress from SVN trunk using this patch (you will probably also need this image, which I think can’t be included in the patch). I will submit the patch to the WordPress TRAC. I hope it gets reviewed and accepted.

Read the rest of this entry ?


First showcase of page sorting in WordPress

September 3, 2007

I have finished the integration of the nested sortable widget into WordPress. I have set up a Sandbox WordPress installation, which can be accessed here (use test/test for login, go to “Manage->Pages”, and click “Edit Page Order” in the end of the page list). I have also put up a diff file (untested), which can be applied to your WordPress SVN checkout if you want to try it out on your own instalation (Automattic folks, don’t apply this yet to the WordPress SVN, there are a few details left to be solved, such as compressing the JS code and others, as I explain bellow).

Read the rest of this entry ?


The widget is feature complete now

August 25, 2007

UPDATE: The plugin has now reached its 1.0 version, and is available in a compressed version and with documentation. Please check the project homepage at:

The widget is feature complete now and working well with the major browsers I have tested it (that is, FF2, IE7, IE6 and Safari 3). It took a little bit of hacking to remove the bugs in IE, but in Safari it worked like a charm the first time I tried it (and Safari is also the browser where it looks and feels faster – they probably have the best JavaScript interpreter out there). I changed a few things in the underlying Nested Sortable plugin, so it should be a lot faster now, in all browsers. The test demo can be seen here as usual and is now up-to-date with my latest SVN updates.

Serialization will, by default, send the data using POST and encoding the data using the “query string standard” , which most server side languages should automatically convert to their equivalent data structures for arrays and hashes. You can also configure the widget to return the data in JSON format (for that you need to include the JSON jQuery pluing) and process it in your server using one of the countless JSON libraries available. Following the REST principles under the HTTP protocol, if the HTTP response has a success code the widget will think data was saved correctly. You can even use the same server path (ie. the same script) to retrieve and save the data, since it will use GET to retrieve and POST to save.

I am aware that the “incremental” feature (showcased in the last example) does have a few problems when you change the item from one “page” to the next (even though you see things in a continuum , what you see is actually the different pages, each inside its own UL with a NestedSortable, being rendered in sequence). I am also aware there is a minor cosmetic issue with the spacing of columns in IE6. I am not much of a CSS browser quircks’ wizard and “incremental” shouldn’t be used in WordPress, I presume, so I am going to leave those issues to be solved after the Widget is integrated in WordPress.

If you find any other bugs or have more suggestions, please post a comment.


New Improvements in the Widget

August 21, 2007

Following Mike’s suggestions, I am now using jQuery’s slideIn() and slideOut() as the default effect for page transitions. They are being applied in parallel (the old page slides out while the next slides in). To make this change I had to do some changes to the way different parts of the widget are displayed, I believe things are “jumping up” a lot less when you change from one page to the other. I also added the possibility for the user to use his own custom functions for the transition, which can be applied in parallel or in series.

I have also added the “incremental” option, which will make the new pages that are loaded be incremented to the existing ones in the user display. This is usable by itself. My intention was to allow the user to display the list inside a scrollable div to go along with this option, but after a few tests, I am seeing the dimensions stored in the Sortables would need to be recalculated every time you scroll the div, and I am afraid making this work seamlessly could take some time and possible changes to Interface’s Sortables itself. It would probably be unbearably slow as well.

I changed the demo to showcase these and also a lot of other options that are available. The demo will now load 5 different instances of the widget.

It can be seen here.


Nested Sortable Widget

August 19, 2007

UPDATE:  The plugin has now reached its 1.0 version, and is available in a compressed version and with documentation. Please check the project homepage at:

I am posting a demo of what I am calling the Nested Sortable Widget here.

In this example I am only showing a small subset of the possible configuration options it has. The component/widget is basically finished, but there is still a tiny bug in IE when you drag items with more than one hierarchy, which I am going to investigate soon. The “save” function also need a few extra hours of work to be finished, but that doesn’t affect the demo. Reports for any other bugs are welcome.

The main features of the component are:

  • Loads data from a JSON data source, with a predefined format (I will explain it once I create the final doc. for the widget, but it is very simple and can be inferred from the demo) . This format is very compact and very easy to generate and manipulate in any server side language, since it only uses standard data structures, like arrays and hashes, unlike XML.
  • Support for pagination, both in the server (it will only load smaller chunks of data each time) and in the client (it will display smaller chunks of data at a time).
  • Funky way to move items from one page to another, following Mike’s suggestion.
  • Can display data with multiple columns, all you have to do is change your data source.
  • Allows you to change the nesting direction to right to left, and it will change the order of the columns automatically.
  • Lots and lots of easy options to to customize the visual appearance of the widget and most of it other aspects. Don’t worry, I will document them all (or you may dig in the code and figure it out now :)).

Read the rest of this entry ?



August 8, 2007

I am currently working on the “Nested Sortable Widget” that I mentioned in the last post. I wanted to be able to showcase it in this post already, but I realized I was taking too long to give out some feedback, so I decided to write just to give some news.

The widget is almost complete, but I am running some issues with pagination, which is a lot more complex than I initially thought, primarily because you can’t show exactly the same number of items per page, due to the nesting (the pagination needs to be “soft”). But I think I am on my way and should be complete in the next 2 or 3 days. Summing up it will be able to fetch a list of nested elements represented in JSON, will display it, allow the user to change the order/nesting and will send it back to the server.

In the meanwhile I created a Google Code project for the NestedSortable plugin and hosted it there.

I hope to be able to write again pretty soon, with good news!


Nested Sortable jQuery Plugin

July 22, 2007

UPDATE: The plugin has now reached its 1.0 version, and is available in a compressed version and with documentation. Please check the project homepage at:

I am showing now the first version of what I call the “Nested Sortable” jQuery plugin. It is based on the same nesting idea shown on the previous prototypes and used on the bbPress forum ordering, but it is totally rewritten and has a very different (and I believe simpler/more efficient) inner working.

A demo of it can be seen here.

The highlights of it are:

  • Built on top of Interface ‘s Sortable and maintains compatibility with it. This means you can use the same options available on the Sortable, plus a few extra ones specific to the nesting. You can also mix Sortables and NestedSortables on the same page.
  • Just as easy to use (see the code examples on the demo).
  • Can be easily configured for left-to-right or right-to-left nesting.
  • Can be used with any type of HTML element (that allows nesting), not only ULs and LIs.
  • You can define a class for the nesting the draggable is currently hovering on, to make it clearer to the user (see my ugly yellow example – could be made pretty with some css styling).
  • All the previous bugs/misbehaviours with the prototype are gone (hopefully without additional ones being introduced).

It was tested under IE7 and FF2. What is still lacking for it to be complete (and useable) is a serialization function, which I should finish in a few days (serialization is now complete, see my comment bellow). As things evolve I should probably add a few callbacks to allow its behavior to be easily configured.

So, the next step for the WordPress page list project is to create a higher level jQuery plugin that will be built on top of this one and will, given a JSON object input, fetched via AJAX, dynamically create the Nested Sortable, with pagination support, using the idea Mike gave on the last comment (the user hovers over a Droppable, which should fetch and display the additional pages). It will be more like a widget.