2023-09-25 20:04:53 +03:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2023-09-29 02:47:07 +03:00
|
|
|
<link href="editor.css" rel="stylesheet"/>
|
2023-09-25 20:04:53 +03:00
|
|
|
<style>
|
|
|
|
|
|
2023-10-04 21:54:34 +03:00
|
|
|
.add-row {
|
|
|
|
|
height: 1.2em !important;
|
|
|
|
|
}
|
2023-09-25 20:04:53 +03:00
|
|
|
|
|
|
|
|
</style>
|
2023-09-27 15:05:34 +03:00
|
|
|
<script src="generic.js"></script>
|
|
|
|
|
<script src="editor.js"></script>
|
2023-09-25 20:04:53 +03:00
|
|
|
<script>
|
2023-09-27 00:54:43 +03:00
|
|
|
|
2023-09-30 17:27:28 +03:00
|
|
|
var editor
|
|
|
|
|
|
2023-09-27 00:54:43 +03:00
|
|
|
var setup = function(){
|
2023-09-27 15:05:34 +03:00
|
|
|
window.editor = {
|
|
|
|
|
__proto__: Outline,
|
|
|
|
|
}.setup(
|
2023-09-30 17:27:28 +03:00
|
|
|
document.querySelector('.editor')) }
|
2023-09-25 20:04:53 +03:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
2023-09-27 00:54:43 +03:00
|
|
|
<body onload="setup()">
|
2023-09-25 20:04:53 +03:00
|
|
|
<div class="editor">
|
2023-10-03 16:12:19 +03:00
|
|
|
<div class="outline">
|
|
|
|
|
<div tabindex=0>
|
|
|
|
|
<span><i>root</i></span><textarea></textarea>
|
|
|
|
|
<div tabindex=0 collapsed>
|
|
|
|
|
<span>A</span><textarea></textarea>
|
|
|
|
|
<div tabindex=0><span>a</span><textarea></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div tabindex=0><span>b</span><textarea></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div tabindex=0><span>c</span><textarea></textarea>
|
|
|
|
|
</div>
|
2023-09-26 14:50:42 +03:00
|
|
|
</div>
|
2023-10-03 16:12:19 +03:00
|
|
|
<div tabindex=0><span>B</span><textarea></textarea>
|
|
|
|
|
<div tabindex=0><span>d</span><textarea></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div tabindex=0><span>e</span><textarea></textarea>
|
|
|
|
|
</div>
|
2023-09-25 20:04:53 +03:00
|
|
|
</div>
|
2023-10-03 16:12:19 +03:00
|
|
|
<div tabindex=0><span>C</span><textarea></textarea>
|
|
|
|
|
<div tabindex=0><span>This is a line of text</span><textarea></textarea>
|
|
|
|
|
</div>
|
2023-10-04 21:54:34 +03:00
|
|
|
<div tabindex=0><span>This is a set<br>
|
|
|
|
|
text lines</span><textarea></textarea>
|
2023-10-03 16:12:19 +03:00
|
|
|
</div>
|
2023-09-25 20:04:53 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-10-04 21:54:34 +03:00
|
|
|
<!-- toolbar (optional) -->
|
2023-10-04 15:40:29 +03:00
|
|
|
<div class="toolbar">
|
2023-10-04 15:33:07 +03:00
|
|
|
<button onclick="editor.deindent().focus()"><</button>
|
|
|
|
|
<button onclick="editor.indent().focus()">></button>
|
2023-10-04 21:54:34 +03:00
|
|
|
<button onclick="editor.Block('before').focus()" class="add-row">+</button>
|
|
|
|
|
<hr>
|
|
|
|
|
<button onclick="editor.Block('after').focus()" class="add-row">+</button>
|
2023-10-04 15:33:07 +03:00
|
|
|
<button onclick="editor.toggleCollapse()?.focus()">˅˄</button>
|
2023-10-03 16:32:29 +03:00
|
|
|
<button onclick="editor.remove()">×</button>
|
2023-10-03 16:12:19 +03:00
|
|
|
</div>
|
2023-09-25 20:04:53 +03:00
|
|
|
</div>
|
|
|
|
|
|
2023-09-27 14:08:30 +03:00
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
TODO:
|
2023-10-04 15:33:07 +03:00
|
|
|
- Firefox compatibility -- remove ':has(..)'
|
|
|
|
|
- <s>focus management</s>
|
|
|
|
|
- <s>mouse/touch controls</s>
|
2023-09-27 14:08:30 +03:00
|
|
|
- <s>navigation</s>
|
|
|
|
|
- <s>expand/collapse subtree</s>
|
|
|
|
|
- <s>shift subtree up/down</s>
|
|
|
|
|
- <s>create node</s>
|
|
|
|
|
- <s>edit node</s>
|
2023-10-04 21:54:34 +03:00
|
|
|
- shifting nodes up/down
|
|
|
|
|
- multiple node selection
|
2023-09-30 17:27:28 +03:00
|
|
|
- undo
|
|
|
|
|
- delete node
|
|
|
|
|
- indent/deindent
|
|
|
|
|
- edit node
|
2023-09-27 14:08:30 +03:00
|
|
|
- copy/paste nodes/trees
|
|
|
|
|
- <s>serialize</s>/deserialize
|
2023-09-29 15:38:17 +03:00
|
|
|
- <s>add optional text styling to nodes</s>
|
2023-09-27 14:08:30 +03:00
|
|
|
|
|
|
|
|
Controls:
|
|
|
|
|
up - focus node above
|
|
|
|
|
down - focus node below
|
|
|
|
|
left - focus parent node
|
|
|
|
|
right - focus first child node
|
|
|
|
|
tab - indent node
|
|
|
|
|
s-tab - deindent node
|
|
|
|
|
s-left - collapse node
|
|
|
|
|
s-right - expand node
|
|
|
|
|
enter - normal mode: edit node
|
|
|
|
|
- edit mode: create node below
|
|
|
|
|
esc - exit edit mode
|
|
|
|
|
</pre>
|
|
|
|
|
|
2023-10-04 21:54:34 +03:00
|
|
|
|
2023-09-25 20:04:53 +03:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
