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! 🙂

Advertisements

Webkit clipboard security hole

While on a search for accessing the System clipboard via JavaScript, it seems I discovered a security hole in Webkit.
Network Security
Usually system clipboard access is restricted in clipboard events like oncopy and onpaste. However I found that you can set the system clipboard in any context (e.g. a timer event).
Continue reading

Allowing events to fall-through div regions

I have been on a mammoth quest to discover how to redirect events from a large transparent div (covering a whole web page) to elements below the div region. At this point I have not found a solution. However progress was made and such info could save a hell of a lot of time for some people who share such a quest!

First thing I achieved was to capture all mouse events on the transparent div and discover the underlying elements at which the mouse was over. This was achievable using object.elementFromPoint(x,y). It seems to be supported by both Mozilla and IE. I’m not sure about others.  I used Dojo for cross-browser event handling. Before elementFromPoint can be used you must somehow hide the div then afterwards show it again, you could adjust the style or remove/append the actual node. NB: this does not introduce flickering. Here is example code:


divElement.style.visibility = "hidden";
var targetElement = document.elementFromPoint(evt.clientX, evt.clientY);
divElement.style.visibility = "visible";

Note that when capture mouse events, capture all DOM and browser-specific events (e.g. DND events).

At this point we want to re-fabricate the event as if it were to be sent to targetElement. This is where I have racked my brains for the last day 😮  Originally I redirected the event by using targetElement.dispatchEvent or targetElement.fireEvent (depending on the browser support), however the results are very temperamental: sometimes things work and most times the event does not do anything! Very frustrating. I read here: (http://www.howtocreate.co.uk/tutorials/javascript/domevents) that firing “fake” events so not cause the default action to occur due to security reasons etc. So now this approach is looking grim. It makes me wonder though about how on earth sometimes the default actions execute.

One of my theories is that it has to do with threading and events. For example, maybe the default action will only execute if the div is still invisible (or non-existent) at the time of the events execution. Therefore the div’s visible property must be set to “visible” after the default action (supposedly) occurs. I ran some tests and this theory does seem to stand. Plus event threading support with JavaScript is virtually non-existent.

If worst comes to worse and no elegant solution can be found, I may have to resort into implementing the “default action” in JavaScript which may be a nightmare!

Beggining of a new year

My final year at university: my masters thesis. Last year ended with great results, I completed a project called “Apollo” which was an experimental hypermedia environment for creating, editing and managing audio data.

For the next year I am focusing on Web development: something I have zero experience and knowledge in, well I know a little html and some basic concepts. I have avoided the web dev area because I had always seen it as a limited/restricted dev environment. However now that web 2.0 has been introduced and continuously expanding my view has changed.

This year I want to try and implement innovative ideas with web applications and push the limits of what can be done in a web browser. The amount of technologies and API’s are so overwhelming it’s difficult to know where to start!