From 571f77e730635d8413f5109b827779f9075fda06 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Wed, 11 Oct 2023 07:16:18 +0300 Subject: [PATCH] added notes + more tweaks and cleanup... Signed-off-by: Alex A. Naanou --- experiments/outline-editor/editor.css | 86 +++++++++++++-------- experiments/outline-editor/editor.js | 105 +++++++++++++++----------- experiments/outline-editor/index.html | 24 +++--- 3 files changed, 130 insertions(+), 85 deletions(-) diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index 1f1eed5..ca50f06 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -1,5 +1,8 @@ - -/*********************************************************************/ +/********************************************************************** +* +* +* +**********************************************************************/ :root { --font-size: 5mm; @@ -10,6 +13,7 @@ --item-padding-ratio: 0.2; --checkbox-size: 1.5rem; + --checkbox-margin: 0.5em; --button-size: 2em; @@ -89,7 +93,6 @@ .editor .outline [tabindex]>textarea:not(:focus) { position: absolute; opacity: 0; - top: 0; } /* click through the span text to the textarea */ .editor .outline [tabindex]>span { @@ -217,8 +220,8 @@ editor .outline [tabindex]:focus { } -/*-------------------------------------------------------------------*/ -/* Styles */ + +/********************************************************** Styles ***/ /* Headings... */ .editor .outline .heading-1>span, @@ -307,9 +310,37 @@ editor .outline [tabindex]:focus { content: "▪"; } +/* Notes... */ +.editor .outline .NOTE { + --margin: 1rem; + --padding-h: 2rem; + --padding-v: 1.2em; + + margin: var(--margin) 0; + padding: var(--padding-v) var(--padding-h); + border: solid 2px silver; + background: rgba(0,0,0,0.05); +} +/* XXX this prevents it from being accesible via click/tap... */ +.editor .outline .NOTE>span:empty { + display: none; +} +.editor .outline .NOTE>span:empty ~ [tabindex] { + /* XXX calculate this... */ + margin-left: 1em; +} +.editor .outline .NOTE>span:before { + content: "" !important; +} +/* correct the right click zone... */ +.editor .outline [tabindex].NOTE>span:after, +.editor .outline [tabindex].NOTE [tabindex]>span:after { + margin-right: calc(-1 * var(--padding-h)); +} + /* Highlightes... */ -.editor .outline .ASAP { +.editor .outline .highlight { font-weight: bold; background: yellow; } @@ -328,21 +359,14 @@ editor .outline [tabindex]:focus { /* Checkboxes... */ -:root { - /* NOTE: this must have a unit... */ - /* XXX move this to the config when fixed... */ - /* XXX setting this to >0em will add margins to both sides of - * the inline checkbox even if it is the first thing in the - * element -- can's seem to figure out a way to avoid this */ - --checkbox-margin: 0em; -} .editor .outline [tabindex].todo>span { - width: calc(100% - var(--checkbox-size)); - /* align todo checkboxes to indnt (otherwise they are on the indent) */ - margin-left: var(--checkbox-size); - padding-left: calc( - var(--item-padding) - + var(--checkbox-margin) * 2); + width: calc( + 100% + - var(--checkbox-size) + - var(--checkbox-margin)); + margin-left: calc( + var(--checkbox-size) + + var(--checkbox-margin)); } .editor .outline [tabindex].check>span>input[type=checkbox], .editor .outline [tabindex].todo>span>input[type=checkbox] { @@ -360,22 +384,17 @@ editor .outline [tabindex]:focus { } .editor .outline [tabindex].todo>span>input[type=checkbox]:first-child { margin-left: calc( - var(--checkbox-size) * -1 - - var(--item-padding) - - var(--checkbox-margin) * 2); - margin-right: calc( - var(--item-padding) - + var(--checkbox-margin)); + -1 * var(--checkbox-size) + - var(--checkbox-margin)); } /* correct the left click zone... */ .editor .outline [tabindex].todo>span:before { - margin-left: calc(-1 * var(--checkbox-size)); -} -/* XXX need to remove left margin from strictly the first itme in block... */ -.editor .outline [tabindex].check>span>input[type=checkbox] { - /*margin-left: 0;*/ + margin-left: calc( + -1 * var(--checkbox-size) + - var(--checkbox-margin)); } + /* code... */ .editor .outline [tabindex]>span code { padding: 0.1em 0.3em; @@ -385,7 +404,8 @@ editor .outline [tabindex]:focus { } -/*********************************************************************/ + +/********************************************************* Testing ***/ .editor.show-click-zones .outline [tabindex]>span:before, .editor.show-click-zones .outline [tabindex]>span:after { @@ -398,3 +418,5 @@ editor .outline [tabindex]:focus { } + +/*********************************************************************/ diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index b7956ae..3a63ce0 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -38,6 +38,7 @@ var Outline = { right_key_expands: true, code_update_interval: 5000, tab_size: 4, + carot_jump_edge_then_block: false, get code(){ @@ -322,23 +323,27 @@ var Outline = { //.replace(/^(?\s+(.*)$/m, style('quote')) - .replace(/^(?\s+(.*)$/m, style('quote')) + .replace(/^\s*(?ASAP$2') + .replace(/(\s*)(?$2$3') // elements... .replace(/(\n|^)(?') // ToDo... - .replace(/^(?')) - .replace(/^(?')) - // checkboxes... - .replace(/(?')) - .replace(/(?')) + // inline checkboxes... + .replace(/\s*(?')) + .replace(/\s*(?')) // basic styling... .replace(/(?$1') .replace(/(?$1') @@ -415,7 +420,7 @@ var Outline = { var tab = ' '.repeat(this.tab_size || 8) var level = function(lst, prev_sep=undefined, parent=[]){ while(lst.length > 0){ - sep = lst[0].replace(/\t/g, tab) + sep = lst[0].replace(/\t/gm, tab) // deindent... if(prev_sep != null && sep.length < prev_sep.length){ @@ -505,27 +510,43 @@ var Outline = { // XXX add scrollIntoView(..) to nav... keyboard: { // vertical navigation... - // XXX wrapped line navigation is broken... + // XXX this is a bit hacky but it works -- the caret blinks at + // start/end of block before switching to next, would be + // nice po prevent this... ArrowUp: function(evt){ - var state = 'focused' + var that = this var edited = this.get('edited') if(edited){ - if(!atLine(edited, 0)){ - return } - /*/ - //*/ - state = 'edited' } - evt.preventDefault() - this.get(state, -1)?.focus() }, - ArrowDown: function(evt, offset=1){ - var state = 'focused' + var c = edited.selectionStart + var jump = function(){ + if(edited.selectionStart == 0){ + // needed to remember the position... + edited.selectionStart = c + edited.selectionEnd = c + that.get('edited', -1)?.focus() } } + this.carot_jump_edge_then_block ? + jump() + : setTimeout(jump, 0) + } else { + evt.preventDefault() + this.get('focused', -1)?.focus() } }, + ArrowDown: function(evt){ + var that = this var edited = this.get('edited') if(edited){ - if(!atLine(edited, -1)){ - return } - state = 'edited' } - evt.preventDefault() - this.get(state, 1)?.focus() }, + var c = edited.selectionStart + var jump = function(){ + if(edited.selectionStart == edited.value.length){ + // needed to remember the position... + edited.selectionStart = c + edited.selectionEnd = c + that.get('edited', 1)?.focus() } } + this.carot_jump_edge_then_block ? + jump() + : setTimeout(jump, 0) + } else { + evt.preventDefault() + this.get('focused', 1)?.focus() } }, // horizontal navigation / collapse... ArrowLeft: function(evt){ @@ -657,24 +678,20 @@ var Outline = { // click inside element... } else { // XXX - } + } } - // todo: toggle checkbox... - } else if(elem.type == 'checkbox' - && elem.parentElement.parentElement.classList.contains('todo')){ + // edit of focus... + // NOTE: this is usefull if element text is hidden but the + // frame is still visible... + if(elem.getAttribute('tabindex')){ + elem.querySelector('textarea').focus() } + + // toggle checkbox... + if(elem.type == 'checkbox'){ var node = elem.parentElement.parentElement var text = node.querySelector('textarea') - text.value = - elem.checked ? - text.value.replace(/^\s*TODO(\s*)/, 'DONE$1') - : text.value.replace(/^\s*DONE(\s*)/, 'TODO$1') - - // check: toggle checkbox... - } else if(elem.type == 'checkbox' - && elem.classList.contains('check')){ - var node = elem.parentElement.parentElement - var text = node.querySelector('textarea') - var i = [...node.querySelectorAll('.check')].indexOf(elem) + // get the checkbox order... + var i = [...node.querySelectorAll('input[type=checkbox]')].indexOf(elem) var to = elem.checked ? '[X]' : '[_]' @@ -682,7 +699,7 @@ var Outline = { return i-- == 0 ? to : m } - text.value = text.value.replace(/\[[X_]\]/g, toggle) } }) + text.value = text.value.replace(/\[[Xx_]\]/g, toggle) } }) // heboard handling... outline.addEventListener('keydown', function(evt){ diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index b1c940a..d4bb55e 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -36,14 +36,15 @@ var setup = function(){ - Bonsai - - ## ToDo + - BUG? pressing down from a longer line will jump over a shorter line + - here is the line to jump from, for example from here + an we'll not get here... - ASAP: editor: bksapce/del at start/end of a block should join it with prev/next - ASAP: editor: pressing enter in text edit mode should split text into two blocks - ASAP: editor: shifting nodes up/down - ASAP: editor: `-` at start of line is interpreted as block marker... - - editor: caret - - ~go to next/prev element's start/end when moving off last/first char~ - - handle up/down on wrapped blocks - _...can't seem to get caret line in a non-hacky way_ + - ASAP: use \\t for indent... + - on item click, place the cursor where it was clicked before the code expanded... - ~editor: semi-live update styles~ - need to reach checkboxes via keyboard - persistent empty first/last node (a button to create a new node) @@ -96,6 +97,11 @@ var setup = function(){ - b - c - > quoted text + - Notes + - NOTE: a note text + - NOTE: + - a root note can also be empty + - click on the outer border to edit root - // C-style comment - ; ASM-style comment - XXX Highlight @@ -104,12 +110,12 @@ var setup = function(){ - Markers - Basic "as soon as posible" (ASAP) - Basic inline *bold*, _italic_ and ~striked~ - - To do items - - TODO undone item - _(clicking the checkbox updates the item)_ - - DONE done item - - [_] a different way to draw a checkbox - Inline [X] checkboxes [_] + - To do items/blocks + - [_] undone item + _(clicking the checkbox updates the item)_ + - [X] done item + - [_] we can also add inline [x] checkboxes - link example - markdown: - code blocks