flynx/pWiki
1
1
Fork 0
mirror of https://github.com/flynx/pWiki.git synced 2025-10-29 18:10:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added basic buttons....

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-10-03 16:12:19 +03:00
parent 0c5c5f2a5f
commit b514f4efb4
3 changed files with 99 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
experiments/outline-editor/editor.css
View File

@ -1,21 +1,34 @@
:root {
--button-size: 5em;
font-family: sans-serif;
font-size: 5mm;
}
.editor [tabindex] {
.editor {
display: block;
position: relative;
}
.editor div [tabindex] {
.editor .outline {
display: block;
position: relative;
width: calc(100% - var(--button-size));
}
.editor .outline [tabindex] {
position: relative;
}
.editor .outline div [tabindex] {
margin-left: 2em;
}
.editor [tabindex]>span,
.editor [tabindex]>textarea {
.editor .outline [tabindex]>span,
.editor .outline [tabindex]>textarea {
--padding: 0.2em;
display: block;
width: 100%;
width: 100%
/* XXX this is a tiny bit off and using textarea's height here is off too... */
min-height: 1em;
padding: var(--padding);
@ -28,41 +41,61 @@
outline: none;
border: none;
}
.editor [tabindex]>textarea {
.editor .outline [tabindex]>textarea {
height: calc(2 * var(--padding) + 1em);
overflow: hidden;
resize: none;
}
/* show/hide node's view/code... */
.editor [tabindex]>span+textarea:not(:focus),
.editor .outline [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 {
.editor .outline [tabindex]:has(>span+textarea:focus)>span:has(+textarea),
.editor .outline [tabindex]:focus>span+textarea {
position: absolute;
opacity: 0;
top: 0;
}
.editor div[collapsed] {
/* focus... */
.editor .outline [tabindex]:focus {
/*outline: solid 0.2em silver;*/
outline: none;
}
.editor .outline [tabindex]:focus>span,
.editor .outline [tabindex]:focus>textarea {
background: rgba(0,0,0,0.1);
}
.editor .outline [tabindex].focused:not(:focus)>span,
.editor .outline [tabindex].focused:not(:focus)>textarea {
background: rgba(0,0,0,0.05);
}
.editor .outline div[collapsed] {
border-bottom: solid 1px silver;
}
.editor div[collapsed] div {
.editor .outline div[collapsed] div {
display: none;
}
/* XXX are we selecting subtrees or blocks??? */
.editor [selected] {
.editor .outline [selected] {
background: silver;
}
.editor div:focus {
/*outline: solid 0.2em silver;*/
outline: none;
.editor .toolbar {
display: inline-block;
position: absolute;
top: 1em;
right: 1em;
}
.editor div:focus>span,
.editor div:focus>textarea {
background: rgba(0,0,0,0.1);
.editor .toolbar button {
display: block;
width: var(--button-size);
height: var(--button-size);
}

32
experiments/outline-editor/editor.js
View File

@ -167,7 +167,8 @@ var Outline = {
this.at(node)
: node == 'focused' ?
(this.dom.querySelector(`[tabindex]:focus`)
|| this.dom.querySelector(`textarea:focus`)?.parentElement)
|| this.dom.querySelector(`textarea:focus`)?.parentElement
|| this.dom.querySelector('[tabindex].focused'))
: node == 'parent' ?
this.get('focused')?.parentElement
: node
@ -221,7 +222,7 @@ var Outline = {
// deindent...
if(!indent){
var parent = cur.parentElement
if(!parent.classList.contains('.editor')){
if(!parent.classList.contains('.outline')){
var children = siblings.slice(siblings.indexOf(cur)+1)
parent.after(cur)
children.length > 0
@ -260,9 +261,10 @@ var Outline = {
elem.updateSize() } }
return node },
// XXX
remove: function(node){
},
// XXX should this handle focus???
remove: function(node='focused', offset){
this.get(...arguments)?.remove()
return this },
// block serialization...
__code2html__: function(code){
@ -333,7 +335,7 @@ var Outline = {
// horizontal navigation / collapse...
// XXX if at start/end of element move to prev/next...
ArrowLeft: function(evt){
if(this.dom.querySelector('.editor textarea:focus')){
if(this.dom.querySelector('.outline textarea:focus')){
// XXX if at end of element move to next...
return }
;((this.left_key_collapses
@ -343,7 +345,7 @@ var Outline = {
this.toggleCollapse(true)
: this.get('parent')?.focus() },
ArrowRight: function(evt){
if(this.dom.querySelector('.editor textarea:focus')){
if(this.dom.querySelector('.outline textarea:focus')){
// XXX if at end of element move to next...
return }
if(this.right_key_expands){
@ -394,7 +396,7 @@ var Outline = {
return }
this.toggleCollapse(true)
var next = this.get('next')
this.get()?.remove()
this.remove()
next?.focus() },
// select...
@ -414,20 +416,26 @@ var Outline = {
setup: function(dom){
var that = this
this.dom = dom
var outline = dom.querySelector('.outline')
// update stuff already in DOM...
for(var elem of [...dom.querySelectorAll('.editor textarea')]){
for(var elem of [...outline.querySelectorAll('textarea')]){
elem.autoUpdateSize() }
// heboard handling...
dom.addEventListener('keydown',
outline.addEventListener('keydown',
function(evt){
evt.key in that.keyboard
&& that.keyboard[evt.key].call(that, evt) })
// toggle view/code of nodes...
dom.addEventListener('focusin',
outline.addEventListener('focusin',
function(evt){
var node = evt.target
// handle focus...
for(var e of [...that.dom.querySelectorAll('.focused')]){
e.classList.remove('focused') }
that.get('focused')?.classList?.add('focused')
// textarea...
if(node.nodeName == 'TEXTAREA'
&& node?.previousElementSibling?.nodeName == 'SPAN'){
node.value =
@ -435,7 +443,7 @@ var Outline = {
that.__html2code__(node.previousElementSibling.innerHTML)
: node.previousElementSibling.innerHTML
node.updateSize() } })
dom.addEventListener('focusout',
outline.addEventListener('focusout',
function(evt){
var node = evt.target
if(node.nodeName == 'TEXTAREA'

48
experiments/outline-editor/index.html
View File

@ -21,31 +21,39 @@ var setup = function(){
</head>
<body onload="setup()">
<div class="editor">
<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 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>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>
</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 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">
<button onclick="editor.deindent()">&lt;</button>
<button onclick="editor.indent()">&gt;</button>
<button>indent</button>
<button>indent</button>
</div>
</div>
<hr>