First public release of the Seaweed Plugin

In the past year I have been developing a JavaScript API called “Seaweed” (The seamless web editor – see http://seaweed-editor.com) for my masters project at the University of Waikato. The API allows people to directly edito content on a web page without switching to edit mode. (It is kinda of like the “contentEditable” attribute – but with more control and better browser support). Play with a demo at http://seaweed-editor.com/demo.

My research is to investigate various aspects of “seamless editing”. I decided to use WordPress to power this investigation by developing a plugin that allows WordPress users to edit their posts/pages/comments directly on their Blog – without the need to use the administrator! Try it now at http://wordpress.org/extend/plugins/seaweed. NOTE: WordPress.com users may have to wait a while for WordPress.com to host the plugin.

Seamless editing is cool, it beats WYSIWYG editing and HTML source editing any day (of coarse there are situations where the old-school way of editing may be more beneficial). When users install this plugin, they must first sign up to my Experiment which gathers usage data. If you have WordPress and you can install plugins – please install mine and sign up now!

Inferring the Locale text direction with Javascript

Here’s a hack to detect which is the locale text direction (e.g. left-to-right for English or right-to-left for Hebrew) using JavaScript:

/**
 * Detects locale text direction...
 * @return {String} "ltr" or "rtl"
 */
function detectTextDir() {
   var container = document.createElement("p");
    container.style.margin = "0 0 0 0";
    container.style.padding = "0 0 0 0";
    // container.style.textAlign = "start"; // If CSS 3+ 
    container.style.textAlign = ""; // Explicitly override text align that might be assigned via style sheets
    
    var span = document.createElement("span");
    span.innerHTML = "X";
    
    container.appendChild(span);
    document.body.appendChild(container);
    
    // LTR if text position is nearer left of container, RTL if text position is nearer right of container
    var localeDirection = span.offsetLeft < (container.offsetWidth - (span.offsetLeft + span.offsetWidth)) ?
        "ltr" : 
        "rtl";
       
    document.body.removeChild(container);

    return localeDirection;
}

A limitation is that it doesn’t work if there is a style sheet present which explicitly assigns a text-align value other than “start” for paragraphs directly in the document body. You could probably tweak the idea to use something more obscure like an address block to reduce chances of this happening.

A Simple Javascript Model-View-Controller API

Model-View-Controller is such a useful and powerful design pattern. You can use MVC for more than just physical views (i.e. GUI’s), but abstract views as well (e.g. pure data structures). You can even use MVC as an event mechanism.

IE Whitespace madness

Internet Explorer’s DOM has a few issues regarding whitespace. Whitespace symbols in HTML 4.01 are any of the following symbols:

IE’s cloneNode doesn’t actually clone!

When you want to deeply clone a node you use the cloneNode(true) method on the element you want to clone (see w3′s DOM Level 2 specifications)

IE Cant even clone