h1

GSoC for WordPress – First Update – jQuery and mypageorder plugin

June 4, 2007

This year, I was one of the lucky students to be selected to work in Google Summer of Code (GSoC). Better yet, I will be working in a project for the mighty WordPress, this incredible open source blogging platform from which I write now. My project aims at adding “drag and drop” functionality to the page list in the administration area of WordPress, allowing users to easily change the order at which their static pages are displayed.

The program officially started in May 28th. This week I was still a little overwhelmed by some school work (in Brazil it is actually Winter of Code!) and with my final duties from my curricular internship at LocaWeb, where I was also working with the WordPress blog (it was a good warm up for GSoC).

Some ultra-compressed and badly explained technical talk follows (be prepared!).

I was able to study a little about the jQuery javascript framework and how it differs from Prototype. As it turns out, it seems that everybody out there, like WordPress itself, is moving towards jQuery (Drupal is another open source example). It is lighter (only 19kB, compared to more than 60kB for Prototype), faster and more code efficient, thanks to its “chainability” design. Its use of CSS selector sintax to pick up DOM elements is also very neat, even thought Prototype nows has this feature as well (using $$() instead of $()). This is a tiny sample jQuery code, that should add some text to all links in a document and make then all red:

$('a').append("<b>[>>LINK]</b>").css("color","red");

It actually works, all in one line! Reminds me of Ruby (and its almost magic code efficiency)! Chainability means we can chain method calls indefinitely, because all of jQuery methods return a list of elements (usually the same one that was generated by the $(), unless the method is a filter). All methods work with arrays, therefore jQuery reduces the amount of for loops that need to be used. Achieving the same effect with plain javascript would take a few lines, maybe more than 10. Even with Prototype, with CSS selector syntax, it wouldn’t be so easy, and we would still need to use an iterator.

At first I was worried that I wasn’t going to have all the neat UI elements Scriptaculous provides for Prototype, and would have to do it all by hand (specially the draggable element). As it turn out, there is Interface, which is Scriptaculous’ equivalent for jQuery, and it has Draggables and Sortables elements, that I will hopefully be able to use. It seems to have almost everything, if not more, that Scriptaculous does.

This example, posted in the Interface homepage, shows a draggable folder tree. It supports changing hierarchies, and we could use something similar to change the parent of a page. We could combine it with the Sortable element to change the order inside the same level of hierarchy.

One aspect of implementing the ability of dragging and dropping in the page list is that is that we don’t want the user to lose the functionality they already have, such as clicking on the “edit” link, or selecting the title of a page (to copy and paste, for instance). To avoid that I intend to use some sort of “dragging handle”, that the user should grab in order to move the item (as oposed to clicking anywhere in the item). I like the example of Todo-Lists in the Basecamp app, as shown in this podcast demo. jQuery’s Interface has built-in support for drag handles in its Draggable , so this should be easy to do.

Earlier this week I posted in the WordPress trac, under the ticket that reports the feature I am going to implement, announcing my project. Cpoteet replied and pointed the existence of the mypageorder plugin. I installed it in my test blog and took a quick pick at the code, which is very simple and straightforward. It provides the user with an extra page in the admin, with a list of pages sortable with drag and drop using the Sortable Scriptaculous element (basically in its unaltered state). To handle hierarchical pages, it allows the user select a page that has children and open a new page to order that hierarchy. The plugin is a great step foward, if compared to what is provided in WordPress to order the pages, and very useful. However, it is not integrated in the main page list (since it is a plugin, it couldn’t mess with this page) and doesn’t feel like a native functionality. The way it handles hierarchical pages doesn’t allow the user to view all pages in the list, is not very “ajaxian” and doesn’t allow the user to change the parent page of a subpage.

I still think I could reuse some of mypageorder’s code, specially the server part (if its license and author permits). It is no rocket science, though.

Next week I plan to take a look at the bbPress code that allows page ordering, begin to play with the Draggable and Sortable element in Interface and think on how should the drag handle be.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: