mirror of
https://github.com/flynx/pWiki.git
synced 2025-12-24 20:01:56 +00:00
Compare commits
No commits in common. "22a73a07e8eb9f9598ae6a8e7403987538fec88c" and "475078b55c0317c3b7c1e18cc80d0029abda3dbb" have entirely different histories.
22a73a07e8
...
475078b55c
@ -1,8 +1,5 @@
|
||||
/**********************************************************************
|
||||
*
|
||||
*
|
||||
*
|
||||
**********************************************************************/
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
:root {
|
||||
--font-size: 5mm;
|
||||
@ -13,7 +10,6 @@
|
||||
--item-padding-ratio: 0.2;
|
||||
|
||||
--checkbox-size: 1.5rem;
|
||||
--checkbox-margin: 0.5em;
|
||||
|
||||
--button-size: 2em;
|
||||
|
||||
@ -93,6 +89,7 @@
|
||||
.editor .outline [tabindex]>textarea:not(:focus) {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
/* click through the span text to the textarea */
|
||||
.editor .outline [tabindex]>span {
|
||||
@ -220,8 +217,8 @@ editor .outline [tabindex]:focus {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************************************** Styles ***/
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* Styles */
|
||||
|
||||
/* Headings... */
|
||||
.editor .outline .heading-1>span,
|
||||
@ -277,16 +274,12 @@ editor .outline [tabindex]:focus {
|
||||
/* Quote... */
|
||||
.editor .outline .quote>span,
|
||||
.editor .outline .quote>textarea {
|
||||
--indent: 1rem;
|
||||
--margin: 0.7rem;
|
||||
--item-padding-ratio: 0.7;
|
||||
--indent: 1rem;
|
||||
|
||||
/* XXX for some reason if this is not set here it will not see the new --item-padding-ratio */
|
||||
--item-padding: calc(1rem * var(--item-padding-ratio));
|
||||
|
||||
margin-top: var(--margin);
|
||||
margin-bottom: var(--margin);
|
||||
|
||||
padding: var(--item-padding) 1.5rem;
|
||||
color: rgba(0,0,0,0.8);
|
||||
|
||||
@ -314,38 +307,9 @@ 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... */
|
||||
/* XXX need to account for nesting... (???) */
|
||||
.editor .outline [tabindex].NOTE>span:after,
|
||||
.editor .outline [tabindex].NOTE [tabindex]>span:after {
|
||||
margin-right: calc(-1 * var(--padding-h));
|
||||
}
|
||||
|
||||
|
||||
/* Highlightes... */
|
||||
.editor .outline .highlight {
|
||||
.editor .outline .ASAP {
|
||||
font-weight: bold;
|
||||
background: yellow;
|
||||
}
|
||||
@ -364,14 +328,21 @@ 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)
|
||||
- var(--checkbox-margin));
|
||||
margin-left: calc(
|
||||
var(--checkbox-size)
|
||||
+ var(--checkbox-margin));
|
||||
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);
|
||||
}
|
||||
.editor .outline [tabindex].check>span>input[type=checkbox],
|
||||
.editor .outline [tabindex].todo>span>input[type=checkbox] {
|
||||
@ -389,16 +360,21 @@ editor .outline [tabindex]:focus {
|
||||
}
|
||||
.editor .outline [tabindex].todo>span>input[type=checkbox]:first-child {
|
||||
margin-left: calc(
|
||||
-1 * var(--checkbox-size)
|
||||
- var(--checkbox-margin));
|
||||
var(--checkbox-size) * -1
|
||||
- var(--item-padding)
|
||||
- var(--checkbox-margin) * 2);
|
||||
margin-right: calc(
|
||||
var(--item-padding)
|
||||
+ var(--checkbox-margin));
|
||||
}
|
||||
/* correct the left click zone... */
|
||||
.editor .outline [tabindex].todo>span:before {
|
||||
margin-left: calc(
|
||||
-1 * var(--checkbox-size)
|
||||
- var(--checkbox-margin));
|
||||
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;*/
|
||||
}
|
||||
|
||||
|
||||
/* code... */
|
||||
.editor .outline [tabindex]>span code {
|
||||
@ -409,8 +385,7 @@ editor .outline [tabindex]:focus {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************************************* Testing ***/
|
||||
/*********************************************************************/
|
||||
|
||||
.editor.show-click-zones .outline [tabindex]>span:before,
|
||||
.editor.show-click-zones .outline [tabindex]>span:after {
|
||||
@ -423,5 +398,3 @@ editor .outline [tabindex]:focus {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
@ -38,7 +38,6 @@ var Outline = {
|
||||
right_key_expands: true,
|
||||
code_update_interval: 5000,
|
||||
tab_size: 4,
|
||||
carot_jump_edge_then_block: false,
|
||||
|
||||
|
||||
get code(){
|
||||
@ -175,16 +174,9 @@ var Outline = {
|
||||
|| node },
|
||||
at: function(index, nodes='visible'){
|
||||
return this.get(nodes).at(index) },
|
||||
focus: function(node='focused', offset){
|
||||
var elem = this.get(...arguments)
|
||||
elem?.focus()
|
||||
return elem },
|
||||
edit: function(node='focused', offset){
|
||||
var elem = this.get(...arguments)
|
||||
if(elem.nodeName != 'TEXTAREA'){
|
||||
elem = elem.querySelector('textarea') }
|
||||
elem?.focus()
|
||||
return elem },
|
||||
|
||||
focus: function(node='focused', offset){},
|
||||
edit: function(node='focused', offset){},
|
||||
|
||||
update: function(node='focused', data){
|
||||
var node = this.get(node)
|
||||
@ -330,38 +322,29 @@ var Outline = {
|
||||
//.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
|
||||
.replace(/^\s*(.*)(?<!\\):\s*$/m, style('list'))
|
||||
// style: misc...
|
||||
.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+(.*)$/m, style('quote'))
|
||||
.replace(/^(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
|
||||
.replace(/^(?<!\\)XXX\s+(.*)$/m, style('XXX'))
|
||||
.replace(/^(.*)\s*(?<!\\)XXX$/m, style('XXX'))
|
||||
.replace(/(\s*)(?<!\\)(ASAP|BUG|FIX|HACK|STUB|WARNING|CAUTION)(\s*)/gm,
|
||||
'$1<span class="highlight $2">$2</span>$3')
|
||||
.replace(/(\s*)(?<!\\)ASAP(\s*)/m, '$1<span class="ASAP">ASAP</span>$2')
|
||||
// elements...
|
||||
.replace(/(\n|^)(?<!\\)---*\h*(\n|$)/m, '$1<hr>')
|
||||
// ToDo...
|
||||
// NOTE: these are separate as we need to align block text
|
||||
// to leading chekbox...
|
||||
.replace(/^\s*(?<!\\)\[[_ ]\]\s*/m,
|
||||
.replace(/^(?<!\\)TODO\s+/m,
|
||||
style('todo', '<input type="checkbox">'))
|
||||
.replace(/^\s*(?<!\\)\[[Xx]\]\s*/m,
|
||||
.replace(/^(?<!\\)DONE\s+/m,
|
||||
style('todo', '<input 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>'))
|
||||
// checkboxes...
|
||||
.replace(/(?<!\\)\[_\]/gm,
|
||||
style('check', '<input class="check" type="checkbox">'))
|
||||
.replace(/(?<!\\)\[[X]\]/gm,
|
||||
style('check', '<input class="check" type="checkbox" checked>'))
|
||||
// basic styling...
|
||||
.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
|
||||
.replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>')
|
||||
.replace(/(?<!\\)_(?=[^\s_])(([^_]|\\_)*[^\s_])(?<!\\)_/gm, '<i>$1</i>')
|
||||
.replace(/(?<!\\)`(?=[^\s_])(([^`]|\\`)*[^\s_])(?<!\\)`/gm, '<code>$1</code>')
|
||||
// characters...
|
||||
// XXX use ligatures for these???
|
||||
.replace(/(?<!\\)---(?!-)/gm, '—')
|
||||
.replace(/(?<!\\)--(?!-)/gm, '–')
|
||||
// quoting...
|
||||
// NOTE: this must be last...
|
||||
.replace(/(?<!\\)\\(.)/gm, '$1')
|
||||
return elem },
|
||||
// XXX essentially here we need to remove service stuff like some
|
||||
@ -432,7 +415,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/gm, tab)
|
||||
sep = lst[0].replace(/\t/g, tab)
|
||||
// deindent...
|
||||
if(prev_sep != null
|
||||
&& sep.length < prev_sep.length){
|
||||
@ -522,43 +505,27 @@ var Outline = {
|
||||
// XXX add scrollIntoView(..) to nav...
|
||||
keyboard: {
|
||||
// vertical navigation...
|
||||
// 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...
|
||||
// XXX wrapped line navigation is broken...
|
||||
ArrowUp: function(evt){
|
||||
var that = this
|
||||
var state = 'focused'
|
||||
var edited = this.get('edited')
|
||||
if(edited){
|
||||
var c = edited.selectionStart
|
||||
var jump = function(){
|
||||
if(edited.selectionStart == 0){
|
||||
// needed to remember the position...
|
||||
edited.selectionStart = c
|
||||
edited.selectionEnd = c
|
||||
that.focus('edited', -1) } }
|
||||
this.carot_jump_edge_then_block ?
|
||||
jump()
|
||||
: setTimeout(jump, 0)
|
||||
} else {
|
||||
evt.preventDefault()
|
||||
this.focus('focused', -1) } },
|
||||
ArrowDown: function(evt){
|
||||
var that = this
|
||||
if(!atLine(edited, 0)){
|
||||
return }
|
||||
/*/
|
||||
//*/
|
||||
state = 'edited' }
|
||||
evt.preventDefault()
|
||||
this.get(state, -1)?.focus() },
|
||||
ArrowDown: function(evt, offset=1){
|
||||
var state = 'focused'
|
||||
var edited = this.get('edited')
|
||||
if(edited){
|
||||
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.focus('edited', 1) } }
|
||||
this.carot_jump_edge_then_block ?
|
||||
jump()
|
||||
: setTimeout(jump, 0)
|
||||
} else {
|
||||
evt.preventDefault()
|
||||
this.focus('focused', 1) } },
|
||||
if(!atLine(edited, -1)){
|
||||
return }
|
||||
state = 'edited' }
|
||||
evt.preventDefault()
|
||||
this.get(state, 1)?.focus() },
|
||||
|
||||
// horizontal navigation / collapse...
|
||||
ArrowLeft: function(evt){
|
||||
@ -568,7 +535,8 @@ var Outline = {
|
||||
if(edited.selectionStart == edited.selectionEnd
|
||||
&& edited.selectionStart == 0){
|
||||
evt.preventDefault()
|
||||
edited = this.focus('edited', 'prev')
|
||||
edited = this.get('edited', 'prev')
|
||||
edited.focus()
|
||||
edited.selectionStart =
|
||||
edited.selectionEnd = edited.value.length + 1 }
|
||||
return }
|
||||
@ -577,7 +545,7 @@ var Outline = {
|
||||
&& this.get().getAttribute('collapsed') == null
|
||||
&& this.get('children').length > 0) ?
|
||||
this.toggleCollapse(true)
|
||||
: this.focus('parent') },
|
||||
: this.get('parent')?.focus() },
|
||||
ArrowRight: function(evt){
|
||||
var edited = this.get('edited')
|
||||
if(edited){
|
||||
@ -585,15 +553,17 @@ var Outline = {
|
||||
if(edited.selectionStart == edited.selectionEnd
|
||||
&& edited.selectionStart == edited.value.length){
|
||||
evt.preventDefault()
|
||||
edited = this.focus('edited', 'next')
|
||||
edited = this.get('edited', 'next')
|
||||
edited.focus()
|
||||
edited.selectionStart =
|
||||
edited.selectionEnd = 0 }
|
||||
return }
|
||||
if(this.right_key_expands){
|
||||
this.toggleCollapse(false)
|
||||
var child = this.focus('children')[0]
|
||||
var child = this.get('children')[0]
|
||||
child?.focus()
|
||||
if(!child){
|
||||
this.focus('next') }
|
||||
this.get('next')?.focus() }
|
||||
} else {
|
||||
evt.shiftKey ?
|
||||
this.toggleCollapse(false)
|
||||
@ -687,20 +657,24 @@ var Outline = {
|
||||
// click inside element...
|
||||
} else {
|
||||
// XXX
|
||||
} }
|
||||
}
|
||||
|
||||
// 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'){
|
||||
// todo: toggle checkbox...
|
||||
} else if(elem.type == 'checkbox'
|
||||
&& elem.parentElement.parentElement.classList.contains('todo')){
|
||||
var node = elem.parentElement.parentElement
|
||||
var text = node.querySelector('textarea')
|
||||
// get the checkbox order...
|
||||
var i = [...node.querySelectorAll('input[type=checkbox]')].indexOf(elem)
|
||||
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)
|
||||
var to = elem.checked ?
|
||||
'[X]'
|
||||
: '[_]'
|
||||
@ -708,7 +682,7 @@ var Outline = {
|
||||
return i-- == 0 ?
|
||||
to
|
||||
: m }
|
||||
text.value = text.value.replace(/\[[Xx_]\]/g, toggle) } })
|
||||
text.value = text.value.replace(/\[[X_]\]/g, toggle) } })
|
||||
// heboard handling...
|
||||
outline.addEventListener('keydown',
|
||||
function(evt){
|
||||
@ -774,7 +748,7 @@ var Outline = {
|
||||
var refocusNode = function(){
|
||||
focus_textarea ?
|
||||
editor.get().querySelector('textarea').focus()
|
||||
: editor.focus()
|
||||
: editor.get().focus()
|
||||
focus_textarea = undefined }
|
||||
// cache the focused node type before focus changes...
|
||||
toolbar.addEventListener('mousedown', cahceNodeType)
|
||||
|
||||
@ -35,22 +35,20 @@ var setup = function(){
|
||||
- Tomboy
|
||||
- Bonsai
|
||||
-
|
||||
- ## ToDo:
|
||||
- BUG? odd/random focus jumps on refocusing page (can't reporduce yet)
|
||||
- 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...
|
||||
- ## ToDo
|
||||
- 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...
|
||||
- ASAP: use \\t for indent...
|
||||
- on item click, place the cursor where it was clicked before the code expanded...
|
||||
- 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_
|
||||
- ~editor: semi-live update styles~
|
||||
- need to reach checkboxes via keyboard
|
||||
- persistent empty first/last node (a button to create a new node)
|
||||
- add completion percentage to blocks with todo's nested
|
||||
- _...use `[%]`, `%%`, or something similar..._
|
||||
- add completion percentage to blocks with todo's nested:
|
||||
- `[%]`, `%%`, or something similar...
|
||||
- read-only mode
|
||||
- should bulets be on the same level as nodes or offset??
|
||||
- A) justified to bulet:
|
||||
@ -98,30 +96,26 @@ 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
|
||||
- Line
|
||||
- ---
|
||||
- Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION
|
||||
- Markers
|
||||
- Basic "as soon as posible" (ASAP)
|
||||
- Basic inline *bold*, _italic_ and ~striked~
|
||||
- Inline [X] checkboxes [_]
|
||||
- To do items/blocks
|
||||
- [_] undone item
|
||||
- To do items
|
||||
- TODO undone item
|
||||
_(clicking the checkbox updates the item)_
|
||||
- [X] done item
|
||||
- [_] we can also add inline [x] checkboxes
|
||||
- DONE done item
|
||||
- [_] a different way to draw a checkbox
|
||||
- Inline [X] checkboxes [_]
|
||||
- link <a href="about:blank">example</a>
|
||||
- markdown:
|
||||
- numbered lists
|
||||
- tables
|
||||
- code blocks
|
||||
- ~alerts~
|
||||
- numbered lists
|
||||
- alerts
|
||||
- tables
|
||||
- footnotes??
|
||||
-
|
||||
- ### Playground for testing
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user