mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-29 10:00:08 +00:00
100 lines
2.5 KiB
HTML
Executable File
100 lines
2.5 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<link href="editor.css" rel="stylesheet"/>
|
|
<style>
|
|
|
|
|
|
</style>
|
|
<script src="generic.js"></script>
|
|
<script src="editor.js"></script>
|
|
<script>
|
|
|
|
var editor
|
|
|
|
var setup = function(){
|
|
window.editor = {
|
|
__proto__: Outline,
|
|
}.setup(
|
|
document.querySelector('.editor')) }
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="setup()">
|
|
<div class="editor">
|
|
<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>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<div tabindex=0><span>C</span><textarea></textarea>
|
|
<div tabindex=0><span>This is a line of text</span><textarea></textarea>
|
|
</div>
|
|
<div tabindex=0><span>This is a set
|
|
text lines</span><textarea></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar">
|
|
<!-- XXX these all should focus the node back so as not to hide the keyboard on mobine -->
|
|
<button onclick="editor.deindent()"><</button>
|
|
<button onclick="editor.indent()">></button>
|
|
<button onclick="editor.Block('before').focus()" style="text-decoration:underline">+</button>
|
|
<button onclick="editor.Block('after').focus()" style="text-decoration:overline">+</button>
|
|
<button onclick="editor.toggleCollapse()">+/-</button>
|
|
<button onclick="editor.remove()">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<pre>
|
|
TODO:
|
|
- mouse controls
|
|
- touch controls
|
|
- <s>navigation</s>
|
|
- <s>expand/collapse subtree</s>
|
|
- <s>shift subtree up/down</s>
|
|
- <s>create node</s>
|
|
- <s>edit node</s>
|
|
- undo
|
|
- delete node
|
|
- indent/deindent
|
|
- edit node
|
|
- copy/paste nodes/trees
|
|
- shifting nodes up/down
|
|
- multiple node selection
|
|
- <s>serialize</s>/deserialize
|
|
- <s>add optional text styling to nodes</s>
|
|
|
|
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>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|