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

reworked dom...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-10-06 17:53:28 +03:00
parent aaff6360a4
commit 697a9d8347
4 changed files with 47 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,13 @@
:root {
--font-size: 5mm;
--button-size: 2em;
font-family: sans-serif;
font-size: 5mm;
font-size: var(--font-size);
/*text-size-adjust: none;*/
text-size-adjust: 150%;
}
.editor {
@ -36,7 +40,7 @@
margin: 0;
font-family: sans-serif;
font-size: 5mm;
font-size: var(--font-size);
outline: none;
border: none;
@ -49,9 +53,14 @@
/* show/hide node's view/code... */
.editor .outline [tabindex]>span+textarea:not(:focus),
/* XXX not sure how to do this without :has(..)... */
.editor .outline [tabindex]:has(>span+textarea:focus)>span:has(+textarea),
.editor .outline [tabindex]:focus>span+textarea {
.editor .outline [tabindex]:has(>span+textarea:focus)>span:first-child {
position: absolute;
opacity: 0;
top: 0;
}
.editor .outline [tabindex]>textarea:focus+span,
.editor .outline [tabindex]>textarea:not(:focus) {
position: absolute;
opacity: 0;
top: 0;

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

@ -87,9 +87,9 @@ var Outline = {
var block = document.createElement('div')
block.setAttribute('tabindex', '0')
block.append(
document.createElement('span'),
document.createElement('textarea')
.autoUpdateSize())
.autoUpdateSize(),
document.createElement('span'))
var cur = this.get()
place && cur
&& cur[place](block)
@ -349,10 +349,18 @@ var Outline = {
// text...
if(typeof(data) == 'string'){
// XXX
data = data.split(/\n(\s*)- /g)
var level = function(lst){
while(lst.length > 0){
}
}
}
// json...
// XXX
},
// generate dom...
// XXX
return this },
// XXX add scrollIntoView(..) to nav...
keyboard: {
@ -480,18 +488,18 @@ var Outline = {
that.get('focused')?.classList?.add('focused')
// textarea...
if(node.nodeName == 'TEXTAREA'
&& node?.previousElementSibling?.nodeName == 'SPAN'){
&& node?.nextElementSibling?.nodeName == 'SPAN'){
node.value =
that.__html2code__ ?
that.__html2code__(node.previousElementSibling.innerHTML)
: node.previousElementSibling.innerHTML
that.__html2code__(node.nextElementSibling.innerHTML)
: node.nextElementSibling.innerHTML
node.updateSize() } })
outline.addEventListener('focusout',
function(evt){
var node = evt.target
if(node.nodeName == 'TEXTAREA'
&& node?.previousElementSibling?.nodeName == 'SPAN'){
node.previousElementSibling.innerHTML =
&& node?.nextElementSibling?.nodeName == 'SPAN'){
node.nextElementSibling.innerHTML =
that.__code2html__ ?
that.__code2html__(node.value)
: node.value } })

1
experiments/outline-editor/generic.js
View File

@ -19,6 +19,7 @@ Object.defineProperty(HTMLTextAreaElement.prototype, 'caretLine', {
enumerable: false,
get: function(){
var offset = this.selectionStart
console.log('---', this)
return offset != null ?
this.value
.slice(0, offset)

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

@ -26,27 +26,29 @@ var setup = function(){
<div class="editor">
<div class="outline">
<div tabindex=0>
<span><i>root</i></span><textarea></textarea>
<textarea></textarea><span><i>root</i></span>
<div tabindex=0 collapsed>
<span>A</span><textarea></textarea>
<div tabindex=0><span>a</span><textarea></textarea>
<textarea></textarea><span>A</span>
<div tabindex=0><textarea></textarea><span>a</span>
</div>
<div tabindex=0><span>b</span><textarea></textarea>
<div tabindex=0><textarea></textarea><span>b</span>
</div>
<div tabindex=0><span>c</span><textarea></textarea>
<div tabindex=0><textarea></textarea><span>c</span>
</div>
</div>
<div tabindex=0><span>B</span><textarea></textarea>
<div tabindex=0><span>d</span><textarea></textarea>
<div tabindex=0><textarea></textarea><span>B</span>
<div tabindex=0><textarea></textarea><span>d</span>
</div>
<div tabindex=0><span>e</span><textarea></textarea>
<div tabindex=0><textarea></textarea><span>e</span>
</div>
</div>
<div tabindex=0><span>C</span><textarea></textarea>
<div tabindex=0><span>This is a line of text</span><textarea></textarea>
<div tabindex=0><textarea></textarea><span>C</span>
<div tabindex=0><textarea></textarea><span>This is a line of text</span>
</div>
<div tabindex=0><span>This is a set<br>
text lines</span><textarea></textarea>
<div tabindex=0><textarea></textarea><span>This is a set<br>
text lines</span>
</div>
<div tabindex=0><textarea></textarea><span>Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text </span>
</div>
</div>
</div>
@ -67,6 +69,8 @@ var setup = function(){
<pre>
TODO:
- persistent empty first/last node (a button to create a new node)
- loading from DOM -- fill textarea
- Firefox compatibility -- remove ':has(..)'
- <s>focus management</s>
- <s>mouse/touch controls</s>