0xDECAFBAD - Tag: javascript

HTML5 drag and drop in Firefox 3.5

2009-07-15T15:26:40+00:00

Oh hey, look! It's another blog post—and this one is cross-posted on hacks.mozilla.com. I won't say this is the start of a renewed blogging habit, but let's see what happens.

Drag and drop is one of the most fundamental interactions afforded by graphical user interfaces. In one gesture, it allows users to pair the selection of an object with the execution of an action, often including a second object in the operation. It's a simple yet powerful UI concept used to support copying, list reordering, deletion (ala the Trash / Recycle Bin), and even the creation of link relationships.

Since it's so fundamental, offering drag and drop in web applications has been a no-brainer ever since browsers first offered mouse events in DHTML. But, although mousedown, mousemove, and mouseup made it possible, the implementation has been limited to the bounds of the browser window. Additionally, since these events refer only to the object being dragged, there's a challenge to find the subject of the drop when the interaction is completed.

Of course, that doesn't prevent most modern JavaScript frameworks from abstracting away most of the problems and throwing in some flourishes while they're at it. But, wouldn't it be nice if browsers offered first-class support for drag and drop, and maybe even extended it beyond the window sandbox?

As it turns out, this very wish is answered by the HTML 5 specification section on new drag-and-drop events, and Firefox 3.5 includes an implementation of those events.

If you want to jump straight to the code, I've put together some simple demos of the new events.

I've even scratched an itch of my own and built the beginnings of an outline editor, where every draggable element is also a drop target—of which there could be dozens to hundreds in a complex document, something that gave me some minor hair-tearing moments in the past while trying to make do with plain old mouse events.

And, all the above can be downloaded or cloned from a GitHub repository I've created especially for this article—which continues after the jump.

The New Drag and Drop Events

So, with no further ado, here are the new drag and drop events, in roughly the order you might expect to see them fired:

dragstart: A drag has been initiated, with the dragged element as the event target.
drag: The mouse has moved, with the dragged element as the event target.
dragenter: The dragged element has been moved into a drop listener, with the drop listener element as the event target.
dragover: The dragged element has been moved over a drop listener, with the drop listener element as the event target. Since the default behavior is to cancel drops, returning false or calling preventDefault() in the event handler indicates that a drop is allowed here.
dragleave: The dragged element has been moved out of a drop listener, with the drop listener element as the event target.
drop: The dragged element has been successfully dropped on a drop listener, with the drop listener element as the event target.
dragend: A drag has been ended, successfully or not, with the dragged element as the event target.

Like the mouse events of yore, listeners can be attached to elements using addEventListener() directly or by way of your favorite JS library.

Consider the following example using jQuery, also available as a live demo:


    Drag me!
    Drop here!

Thanks to the new events and jQuery, this example is both short and simple—but it packs in a lot of functionality, as the rest of this article will explain.

Before moving on, there are at least three things about the above code that are worth mentioning:

Drop targets are enabled by virtue of having listeners for drop events. But, per the HTML 5 spec, draggable elements need an attribute of draggable="true", set either in markup or in JavaScript.

Thus, $('#newschool .dragme').attr('draggable', 'true').
The original DOM event (as opposed to jQuery's event wrapper) offers a property called dataTransfer. Beyond just manipulating elements, the new drag and drop events accomodate the transmission of user-definable data during the course of the interaction.
Since these are first-class events, you can apply the technique of Event Delegation.
What's that? Well, imagine you have a list of 1000 list items—as part of a deeply-nested outline document, for instance. Rather than needing to attach listeners or otherwise fiddle with all 1000 items, simply attach a listener to the parent node (eg. the

Using dataTransfer

As mentioned in the last section, the new drag and drop events let you send data along with a dragged element. But, it's even better than that: Your drop targets can receive data transferred by content objects dragged into the window from other browser windows, and even other applications.

Since the example is a bit longer, check out the live demo and associated code to get an idea of what's possible with dataTransfer.

In a nutshell, the stars of this show are the setData() and getData() methods of the dataTransfer property exposed by the Event object.

The setData() method is typically called in the dragstart listener, loading dataTransfer up with one or more strings of content with associated recommended content types.

For illustration, here's a quick snippet from the example code:

var dt = ev.originalEvent.dataTransfer;    
dt.setData('text/plain', $('#logo').parent().text());
dt.setData('text/html', $('#logo').parent().html());
dt.setData('text/uri-list', $('#logo')[0].src);

On the other end, getData() allows you to query for content by type (eg. text/html followed by text/plain). This, in turn, allows you to decide on acceptable content types at the time of the drop event or even during dragover to offer feedback for unacceptable types during the drag.

Here's another example from the receiving end of the example code:

var dt = ev.originalEvent.dataTransfer;    
$('.content_url .content').text(dt.getData('text/uri-list'));
$('.content_text .content').text(dt.getData('text/plain'));
$('.content_html .content').html(dt.getData('text/html'));

Where dataTransfer really shines, though, is that it allows your drop targets to receive content from sources outside your defined draggable elements and even from outside the browser altogether. Firefox accepts such drags, and attempts to populate dataTransfer with appropriate content types extracted from the external object.

Thus, you could select some text in a word processor window and drop it into one of your elements, and at least expect to find it available as text/plain content.

You can also select content in another browser window, and expect to see text/html appear in your events. Check out the outline editing demo and see what happens when you try dragging various elements (eg. images, tables, and lists) and highlighted content from other windows onto the items there.

Using Drag Feedback Images

An important aspect of the drag and drop interaction is a representation of the thing being dragged. By default in Firefox, this is a "ghost" image of the dragged element itself. But, the dataTransfer property of the original Event object exposes the method setDragImage() for use in customizing this representation.

There's a live demo of this feature, as well as associated JS code available. The gist, however, is sketched out in these code snippets:

var dt = ev.originalEvent.dataTransfer;    

dt.setDragImage( $('#feedback_image h2')[0], 0, 0);

dt.setDragImage( $('#logo')[0], 32, 32); 

var canvas = document.createElement("canvas");
canvas.width = canvas.height = 50;

var ctx = canvas.getContext("2d");
ctx.lineWidth = 8;
ctx.moveTo(25,0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.lineTo(25, 0);
ctx.stroke();

dt.setDragImage(canvas, 25, 25);

You can supply a DOM node as the first parameter to setDragImage(), which includes everything from text to images to canvas elements. The second two parameters indicate at what left and top offset the mouse should appear in the image while dragging.

For example, since the #logo image is 64x64, the parameters in the second setDragImage() method places the mouse right in the center of the image. On the other hand, the first call positions the feedback image such that the mouse rests in the upper left corner.

Using Drop Effects

As mentioned at the start of this article, the drag and drop interaction has been used to support actions such as copying, moving, and linking. Accordingly, the HTML 5 specification accomodates these operations in the form of the effectAllowed and dropEffect properties exposed by the Event object.

For a quick fix, check out the a live demo of this feature, as well as the associated JS code.

The basic idea is that the dragstart event listener can set a value for effectAllowed like so:

var dt = ev.originalEvent.dataTransfer;
switch (ev.target.id) {
    case 'effectdrag0': dt.effectAllowed = 'copy'; break;
    case 'effectdrag1': dt.effectAllowed = 'move'; break;
    case 'effectdrag2': dt.effectAllowed = 'link'; break;
    case 'effectdrag3': dt.effectAllowed = 'all'; break;
    case 'effectdrag4': dt.effectAllowed = 'none'; break;
}

The choices available for this property include the following:

none: no operation is permitted
copy: copy only
move: move only
link: link only
copyMove: copy or move only
copyLink: copy or link only
linkMove: link or move only
all: copy, move, or link

On the other end, the dragover event listener can set the value of the dropEffect property to indicate the expected effect invoked on a successful drop. If the value does not match up with effectAllowed, the drop will be considered cancelled on completion.

In the a live demo, you should be able to see that only elements with matching effects can be dropped into the appropriate drop zones. This is accomplished with code like the following:

var dt = ev.originalEvent.dataTransfer;
switch (ev.target.id) {
    case 'effectdrop0': dt.dropEffect = 'copy'; break;
    case 'effectdrop1': dt.dropEffect = 'move'; break;
    case 'effectdrop2': dt.dropEffect = 'link'; break;
    case 'effectdrop3': dt.dropEffect = 'all'; break;
    case 'effectdrop4': dt.dropEffect = 'none'; break;
}

Although the OS itself can provide some feedback, you can also use these properties to update your own visible feedback, both on the dragged element and on the drop zone itself.

Conclusion

The new first-class drag and drop events in HTML5 and Firefox make supporting this form of UI interaction simple, concise, and powerful in the browser. But beyond the new simplicity of these events, the ability to transfer content between applications opens brand new avenues for web-based applications and collaboration with desktop software in general.

Archived Comments

David Semeria
2009-07-16T17:56:52

Wow - thanks for a great introduction to D+D in HTML 5, I'm really looking forward to giving it a thorough road test.

The key part of the implementation are the target listeners, because, as I'm sure you're aware, onmouseover would historically never fire over the target element because the dragged item would always 'cover it up'. BTW, my proposed solution was to add an 'event transparency' property, which would have made the dragged item invisible from the point of view of selected events, eg onmouseover.

This implementation is going to take a lot of pain away. You have no idea how many hoops I had to jump through to get a fully generic D+D implementation working without these new calls.

If you're interested, you can see it working here: http://lmframework.com/page.php?id=vd_twig_short_2
Alex
2009-07-17T00:13:23

Hey,

Looks great and useful article. For dragging from external applications (such as the Desktop) is a normal webpage able to get the data from the drop? I was just playing with it and seem to always get what seems to be a security error with getData or mozGetDataAt. However, the documentation seems to state that on drop that data should be made available to the page. Likewise, in the same way an image can be dragged off the page onto the desktop, can an arbitrary element be dragged onto the desktop with whatever file content to be saved? Thanks for the help.

Alex
Paul Tarjan
2009-07-17T04:52:54

Very nice, I didn't know that FF 3.5 actually had this implemented. Time to start playing :)

Also, how did you do your code posts? Was it just pasting in HTML or do you have a better setup?
Animal
2009-07-17T14:35:21

Seems pretty pointless pressing ahead with this when you just can't write a web app to use it. There's no support. All a bunch of whizzy fun I'm sure, but sod-all use.
l.m.orchard
2009-07-17T16:23:10

@Animal: Why can't you write a web app to use it? It's in the HTML5 spec, works in Fx3.5 and Safari 4 / WebKit. It doesn't have universal support yet, or course, but new standards never do.
paul
2009-07-21T08:08:26

very nice indeed! i like this, it has definitely opened up new avenues for interaction without using flash. but it will take time before people upgrade to the new browser. a lot of people who browse the web wont realise what the technology will bring and will use their current browser because it does the job!
Joel
2009-07-21T14:36:04

Excellent demos of the new features.

When using a feedback image on a zoomed in page, should the image not also be scaled up automatically?
RenegadeX
2009-07-22T04:13:46

Dragging & dropping is as you say, a "one of the most fundamental interations" that users of computer graphical interfaces have come to know, and expect.

It therefore completes dumbfounds me how it is that we still can not natively drag & scroll (& then drop) in Firefox. We can only drag & drop an item within the currently visible portion of a Firefox webpage or tab, no further up, no further down.

That is should be limited makes absolutely no sense. Microsoft built the function into their Windows 3.x (file) Explorer, and then when visual browsers came along, naturally carried it through into Internet Explorer.

Firefox Bug 41708, "Should be able to scroll in the viewport while dragging" was opened in June, 2000 (yes, 9 years ago!) and remains open, and is disregarded by Firefox developers as little more than a trivial little annoyance, and therefore is and should be treated as a low-importance 'enhancement' rather than as the 'standard feature' it should really be.

If it weren't for the extension 'DragToScroll', which has been around for 3-1/2 years now (not updated in a long time but still works if you override version compatibility), I would have dumped Firefox and switched to a different browser (Maxthon 3, most likely).

So, I'm wondering (and hoping) -- does the new HTML5 drag and drop specification include anything that if implemented properly would make it possible to scroll & drag?
l.m.orchard
2009-07-22T13:57:42

@RenegadeX: Ugh. I don't work on the browser itself, but I noticed that unexpected behavior on drag & drop. The window really should scroll when you get toward the top or bottom while dragging - and, in fact, most pre-HTML5 JS frameworks do that in their own drag & drop abstractions.

Until / unless Firefox gets this fixed, the same sort of auto-scrolling could be hacked in to HTML5 drag and drop. Not perfect, but it's doable. That is, in the drag event, you can check if the mouse is near the upper or lower edge of the viewport - and if so, start scrolling appropriately. That's pretty much how the JS frameworks do it with old-school D&D
CopperBot
2009-07-23T21:41:07

Very cool article! Thanks for sharing. HTML5 really is going to change everything about how we use and develop for the web. Pretty awesome!
Alexos
2009-07-26T05:05:44

Hi, would DD work for uploading files? How can I display a progress bar? Thanks! I've been looking for that several days, and found only applets which I can't use in my proyect :-)
Sam
2009-07-28T13:54:26

Looks fantastic, going to try it out now (once I have upgraded my FF)
Dan Kantor
2009-07-30T03:10:25

Looks like effectAllowed and dropEffect are not working for FF 3.5 on the Mac. I see effects on Windows and Safari 4 on Mac. I've been playing around with adding borders to the drop target, but the + icon for copy really helps a lot. Hopefully Mozilla will fix this next update.
Ryan
2009-09-01T02:33:06

Great article it's good to see developments in this area. I wrote an article on the further extensions Firefox 3.6 has done with the dataTransfer method by adding the file attribute so you can access local files and upload them without the need for file inputs. http://www.thecssninja.com/javascript/drag-and-drop-upload
phil swenson
2009-09-03T22:58:36

Why not a first class WYSIWYG rich text editor with copy from clipboard image support?

NO ONE has built a decent text editor in JavaScript - At least not that I've seen. And browsers don't allow image paste for reasons I don't understand.

And by decent I mean just like you'd get in textmate or another editor. Have the standard text editor features everyone expects: tab, select indent/select unindent, resize image, home, end, duplicate line, delete line, styling, etc.

would push the browser to the next level in killing the desktop. non-techies hate wikis. They want a real editor. I do too actually.... would be great for forums, bug tracking system (imagine pasting screen shots in line with your bug desc), email, etc.
Jean-Denis
2009-09-04T00:23:39

Francisco Tomalski wrote up a nice piece on HTML 5 drag'n drop at http://www.alertdebugging.com/2009/08/16/on-html-5-drag-and-drop/

where he uncovers that the proposed standard is partially broken. Any comment on his piece?
Lisa
2009-09-09T07:33:08

This is a great move forward no more relying on 3rd party apps and extensions to play video or audio, i have been reading up on HTML 5 at the HTML 5 Tutorials website, i am now playing around with one of the free templates and was wondering how to embed audio, so thanks a lot, great information, lets hope more people lean towards HTML 5 and SOON!!!

The drag and drop feature i did not notice was already working in FF 3.5, i was told to get Safari to see HTML 5 in action. Thanks for a great post
Zoltan Hawryluk
2010-01-11T15:14:48

A million thank yous! This article was great introduction to HTML5 D+D. With it, I was able to extend it to other browsers. It was a little painful at first because the browser implementations diverge in significant, but manageable ways.

If you are interested, check out my article at http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/ if you are interested in my results.

I noticed you haven't blogged in a while - I hope you haven't stopped totally and continue to share with the webdev community.
Raul
2011-04-26T23:56:02

Hi, Leslie. I've just come across a problem that's driving me nuts. I'm not fully comfortable with D&D, but managed to move a crosshairs image over a map to very precisely controlled positions. It worked great on FF 3.6 and FF 4. After a couple of days of successful testing, the image suddenly refused to de dropped after being dragged (it rather flew back to its previous position). Do you know if there is a bug in FF that might cause this?

BTW, during the programming process I updated Firebug, which also is getting a little cranky.

Thanks for your prompt answer, Raul
Alexander Plutov
2011-10-01T11:51:12

Good post about Drag & Drop http://plutov.by/post/html5_drag_and_drop

An unnecessary Template Attribute Language

2008-11-01T19:23:23+00:00

A funny thing happened on the way to building a delayed real-time feed display: I got temporarily obsessed with implementing a template language in JavaScript that, as it turned out later, I didn't need. About the feed project itself, I hope to write more soon—but for now I want to get this extra template language thing out of my system and see if anyone else might have a use for it.

See, I had a notion it would be keen if I had access to the same template language on the client as on the server. I needed to render a number of list items statically on the server with feed entries, then update that list with new entries on the client as they became available through JSON feed polling. It'd be a pain in the butt to maintain two separate list item templates for client and server, so I reached for a shared template language.

Never mind that I'd just gotten done writing a small book on Dojo, and was already aware of the existence of the DojoX Django Template Language. This might've worked, since the server end of things was written in Python (though not with Django). That the JavaScript side already used jQuery wasn't too tall a hurdle. Also, I'm sure there are a handful of other JavaScript/Python template language match-ups to be found.

But, let's be honest here: I've always been a fan of Zope's Template Attribute Language for their Page Templates, and have long wondered how hard it would be to implement. The concept seems so much cleaner to me than most string-formatting template languages, and the workflow from mockup-to-template and back again has always been appealing to me when it works. So, when my first few experimental steps in trying my hand at it actually started working, I couldn't stop coding.

And now, the thing is mostly done. It has no tests, has features left undone, and probably yields plenty of bugs—but I finished it enough to use it practically, and that was long enough to convince me it wasn't the right tool for the job.

Still, though, I can't help thinking it might be the right tool for some job. That could be because I spent a lot of time on it, or that I'm unreasonably fond of TAL, but it still feels like a decent little plugin to have on hand. Maybe someone reading this will have a similar conclusion.

Oh and by the way, plain jQuery turned out to be a better tool for the job in question. This seems to nicely balance the duplicate effort between server and client, demanding only that I stick with semantically significant CSS class names in the server template—something I should be doing anyway:

        // Clone and populate a new entry.
        var new_item = $('#feed-items .entry:last')
            .clone()
            .attr('class', entry_classes.join(' ')) 
            .find('.group span')
                .text(tags['group'])
            .end()
            .find('.title')
                .find('.favicon')
                    .attr('src', favicon)
                .end()
                .find('.link')
                    .attr('href', entry.link)
                    .text(entry.title)
                .end()
            .end()
            .find('.updated')
                .find('.timeago')
                    .attr('title', entry.updated)
                    .text(entry_updated.strftime('%+'))
                    .timeago()
                .end()
                .find('.time')
                    .text(entry_updated.strftime('%I:%M %p'))
                .end()
            .end()
            .find('.author')
                .text(entry.author || 'n/a')
            .end()
            .prependTo('#feed-items')
            .hide();

Of course, plain is a relative term here.

Archived Comments

brad clements
2008-11-03T21:26:42

Groan,

Too bad I haven't had a chance to finish documenting (and tweaking) the ATALi project.

It's a collection of Alternative TAL Implementations.

It currently has TAL for xslt (server side using libxslt directly or via lxml with metal support)

and TAL for javascript (no libraries needed, though it does recognize mochikit iterators, no metal)

https://launchpad.net/atali
John Manoogian III (jm3)
2008-11-24T18:51:17

Have you seen "trimpath"?

http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

Writing a Delicious command for Ubiquity

2008-09-01T04:37:03+00:00

In my last post, I got all fluffy about how cool Ubiquity is but didn't share any code to prove the point. As it happens, I have come up with at least one useful command that I'm starting to use habitually in posting bookmarks to Delicious. You can subscribe to my command or check out the full source—this post will serve as a dissection of the thing. Since this will be fairly lengthy, follow along after the jump.

Oh, and it's been awhile since I posted something this in-depth around here, so feel free to let me know how this first draft works. And, bug reports and patches are of course welcome.

To begin, consider the following code starting off the command source code:

/**
 * share-on-delicious - an Ubiquity command for sharing bookmarks on
 * delicious.com
 *
 * l.m.orchard@pobox.com
 * http://decafbad.com/
 * Share and Enjoy!
 */
var uext = Application.extensions.get('ubiquity@labs.mozilla.com');

var cookie_mgr = Components.classes["@mozilla.org/cookiemanager;1"]
    .getService(Components.interfaces.nsICookieManager);

The first thing to note here is that a short header comment introduces the command. This isn't required, but it's a good idea. It's also something you can't really do with bookmarklets. On the other hand, Greasemonkey user scripts expect metadata about the script to be provided here, but Ubiquity doesn't use this convention.

Second, notice that the code accesses some chrome-level resources. Again, this is something unavailable to bookmarklets and Greasemonkey user scripts. Just take a look at the FUEL library documentation to get a quick sense of what's available using that simplified API, not to mention what's available using the lower-level browser APIs.

Now, check out this next chunk of code, which begins the construction of an Ubiquity command:

CmdUtils.CreateCommand({
    
    name:        
        'share-on-delicious',
    icon:
        'http://delicious.com/favicon.ico',
    description: 
        'Share the current page as a bookmark on delicious.com',
    help:        
        'Select text on the page to use as notes, or enter your own ' + 
        'text after the command word.  You can also assign tags to the '+ 
        'bookmark with the "tagged" modifier, and alter the bookmark ' + 
        'default page title with the "entitled" modifier.  Note that ' + 
        'you must also already be logged in at delicious.com to use ' +
        'this command.',

    homepage:   
        'http://decafbad.com',
    author: { 
        name: 'Leslie Michael Orchard', 
        email: 'l.m.orchard@pobox.com' 
    },
    license:
        'MPL/GPL/LGPL',

Whereas Greasemonkey scripts support metadata in the header comment, the Ubiquity command script API works a little differently.

The CmdUtils module provided by Ubiquity offers a CreateCommand function, which expects an object as a parameter. The object literal whose construction is begun in the code above serves as a self-contained package for the command, bearing metadata describing the command as well as containing all the code necessary to implement it.

So, in the above code block, you can see the machine-readable description of the command—including a command name, display icon, home page URL, author information, and license. The command name (share-on-delicious) will be used by the Ubiquity command parser, but the rest of the description will also be used in the list of commands available to the user, invoked by the command-list command, like so:

Moving along, this next chunk of code introduces the first functional bits of the command:

    takes: { notes: noun_arb_text },
    modifiers: { 
        tagged:  noun_arb_text,
        entitled: noun_arb_text
    },

Like smart keyword shortcut bookmarks, Ubiquity commands accept user-supplied input. But, what's unique to Ubiquity is that it employs a parser whose goal is to support something approximating natural language. At present, this results in commands that support a single primary argument—declared above with the takes property—and any number of additional keyword modifiers—declared above by the modifiers property.

For the command under construction here, this establishes a pattern something like the following:

share-on-delicious {notes} [tagged {tags} entitled {title}]

Content for the {notes} argument can either be typed directly by hand, or it can be supplied by text highlighted on the page. To use highlighted text, you can either issue the command alone, or use the word this for the {notes} argument before including further modifiers.

The modifiers tagged and entitled are optional, and can be used in any order. Each of these keywords signifies the start of a different argument—which unfortunately can collide with the literal data supplied for notes, which will hopefully be a rare occurrence.

All of this adds up command invocations including the following:

share-on-delicious
share-on-delicious I really like this page tagged nifty amusing
share-on-delicious this entitled This bookmark has no tags
sh this tagged osx software apple entitled This is good OS X software

That last example is important—since I have no other commands starting with "sh", I can abbreviate the full command. Ubiquity only requires enough of a command name to disambiguate it within your collection of commands.

Another thing to note is the use of the constant value noun_arb_text, which declares that these arguments should expect any arbitrary text as input.

This facility is not exploited for the present command, but Ubiquity defines noun types. These include concepts such as plain text, dates, address book contacts, browser tabs, bookmark tags, and more. You can define your own noun types, as well as implement suggestion schemes that help guide the user toward constructing useful input values in the command interface. You can read more about this in the official author tutorial.

Next up is a quick bit of command-specific configuration:

    /**
     * Command configuration settings.
     */
    _config: {
        // Base URL for the delicious v1 API
        api_base:      'https://api.del.icio.us',

        // Domain and name of the delicious login session cookie.
        cookie_domain: '.delicious.com',
        cookie_name:   '_user'
    },

Since this command will be posting to Delicious via the V1 API, it's handy to declare the base URL for the API in an easily changed spot. That way, you could change this value later on to point the command at another implementation of the API.

Additionally, this command will employ a little-known authentication trick supported by the Delicious API that accepts the user's login cookie set by the Delicious website—this "cookie god" auth is used by the official Delicious addon for Firefox. It's handy for piggybacking on the website login and removing the need to ask the user for their username and password again and possibly storing it in an insecure manner.

In fact, this next chunk of code defines a utility method to rummage through the cookie jar:

    /**
     * Dig up the Delicious login session cookie.
     */
    _getUserCookie: function() {
        var iter = cookie_mgr.enumerator;
        while (iter.hasMoreElements()) {
            var cookie = iter.getNext();
            if( cookie instanceof Components.interfaces.nsICookie && 
                cookie.host.indexOf(this._config.cookie_domain) != -1 && 
                cookie.name == this._config.cookie_name) {
                return decodeURIComponent(cookie.value);
            }
        }
    },

The method defined above, ._getUserCookie(), uses the browser's cookie manager and the values defined in the previous configuration section to find the login session cookie set for Delicious. Take note that this is far beyond the allowed capabilities of bookmarklets and Greasemoney user scripts—this is digging straight into the browser itself, skipping past the usual content-space security restrictions.

In other words: In Ubiquity, the gun is loaded and you should be careful.

Moving along, consider this next utility method:

    /**
     * Given input data and modifiers, attempt to assemble data necessary to
     * post a bookmark.
     */
    _extractBookmarkData: function(input_obj, mods) {
        return {
            _user:
                this._getUserCookie(),
            url:
                context.focusedWindow.location,
            description:
                mods.entitled.text || context.focusedWindow.document.title,
            extended: 
                input_obj.text,
            tags:
                mods.tagged.text
        };
    },

Named ._extractBookmarkData(), this utility method accepts the results of Ubiquity's parser interpreting the primary argument and modifier arguments supplied by the user. Using these data structures, it attempts to build a structure representing the fields of a Delicious bookmark.

The _user field is used for authentication via the site login cookie. The url is set from the location bar of the current page. The description, or title, field of the bookmark is taken from either the entitled modifier or the title of the current page. The tags, if any, come from the tagged modifier. And, finally, the extended notes for the bookmark are taken from the primary input argument of the command.

As you'll see shortly, this utility method will be used in both the preview and the execution of the command.

Next, there's one more utility method to cover:

    /**
     * Given an object, build a URL query string
     */
    _buildQueryString: function(data) {
        var qs = [];
        for (k in data) if (data[k]) 
            qs.push( encodeURIComponent(k) + '=' + 
                encodeURIComponent(data[k]) );
        return qs.join('&');
    },

In anticipation of using the Delicious V1 API, the ._buildQueryString() method accepts an object and constructs a URL query string from the encoded properties of the object. This will be paired with the ._extractBookmarkData() method to supply data for API calls.

Moving along, it's time to start digging into the meat of this Ubiquity command:

    /**
     * Present a preview of the bookmark under construction during the course
     * of composing the command.
     */
    preview: function(pblock, input_obj, mods) {

        var bm          = this._extractBookmarkData(input_obj, mods);
        var user_cookie = this._getUserCookie();
        var user_name   = (user_cookie) ? user_cookie.split(' ')[0] : '';

        var ns = { user_name: user_name, bm: bm };
        var tmpl;

With this code, the implementation of command method .preview() has begun. This method is used by Ubiquity to generate a live preview of the command. Called with a DOM node (pblock) and partially completed command input (input_obj and mods), this method is expected to build a representation of the command's results in the DOM node. As the user types, this method will be called over and over again, ideally offering feedback as the user composes a command.

Continuing on, consider this next chunk of code checking the validity of command input:

        if (!user_name) {

            // If there's no user name, there's no login, so this command won't work. 
            tmpl = [ 
                'No active user found - log in at ', 
                ' ',
                'delicious.com ', 
                'to use this command.'
            ].join('');

        } else if (!bm.description) {

            // If there's no title, then this is an error too.
            tmpl = [ 
                'A title is required for bookmarks on ', 
                ' ',
                'delicious.com ', 
                ''
            ].join('');

This chunk of code first checks for a user name, which can be extracted from a valid Delicious login cookie, if one was found. If not found, the command will fail—so the preview built here will instruct the user to login at Delicious before going further.

The second precondition for using the command is that the bookmark has been given a title. By default, this is the title of the current page—but, some pages don't offer titles. So, an error needs to be flagged if the user hasn't manually supplied a title in this case.

Finally, notice in both of these error cases, a string of HTML is composed in the variable tmpl. This will be used at the end of the method to populate the DOM node passed in as pblock.

Now, assuming that all the command's prerequisites have been met, it's time to try constructing a proper preview for the results of this command:

        } else {

            // Attempt to construct a vaguely delicious-esque preview of a bookmark.
            tmpl = [ 
                '',
                '',
                    'Share a bookmark at  ',
                        'delicious.com/${user_name}:',
                    '',
                        '',
                        '${bm.description}',
                        '${bm.url}',
                        bm.extended ? 
                            '${bm.extended}' : '',
                        bm.tags ?
                            'tags: ${bm.tags}' : '',
                    '',
                ''
            ].join("\n");

        }

        pblock.innerHTML = CmdUtils.renderTemplate(tmpl, ns);
    },

Building on the notion that previews are built in a DOM node, the code above uses both CSS and HTML to assemble a quick-and-dirty facsimile of a Delicious bookmark—which will be rendered like this:

Also note that Ubiquity provides a template engine for use in generating content—namely the JavaScript Templates engine from the TrimPath project. This engine may eventually be replaced with another, but the notion is that Ubiquity will provide tools to more easily generate previews and more.

The conclusion of the .preview() method uses the template engine with a call to CmdUtils.renderTemplate() to inject content into the preview element by way of the .innerHTML property.

Now that the preview is out of the way, it's time to get down to implementing the execution of the command:

    
    /**
     * Attempt to use the delicious v1 API to post a bookmark using the 
     * command input
     */
    execute: function(input_obj, mods) {
        var bm          = this._extractBookmarkData(input_obj, mods);
        var user_cookie = this._getUserCookie();
        var user_name   = (user_cookie) ? user_cookie.split(' ')[0] : '';

        if (!user_name) {
            // If there's no user name, there's no login, so this command won't work. 
            displayMessage('No active user found - log in at delicious.com ' +
                'to use this command.');
            return false;
        }

        if (!bm.description) {
            // If there's no title, somehow, then this is an error too.
            displayMessage("A title is required for bookmarks at delicious.com");
            return false;
        }

Mirroring the .preview() method, the .execute() method first checks for validity of the arguments given by the user. A missing user name or title result in a notification that the command has failed.

But, if the arguments are all valid, it's time to actually issue a request to the Delicious V1 API:

        var path = '/v1/posts/add';
        var url  = this._config.api_base + path;

        var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].
            createInstance();

        req.open('POST', url, true);

        req.onload = function(ev) { 
            displayMessage('Bookmark "' + bm.description + '" ' + 
                'shared at delicious.com/' + user_name);
        }

        req.onerror = function(ev) { 
            displayMessage('ERROR: Bookmark "' + bm.description + '" ' + 
                ' NOT shared on delicious.com/' + user_name);
        }

Using the base URL for the Delicious API declared earlier in the configuration section, the .execute() method constructs an API URL for the /v1/posts/add method. Then, it creates an instance of XMLHttpRequest from the browser to be used in sending the API request. Event handlers are registered with the object to present notifications to the user indicating whether or not the API request was successful.

At long last, it's time to wrap up this method and make the API request:

        req.setRequestHeader('Authorization', 'Basic Y29va2llOmNvb2tpZQ=='); // btoa('cookie:cookie')

        var mediator = Components.classes["@mozilla.org/appshell/window-mediator;1"].
            getService(Components.interfaces.nsIWindowMediator);
        var win = mediator.getMostRecentWindow(null);
        var user_agent = win.navigator.userAgent + ";Ubiquity-share-on-delicious";

        req.setRequestHeader("User-Agent", user_agent);      

        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send(this._buildQueryString(bm));
    },

    EOF:null // I hate trailing commas
});

The login cookie authentication supported by the Delicious V1 API is triggered by supplying a user name / password pair of cookie, which is done by setting the Authorization request header. The login cookie is then expected to be passed in as the POST variable _user, which is done in the ._extractBookmarkData() utility method.

Another bit here that shows more access of browser resources is the construction of a unique User-Agent header for this API call based on the browser's own User-Agent string, something that's suggested in the guidelines for using the Delicious API.

Finally, the .execute() method—and the command itself—is wrapped up with by sending off the bookmark data encoded as POST form variables with the ._buildQueryString() utility method.

And, that's it—a command-driven Delicious browser extension in a little over 200 lines of code. There's still more to be done to really make this thing full-featured, but I think this shows off the basic features of Ubiquity. I'm hoping to dig in deeper and explore further, taking a look at running Greasemonkey-style code at browser startup and page load, as well as playing with some more browser chrome features.

Archived Comments

Jason Clark
2008-09-01T14:47:35
First off- fantastic post. Great to see a lengthy post here again, although I'm one to talk. This is an excellent introduction to Ubiquity command development, and tres useful to boot.

I'm wondering why you chose to construct and post the XMLHttpRequest manually instead of using jQuery, which is included with Ubiquity. I don't know that there's any benefit other than some simplicity, but I took a crack at converting your code to use jQuery, which works nicely. In the 'execute' function, replace everything after "var url = this._config.api_base + path;" with this (hope code blocks work in comments):

var win = context.focusedWindow; var user_agent = win.navigator.userAgent + ";Ubiquity-share-on-delicious";
```
    jQuery.ajax({
      type: "POST",
      url: url,
      data: this._buildQueryString(bm),
      username: "cookie",
      password: "cookie",
      beforeSend: function( req ) {
        req.setRequestHeader("User-Agent", user_agent); 
      },
      error: function() {
        displayMessage('ERROR: Bookmark "' + bm.description + '" ' + 
            ' NOT shared on delicious.com/' + user_name);
      },
      success: function() {
        displayMessage('Bookmark "' + bm.description + '" ' + 
            'shared at delicious.com/' + user_name);
      },
    });
```
Also, with both versions of the code, I'm seeing some unexpected behavior around authentication. Assume I'm logged in to delicious, with "stay logged in" checked, and I restart my browser. Trying to post with the command fails with a 401 unauthorized, even though I can see the cookie was sent (via Live HTTP Headers extension). Going to delicious.com shows me logged in, and once I've viewed the site, the command works. Except that now I can't reproduce; but I know it happened because I've got the headers. At any rate, it is working nicely, but the previous failure is bugging me... feel like I'm overlooking something.

Thanks again for an awesome post. Hope to see more of the same.
Ryan Scott Scheel
2008-09-01T15:07:01

You should be helping with the documentation, if you aren't already. Very nice job with this article;
Aza Raskin
2008-09-02T01:44:13

Hi Leslie,

This is a beautiful tutorial on writing a Ubiquity command. We'd love your help in making Ubiquity's documentation better (especially dev facing). You should totally link to this from the Ubiquity Wiki -- or even add the content in someway.

Anyway, just wanted to say thanks.

-- Aza
seth
2008-09-08T17:30:16

Am I doing something wrong?

When I enter in "sh this tagged tag1 tag2 entitled This is a title" everything after the tagged is added as a tag. It's not seeing the entitled part.
http://spyced.blogspot.com/
2008-09-15T19:12:58

Did something break? I'm getting a 404 accessing http://decafbad.com/hg/UbiquityCommands/file/tip/delicious.ubiq.js
l.m.orchard
2008-09-15T23:07:42

Yeah, looks like I had a small snafu with switching back from Lighttpd to Apache. Left out a rewrite rule - doh!
Tony
2008-10-22T04:56:03

Great article. This is replacing my delicious bookmarklet. Thanks!
dgtlchlk
2009-04-14T01:06:57

Great article and command. Wish it worked correctly with the latest 0.1.8 release though. No matter what text you put in it adds everything as the notes. The tagged and entitled modifiers don't work.
Nolan
2009-04-16T03:10:07

I second that comment. Delicious is actually saying the link given was "chrome://browser/content/browser.xul" and marking it as harmful inside delicious!
Justin
2009-07-06T12:39:39

Hi Leslie,

Thanks for the delicious ubiquity command. Unfortunately, as one of the commenters above mentions, the tagged modifier doesn't seem to work. I'm using Ubiquity 0.5 pre and typing the phrase:

share tagged foo

Adds the bookmark to Delicious with the note text "tagged foo"

Cheers, Justin
Eric
2009-07-20T22:43:17

Echoing others.. I'm using the latest ubiquity (err, next to latest.. 0.1.8?), and doing "share-on-delicious this is a note tagged testing" saves the link with notes "this is a note tagged testing" and no tags. :( Then again, the other delicious command I've found (by someone else) is having the same issue.

Ubiquity cracks open personal mashup tinkering

2008-08-31T04:07:22+00:00

When I was a wee hacker, I lived my digital life though a Commodore 64. I played games on it, did homework, talked to people far away—you know, all the stuff they showed in the pictures on the box. I also took things apart—both the machine itself and software running on it. I grew up learning that my digital environment was ultimately understandable, susceptible to tinkering, and open to being bent to my own purposes.

From the Commodore 64, I graduated eventually to terminals and text editors, opening portals mostly onto computers elsewhere via powerful UNIX command shells. And, of course, over the past decade, this has largely given way to life in a browser.

Yet, for a little while, particularly in the first few years of browsers, freedom to tinker seemed cramped. JavaScript had yet to arrive, and was a little messy when it did. There was no relatively easy addon development. And, though the portals opened by a browser were richer than those provided by terminals, the paths of navigation defined by links controlled by site owners offered less freedom of movement than UNIX commands. I could create my own pages, but I couldn't do much to others' pages.

But then, javascript: URLs came around, dots were connected, and bookmarklets were born. Suddenly, it was possible to customize my browsing environment with arbitrary JavaScript code having access to the current page—no matter whose page it was. And, through the various tricks of the AJAX trade, bookmarklets have only gotten more capable throughout the years.

Smart keyword shortcuts came around a little later, allowing quick access to bookmarks via simple keywords typed into the location bar. The smart part, though, came in the form of bookmarked URLs with placeholders and keywords given arguments to fill the placeholders—allowing not only quick access to bookmarked pages but also search engine forms bookmarked with late-bound fields.

Bookmarklets inherited the benefits of smart keyword shortcuts. The same placeholder in http: URLs can be inserted into the code of a javascript: URL, thus parameterizing the JavaScript code and incidentally turning the location bar into a kind of primitive command line. For example, one of my most heavily used "addresslets" is based on John Resig's original "Super-Fast Delicious Bookmarklet".

Another leap in prying open the browser tinkering space came in the form of Greasemonkey—an addon-powered environment created explicitly for the purpose of end-user scripting applied to others' pages. Greasemonkey user scripts can do more than bookmarklets, and with a much better development environment to boot. And, though a user script can't do quite as much as a proper browser addon, they're much easier to hack on and distribute.

Now, consider one of Mozilla Labs' newest projects, named Ubiquity. This rough and experimental addon for Firefox combines and improves upon everything I've described so far:

Ubiquity is a hackable command line environment, better than bookmarklets and smart keyword shortcuts;
Ubiquity enables persistent customization of others' pages, not unlike Greasemonkey;
Ubiquity facilitates live in-browser creation and web-based subscription to user commands and scripts;
Ubiquity gives access to browser chrome resources without a need for frequent restarts;

So far, most of the commands I see popping up since the 0.1 release have not accomplished much more than smart keyword shortcuts in the location bar could. But, it's early yet, and Ubiquity is far from limited to these commands.

Once the basics have been well-explored, I expect to see more people taking a crack at the broader capabilities offered by Ubiquity. Bookmarklets and Greasemonkey can't access browser chrome—but Ubiquity can. Ubiquity also offers a user interface that's so much more promising than keyword shortcuts, including command previews and typed parameters with suggestions.

Ubiquity promises web-wide mashups directed by a conversational command interface. All in all, the potential of this makes me feel like my digital environment—browser and web as a whole—is getting even more intimately, personally hackable.

It'll be very interesting to see where this project goes.

Archived Comments

Raul
2008-08-31T10:20:58

Hi, was using the original delicious command linked from the Ubiquity wiki, just tried yours and its definitely more polished and functional. Great job with the preview and the extra functionality. Only thing is 'share-to-delicious' is too much to type so I unsubscribed the previous command and changed the namespace in yours. This is clearly going to become a problems as the commands proliferate.
l.m.orchard
2008-08-31T14:43:39

@Raul: "share-to-delicious" is long, but keep in mind is that you only need to type enough of the command to disambiguate it. That is, all I type is "sh this tagged osx software apple" because I have no other commands starting with "sh". Watch the list of commands in the preview as you type. Those tell you what the parser thinks of what you're typing as you type. It's like automatic tab-completion.

Also, I think there's work planned to put some usage based sorting into the command parser, preferring the commands you use most in order of disambiguation.
Abi
2008-08-31T15:33:24

Nice post. I share your sentiment with regards to Ubiquity commands. A lot of commands that I see are just plain simple searches. I hope developers will work on more interesting things. For example, even things like auto-form filling for this comment (possibly even on page load without having to type a command) could be done by Ubiquity. There's still a lot more room for experimentation.
Abi
2008-08-31T15:45:59

But otherwise, I really like your command especially the preivew. We should include it as a builtin command, if you don't mind. :)
Abi
2008-08-31T15:51:20

I noticed a bug in your command. If I select some text in the awesomebar, the bookmark url is chrome. You should use something the command utils to get the url, instead.
l.m.orchard
2008-09-01T06:17:37

@Abi: Making this a built-in command is totally fine by me! It can use more work, though, for sure.

Also, I can reproduce that bug. Ugh. I can't find any methods in the CmdUtils to get the current page URL, though. I'll keep poking a bit though.
Abi
2008-09-01T06:50:23

Your blog seems to be rejecting code (that's why I had so many posts in the first place). You can get the current page url using (with dots):

CmdUtils getDocumentInsecure() location href
Blair McBride
2008-09-02T02:50:12

I recommend against using getDocumentInsecure() - its got "Insecure" in its name for a reason! Instead, you should use:

Application.activeWindow.activeTab.uri.spec

do not taunt happy fun JSON

2006-12-21T02:55:45+00:00

Allow me to repeat myself somewhat and clarify my general opinion of JSON and its use in cross-domain browser scripting:

Happy Fun JSON is not really an API. Happy Fun JSON is not a bold declaration of side-taking in the grand war of web service specifications. Do not base business models on Happy Fun JSON. Caution: Happy Fun JSON may suddenly accelerate to dangerous speeds or stop altogether. Happy Fun JSON contains a liquid core, which, if exposed due to rupture, should not be touched, inhaled, or looked at. Ingredients of Happy Fun JSON include an unknown glowing substance which fell to Earth, presumably from outer space. If Happy Fun JSON begins to smoke, get away immediately. Seek shelter and cover head.

Do not taunt Happy Fun JSON.

Having said all that? Happy Fun JSON is pretty fun to throw around.

Archived Comments

Geof F. Morris
2006-12-21T03:34:19

Did it hurt when Happy Fun JSON fell from Heaven? ;)
Robert Sayre
2006-12-21T03:55:47

Obviously, the new del.icio.us JSON url feed is crushing blow against XML Web Enterprise Services Declarative Net Neutrality.
jamesv
2006-12-21T15:14:24

I only wish you could pass Happy Fun JSON into Flash via FlashVars in IE. FF and Safari seem to have no problems with it.

It would make authoring a richer content version of sIFR much, much easier.
Jim Plush
2006-12-22T19:22:48

You should be banned from talking about JSON if you think you have to choose one or the other. A place for everything and everything in it's place.
Danny
2006-12-31T18:11:19

All this lynch talk - I just got throttled!

Running the script here on a series of URIs got me the 999 error (no sure how many had run). There's a 2 second pause between calls, I thought that would be polite enough. Still throttled now, maybe 10 mins later. Any suggestions for what would prevent throttling? How long it needs to recover?

btw, I think Happy Fun JSON is great, and not unreasonable for interop. But what isn't so good for interop is inventing a new HTTP code when there's 503 Service Unavailable (and a Retry-After header would be handy).
Damian Cugley
2007-01-22T14:16:27

@jamesv: The first thing I did with JSON at work was pass it in to a Flash movie via FlashVars. This used a JSON decode written in ActionScript grabbed from JSON.org, plus a JSON encoder written in C# (it did not take long to write because I did not attempt to serialize arbitrary objects). Some gratuitous URL-encoding was also involved. Compared with passing the same data structure via URL-encoded XML to be picked apart by ActionScript's DOM support, it was easy and much more like fun.

drag and drop and the missing mouseup

2006-12-19T16:21:40+00:00

With the draggable circles - click, drag, move the mouse outside the rectangle, release the mouse button. Now move the mouse back inside the rectangle, and it still thinks your dragging, even though you’ve mouse-up’d.

I guess this is because it’s not catching the onmouseup when you’re outside it’s “domain”. Perhaps make it automatically trigger the mouseup when the pointer leaves the area?

Source: Vitamin Features » Create cross browser vector graphics - Comment by Steve

So, that dojo.gfx thing is cool - but what caught my eye in the above-linked article is the above-quoted comment. Drag and drop and missed mouseups seem to be an issue everywhere. I can't seem to get around them in my XoxoOutliner drag code, YUI DnD examples seem to suffer from it, and hell - even Firefox itself doesn't seem immune: Try drag-selecting some text, wander off-window with the mouse, release the mouse button. For me at least, on my Mac, the drag-selection keeps doing its thing when I wander back on-window. No me gusta.

XoxoOutliner shows some signs of life

2006-11-12T05:25:40+00:00

Remember when I started writing about XoxoOutliner around 8 months ago? Yeah, lots has happened with life in general between then and now - but lately I've been working on code for it again. As you might see from my Trac timeline, I've got lots of new code checked in. And I mean lots.

If I can keep up this bout of serial enthusiasm for the project, you'll be hearing lots more about it soon.

For now, check out the new static README.html and the live demo. It's extremely bugful, but it might do interesting things for Firefox and Safari users.

Archived Comments

Vincent D Murphy
2006-11-12T09:14:26

Wow!

This thing is such an improvement. I love that the README is an outline.

I think this is really powerful. I think an outliner should eliminate the need for a lot of rich text browser editors. Outlines inherently break text into small little chunks, which are stylable (and potentially URL addressable, for block-level comments). I think this thing would rock in a wiki.

Keep up the good work!
Shawn Medero
2006-11-13T12:59:18

Bravo! This is a great set of updates and works well in Safari (haven't had the time yet to test in Firefox.)

I've been thinking about using some portion of these tools in my wiki software to dress up outlines. I'm not sure yet... sometimes I feel like editing an outline (well a simple one I'd use on a wiki at least) is quicker manually with something like Markdown.
misuba
2006-11-14T00:15:01

Rad!

Keep this up and I won't have to finish mine. :-)

XoxoOutliner rewrite coming, now with event delegation

2006-11-06T18:14:26+00:00

For what it's worth: I've answered my own question about event delegation based drag and drop. It seems to work quite well on my machine, which is quite a bit beefier than my old machine. I should try it out on there soon. But, I'll hopefully be releasing it soon in the form of a mostly-rewritten XoxoOutliner that will feature drag and drop outline items as well as keyboard navigation/control and in-place editing. And, it should actually start to become useful, since I plan to also whip up a PHP-based server side bit that will handle loading and saving outlines, as well as possibly a client-side bit that can save outlines using local browser storage. I have the technology - we'll see how far my ambitious plans take me during this hobbling sprint of development.

Archived Comments

Shawn Medero
2006-11-07T11:01:11

Great news Les! I had checked out the souce of XoxoOutliner and was thinking about playing around myself. Let me know if you'd like an additional tester. :)
Jesse Andrews
2006-11-08T18:18:11

Is there a demo of the event delegation framework you are building posted?
l.m.orchard
2006-11-08T18:23:29

Nope, nothing available or posted yet. Soon, though - hoping to check the works in before the end of the week. It's a bit in pieces right now
Brad Neuberg
2006-11-29T09:57:04

Les, very exciting that you're jumping back into the XoXoOutliner code! I can't wait to try to hook it up to HyperScope and play with it some more. It's the best open source DHTMLly outliner out there.

Two things that might help you; for local storage, I just checked in a new storage provider for Dojo Storage that will use the native storage abilities in Firefox 2 if they are available, in an automagic way; if they aren't there, then it will revert to hidden Flash like it's worked in the past. This might be useful for you; don't know what you were thinking about for local storage. There's a page up with better docs on Dojo Storage now at http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book50

The second thing is I just finished an HTML to OPML outline transformer; right now it adds in the line for the HyperScope XSLT stylesheet, but it can be used by any OPML hackers who want to play with bringing HTML into the OPML world, including for things like experimenting with the kind of OPath, deep linking, and inclusion work you've hinted about in other blog entries. A blog post on it is here: http://codinginparadise.org/weblog/2006/11/html-transformer-for-hyperscope-apply.html . Might be fun for you to use in your hacking.

We still need to grab drinks some time! How is your leg healing up? Hope you had a great thanksgiving.

Best, Brad

Event Delegation based DHTML Drag and Drop?

2006-10-31T21:46:40+00:00

So, as the urge to tinker rises again, I've started playing with YUI and cracked open some XoxoOutliner code again. One of the things that struck me like a bolt from the blue recently is the notion of event delegation. For the most part, I've treated event bubbling as a nuisance, except for where it came in handy in keyboard input handling. But avoiding the need to individually track events on every list element on the page via instantiated objects and methods is hot and forehead-slappingly obvious once you've seen it working. Just implement one set of event handlers on the outline root element (ie. UL or OL), and do the right thing as events come in from the list child elements.

Thus, while I can do outline node expand/collapse with ease, my goal is to implement an event delegation based approach to dragging outline nodes around. Apropos of that, I've been poking at how event delegation it works in YUI. While there's nothing much special about it in general, I've run into a bit of a snag when it comes to drag-and-drop.

See, YUI comes with a rather nice drag-and-drop abstraction that I'd like to use. That abstraction, however, requires the instantiation of lots of little objects - one per outline node. Definitely not delegation-based: The problem is that I'll be adding and removing outline nodes at whim throughout the lifetime of the page, which would require lots of care to ensure that I'm maintaining drag-and-drop wrapper objects. I've done that a bit in XoxoOutliner; it sucks.

So, I was able to build part of a delegation-based drag tracker from scratch. I'm sad to lose the other niceties that the YUI DnD offers, but it works. The problem now, though, is the drop part of the equation. I can drag elements around the page until my heart's content, but I can never quite tell in what context I've dropped it.

I poured through the source code for the YUI DnD implementation, as well as the implementation of a few other JS frameworks' DnD offerings. The general solution seems to be calculating and caching the page coordinate regions for each element relevant in the drop operation. In my case, that usually includes every outline node on the page. That's easy when you have lots of little objects instantiated - you just iterate through them and match up regions with the coordinates where the drag stopped. But, part of my win with event delegation was that I don't have to maintain a pile of objects.

Oh yeah, and did I mention that I don't assign IDs to all the little list items making up my outline? And that I don't particularly feel like doing so? That also throws a monkey wrench in the YUI DnD paradigm.

The only idea I have so far is that I need to at least build a cache mapping regions to outline nodes, and keep it fairly well maintained. That should be lighterweight than a fleet of DOM event wrappers, but still annoying. I could trigger a cache refresh when a drag first starts, but that will probably drag down UI response. I could trigger it whenever the outline changes, but that's just moving the burden. And then, who knows how I'll map ID-less elements to their respective regions, while ensuring I stay clear of memory leaks. That's still semi-voodoo to me, and I feel ashamed of that.

Eh, maybe it won't be as bad as I think. But, to anyone who understands what I just spewed: Any ideas?

Archived Comments

Nick
2006-11-01T00:19:27

You know, Marty and I were talking tonight about how some of your posts make NO sense to us. She even said "it's like he's talking another fucking language".

Damn Programmers!!

--nick
Gareth Andrew
2006-11-01T18:57:21

I'm sure I've missed something obvious - why can't you simply use the same event delegation approach on the mouseUp event? getTarget should return the node you've dropped on, what else do you need?
l.m.orchard
2006-11-01T19:18:52

Gareth: Yup, the issue I have with the mouseUp is that getTarget gives me what was under the mouse when I let go of the button - namely, the element I've been dragging around, not the element under the thing being dragged. In addition, for user feedback during the drag (ie. at mouseMove time), I want to know what's under the dragged element - so I can highlight the potential landing spot, etc.
Ben
2006-11-02T13:10:53

I presume the problem is that, given a point on the screen, you want to find exactly what DOM element is beneath it.

I found a solution for this in my proof-of-concept structured editor http://www.fluffy.co.uk/stediting/ -- you need to know where the mouse was clicked to insert the caret.

It might be a start anyway.
misuba
2006-11-06T02:40:19

I think the dragdrop stuff in scriptaculous would get you most of this... at least, it is good about draggable elements having handles you can specify (e.g. child elements of the thing you want to drag), and flexible about what sorts of targets you can land on.
l.m.orchard
2006-11-06T19:06:03

misuba: Nope, the Scriptaculous approach gives me problems too. The first is that I don't like Prototype, unless they've stopped messing with Object.prototype since I last checked. The second is that DnD in Scriptaculous involves juggling lots of little objects ilke most other DnD implementations I've found. When I have an outline of 100's to 1000's of items, that really blows. I think I've got an approach working now that's significantly lighter weight.
misuba
2006-11-06T22:26:55

I'm interested to see your approach. (FWIW, Proto hasn't touched Object.prototype for a couple of versions now.)
Justin Meyer
2008-05-31T07:43:52

I am working on the exact same issue for JavaScriptMVC. If you haven't seen JavaScriptMVC, check out its trunk. In the controller2 plugin, you'll find a really nice event delegation library.

I've only thought of 1 way to do event delegation drops. It's crazy, but it might work.

First, style Drags so their z-Index is LOWER than the Drops. You want your mouse to hit the droppable areas.

Once a droppable is moused over by dragging a drag to it, it creates a transparent element in the exact same position as the Droppable. It also lowers the droppable z-Index. This gives the appearance that the draggable is over the droppable.

To simulate movement, the transparent droppable's mouseovers are sent to the draggable.

On mousing out of the transparent Droppable, it sets everything back to normal.

I haven't tried this yet. The biggest issue I see is that when you grab a draggable in the middle, half of it will be behind the droppable until the mouseover happens. This isn't ideal, but maybe there is something that can be done about that.
Batiste
2009-01-20T10:06:54

A jQuery solution for Drag and Drop with event delegation :

http://batiste.dosimple.ch/blog/posts/2008-05-18-1/jquery-drag-and-drop-and-resize-event-delegation.html

JS versus PHP?

2005-12-19T03:59:31+00:00

...on the other hand: With all these people getting reacquainted with JavaScript by way of AJAX, wouldn't it be cool if we had something as easy to deploy as PHP but based on JavaScript?

Archived Comments

Jonathan Snook
2005-12-19T04:26:31

Isn't that ASP?

I know I've liked the idea of doing JavaScript on the server and client. Less confusing.
Roger Benningfield
2005-12-19T15:10:28

As of CFMX, the CFScript sub-branch of the language is similar to Javascript... the handling of curly brackets is the same, and Coldfusion Components are basically a server-side implementation of Javascript's approach to objects.

The big difference is in operators. For some reason, they stuck with CF's standard, text-based operators, so you end up with stuff like this:

if (i=1;i LT 10;i = i + 1) { // do something }
l.m.orchard
2005-12-19T18:23:36

Jonathan: Well, yeah, JScript is one of the languages available in ASP... but ASP isn't a quick configure-and-make module for Apache.
Stephen De Gabrielle
2005-12-21T07:31:52

Isn't Rhino the obvious solution? I'm sure there is an opensource jvm/compiler that it will run on too?

http://www.mozilla.org/rhino/
Dan Webb
2006-04-04T23:18:43

I'd love to give that a go. I like RoR for large applications but having an apache mod that interpeted JS along with some APIs to access the system and server environment would be great.

I've been looking for someone to start that project with because unfortunately I know hardly any C. If anyone does an is interested then I'd love to give it a shot.

I think mod_javascript was started years ago but stalled eventually before it came to anything. I think spidermonkey would be a better basis that rhino to get in all to run as fast as possible which is a shame because I can code Java..

FeedMagick gains an RSS-to-JSON filter

2005-12-19T03:01:51+00:00

So, I put some more infrastructure behind FeedMagick and lifted a RSS-to-JSON idea from John Resig to transform from MagpieRSS parsing to JSON output.

Here's a spiffy JSON-enriched demo. It was surprisingly easy, all told.

I'm not sure how much time I'll have to really put into this project, but this is the first decent effort I've put into a URL-line suite in a long time. I'm trying to throw in some bits to make it easy to build, document, and use these feed processing commands.

DOM Scripting sounds like a fine book

2005-10-08T17:21:30+00:00

Flicking through the book, it does give the impression of being full of code. I hope that doesn’t scare off any potential buyers.

Source: DOM Scripting: The book has landed
This is one thing I'd worried about with my book, but on the other hand I always wanted to write for The Transactor. And what I wanted to write was a book I would've wanted to buy, if I hadn't written it.

By the sounds of it, DOM Scripting has turned out brilliantly. I'm looking forward to checking it out! It's described as a book targeted at designers versus coders—but a lot of times, it's easier to show-don't-tell with code than with prose.

Apart from those minor quibbles, I’m pleased as punch. I still can’t quite believe that I wrote an honest-to-goodness book. Some form of celebration is called for.

This is exactly how I felt, too. Congratulations, Jeremy! I'm going to have to pick up a copy of this book for myself!

Archived Comments

Jeremy Keith
2005-10-09T00:42:48

Thanks, Leslie. I think you can relate to how I'm feeling right now.
Warren Fischer
2005-10-09T10:51:38

This book makes sense in a clear, and consice way that most tech books don't. His examples are great, and his writing style is very readable. Thanks!