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!

/**
 * 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.

// The user document model
var userdoc = function() {

  // Model data
  var data = "", selStart, selEnd;

  var ud = {

    /**
    * Sets the document data.
    * @param {String} newData The new data to set.
    */
    setData : function(newData) {
      data = newData;
      this.fireEvent("DataChanged", newData);
    }
  };

  // Controller: user clicks adjusts selection model data
  document.getElementById("userdoc").onclick = function(e) {
    // Set cursor/selection logic
    ud.fireEvent("SelectionChanged", selStart, selEnd, e || window.event);
  }

  return ud;

}();

// Make the userdoc a Model
declareModel(userDoc);

// The tool bar view
var toolBar = {

  // .. Interface code...

  /**
  * Listener function
  */
  onSelectionChanged : function(selStart, selEnd) {
     // Update GUI Buttons according to selection
  }
};
userDoc.addObserver(toolBar);

// Add observer for the main menu
userDoc.addObserver({
  onDataChanged : function(data) {
    menu.saveButton.setEnabled(data != lastSavedData)
  },
  onSelectionChanged : function(selStart, selEnd) {
    // Update revelent buttons according to selection
  }
}, menu);

for (var button in menu) {
  if (button.requiresSelection) {
    // Observe the document selection state
    // and synchronize this buttons enable
    // state according to the selection state
    userDoc.addObserver({
      onSelectionChanged : function(selStart, selEnd) {
        // this points to a button - which is enabled only 
        // if there is selection in the document
        this.setEnabled(selStart ? true : false);
      }
    }, button);
  }
}

To declare a model you just invoke the declareModel function passing the model object.

Whenever model data has changed (or when ever you want to raise an event), a fireEvent function will be present in the model object. There is no need to declare event types, you can just fire which ever event name you want. For example, if you fire an event named “Click”, all attached observers which a function called onClick will be invoked along with any extra/optional arguments passed to the fireEvent call.

The context which the observer event listener functions are called defaults to the observer objects themselves, otherwise you can provide a specific object. For example; in the code above observers are added to the user document model for every button which requires selection to be enabled, so during registration of each observer the context is set as the button objects (via the second argument). In the observer event code the this identifier points to the corresponding button.

The script for the MVC API:

/**
 * Extends the given instance into a model (wrt MVC).
 * 
 * @param {Object} subject The subject containing model data to be observed.
 */
function declareModel(subject) {
    
    // The list of registered observers for this subject
    var observers = [];

    /**
     * 
     * Notifies all observers that a specific event occured.
     * Extra arguments will be passed to the observer's relevent event functions.
     * 
     * @param {String} event   The event name to fire (excluding the "on" prefix).
     *                         For example, "KeyDown" would invoke "onKeyDown" in all observers
     *                         
     */
    subject.fireEvent = function(event){
        
        if (observers.length > 0) {
            
            // Construct additional arguments array
            var args = Array.prototype.slice.call(arguments);
            args.shift();
            
            for (var i in observers) {
                var observer = observers[i];
                
                // If the observer has declared a listener function for this event invoke it
                if (typeof observer.ref["on" + event] == "function")
                	observer.ref["on" + event].apply(observer.context, args);
            }
        }
    };
    
    /**
     * Adds an observer for receiving event notifications.
     * If the observer already exists in the observer set it will not be added twice.
     * 
     * @param {Object} observer         An observer to add to the set.
     * 
     * @param {Object} context          (Optional) The context at which the events should be invoked in.
     *                                  Will default to the observer object.
     *                                  
     * @param {Boolean} notifiedFirst   (Optional) True to be the first observer to be notified in the current list.
     *                                  Otherwise it will be added to the end of the list
     */
    subject.addObserver = function(observer, context, notifiedFirst){
        
        // Ensure that observer array is a set
        if (observerIndex(observer) != -1)
            return;
            
        // Create observer instance
        observer = {
            ref : observer,
            context : context || observer
        };
        
        // Add to list depending on requested order
        if (notifiedFirst) observers.unshift(observer);
        else observers.push(observer);
        
    };
    
    /**
     * Removes an observer from the subjects observer list.
     * 
     * @param {Object} observer An observer to remove from the set
     */
    subject.removeObserver = function(observer) {
        var index = observerIndex(observer);
        if (index >= 0) observers.splice(index, 1);
    };
    
    /**
     * @param {Object} observerRef The observer reference to check
     * 
     * @return {Number} The index in the observers array at which observerRef exists.
     *                  -1 if not found.
     */
    function observerIndex(observerRef) {
        for (var i = 0; i < observers.length; i++) {
            if (observers[i].ref == observerRef)
                return i;
        }
        return -1;
    }
    
}

• ASCII space ( )
• ASCII tab (	)
• ASCII form feed ()
• Zero-width space (​)

Refer to w3′s specifications here.

Querying InnerHTML and outerHTML

Now IE’s innerHTML and outerHTML adds all sorts of whitespaces when querying these properties. For example:

    var container = document.createElement("div");
    container.innerHTML = "<div><ul><li>I <em>like</em> sushi!</li></ul></div>"
    alert(container.innerHTML);

Prints:

<DIV>[][]<UL>[][]<LI>I <EM>like</EM> sushi!</LI></UL></DIV>

Where the “[]” symbols denote whitespace symbols. In this example the added whitespaces causes the alert to break them (probably a newline and carriage return) thus physically displaying:

<DIV>
<UL>
<LI>I <EM>like</EM> sushi!</LI></UL></DIV>

Maybe the implementor was trying to be helpful by adding these mysterious newline symbols before every block-level element for automatic readability. What a damn fool.

Is there a fix? Well, if you really need innerHTML to be precise you could walk the DOM tree yourself and spit out the markup as you traverse. You could bite the bullet can parse the string using regular expressions – and for every opening block-level element tag check for preceding whitespace symbols and eat them.

Creating DOM trees via innerHTML

When creating DOM trees via innerHTML, IE does not always create a DOM tree to reflect the exact HTML contents you pass it. This is because IE automatically collapses whitespace (normalization on the fly). For example:

    var container = document.createElement("div");
    container.innerHTML = "\n Apples \n"
    alert(container.firstChild.nodeValue.length);

All browsers except for IE print “10″, IE collapses the surrounding whitespace and prints “7″.

To over come this: don’t use innerHTML – if you need the DOM tree to be precise, manually create the DOM structures yourself. I tried using “pre” white-space styles but it still normalized. You could use a pre element but if you HTML contains block-level elements the markup will be invalid (pre only allows a select few of inline-level elements).

Note: you may find this useful: JS2HTML

See this bug report at quirksmode for more details.

Hope this article relieves some of your IE headaches… it probably just aggravated you.

IE Cant even clone

I found that IE’s cloneNode method is broken. Yes, broken! If you want the cloned DOM structure to be exactly the same (i.e. a clone) then don’t use cloneNode. Take this example:

    var container = document.createElement("div");
    container.appendChild(document.createTextNode("Apples"));
    container.appendChild(document.createTextNode("Oranges"));
    alert(container.firstChild.nodeValue); // Will Print "Apples"

    container = container.cloneNode(true);
    alert(container.firstChild.nodeValue); // Prints "ApplesOranges" on IE!

As pointed out by the comments in the example above, the cloneNode operation consolidates the two text nodes together as one! This is incorrect!

If you need cloneNode to keep the structure cloned, then you could write your own deep-clone method. Here is an implementation:

    /**
     * Deeply clones a node
     * @param {Node} node A node to clone
     * @return {Node} A clone of the given node and all its children
     */
    function cloneNode(node) {
    	// If the node is a text node, then re-create it rather than clone it
        var clone = node.nodeType == 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
   
        // Recurse     
        var child = node.firstChild;
        while(child) {
            clone.appendChild(cloneNode(child));
            child = child.nextSibling;
        }
        
        return clone;
    }

Happy coding!

Click here for a demo, this has an example with malicious intent: where it hijacks the system clipboard by constantly setting its content to a malicious URL (note it does not harm your computer and it ends when you close the page). Extra efforts can be made to avoid scrolling issues when focusing/selection the text input by using absolute floats. The example also is triggered via a mouse click – a malicious script would probably start the copying as soon as it’s loaded.

I’m not sure if the developers of Webkit would consider this a security hole or not. I have tested it on Safari 3 (Windows and Mac) and Chrome 2 (in which it works). I have reported it to them.

The Ideal JavaScript Clipboard Interface

The concept of the “clipboard” is simple; it is essentially a place for storing and retrieving a single unit/piece of cloned data. The code snippet below describes this clipboard concept in terms of a JavaScript interface.

Clipboard = {
    copy : function(data) {
        //... implemention …
    },
     getData : function() {
        // … implementation …
     }
};

A simple concept, a self explanatory interface. However, the description above is vague; it does not state where “the clipboard” resides, nor does it mention if there can be more than one clipboard.

Multiple Clipboards

Unfortunately there can be more than one clipboard present. There is one “System clipboard” present when a user is logged into their profile/account (some strange people might install/configure some features on their OS to support multiple system clipboards). Ideally, all applications should use the system clipboard when copying and pasting so its users can copy and paste between all applications. However this is not always the case. For example, Cygwin uses its own clipboard for Cygwin applications and unless the user explicitly turns on a clipboard integration option, the user cannot copy and paste between Cygwin applications and non-Cygwin applications.

The Web’s Sandbox Environment

Web applications run in a sandbox environment to prevent malicious scripts from infecting a visitor’s computer. The sandbox environment restricts access to system resources, such as the file system, and unfortunately, the system clipboard. Check out this article for one example why the system clipboard is a restricted resource. Fortunately restrictions for accessing the system clipboard can be overcome. There are many approaches for accessing the system clipboard – each approach has its own trade-offs.

Internet Explorer’s clipboardData Object

Microsoft’s Internet Explorer family makes life very easy to access the system clipboard. To set the system clipboard’s text, just use the clipboardData object. Here is an example:

var didSucceed = window.clipboardData.setData('Text', 'text to copy');

To access the system’s clipboard data (in a textual format) you simply invoke:

var clipText = window.clipboardData.getData('Text');

The first time the clipboardData object is accessed IE will prompt the user to allow the script to access the system clipboard (note: if you run the script locally IE does not bother with the confirmation and automatically allows it). IE version 6 and below will not bother asking the users (unless they have some non-default security features set to a “high level”). We cannot assume that users will choose to allow the script to access the system clipboard. If they decline, the clipboardData.setData method returns false. Unfortunately the clipboardData.getData method is vague: as it returns an empty string if the user chooses to decline. This is ambiguous since the system clipboard’s contents could actually be empty! Ideally it would return null. You could either always assume that empty string is a signal for failure to access the clipboard and try use a different method (read on), or you could attempt to verify that it was a failure:

var clipText = window.clipboardData.getData('Text');
if (clipText == “”) { // Could be empty, or failed
	// Verify failure
	if (!window.clipboardData.setData('Text', clipText))
		clipText = null;
}

Note: the verification method will not display two prompts, since the first prompt will be remembered for the session.

A Sketchy Work-around: The Flash Copy Hack

Jeffrey Larson came up with a nifty solution using Adobe Flash. To copy text to the system clipboard a small flash object is embedded into the document by manipulating the DOM, and the text to be copied is passed as a parameter to the embedded object. The Flash program then takes this text and copies it to the system clipboard via the Flash API. This was a security hole in Flash up-to and including versions 9, and was patched in version 10 so that unsolicited access to the system clipboard is denied. That is, Flash requires users to physically trigger the ActionScript clipboard code via a mouse click in order to grant access.

There still exists a workaround using that is supported by Flash 9 and 10. A small JavaScript library called ZeroClipboard exploits Flash, and fools the users, by placing invisible Flash movies over button elements. Whenever a user clicks on these invisible flash movies, ZeroClipboard successfully copies text to the system clipboard since the access is technically not “unsolicited.” This is a bit cheeky, some people are calling this process “click jacking.” It could be seen as a security flaw, and later Flash releases might put an end to this clipboard exploitation mayhem once and for all – who knows.

Using ZeroClipboard will only allow copying of text to the system clipboard on mouse-clicks. It does not allow access in any other contexts, such as timers, or CTRL+C keyboard events. It is a specific solution intended for Copy buttons.

One drawback is that this option does require the browsers to have the adobe flash plugin installed. So detection of Flash support is essential. Adobe has released a simple-to-use detection kit which would do the trick. Another simple one can be found here.

Flash version 9 has a bug in Linux systems where Web browsers are unable to support transparency for embedded Flash movies. Thus ZeroClipboard is not suitable on clients with this setup.

ZeroClipboard should be named ZeroSysCopy or something similar since it only provide unidirectional access to the system clipboard. I attempted to pursue a bidirectional implementation, but the ActionScript API does not provide any way of clipboard retrieval due to security risks. Adobe’s ActionScript API for the Flex environment does provide ways of getting to the system clipboard, but only on paste events from a paste button click on a context menu, or paste commands like CTRL+V.

Using Java Applets

Jeffrey Larson’s Flash copy hack got me thinking: what about taking a similar approach using Java applets instead of Flash movies. The beauty of Java is that it can communicate directly with JavaScript, thus can support both copy and paste operations. This is possible via a technology called Liveconnect. This solution has some pricey trade-offs though.

Liveconnect

Netscape developed an API called NP API (Netscape Plugin API) which is a cross browser plugin architecture supported by all major browsers except IE today (although some IE browsers do support it – IE’s equivalent is ActiveX). Liveconnect is one way to implement NP API-based plugins using JavaScript and Java. It was first supported in Netscape 4. A plugin could implement and return an instance to a Java class. The public methods exposed by this class was the scriptable interface for the plugin. The class could be called from JavaScript and even from other Java applets running within the page with the browser marshalling the calls between the various contexts. (see http://en.wikipedia.org/wiki/NPAPI#LiveConnect). The technology has matured since then and is still supported by Mozilla browsers, and Opera. Webkit does not seem to support it anymore.

Some browsers, such as Firefox, do not ship with a Java Virtual Machine plugin, since it “bloats” the browsers download size. So like the Flash hack, it depends on a plugin, which is a bit of a concern since the JVM plugins are relatively large to download.

Sun has respecified and reimplemented the Liveconnect technology as of version 6 update 10, which to my understandings just means that it is faster, more reliable and contains a bunch of extra features not needed for the purposes of some simple clipboard code.

Implementation

There are many issues and quirks with this technology. Luckily the code will be very small and simple for the clipboard. Most browsers support the ability to directly use Java inside of JavaScript, but some browsers have issues with some things such as creating new class instances. A more reliable approach would be to store the Java clipboard code into an applet.

Try the demo here(missing). Click here(missing) for the applet source. Note that it only works on some browsers, and most probably not on IE.

Hopefully the demo code is self-explanatory. In order to break out of the JVM sandbox environment java.security.AccessController.doPrivileged is used. Unfortunately that is not enough; after running a small test – the clipboard was found to be sandboxed. In order to access the system clipboard, the script must be digitally signed. You can sign the applet privately for free to get it running on your machine, but this is probably not practical for you. To digitally sign your applet publicly, you have to go somewhere like Verisign and purchase a certificate for your applet. This currently costs $500 (US) for one year.

Another implication worth noting is that on the first time the JavaScript talks to the Java applet, it will take a little while to load the JVM (several seconds). Once the JVM is loaded it runs smoothly.

Using Silverlight?

To the point: None of the Silverlight versions (currently up to version 3) does not provide system clipboard access. This is a shame because it interacts well with JavaScript and is supported by all the common browsers (even on Linux via Moonlight).

Mozilla’s XUL Approach

Mozilla has this inbuilt plugin called “clipboard helper” which can be accessed with JavaScript using the XUL API. Dion Almaer explored this approach, click here(missing) for a demo (try downloading it and viewing it locally on your machine).

The XUL approach has some issues, as pointed out by Dion. If you run the script locally an ugly dialog pops up containing a vague (and scary) message warning the user about the possibility of malicious code being executed. The user’s decision can be remembered. However it fails to access the clipboard when not running script from a local file. This can be overcome: One option is to set some obscure user preferences for Mozilla to allow access. This might not be practical, especially if you are planning to use the script on public sites. Another option is to digitally sign the JavaScript containing the XUL clipboard code – which of coarse is a pricey option.

Making use of execCommand

The execCommand JavaScript function is supported by all major browsers. The browsers all support the “Copy” and “Paste” commands. All browsers except for IE only expose the execCommand function for documents with design-mode turned on (for wizzywig editing).

Webkit does not protect the copy command, I wrote a post about this security hole. In both Chrome 2 and Safari 4 (on windows and mac) I managed to copy text to the system clipboard without any security warnings/promptings what-so-ever via execCommand. My assumption is that this will be the same for older versions of Webkit. This is very concerning. Mozilla throws security exceptions which can be only avoided via setting the user preferences or signing the JavaScript code. Opera and Konqueror just does not work. For IE it is possible to use this approach, as well as other approaches with MicrosoftTextRange objects, but it has no benefits over using the clipboardData object since it safeguards the copy and paste operations in the same way.

Implementation

Try it out here(missing). The first time the copy operation is invoked, an inline document in design mode is dynamically created and appended to the main document – thus exposing the execCommand. The inline document contains an textarea and is always hidden from the user. So to copy text to the system clipboard, the textarea‘s value is set to the text to be copied, then the textarea is displayed, focused and selected, and finally the execCommand("copy") method is invoked. The textarea will never be rendered (i.e. the user will not see a random flash on the page) because it is hidden straight after the copy command has executed (the UI will not refresh until after the script finishes executing).

The demo does have a scrolling issue: since the textarea is selected and focused the scrollbars will change if the iframe is not in view. You can easily overcome this behavior this by placing the iframe in a float (see below regarding keyboard events).

This script will work in IE, the first time the copy operation is executed a dialog will pop up asking the user for the script for permission to access the clipboard. Unfortunately there is no way of telling whether the user allowed or denied access. The MSDN docs specifies that execCommand returns true of false depending if the command succeeds or fails, however it will always return true even if the user denies access. Furthermore, while the prompt is displayed the users will see the internal frame rendered which might be confusing for the user (although this could be better concealed by using floats). The window.clipboardData object would be a better option, even if the user denies access via window.clipboardData, you probably would not want to blast them with any more security-risk dialogs.

Fabricating DOM Events

This is merely an idea, which is a similar approach to the execCommand approach. If it were possible to manually fire CTRL+C and CTRL+V events such that the browsers execute their “default” handlers, then by using similar trickery used with the execCommand implementation on demand access to the clipboard would be possible. However, the Web’s sandbox environment does not let JavaScript simulate user interactions (that would be very bad!). Just a thought.

Clipboard Events

IE, Webkit and FF 3+ supports up to six different clipboard events which can be invoked from context menus or key-commands like CTRL+C:

• onbeforecut
  • FF does not support this.
  • IE raises this event before a context menu is displayed and something in the document is selected.
  • IE only raises these on editable elements.
• oncut
  • IE only raises these on editable elements.
• onbeforecopy
  • FF does not support this.
  • IE and Safari raises this event before a context menu is displayed and something in the document is selected.
• oncopy
  • Only executed when about to copy something in the default handler.
  • Webkit exposes clipboardData on the event object.
• onbeforepaste
  • FF does not support this.
  • IE raises this event before a context menu is displayed and something in the document is selected.
• onpaste
  • IE only raises these on editable elements.

Webkit exposes the clipboardData object in clipboard events by attaching it to the event objects. Webkit’s clipboardData object is implemented in the same way as IE’s clipboardData object.

In order to get text from the clipboard, clipboardData.getData can only be accessed in the onpaste event. This is nice and simple:

		document.body.onpaste = function(e) {
			alert(e.clipboardData.getData("Text"));
			e.preventDefault();
		}

Note: preventing the default behavior is necessary if you are planning to handle the event, but if your code is just sniffing, then exclude the e.preventDefault() call.

Ideally the code would be similar for setting the clipboard data upon copy events. Unfortunately Webkit has a bug where you cannot set clipboard data in any of the clipboard events! You can use a work-around by using the same approach in the following section.

Using Keyboard Events

In most Web applications you do not have to worry about setting/getting the system clipboard data via key presses like CTRL+C, all browsers implement this for you. However, my API needs to get/set system clipboard data whenever the user presses clipboard key combinations like CTRL+C, on an non-editable document. Specifically: on CTRL/CMD+C/X keystrokes, the text to be copied is not the selected text in the document. And, on CTRL/CMD+V keystrokes, no matter where the focus is, the API must be able to retrieve the system clipboard text.

Webkit and FF3+ browsers’ default handlers for copying, cutting and pasting occur in the oncopy, oncut and onpaste events respectively. Browsers which do not use clipboard events execute their copy and paste code in their keydown/keypress default handlers.

Click here for the demo(missing). Whenever a clipboard command is raised from a keyboard stroke, a textarea appears and is selected/focused. The browser’s default handler then executes its clipboard command on the selected textarea. A timer event is scheduled with no delay so that once the browsers default handler has executed its clipboard command, the timer event is queued afterward – where it then hides the textarea from view.

This approach was inspired from Webkit’s lack of support for using clipboardData.setData, I started with a solution which used the oncopy event, which was then generalized to use keyboard events. You may want to use oncopy/onpaste in Webkit/FF3+ browsers instead of keyboard commands – however there is no real benefit from this except for Chrome: Chrome’s copy button in its window’s context menu is clickable, even if nothing in the document is selected (which raises the oncopy event).

The textarea element is very small and usually displayed outside of the view-port. If the vertical and horizontal scrollbars are not at the hard top or left of the document then the textarea is briefly flashed at the top right section of the window. If for example, the float is positioned at an absolute left position of -100 (out of viewport) but the horozontial scrollbars are scrolled to 40 pixels, the scrollbars would scroll to zero (hard left) whenever the textarea is selected/focused. (Note: restoring them to their original values will just create an ugly scrollbar jolting effect).

Originally I developed a bulky solution(missing) without floats, but I stumbled across a blog that had happened to use this same approach but instead using floats (many thanks to Dion).

It is important to avoid race conditions while showing and hiding the textarea before and after the browsers’ default handlers for clipboard operations. Clipboard events are guaranteed to work. Opera queues a settimeout with zero delay after all events in the current event batch – onkeydown, onkeypress, onkeyup event sequence is seen as an event batch (see timing-and-synchronization-in-javascript) – so it is safe to use onkeydown in Opera. From my own experiments, my observations are that Firefox’s clipboard operations are executed on keypress events. IE and Webkit can only use keydown since clipboard key combinations do not get keypress events. There was no luck with getting Konqureror to work with this approach – KHTML has problems with selecting and focusing on an input element (it works sometimes).

Summary

Go here to see a summary(missing) of the explored approaches and their demos (sorry about the external link but my blog layout does not handle large tables!).

Conclusion

The “ideal interface” previously discussed is not possible: there are different contexts in which you may want to copy and retrieve data to and from the clipboard, so packaging up a universal clipboard solution is not realistic.

There is a lot of (hacky) code to get cut, copy and paste in a JavaScript application. Is it really worth the time and effort to support copy and paste? I think so. Copy and paste is extremely useful, especially for some type of web-page editor. Microsoft found that paste was the most commonly used operation in their Word application, and copy was the third most common (see http://blogs.msdn.com/jensenh/archive/2005/11/07/489864.aspx and most-used-features-commands-in-microsoft-word-and-a-few-design-lessons).

Please post feedback… don’t be shy!

Other Helpful Links/References

• http://ajaxian.com/archives/seeding-the-clipboard-in-flash10-with-zero-clipboard
• http://srp.stanford.edu/demo/
• http://trephine.org/t/index.php?title=Understanding_LiveConnectExplorer
• http://blog.pengoworks.com/index.cfm/2008/2/19/Accessing-privileged-methods-in-a-Java-Applet-via-JavaScript
• http://imagingexperts.typepad.com/imaging_experts/2006/10/javascripting_i.html

August 24th 09: SORRY BUT ALL DEMO LINKS HAVE BEEN BROKEN! All my wordpress files have been lost on my University web server! GRRRR!

<p style="white-space:pre">
  Hello world - <b> A  B  C  D </b>
</p>

The immediate white space style of the bold element in the DOM will be normal (default for bold element). However the style is actually pre, since it inherits it from the paragraph ancestor element.

Quirksmode nicely addresses how to go about this. Check it out.
However their script is not practical because the style you want to request must be formatted in a way depending on how their script will execute. Here is an improved solution which addresses this:

/**
 * Retreives a CSS style directly set for or inherited by a given dom node.
 * 
 * @see www.quirksmode.org/dom/getstyles.html
 * 
 * @param {Node} node A dom node.
 * @param {String} styleProp A CSS style property, formatted in CSS notation.
 * @return {String} The inherited style of the given node. Undefined if the node does not have the style.
 *                 If the node is not an element, then the first ancestor element is selected.
 *                 
 */
function getStyle(node, styleProp) {
    
    while (node && node.nodeType != Node.ELEMENT_NODE) {
        node = node.parentNode;
    }
    if (!node) return;
    
    if (window.getComputedStyle) { // DOM Spec
       return document.defaultView.getComputedStyle(node,"").getPropertyValue(styleProp)
       
    } else if (node.currentStyle) { // MS HTML
    
        // Convert CSS Style notation to Javascript notation
        var index = styleProp.indexOf("-");
        while (index > -1) {
            styleProp = (index == (styleProp.length-1)) ? 
                styleProp.substr(0, index) :
                styleProp.substr(0, index) + styleProp.charAt(index+1).toUpperCase() + styleProp.substr(index + 2);
            index = styleProp.indexOf("-");
        }
        
        return node.currentStyle[styleProp];
        
    }
    // Otherwise undefined...
}

So if the browser supports the getComputedStyle it will use that. Otherwise it will go the “Explorer way” and format the style argument from CSS notation to Javascript notation (camal case) and index into the associative array currentStyle.

Opera can support both ways, but will choose the first option since in this implementation is potentially faster. You can switch the precedence around to have Explorer browsers in favor; where its method is tested first and the style argument is formatted in javascript notation.

Hope that is helpful.
If you find an incompatible browser please post the details

People have made debian packages for e17, however most of the links are broken, and all the ones I personally tried failed to install. I suggest going for a SVN version.

Caveat: E17 is the milestone at which the development community is striving for. The SVN repositories are tagged with versions that begin 0.16.999.x and will be eventually become 0.17 on stable release – which is really confusing since e17 is a complete rewrite of e16!

You can try and install an SVN version via synaptic package manager by following the steps in this comprehensive forum: http://ubuntuforums.org/showthread.php?t=916690. However that failed for me.

Step 1: Get easy-e17.sh

First get the famous bash script called easy-e17.sh from here. This is sooo helpful. It painlessly automates the installation and update process for you.

Step 2: Install dependencies

You must install some development tools like automake and svn. When you run bash script, it will tell you if your missing any tools before it tries anything (errr, so if it does, install them! – e.g. run “sudo apt-get install svn to install SVN).

This forum mentioned to install CVS as well, because of some old package that is still using CVS. I don’t think that’s necessary, but what the hey, install it anyway (run “sudo apt-get install cvs).

Step 3: Preparation for installing e17 login manager

Before you go willy-nilly and run the script, your gonna want to do some configuration first. The easy_e17 script doesn’t install everything, and if your a bit of a perfectionist like me, you might want to include e17′s graphical login manager in the installation. By default Ubuntu uses GNOME’s login manager called GDM. We will switch them later (if you choose).

You can run “bash easy_e17.sh --help“. This will show you all the options you can use with this magnificent script. Note you can run this anywhere so keep it in a logical place – you might want to use it later for updates etc. You can also specify where you want your source to live. Personally I chuck it all in a /usr/lib/easy_E17 directory.

If /etc/easy_e17.conf does not exist, create it:

sudo touch /etc/easy_e17.conf

--skip=enhance,exml,imlib2,edb,edje_editor,edje_player,edje_viewer,emotion,eclair,evfs,evolve,elicit,elitaire,emphasis,empower,engycad,entrance_edit_gui,entropy,ephoto,estickies,expedite,exquisite,extrackt,engage,enthrall,exalt-client,exhibit,rage,emu,flame,moon,news,penguins,rain,snow,language,photo,efm_path,efm_nav,e_phys,mpdule,notification,b_and_w

Note: easy_e17 lets you define your own path to a config file, however I would stay away from that because it will fist look for the /etc/easy_e17.conf, then one in ~/easy_e17.conf, then one in the current directory… the changes of your config to be used is small and can cause you some headaches.

Step 4: Download and Install

Run the script:

sudo bash easy_e17.sh -i

The first time I ran this it actually failed because I missed some steps above. If it does fail, try and install it via the debian-svn package in this forum. If that fails, then try installing it via the easy_e17 script again and it should work. It worked for me. I think the debian package installed some hidden dependancies the easy_17 script wasn’t picking up.

Step 5: switching from GNOME to E17

In order to access e17 session, you need to create a file that describes it. Create the file:

sudo touch /usr/share/xsessions/Enlightenment-0.17.desktop

[Desktop Entry]
Encoding=UTF-8
Name=Enlightenment 0.17
Comment=
Exec=/opt/e17/bin/enlightenment_start
Icon=
Type=Application

Step 6: Switching to the Entrance login manager

This was a mission. Ok first create the following symbolic link:

sudo ln -s /opt/e17/etc/init.d/entrance /etc/init.d/entrance

apt-get install bum

sudo bum

Note: Disabling GDM from the bootloader loading it up will save resources, it avoids running two window managers simultaneously.

Step 7: Complete the package: An enlightenment USpash

To make your setup complete and consistent, you might want to install an e17 splash screen when loading the Ubuntu OS (aka bootscreen). Ubuntu uses usplash for displaying its splash screen.

I found one for e17 here, which is for specifically for Elbuntu (e17 with Ubuntu 7). Personally I didn’t like this one, also the screen resolution support is bad (on my setup I get a large black area around the splash). I tried looking for others but they weren’t the flavor I was looking for. So I created my own. Here’s a screenshot:

To get this theme download it here (it’s GPL licensed – I based it on the Xubuntu source). Extract it, then move the binary “usplash-theme-e17clean.so” into /usr/lib/usplash/:

sudo mv usplash-theme-e17clean.so /usr/lib/usplash/.

sudo rm /usr/lib/usplash/usplash-artwork.so

sudo ln -s /usr/lib/usplash/usplash-theme-e17clean.so /usr/lib/usplash/usplash-artwork.so

sudo dpkg-reconfigure linux-image-`uname -r`

Step 8: Icing on the cake: change your GTK theme

At this point, any application using GTK will look really crude. You may want to change the GTK theme to suit your selected e17 theme. For example if you use the “black and white” e17 you may want to try this theme. If you are using applications that are based on qt, it goes without saying that you probably will want to update your Qt theme to.

Usually you would use gnomes’ “gnome-appearance-properties” application to switch the GTK theme, this is not available within e17 (if you’ve disabled GDM from running simultaneously to e17′s window manager – see step 6). To switch the GTK theme you are going to need to install the gtk-theme-switch package (if you don’t already have it):

sudo apt-get install gtk-theme-switch

When you download a GTK theme it will usually be in a compressed tarbell form. Uncompress them to you “~/.themes” directory. Make sure that the top-level folder of the extracted theme contains a “index.theme” file. Then invoke:

gtk-theme-switch2 ~/.theme/TOP-DIR-OF-YOUR-THEME

Note: If you decide on a dark theme, like the current default black and white theme, not all GTK applications will look nice. For example Firefox uses Mozillas XUL engine for rendering not just the various HTML forms, but also all its chrome. XUL always renders black for its text in the buttons etc.. which you will need to manually configure yourself.

You may also want to change your icon theme to go with your GTK/E17 Themes too.

Step 9: Extras

Ok I promise I’ll stop. But there are more quirks you may want to know:

File manager
E17′s integrated file manager is still in development. It’s buggy and I personally find it very annoying to use. You can use nautilus, Ubuntu’s file manager used with GNOME. I personally recommend getting Thunar, it seems faster and has the same feel as nautilus anyway. Here are the commands:

sudo apt-get install thunar
sudo apt-get install thunar-volman
sudo apt-get install thunar-archive-plugin

Note: You may be able to find a later stable release than ubuntu’s apt sources.

Now in the main enlightenment menu, goto Settings->Modules. Then unload the filemanager (Notice in its about info it says that it’s under construction!). You will lose file-management on your desktop… a small price to pay i say. It will also remove the “files” menu in the main enlightenment menu.

If you choose to disable E17′s file manager and want to have shortcuts to common places like “home” and “documents,” then you will have to manually create them. There is a “places” module that I believe provides shortcuts to directories on the menu which can be easily configured to use thunar, but mine was bugging out. E17 does not let you create custom menus (errr, without have to delve into their code!). You can edit the applications menu and also the favorite-applications menu.

You could use the favorite-applications menu. To do so, first you need to create applications for your shortcuts, yes, this is a hacky approach (please let me know if you find a better way). Go into the main menu: settings->settings-panel. Go into the apps view. For each directory you are wanting to add, follow these steps:

1. Click New Application
2. Name: … e.g. “Home”
3. Executable: thunar “PATH-TO-DIR”
4. If your pedantic like me, add a icon that fits

Then in that same settings window, goto the Menus view, then click on the Favorites Menu. Then add your “applications” hahaha.

A note on GNOME
By default Ubuntu will have lots of GNOME based apps installed. Some things are a little slow at starting up since they have to pull in some GNOME desktop libraries in order to launch. (which is usually loaded, but if you disabled GDM to save resources/use Entrance then the libraries wont be). You may want to switch to using alternative apps, for example using xzgv for viewing images rather than “eye of gnome.” Or if your feeling real adventurous you can keep on configuring your Linux scripts to preload GNOME and GTK2 libraries etc… But if your going to do that you should just use a dist like OpenGEU which does all the hard work for you!

And your done! Enjoy your e17 experience!