mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-29 18:10:09 +00:00
292 lines
7.2 KiB
HTML
Executable File
292 lines
7.2 KiB
HTML
Executable File
<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;
|
|
|
|
white-space: pre;
|
|
}
|
|
|
|
.editor div[collapsed] {
|
|
border-bottom: solid 1px silver;
|
|
}
|
|
.editor div[collapsed] div {
|
|
display: none;
|
|
}
|
|
|
|
.editor div:focus {
|
|
/*outline: solid 0.2em silver;*/
|
|
outline: none;
|
|
}
|
|
.editor div:focus>span {
|
|
background: silver;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
|
|
var getFocused = function(offset=0, selector='[tabindex]'){
|
|
var focused = document.querySelector(`.editor ${selector}:focus`)
|
|
if(offset == 0){
|
|
return focused }
|
|
|
|
if(offset == 'parent'){
|
|
if(!focused){
|
|
return document.querySelector(`.editor ${selector}`) }
|
|
var elem = focused.parentElement
|
|
return elem.classList.contains('editor') ?
|
|
undefined
|
|
: elem }
|
|
|
|
if(offset == 'child'){
|
|
if(!focused){
|
|
return document.querySelector(`.editor ${selector}`) }
|
|
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 ${selector}`)]
|
|
.filter(function(e){
|
|
return e.offsetParent != null })
|
|
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] } }
|
|
|
|
// XXX would also be nice to make the move only if at first/last line/char
|
|
// XXX would be nice to keep the cursor at roughly the same left offset...
|
|
var getEditable = function(offset){
|
|
return getFocused(offset, '[contenteditable]') }
|
|
|
|
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) }) }
|
|
// toggleCollapse(<state>)
|
|
if(!(node instanceof HTMLElement) && node != null){
|
|
state = node
|
|
node = null }
|
|
node ??= getFocused()
|
|
if(!node
|
|
// only nodes with children can be collapsed...
|
|
|| !node.querySelector('[tabindex]')){
|
|
return }
|
|
state = state == 'next' ?
|
|
!node.getAttribute('collapsed')
|
|
: state
|
|
state ?
|
|
node.setAttribute('collapsed', '')
|
|
: node.removeAttribute('collapsed')
|
|
return node }
|
|
|
|
|
|
// XXX this works only on the current text node...
|
|
var atLine = function(index){
|
|
// XXX get line
|
|
var sel = window.getSelection()
|
|
// XXX add support for range...
|
|
if(sel.type == 'Caret'){
|
|
var text = getEditable().innerText
|
|
var lines = text.split(/\n/g).length
|
|
var offset = sel.focusOffset
|
|
var line = text.slice(0, offset).split(/\n/g).length
|
|
|
|
console.log('---', line, 'of', lines, '---', offset)
|
|
|
|
// XXX STUB index handling...
|
|
// XXX need to account for multiple elements withn the block...
|
|
// ...this breaks if we insert an element into the text,
|
|
// e.g. something like <i>..</i>...
|
|
if(index == -1 && line == lines){
|
|
return true
|
|
} else if(index == 0 && line == 1){
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
var LEFT_COLLAPSE = false
|
|
var RIGHT_EXPAND = true
|
|
|
|
var keyboard = {
|
|
// vertical navigation...
|
|
ArrowDown: function(evt, offset=1){
|
|
var action = getFocused
|
|
var edited = document.querySelector('.editor [contenteditable]:focus')
|
|
if(edited){
|
|
if(!atLine(-1)){
|
|
return }
|
|
evt.preventDefault()
|
|
//window.getSelection()
|
|
action = getEditable }
|
|
action(1)?.focus() },
|
|
ArrowUp: function(evt){
|
|
var action = getFocused
|
|
var edited = document.querySelector('.editor [contenteditable]:focus')
|
|
if(edited){
|
|
if(!atLine(0)){
|
|
return }
|
|
evt.preventDefault()
|
|
action = getEditable }
|
|
if(action === getEditable){
|
|
evt.preventDefault() }
|
|
action(-1)?.focus() },
|
|
|
|
// horizontal navigation / collapse...
|
|
ArrowLeft: function(evt){
|
|
if(document.querySelector('.editor [contenteditable]:focus')){
|
|
// XXX if at end of element move to next...
|
|
return }
|
|
if(LEFT_COLLAPSE){
|
|
toggleCollapse(true)
|
|
getFocused('parent')?.focus()
|
|
} else {
|
|
evt.shiftKey ?
|
|
toggleCollapse(true)
|
|
: getFocused('parent')?.focus() } },
|
|
ArrowRight: function(evt){
|
|
if(document.querySelector('.editor [contenteditable]:focus')){
|
|
// XXX if at end of element move to next...
|
|
return }
|
|
if(RIGHT_EXPAND){
|
|
toggleCollapse(false)
|
|
var child = getFocused('child')
|
|
child?.focus()
|
|
if(!child){
|
|
getFocused(1)?.focus() }
|
|
} else {
|
|
evt.shiftKey ?
|
|
toggleCollapse(false)
|
|
: getFocused('child')?.focus() } },
|
|
|
|
// indent...
|
|
Tab: function(evt){
|
|
evt.preventDefault()
|
|
indentNode(!evt.shiftKey)?.focus() },
|
|
|
|
// edit mode...
|
|
Enter: function(evt){
|
|
evt.shiftKey
|
|
|| evt.preventDefault()
|
|
getFocused()?.querySelector('[contenteditable]')?.focus() },
|
|
Escape: function(evt){
|
|
document.querySelector('[contenteditable]:focus')?.parentElement?.focus() },
|
|
}
|
|
document.addEventListener('keydown',
|
|
function(evt){
|
|
evt.key in keyboard
|
|
&& keyboard[evt.key](evt) })
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<pre>
|
|
TODO:
|
|
- <s>navigation</s>
|
|
- <s>expand/collapse subtree</s>
|
|
- <s>shift subtree up/down</s>
|
|
- edit node
|
|
- multiple node selection
|
|
- create node
|
|
- mouse controls
|
|
- touch controls
|
|
|
|
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
|
|
</pre>
|
|
|
|
<hr>
|
|
|
|
<div class="editor">
|
|
<div tabindex=0><span contenteditable="true">root</span>
|
|
<div tabindex=0 collapsed><span contenteditable="true">A</span>
|
|
<div tabindex=0><span contenteditable="true">a</span>
|
|
</div>
|
|
<div tabindex=0><span contenteditable="true">b</span>
|
|
</div>
|
|
<div tabindex=0><span contenteditable="true">c</span>
|
|
</div>
|
|
</div>
|
|
<div tabindex=0><span contenteditable="true">B</span>
|
|
<div tabindex=0><span contenteditable="true">d</span>
|
|
</div>
|
|
<div tabindex=0><span contenteditable="true">e</span>
|
|
</div>
|
|
</div>
|
|
<div tabindex=0><span contenteditable="true">C</span>
|
|
<div tabindex=0><span contenteditable="true">This is a line of text</span>
|
|
</div>
|
|
<div tabindex=0><span contenteditable="true">This is a set
|
|
text lines</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|