2023-09-25 20:04:53 +03:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
font-size: 5mm;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.editor div div {
|
|
|
|
|
margin-left: 2em;
|
|
|
|
|
}
|
|
|
|
|
.editor div span {
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
.editor div:focus>span {
|
|
|
|
|
background: silver;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var getFocused = function(offset=0){
|
|
|
|
|
var focused = document.querySelector('.editor :focus')
|
|
|
|
|
if(offset == 0){
|
|
|
|
|
return focused }
|
|
|
|
|
|
|
|
|
|
if(offset == 'parent'){
|
|
|
|
|
if(!focused){
|
|
|
|
|
return document.querySelector('.editor [tabindex]') }
|
|
|
|
|
var elem = focused.parentElement
|
|
|
|
|
return elem.classList.contains('editor') ?
|
|
|
|
|
undefined
|
|
|
|
|
: elem }
|
|
|
|
|
|
|
|
|
|
if(offset == 'child'){
|
|
|
|
|
if(!focused){
|
|
|
|
|
return document.querySelector('.editor [tabindex]') }
|
|
|
|
|
return focused.querySelector('div') }
|
|
|
|
|
|
|
|
|
|
if(offset == 'children'){
|
|
|
|
|
if(!focused){
|
|
|
|
|
return [] }
|
|
|
|
|
return [...focused.children]
|
|
|
|
|
.filter(function(elem){
|
|
|
|
|
return elem.getAttribute('tabindex') }) }
|
|
|
|
|
|
|
|
|
|
if(offset == 'siblings'){
|
|
|
|
|
if(!focused){
|
|
|
|
|
return [] }
|
|
|
|
|
return [...focused.parentElement.children]
|
|
|
|
|
.filter(function(elem){
|
|
|
|
|
return elem.getAttribute('tabindex') }) }
|
|
|
|
|
|
|
|
|
|
var focusable = [...document.querySelectorAll('.editor [tabindex]')]
|
2023-09-25 20:46:22 +03:00
|
|
|
.filter(function(e){
|
|
|
|
|
return e.offsetParent != null })
|
2023-09-25 20:04:53 +03:00
|
|
|
if(offset == 'all'){
|
|
|
|
|
return focusable }
|
|
|
|
|
|
|
|
|
|
// offset from focused...
|
|
|
|
|
if(focused){
|
|
|
|
|
var i = focusable.indexOf(focused) + offset
|
|
|
|
|
i = i < 0 ?
|
|
|
|
|
focusable.length + i
|
|
|
|
|
: i % focusable.length
|
|
|
|
|
return focusable[i]
|
|
|
|
|
|
|
|
|
|
// nothing focused -> forst/last...
|
|
|
|
|
} else {
|
|
|
|
|
return focusable[offset > 0 ? 0 : focusable.length-1] } }
|
|
|
|
|
|
2023-09-25 20:46:22 +03:00
|
|
|
var indentNode = function(indent=true){
|
|
|
|
|
var cur = getFocused()
|
|
|
|
|
if(!cur){
|
|
|
|
|
return }
|
|
|
|
|
var siblings = getFocused('siblings')
|
|
|
|
|
// deindent...
|
|
|
|
|
if(!indent){
|
|
|
|
|
var parent = cur.parentElement
|
|
|
|
|
if(!parent.classList.contains('.editor')){
|
|
|
|
|
var children = siblings.slice(siblings.indexOf(cur)+1)
|
|
|
|
|
parent.after(cur)
|
|
|
|
|
children.length > 0
|
|
|
|
|
&& cur.append(...children) }
|
|
|
|
|
// indent...
|
|
|
|
|
} else {
|
|
|
|
|
var parent = siblings[siblings.indexOf(cur) - 1]
|
|
|
|
|
if(parent){
|
|
|
|
|
parent.append(cur) } }
|
|
|
|
|
return cur }
|
|
|
|
|
|
|
|
|
|
var toggleCollapse = function(node, state='next'){
|
|
|
|
|
if(node == 'all'){
|
|
|
|
|
return getFocused('all')
|
|
|
|
|
.map(function(node){
|
|
|
|
|
return toggleCollapse(node, state) }) }
|
|
|
|
|
|
|
|
|
|
// state passed directly...
|
|
|
|
|
if(!(node instanceof HTMLElement) && node != null){
|
|
|
|
|
state = node
|
|
|
|
|
node = null }
|
|
|
|
|
node ??= getFocused()
|
|
|
|
|
if(!node){
|
|
|
|
|
return }
|
|
|
|
|
state = state == 'next' ?
|
|
|
|
|
!node.getAttribute('collapsed')
|
|
|
|
|
: state
|
|
|
|
|
state ?
|
|
|
|
|
node.setAttribute('collapsed', '')
|
|
|
|
|
: node.removeAttribute('collapsed')
|
|
|
|
|
return node }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var LEFT_COLLAPSE = false
|
|
|
|
|
var RIGHT_EXPAND = true
|
2023-09-25 20:04:53 +03:00
|
|
|
|
|
|
|
|
var keyboard = {
|
2023-09-25 20:46:22 +03:00
|
|
|
// vertical navigation...
|
2023-09-25 20:04:53 +03:00
|
|
|
ArrowDown: function(evt, offset=1){
|
|
|
|
|
getFocused(1)?.focus() },
|
|
|
|
|
ArrowUp: function(evt){
|
|
|
|
|
getFocused(-1)?.focus() },
|
2023-09-25 20:46:22 +03:00
|
|
|
|
|
|
|
|
// horizontal navigation / collapse...
|
2023-09-25 20:04:53 +03:00
|
|
|
ArrowLeft: function(evt){
|
2023-09-25 20:46:22 +03:00
|
|
|
if(LEFT_COLLAPSE){
|
|
|
|
|
toggleCollapse(true)
|
|
|
|
|
getFocused('parent')?.focus()
|
|
|
|
|
} else {
|
|
|
|
|
evt.shiftKey ?
|
|
|
|
|
toggleCollapse(true)
|
|
|
|
|
: getFocused('parent')?.focus() } },
|
2023-09-25 20:04:53 +03:00
|
|
|
ArrowRight: function(evt){
|
2023-09-25 20:46:22 +03:00
|
|
|
if(RIGHT_EXPAND){
|
|
|
|
|
toggleCollapse(false)
|
|
|
|
|
var child = getFocused('child')
|
|
|
|
|
child?.focus()
|
|
|
|
|
if(!child){
|
|
|
|
|
getFocused(1)?.focus() }
|
|
|
|
|
} else {
|
|
|
|
|
evt.shiftKey ?
|
|
|
|
|
toggleCollapse(false)
|
|
|
|
|
: getFocused('child')?.focus() } },
|
2023-09-25 20:04:53 +03:00
|
|
|
|
2023-09-25 20:46:22 +03:00
|
|
|
// indent...
|
2023-09-25 20:04:53 +03:00
|
|
|
Tab: function(evt){
|
|
|
|
|
evt.preventDefault()
|
2023-09-25 20:46:22 +03:00
|
|
|
indentNode(!evt.shiftKey)?.focus() },
|
|
|
|
|
|
|
|
|
|
// edit mode...
|
|
|
|
|
Enter: function(evt){
|
|
|
|
|
console.log('---', evt)
|
|
|
|
|
},
|
|
|
|
|
Escape: function(evt){
|
|
|
|
|
console.log('---', evt)
|
|
|
|
|
},
|
2023-09-25 20:04:53 +03:00
|
|
|
}
|
|
|
|
|
document.addEventListener('keydown',
|
|
|
|
|
function(evt){
|
|
|
|
|
evt.key in keyboard
|
|
|
|
|
&& keyboard[evt.key](evt) })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<pre>
|
|
|
|
|
TODO:
|
|
|
|
|
- <s>navigation</s>
|
2023-09-25 20:46:22 +03:00
|
|
|
- <s>expand/collapse subtree</s>
|
2023-09-25 20:04:53 +03:00
|
|
|
- <s>shift subtree up/down</s>
|
|
|
|
|
- edit node
|
|
|
|
|
- create node
|
2023-09-25 20:46:22 +03:00
|
|
|
- mouse controls
|
|
|
|
|
- touch controls
|
2023-09-25 20:04:53 +03:00
|
|
|
|
|
|
|
|
Controls:
|
|
|
|
|
up - focus node above
|
|
|
|
|
down - focus node below
|
|
|
|
|
left - focus parent node
|
|
|
|
|
right - focus first child node
|
2023-09-25 20:46:22 +03:00
|
|
|
tab - indent node
|
|
|
|
|
s-tab - deindent node
|
|
|
|
|
s-left - collapse node
|
|
|
|
|
s-right - expand node
|
2023-09-25 20:04:53 +03:00
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
<div class="editor">
|
|
|
|
|
<div tabindex=0><span>root</span>
|
2023-09-25 20:46:22 +03:00
|
|
|
<div tabindex=0 collapsed><span>A</span>
|
2023-09-25 20:04:53 +03:00
|
|
|
<div tabindex=0><span>a</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div tabindex=0><span>b</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div tabindex=0><span>c</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div tabindex=0><span>B</span>
|
|
|
|
|
<div tabindex=0><span>d</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div tabindex=0><span>e</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
