mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-31 11:00:08 +00:00
added notes + more tweaks and cleanup...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
475078b55c
commit
571f77e730
@ -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 {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
@ -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('list-item'))
|
||||
.replace(/^\s*(.*)(?<!\\):\s*$/m, style('list'))
|
||||
// style: misc...
|
||||
.replace(/^(?<!\\)>\s+(.*)$/m, style('quote'))
|
||||
.replace(/^(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
|
||||
.replace(/^(?<!\\)XXX\s+(.*)$/m, style('XXX'))
|
||||
.replace(/^\s*(?<!\\)>\s+(.*)$/m, style('quote'))
|
||||
.replace(/^\s*(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
|
||||
.replace(/^\s*(?<!\\)NOTE:?\s*(.*)$/m, style('NOTE'))
|
||||
.replace(/^\s*(?<!\\)XXX\s+(.*)$/m, style('XXX'))
|
||||
.replace(/^(.*)\s*(?<!\\)XXX$/m, style('XXX'))
|
||||
.replace(/(\s*)(?<!\\)ASAP(\s*)/m, '$1<span class="ASAP">ASAP</span>$2')
|
||||
.replace(/(\s*)(?<!\\)(ASAP|BUG|FIX|HACK|STUB|WARNING|CAUTION)(\s*)/m,
|
||||
'$1<span class="highlight $2">$2</span>$3')
|
||||
// elements...
|
||||
.replace(/(\n|^)(?<!\\)---*\h*(\n|$)/m, '$1<hr>')
|
||||
// ToDo...
|
||||
.replace(/^(?<!\\)TODO\s+/m,
|
||||
// NOTE: these are separate as we need to align block text
|
||||
// to leading chekbox...
|
||||
.replace(/^\s*(?<!\\)\[[_ ]\]\s*/m,
|
||||
style('todo', '<input type="checkbox">'))
|
||||
.replace(/^(?<!\\)DONE\s+/m,
|
||||
.replace(/^\s*(?<!\\)\[[Xx]\]\s*/m,
|
||||
style('todo', '<input type="checkbox" checked>'))
|
||||
// checkboxes...
|
||||
.replace(/(?<!\\)\[_\]/gm,
|
||||
style('check', '<input class="check" type="checkbox">'))
|
||||
.replace(/(?<!\\)\[[X]\]/gm,
|
||||
style('check', '<input class="check" type="checkbox" checked>'))
|
||||
// inline checkboxes...
|
||||
.replace(/\s*(?<!\\)\[[_ ]\]\s*/gm,
|
||||
style('check', '<input type="checkbox">'))
|
||||
.replace(/\s*(?<!\\)\[[Xx]\]\s*/gm,
|
||||
style('check', '<input type="checkbox" checked>'))
|
||||
// basic styling...
|
||||
.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
|
||||
.replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>')
|
||||
@ -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){
|
||||
|
||||
@ -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 <a href="about:blank">example</a>
|
||||
- markdown:
|
||||
- code blocks
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user