2023-09-25 20:04:53 +03:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
font-size: 5mm;
|
|
|
|
|
}
|
|
|
|
|
|
2023-09-27 00:54:43 +03:00
|
|
|
.editor [tabindex] {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.editor div [tabindex] {
|
2023-09-25 20:04:53 +03:00
|
|
|
margin-left: 2em;
|
|
|
|
|
}
|
2023-09-27 00:54:43 +03:00
|
|
|
.editor [tabindex]>span,
|
|
|
|
|
.editor [tabindex]>textarea {
|
|
|
|
|
--padding: 0.2em;
|
|
|
|
|
|
2023-09-25 20:04:53 +03:00
|
|
|
display: block;
|
2023-09-27 00:54:43 +03:00
|
|
|
width: 100%;
|
2023-09-27 15:41:29 +03:00
|
|
|
/* XXX this is a tiny bit off and using textarea's height here is off too... */
|
|
|
|
|
min-height: 1em;
|
2023-09-27 00:54:43 +03:00
|
|
|
padding: var(--padding);
|
|
|
|
|
margin: 0;
|
2023-09-26 14:50:42 +03:00
|
|
|
|
2023-09-27 00:54:43 +03:00
|
|
|
font-family: sans-serif;
|
|
|
|
|
font-size: 5mm;
|
2023-09-26 14:50:42 +03:00
|
|
|
white-space: pre;
|
2023-09-27 00:54:43 +03:00
|
|
|
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
.editor [tabindex]>textarea {
|
|
|
|
|
height: calc(2 * var(--padding) + 1em);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
resize: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* show/hide node's view/code... */
|
|
|
|
|
.editor [tabindex]>span+textarea:not(:focus),
|
|
|
|
|
/* XXX not sure how to do this without :has(..)... */
|
|
|
|
|
.editor [tabindex]:has(>span+textarea:focus)>span:has(+textarea),
|
|
|
|
|
.editor [tabindex]:focus>span+textarea {
|
|
|
|
|
position: absolute;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
top: 0;
|
2023-09-25 20:04:53 +03:00
|
|
|
}
|
|
|
|
|
|
2023-09-25 20:46:22 +03:00
|
|
|
.editor div[collapsed] {
|
|
|
|
|
border-bottom: solid 1px silver;
|
|
|
|
|
}
|
|
|
|
|
.editor div[collapsed] div {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-09-25 20:04:53 +03:00
|
|
|
.editor div:focus {
|
|
|
|
|
/*outline: solid 0.2em silver;*/
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
2023-09-27 00:54:43 +03:00
|
|
|
.editor div:focus>span,
|
|
|
|
|
.editor div:focus>textarea {
|
2023-09-25 20:04:53 +03:00
|
|
|
background: silver;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</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
|
|
|
|
|
|
|
|
var setup = function(){
|
2023-09-27 15:05:34 +03:00
|
|
|
window.editor = {
|
|
|
|
|
__proto__: Outline,
|
|
|
|
|
}.setup(
|
|
|
|
|
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-09-27 00:54:43 +03:00
|
|
|
<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>
|
2023-09-26 14:50:42 +03:00
|
|
|
</div>
|
2023-09-27 00:54:43 +03:00
|
|
|
<div tabindex=0><span>b</span><textarea></textarea>
|
2023-09-25 20:04:53 +03:00
|
|
|
</div>
|
2023-09-27 00:54:43 +03:00
|
|
|
<div tabindex=0><span>c</span><textarea></textarea>
|
2023-09-26 14:50:42 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-09-27 00:54:43 +03:00
|
|
|
<div tabindex=0><span>B</span><textarea></textarea>
|
|
|
|
|
<div tabindex=0><span>d</span><textarea></textarea>
|
2023-09-25 20:04:53 +03:00
|
|
|
</div>
|
2023-09-27 00:54:43 +03:00
|
|
|
<div tabindex=0><span>e</span><textarea></textarea>
|
2023-09-25 20:04:53 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-09-27 00:54:43 +03:00
|
|
|
<div tabindex=0><span>C</span><textarea></textarea>
|
|
|
|
|
<div tabindex=0><span>This is a line of text</span><textarea></textarea>
|
2023-09-25 20:04:53 +03:00
|
|
|
</div>
|
2023-09-27 00:54:43 +03:00
|
|
|
<div tabindex=0><span>This is a set
|
|
|
|
|
text lines</span><textarea></textarea>
|
2023-09-25 20:04:53 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-09-27 14:08:30 +03:00
|
|
|
<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
|
|
|
|
|
- copy/paste nodes/trees
|
|
|
|
|
- shifting nodes up/down
|
|
|
|
|
- multiple node selection
|
|
|
|
|
- <s>serialize</s>/deserialize
|
|
|
|
|
- add optional styling to nodes
|
|
|
|
|
|
|
|
|
|
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-09-25 20:04:53 +03:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
