mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-29 10:00:08 +00:00
cleanup and tweaking...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d2d10c68fb
commit
f3974406a0
@ -89,11 +89,22 @@
|
||||
border: none;
|
||||
}
|
||||
/* show/hide node's view/code... */
|
||||
.editor .outline [tabindex]>textarea:focus+span,
|
||||
/*.editor .outline [tabindex]>textarea:focus+span,*/
|
||||
.editor .outline [tabindex]>textarea:not(:focus) {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
/* XXX not sure about this yet... */
|
||||
.editor .outline [tabindex]>textarea:focus+span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.editor .outline [tabindex]>textarea:focus+span:before,
|
||||
.editor .outline [tabindex]>textarea:focus+span:after {
|
||||
visibility: visible;
|
||||
}
|
||||
/* click through the span text to the textarea */
|
||||
.editor .outline [tabindex]>span {
|
||||
position: relative;
|
||||
@ -297,7 +308,7 @@ editor .outline [tabindex]:focus {
|
||||
}
|
||||
|
||||
|
||||
/* Lists... */
|
||||
/* List... */
|
||||
/* XXX needs to be in the middle of the first span but with universal size... */
|
||||
.editor .outline .list-item>span:before,
|
||||
.editor .outline .list>[tabindex]>span:not(:empty):before {
|
||||
@ -314,6 +325,19 @@ editor .outline [tabindex]:focus {
|
||||
content: "▪";
|
||||
}
|
||||
|
||||
|
||||
/* List... */
|
||||
/* XXX nested lists are broken -- seems that I need a container for the children... */
|
||||
.editor .outline .numbered-list {
|
||||
counter-reset: numbered-list;
|
||||
}
|
||||
.editor .outline .numbered-list>[tabindex]>span:not(:empty):before {
|
||||
counter-increment: numbered-list;
|
||||
content: counter(numbered-list) ".";
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
/* Notes... */
|
||||
.editor .outline .NOTE {
|
||||
--margin: 1rem;
|
||||
@ -373,8 +397,8 @@ editor .outline [tabindex]:focus {
|
||||
var(--checkbox-size)
|
||||
+ var(--checkbox-margin));
|
||||
}
|
||||
.editor .outline [tabindex].check>span>input[type=checkbox],
|
||||
.editor .outline [tabindex].todo>span>input[type=checkbox] {
|
||||
.editor .outline [tabindex].check>span input[type=checkbox],
|
||||
.editor .outline [tabindex].todo>span input[type=checkbox] {
|
||||
height: var(--checkbox-size);
|
||||
width: var(--checkbox-size);
|
||||
|
||||
@ -387,7 +411,7 @@ editor .outline [tabindex]:focus {
|
||||
/* NOTE: this appears to be needed for the em sizes above to work correctly */
|
||||
font-size: 1em;
|
||||
}
|
||||
.editor .outline [tabindex].todo>span>input[type=checkbox]:first-child {
|
||||
.editor .outline [tabindex].todo>span input[type=checkbox]:first-child {
|
||||
margin-left: calc(
|
||||
-1 * var(--checkbox-size)
|
||||
- var(--checkbox-margin));
|
||||
@ -409,6 +433,25 @@ editor .outline [tabindex]:focus {
|
||||
}
|
||||
|
||||
|
||||
/* Tables... */
|
||||
.editor .outline [tabindex]>span>table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.editor .outline [tabindex]>span>table tr:nth-child(odd) {
|
||||
background: rgba(0,0,0,0.03);
|
||||
}
|
||||
.editor .outline [tabindex]>span>table tr:first-child {
|
||||
font-weight: bold;
|
||||
border-bottom: solid 0.1rem silver;
|
||||
background: transparent;
|
||||
}
|
||||
.editor .outline [tabindex]>span>table td {
|
||||
height: calc(1em + var(--item-padding) * 2);
|
||||
padding: 0 1em;
|
||||
/*text-align: center;*/
|
||||
}
|
||||
|
||||
|
||||
/********************************************************* Testing ***/
|
||||
|
||||
|
||||
@ -93,6 +93,13 @@ var Outline = {
|
||||
|
||||
var outline = this.outline
|
||||
|
||||
// get parent node...
|
||||
if(node instanceof HTMLElement){
|
||||
while(!node.getAttribute('tabindex')){
|
||||
node = node.parentElement
|
||||
if(node === this.outline){
|
||||
return undefined } } }
|
||||
|
||||
// node lists...
|
||||
var NO_NODES = {}
|
||||
var nodes =
|
||||
@ -304,6 +311,12 @@ var Outline = {
|
||||
elem.style.push(...style)
|
||||
return code
|
||||
?? text } }
|
||||
var table = function(_, body){
|
||||
return `<table><tr><td>${
|
||||
body
|
||||
.replace(/\s*\|\s*\n\s*\|\s*/gm, '</td></tr>\n<tr><td>')
|
||||
.replace(/\s*\|\s*/gm, '</td><td>')
|
||||
}</td></td></table>` }
|
||||
elem.text = code
|
||||
// hidden attributes...
|
||||
// XXX make this generic...
|
||||
@ -329,6 +342,7 @@ var Outline = {
|
||||
// style: list...
|
||||
//.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
|
||||
.replace(/^\s*(.*)(?<!\\):\s*$/m, style('list'))
|
||||
.replace(/^\s*(.*)(?<!\\)#\s*$/m, style('numbered-list'))
|
||||
// style: misc...
|
||||
.replace(/^\s*(?<!\\)>\s+(.*)$/m, style('quote'))
|
||||
.replace(/^\s*(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
|
||||
@ -351,6 +365,8 @@ var Outline = {
|
||||
style('check', '<input type="checkbox">'))
|
||||
.replace(/\s*(?<!\\)\[[Xx]\]\s*/gm,
|
||||
style('check', '<input type="checkbox" checked>'))
|
||||
// tables...
|
||||
.replace(/^\s*(?<!\\)\|\s*((.|\n)*)\s*\|\s*$/, table)
|
||||
// basic styling...
|
||||
// XXX revise...
|
||||
.replace(/(?<!\\)\*(?=[^\s*])(([^*]|\\\*)*[^\s*])(?<!\\)\*/gm, '<b>$1</b>')
|
||||
@ -359,6 +375,9 @@ var Outline = {
|
||||
.replace(/(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm, '<code>$1</code>')
|
||||
// XXX support "\==" in mark...
|
||||
.replace(/(?<!\\)==(?=[^\s])(.*[^\s])(?<!\\)==/gm, '<mark>$1</mark>')
|
||||
// links...
|
||||
.replace(/(?<!\\)\[([^\]]*)\]\(([^)]*)\)/g, '<a href="$2">$1</a>')
|
||||
.replace(/((?:https?:|ftps?:)[^\s]*)(\s*)/g, '<a href="$1">$1</a>$2')
|
||||
// characters...
|
||||
// XXX use ligatures for these???
|
||||
.replace(/(?<!\\)---(?!-)/gm, '—')
|
||||
@ -685,7 +704,7 @@ var Outline = {
|
||||
|
||||
// click: right of elem (outside)
|
||||
} else if(elem.offsetWidth < evt.offsetX){
|
||||
that.toggleCollapse(elem.parentElement)
|
||||
that.toggleCollapse(that.get(elem))
|
||||
|
||||
// click inside element...
|
||||
} else {
|
||||
@ -700,7 +719,7 @@ var Outline = {
|
||||
|
||||
// toggle checkbox...
|
||||
if(elem.type == 'checkbox'){
|
||||
var node = elem.parentElement.parentElement
|
||||
var node = that.get(elem)
|
||||
var text = node.querySelector('textarea')
|
||||
// get the checkbox order...
|
||||
var i = [...node.querySelectorAll('input[type=checkbox]')].indexOf(elem)
|
||||
|
||||
@ -40,6 +40,8 @@ var setup = function(){
|
||||
- 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: fix quotes
|
||||
- Example: /\n\s*\|\s+/ -> <tr><td>
|
||||
- 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
|
||||
@ -78,14 +80,6 @@ var setup = function(){
|
||||
- delete node
|
||||
- indent/deindent
|
||||
- edit node
|
||||
- markdown: tables
|
||||
collapsed:: true
|
||||
- /^\s*(\|\s+.*\s+\|)\s*$/m -> <table><tr><td>$1</td></tr><table>
|
||||
- /\n\s*\|\s+/ -> <tr><td>
|
||||
- /\s+\|\s*\n/ -> </td></tr>
|
||||
- /\s+\|\s+/ -> </td><td>
|
||||
- ASAP: fix quotes
|
||||
- Example: /\n\s*\|\s+/ -> <tr><td>
|
||||
- empty item height is a bit off...
|
||||
- ~handle links gracefully -- open/edit
|
||||
_just click in the empty space_~
|
||||
@ -104,10 +98,18 @@ var setup = function(){
|
||||
- ##### Heading 5
|
||||
- ###### Heading 6
|
||||
- Text
|
||||
- List::
|
||||
- Lists::
|
||||
- bullet:
|
||||
- a
|
||||
- b
|
||||
- c
|
||||
- numbered#
|
||||
- a
|
||||
- b#
|
||||
- x
|
||||
- y
|
||||
- z
|
||||
- c
|
||||
- > quoted text
|
||||
- Notes
|
||||
- NOTE: a note text
|
||||
@ -117,21 +119,28 @@ var setup = function(){
|
||||
- // C-style comment
|
||||
- ; ASM-style comment
|
||||
- XXX Highlight
|
||||
- Basic inline *bold*, _italic_ and ~striked~
|
||||
- Marking ==text==
|
||||
- Line
|
||||
- ---
|
||||
- Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION
|
||||
- Basic inline *bold*, _italic_ and ~striked~
|
||||
- Marking ==text==
|
||||
- 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>
|
||||
- link
|
||||
- [example](about:blank)
|
||||
- https://example.com
|
||||
- ./path/to/file /path/to -- not supported yet
|
||||
- Tables
|
||||
- | a | b | c |
|
||||
| 1 | 2 | 3 |
|
||||
| 11 | 22 | 33 |
|
||||
- markdown:
|
||||
- numbered lists
|
||||
- tables
|
||||
- ~tables~
|
||||
- code blocks
|
||||
- ~alerts~
|
||||
- footnotes??
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user