0xDECAFBAD

It's all spinning wheels and self-doubt until the first pot of coffee.

In-browser XOXO Outliner Experiment

Testing, testing--is this thing on? Well, I do have to say that I've recovered rather well from the "stroke" last week. Things have been pretty busy since then, so I haven't had much of a chance to blather any more around these parts.

However, in the spirit of a few recent experiments, I have another demo for you. Here's the URL of the latest work in progress / proof of concept:

What is it, you might ask before clicking a strange URL? It's an outliner, in Javascript. Or, rather, a first rough stab at one anyway. It's got a long way to go, and there are indeed better options out there already, but I wanted to try making one myself.

A quick summary of controls: No mouse drag of items yet, but you can click on them to edit. Use the up and down cursor keys to navigate through the outline. Use shift along with the cursor keys to shift items around. Use the control key along with the cursor keys to control visibility of child items.

Update: There're a few more things I didn't mention, as well as a few bug half-fixes. Hitting return when the editor is on an existing item will insert a new blank item right after it. Hitting shift-return will append a new child item to the current item. Tab and shift-tab, as well as shift-right and shift-left, are supposed to indent and outdent items. Unfortunately, they're not quite working yet and of course they semi-clobber other useful keyboard functions, so I'm still feeling around for a good way to support these.

The idea is that I want to unobtrusively drop some CSS and JavaScript into an HTML page with one or more XOXO-style outlines, magically turning them into in-browser outline editors.

But, like I said, there's still lots of work to be done here, and I'm pretty sure I've riddled this thing with circular references that will make your IE/Win combination leak like crazy. I just wanted to see if I could make something like this work, though. And, roughly, it seems to do so in Safari and Firefox.

The next part of this equation will be coming up soon, I think. And that is: Okay, now that I've created / edited an outline in my browser--how can I save it?

shortname=xoxo_outliner_experiment

Archived Comments

  • Pete Prodoehl
    Damn that is cool!
  • Charlie Wallace
    Way cool! Your demo just got mentioned on the TiddlyWikiDev group in Google Groups, under the 'Outlining!' topic. If you're not familiar with TiddlyWiki, you might enjoy a look at www.tiddlywiki.com. It's an all-javascript personal wiki, all in one file. There's an active community producing variations on the original version. And I'd lovvvvve to see an adaptation that would use your outliner!!!! There are some interesting issues with trying to combine heirarchical outlines with non-heirarchical wikis, but seems like it would work if kept inside one wiki page... Also, a question - did you implement a way to add new items to the outline? THanks, Charlie Wallace
  • ryan king
    Very cool.
  • Dean Edwards
    It depends what you mean by "save" it. But I think the way TiddlyWikki save its state is pretty cool.
  • l.m. orchard
    Dean: Huh, that's interesting... I vaguely remembered that TiddlyWiki saved changes, but it appears to actually save to the local filesystem. I didn't know that. As for my stuff, though, I've got a slightly more REST/"AJAXy" way in mind.
  • Charlie Wallace
    To answer my own question above, and add another: There are 2 ways to create a new line. Enter creates one at the same level, and shift-enter creates one that's indented. The new question - any plans to allow more than one line of text in an item? And another: any plans to support "body" text for each line? Or, alternately, if more than one line is entered, the first line could serve as the heading? Usability note: I think you'll need to allow items to be shift-arrow dragged from one containing heading to a different one, I can't seem to do this currently. Nice work! -- Charlie
  • Bill Seitz
    Very excellent. (The wrapping of multi-line items isn't ideal.) Have you thought about saving in some smart-ascii/wiki format instead of XOXO? Any tags at all seem like overkill for something that could be expressed as a bullet-list... (you could *render* to XOXO at appropriate times, just like DaveW renders from OPML to HTML/RSS...)
  • l.m. orchard
    Bill: Well, what I was thinking is that the machine components (browser and server) would deal in XML/HTML as much as possible. XOXO would be the on-disk storage and transport format for outlines. But, alongside the DHTML/JS editors, I'd like to throw in some filters that speak wiki-text for human convenience in HTML forms.
  • l.m. orchard
    Oh, and I guess something that might make XML-on-disk make more sense is that I'd like this thing to do more than just outlines. I want to include other microformats and HTML semantics,
  • Dan G
    Excellent. This is really nice. BTW: If they're interested, you might want to submit this to the Dojo project which, among other things, is trying to build a standard widget set for Javascript. If there was an outliner as part of that library, I bet you'd see it used in a lot more places...
  • cth
    Very cool!!! :) i'd started a proof of concept like that a while back ( http://homepage.mac.com/ctholland/thelab/outlines/ ) which Kevin Marks linked into the XOXO wiki: http://developers.technorati.com/wiki/XOXO . mine isn't nearly as feature-rich and objected-oriented as yours. congrats, and keep-up the good work!
  • Aldo Castañeda
    I want to Dave Winer's demo at Berkman last night and asked him for this exact type of functionality. In my opinion, web editable OPML is key to adoption for "regular" users like me. Fantastic work!
  • Evgeny Zislis
    I've started working on an AJAX editor for XOXO (aka outliner). It got most of the basic stuff working already, and just needs a small last push to get it going. Anyone wants to help out finishing it and make it public? Drop me an email if you do. [evgeny.zislis gmail]