{ "attachments": [], "comments_archived": true, "date": "2005-07-12T21:56:34.000Z", "layout": "post", "title": "In-browser XOXO Outliner Experiment", "wordpress_id": 667, "wordpress_slug": "xoxo-outliner-experiment", "wordpress_url": "http://www.decafbad.com/blog/?p=667", "year": "2005", "month": "07", "day": "12", "isDir": false, "slug": "xoxo-outliner-experiment", "type": "entry", "postName": "2005-07-12-xoxo-outliner-experiment", "html": "

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.

\n

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:

\n\n

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.

\n

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.

\n

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.

\n

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.

\n

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.

\n

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?

\n\n\n\n

shortname=xoxo_outliner_experiment

\n

Archived Comments

\n\n\n\n
\n\n\n", "body": "Testing, testing--is this thing on? Well, I do have to say that I've recovered rather well from [the \"stroke\"][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.\r\n\r\nHowever, in the spirit of a few [recent][graphs] [experiments][treemaps], I have another demo for you. Here's the URL of the latest work in progress / proof of concept:\r\n\r\n* [http://www.decafbad.com/2005/07/map-test/tree2.html](http://www.decafbad.com/2005/07/map-test/tree2.html)\r\n\r\nWhat 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][sprout], but I wanted to try making one myself.\r\n\r\nA 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.\r\n\r\n*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.\r\n\r\nThe idea is that I want to unobtrusively drop some CSS and JavaScript into an HTML page with one or more [XOXO-style outlines][xoxo], magically turning them into in-browser outline editors.\r\n\r\nBut, 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][leak]. 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.\r\n\r\nThe 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? \r\n\r\n[leak]: http://jibbering.com/faq/faq_notes/closures.html#clMem\r\n[xoxo]: http://developers.technorati.com/wiki/XOXO\r\n[sprout]: http://www.google.com/url?sa=U&start=1&q=http://sproutliner.com/&e=912\r\n[stroke]: http://www.decafbad.com/blog/2005/07/05/exocortex_stroke\r\n[treemaps]: http://www.decafbad.com/blog/2005/07/02/css_treemaps\r\n[graphs]: http://www.decafbad.com/blog/2005/07/02/drag_the_boxes_stretch_the_lines\r\n\r\nshortname=xoxo_outliner_experiment\r\n\r\n
\r\n

Archived Comments

\r\n \r\n \r\n \r\n
\r\n ", "parentPath": "./content/posts/archives/2005", "path": "2005/07/12/xoxo-outliner-experiment", "summary": "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.\nHowever, 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:\n\nhttp://www.decafbad.com/2005/07/map-test/tree2.html\n\nWhat 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.\nA 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.\nUpdate: 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.\nThe 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.\nBut, 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.\nThe 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?", "needsBuild": true, "prevPostPath": "2005/07/05/exocortex-stroke", "prevPostTitle": "Suffered a Stroke in my Exocortex", "nextPostPath": "2005/07/12/an-experiment-in-rest-and-xml", "nextPostTitle": "An Experiment in REST and XML" }