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

added basic crop path...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-10-23 22:55:23 +03:00
parent 66e0f112fd
commit 12bd9ffebf
3 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,6 +50,7 @@
.editor .children { .editor .children {
} }
.editor .header,
.editor .outline { .editor .outline {
display: block; display: block;
position: relative; position: relative;
@ -68,6 +69,21 @@
.editor .outline:empty:hover:after { .editor .outline:empty:hover:after {
} }
/* XXX header */
.editor .header {
}
.editor .header:empty {
display: none;
}
/* XXX needs more work... *//*
.editor .header span {
display: inline;
max-width: 10rem;
text-overflow: ellipsis;
overflow: hidden;
}
*/
.editor .outline .block { .editor .outline .block {
position: relative; position: relative;

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

@ -675,6 +675,8 @@ var Outline = {
return value }, return value },
get header(){
return this.dom.querySelector('.header') },
get code(){ get code(){
return this.dom.querySelector('.code') }, return this.dom.querySelector('.code') },
get outline(){ get outline(){
@ -683,12 +685,20 @@ var Outline = {
return this.dom.querySelector('.toolbar') }, return this.dom.querySelector('.toolbar') },
path: function(node='focused'){ path: function(node='focused', mode='index'){
if(['index', 'text', 'node'].includes(node)){
mode = node
node = 'focused' }
var outline = this.outline var outline = this.outline
var path = [] var path = []
var node = this.get(node) var node = this.get(node)
while(node != outline){ while(node != outline){
path.unshift(this.get(node, 'siblings').indexOf(node)) path.unshift(
mode == 'index' ?
this.get(node, 'siblings').indexOf(node)
: mode == 'text' ?
node.querySelector('.view').innerText
: node)
node = this.get(node, 'parent') } node = this.get(node, 'parent') }
return path }, return path },
@ -1063,14 +1073,22 @@ var Outline = {
this.__change__() this.__change__()
return this }, return this },
// crop... // crop...
// XXX add crop/path indicator... // XXX add crop-level/path indicator...
__crop_stack: undefined, __crop_stack: undefined,
crop: function(node='focused'){ crop: function(node='focused'){
var that = this
var stack = this.__crop_stack ??= [] var stack = this.__crop_stack ??= []
stack.push([this.json(), this.path()]) var path = this.path()
var header = this.path(path.slice(0,-1), 'text')
.map(function(text, i){
return `<span>${text.split(/\n/)[0]}</span>` })
.join(' / ')
stack.push([this.json(), path])
this.load(this.data()) this.load(this.data())
this.header.innerHTML = header
this.dom.classList.add('crop') this.dom.classList.add('crop')
return this }, return this },
// XXX use JSON API... // XXX use JSON API...
@ -1080,6 +1098,7 @@ var Outline = {
var [state, path] = this.__crop_stack.pop() var [state, path] = this.__crop_stack.pop()
if(this.__crop_stack.length == 0){ if(this.__crop_stack.length == 0){
this.__crop_stack = undefined this.__crop_stack = undefined
this.header.innerHTML = ''
this.dom.classList.remove('crop') } this.dom.classList.remove('crop') }
// update state... // update state...
path path
@ -1087,7 +1106,9 @@ var Outline = {
.reduce(function(res, i){ .reduce(function(res, i){
return res[i].children }, state) return res[i].children }, state)
.splice(path.at(-1), 1, ...this.json()) .splice(path.at(-1), 1, ...this.json())
this.load(state) this.load(state)
return this }, return this },
// block render... // block render...

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

@ -32,6 +32,8 @@ var setup = function(){
</head> </head>
<body onload="setup()"> <body onload="setup()">
<div class="editor" autofocus> <div class="editor" autofocus>
<!-- header -->
<div class="header"></div>
<!-- code --> <!-- code -->
<textarea class="code"> <textarea class="code">
- # Outline editor prototype - # Outline editor prototype