Archive for June, 2007


Demo of the AJAX table swap

June 29, 2007

As promised, I am posting a static demo of the legacy page list being replaced, via AJAX, by its sortable version.  It can be seen here. With this approach, we won’t have to mess too much with the WordPress core and will have a very similar functionality to the one proposed before.

Summarizing,  we will have an AJAX call fetch the sortable version of the list (made with ULs and DIVs) when the user presses “Edit Page Order”. Alternatively, we could send this list already in the initial page fetch, and keep it stored in a variable, until the user pressed the button. We now need a “Cancel” button, because the user may want to return to the default view of the list without committing the page ordering changes. In the previous version we didn’t need the “Cancel” button, because everything that could be done with the page list could also be done when “drag” was enabled.

The look of the whole thing is still very rough. I think the sortable version shouldn’t have the “actions” column, and probably won’t need the “drag handle”, making the whole item draggable. They were essential in the previous version, but for this one, as the only function the sortable list will have is sorting, those things are pointless.

The sortable page list should probably have a more distinct appearance, making it easier to tell from the default page list. Also, the “standard” AJAX animations, informing the user something is being loaded, should also be included.

Another approach I have been thinking of, way more radical, would be generating the sortable version of the list from the legacy one, in realtime, using javascript, by interpreting the legacy list. It wouldn’t be very hard, as jQuery makes it very easy to search for things in HTML. The advantage would be not needing to mess with the page list php code at all and not having to load anything via AJAX (it would be faster for the user). But I think it would couple the code too much, and future changes in the table could break it. Even if that wasn’t the case, it feels too quick and dirty to me.

There are still some bugs in the sortable list (adding a page as a child of another who has no children yet is not working). Also, other ugly things are not treated (eg. the user could click twice in the Edit, before the list is loaded). But this is still a prototype. 😉

In the next two weeks, before “Mid-Term”, I should dedicate 24 hours a day to the project (with some occasional time for the bathroom and some junk food), so expect things to go much faster from now on. Unfortunately, here in Brazil it is winter and our vacations and shorter. Mine are only starting now and my college is very demanding, specially in the last weeks of the semester.


A dreadful week

June 23, 2007

This week is my last week for the college semester and I am really overwhelmed with the amount of reports and tests I have to deliver and study for. So I will leave a more detailed progress report to be posted next week. From next week on I will finally be on vacations, and I am planning to dive deep into the project.

For now, what I can say is that the path of dynamically reloading the page list, with AJAX, when the user presses “Edit Page Order”, as pointed out in the comments in my last post, seems to be the best. I plan on posting a working demo of that next week, as soon as college gets off my back for a while.


HTML Draft of the new WordPress page list

June 16, 2007

I managed to put together a HTML/CSS draft of what the new page list should look like. It can be viewed in this link. Please note it’s only static HTML, and the “Save Page Order” still doesn’t do anything.

The list, that looks like it was done with a HTML table, was implemented using only DIVs and ULs. This effect was quite hard to achieve, because CSS positioning was actually not designed to do that kind of stuff. A lot of tweaking had to be done. Some extra tweaking also had to be done to make it work in both Firefox and IE7 (didn’t test in other browsers).

As discussed in my previous post, using HTML tables (like the page list is currently implemented in WordPress) would make it very hard to implement the AJAX sorting behavior. Nesting of table rows is not supported by HTML (ok, I could nest whole tables, but the resulting HTML would probably look nasty, and I am still not quite sure it would be usable with jQuery’s Sortable class – I will probably try it latter on).

This UL/DIV approach does have some shortcomes. First, the columns don’t adapt to their contents like in regular HTML tables (when there is big chunk of text). If you enter more text than would fit in its original size, some text will overlap. This could be a problem with extra long user names and page titles (a solution would be to truncate the text, with JavaScript probably). Second, notice that I removed the “ID” column, present in the original WordPress page list. I wanted an “auto-stretch column” for the page title, but I could have only one, and it needed to be in the left side (if you see how the HTML you will understand why). Also, since the left side column size will vary to show nesting, the ID column, being very small, would fall out of place and look weird. I intend to write the ID at the end of the page title (something like “Page Title (ID:12)“). It could also be in one of the fixed columns in the right.

If you use Firefox and try to change the text size (View>Text Size), you will notice the list will resize gracefully and nothing will fall out of place. This is thanks to the fact I used “em” as the measure unit in the CSS positioning code.

The javascript (jQuery) that implements “drag and drop sorting” was ripped from bbPress, with minor modifications. A lot still needs to be improved/adapted/implemented on it, but already serves as a “proof of concept”.

I believe the end result resembles the original Page list quite satisfactory. This approach allows us to add/remove as many fixed width columns as required, making it usable also for other parts of WordPress that require sorting. The HTML code is quite clean (although the CSS is pretty complex and not so easy to maintain).


Ordering in bbPress

June 9, 2007

Begining with a small amend: I forgot to mention in my first post that in all GSoC projects we have mentors. A mentor is an expert from the the open source organization the project is being held for, that should guide and lecture us. My Mentor is Michael Adams (his blog and his bio), from Automattic (the company that created and supports WordPress). So, Michael, greetings from your padawan. : )

Now with the main topic:

I have been looking at bbPress, which is a forum software created by the WordPress folks. It has a “forum order” mechanism which allows reordering and hierarchization at the same time. It is pretty cool and functional. It also doesn’t get in the way of the user (who is not at risk of dragging things unwillingly). It uses jQuery and Interface’s Sortable element, aparently with a little hacking, but not much.

Read the rest of this entry ?


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!).

Read the rest of this entry ?