experiments/outline-editor/editor.css

@@ -7,8 +7,7 @@
 	--outline-padding: 5rem;
 
 	--item-indent: 2rem;
-	--item-padding-ratio: 0.2;
+	--item-padding: 0.2em;
-	--item-padding: calc(1em * var(--item-padding-ratio));
 
 	--checkbox-size: 1.5rem;
 
@@ -51,8 +50,6 @@
 
 .editor .outline [tabindex] {
 	position: relative;
-	outline: none;
-	border: none;
 }
 .editor .outline [tabindex] [tabindex] {
 	margin-left: var(--item-indent);
@@ -77,26 +74,6 @@
 	outline: none;
 	border: none;
 }
-/* show/hide node's view/code... */
-.editor .outline [tabindex]>textarea:focus+span,
-.editor .outline [tabindex]>textarea:not(:focus) {
-	position: absolute;
-	opacity: 0;
-	top: 0;
-}
-/* click through the span text to the textarea */
-.editor .outline [tabindex]>span {
-	position: relative;
-	pointer-events: none;
-}
-/* block hover... */
-.editor .outline [tabindex]:hover>span {
-	background: linear-gradient(
-		90deg, 
-			rgba(0,0,0,0.01) 0%, 
-			rgba(0,0,0,0.01) 80%, 
-			rgba(0,0,0,0.03) 100%);
-}
 .editor .outline [tabindex]>span:blank {
 	content: " ";
 }
@@ -106,9 +83,16 @@
 	resize: none;
 }
 
+/* show/hide node's view/code... */
+.editor .outline [tabindex]>textarea:focus+span,
+.editor .outline [tabindex]>textarea:not(:focus) {
+	position: absolute;
+	opacity: 0;
+	top: 0;
+}
 
 /* focus... */
-editor .outline [tabindex]:focus {
+.editor .outline [tabindex]:focus {
 	/*outline: solid 0.2em silver;*/
 	outline: none;
 }
@@ -121,62 +105,71 @@ editor .outline [tabindex]:focus {
 	background: rgba(0,0,0,0.05);
 }
 
+
 .editor .outline div[collapsed] {
 	border-bottom: solid 1px silver;
 }
-
+/* expand/collapse button... */
-/* click/tap zones for expand button... */
+.editor .outline [tabindex]:after {
-.editor .outline [tabindex]>span:before,
+	--size: 0.5rem;
-.editor .outline [tabindex]>span:after {
-	--size: 3rem;
 
 	content: "";
 	position: absolute;
-	display: flex;
+	display: inline-block;
-	top: 0;
+	top: calc(1em / 2);
-	right: calc(-1 * var(--size));
+	right: calc(-1rem + -1 * var(--size) - var(--item-padding));
-	width: var(--size);
+	width: 0;
-	height: 100%;
+	height: 0;
-
+	border: solid calc(var(--size) / 1.2) transparent;
-	align-items: top;
+	border-top: solid var(--size) black;
-	justify-content: center;
+	opacity: 0;
-
+}
-	box-sizing: border-box;
+.editor .outline [tabindex][collapsed]:after {
-	border-left: solid 0.5em transparent;
+	border: solid calc(var(--size) / 1.2) transparent;
-	border-right: solid 0.5em transparent;
+	border-left: solid var(--size) black;
-
+	margin-right: -0.25rem;
-	/* make the text align to the center of the first line... */
+	opacity: 0.1;
-	font-size: 1rem;
+}
-	/* XXX the 1.1 coeficient here is a hack... */
+.editor .outline [tabindex]:hover:after {
-	line-height: calc(
+	opacity: 0.1;
-		var(--font-size)
+}
-			* 1.1
+/* click/tap zone for expand button... */
-		+ var(--font-size) 
+.editor .outline [tabindex]:before {
-			* var(--item-padding-ratio) 
+	content: "";
-			* 2);
+	position: absolute;
-
+	display: inline-block;
-	pointer-events: auto;
+	right: -2rem;
-
+	width: 2rem;
+	height: calc(1em + var(--item-padding) * 2);
 	background: transparent;
 }
-/* left indicator */
+/*
-.editor .outline [tabindex]>span:before {
+.editor .outline div[collapsed]:before,
-	justify-content: right;
+.editor .outline div[collapsed]:after {
-	left: calc(-1 * var(--size));
+	--size: 0.3em;
-}
-/* right indicator (collapse/expand) */
-.editor .outline [tabindex]>span:after {
-	color: silver;
-}
-.editor .outline [tabindex]:has([tabindex])>span:after {
-	content: "○";
-}
-.editor .outline [tabindex][collapsed]>span:after {
-	content: "●";
-}
 
-/* collapse -- hide children... */
+	content: "";
-.editor .outline [tabindex][collapsed] [tabindex] {
+	display: inline-block;
+	position: absolute;
+	width: var(--size);
+	height: var(--size);
+	bottom: 0;
+	right: calc(-1 * var(--size));
+	margin-bottom: calc(var(--size) / -2 - 0.5px);
+	rotate: -45deg;
+	box-sizing: border-box;
+
+	color: silver;
+	border-top: solid 1px silver;
+	border-left: solid 1px silver;
+}
+.editor .outline div[collapsed]:before {
+	right: auto;
+	left: calc(-1 * var(--size));
+	rotate: 135deg;
+}
+*/
+.editor .outline div[collapsed] [tabindex] {
 	display: none;
 }
 
@@ -221,7 +214,6 @@ editor .outline [tabindex]:focus {
 .editor .outline .heading-5>textarea,
 .editor .outline .heading-6>span,
 .editor .outline .heading-6>textarea {
-	margin-top: 1rem;
 	font-weight: bold;
 }
 .editor .outline .heading-1>span,
@@ -235,47 +227,46 @@ editor .outline [tabindex]:focus {
 
 .editor .outline .heading-1>span,
 .editor .outline .heading-1>textarea {
-	--font-size: 2.5em;
+	font-size: 2.5em;
 }
 .editor .outline .heading-2>span,
 .editor .outline .heading-2>textarea {
-	--font-size: 1.9em;
+	font-size: 1.9em;
 }
 .editor .outline .heading-3>span,
 .editor .outline .heading-3>textarea {
-	--font-size: 1.5em;
+	font-size: 1.5em;
 }
 .editor .outline .heading-4>span,
 .editor .outline .heading-4>textarea {
-	--font-size: 1.3em;
+	font-size: 1.3em;
 }
 .editor .outline .heading-5>span,
 .editor .outline .heading-5>textarea {
-	--font-size: 1.1em;
+	font-size: 1.1em;
 }
 .editor .outline .heading-6>span,
 .editor .outline .heading-6>textarea {
-	--font-size: 1em;
+	font-size: 1em;
 }
 
-
 /* Lists... */
 /* XXX needs to be in the middle of the first span but with universal size... */
 .editor .outline .list-item:before,
 .editor .outline .list>[tabindex]>span:not(:empty):before {
-	content: "◼";
+	--size: 0.5rem;
-	color: gray;
-}
-.editor .outline .list>.list>[tabindex]>span:not(:empty):before {
-	content: "●";
-}
-.editor .outline .list>.list>.list>[tabindex]>span:not(:empty):before {
-	content: "○";
-}
-.editor .outline .list>.list>.list>.list>[tabindex]>span:not(:empty):before {
-	content: "▪";
-}
 
+	display: inline-block;
+	position: absolute;
+	content: "";
+	top: calc(0.6em + var(--item-padding));
+	left: calc(var(--size) * -2);
+	width: var(--size);
+	height: var(--size);
+	margin-top: calc(var(--size) / -2);
+
+	background: silver;
+}
 
 /* Highlightes... */
 .editor .outline .ASAP {
@@ -286,7 +277,6 @@ editor .outline [tabindex]:focus {
 	background: yellow;
 }
 
-
 /* Comments... */
 .editor.hide-comments .outline .comment {
 	display: none;
@@ -305,12 +295,8 @@ editor .outline [tabindex]:focus {
 	* 	element -- can's seem to figure out a way to avoid this */
 	--checkbox-margin: 0em;
 }
-.editor .outline input {
+/* align todo checkboxes to indnt (otherwise they are on the indent) */
-	pointer-events: auto;
-}
 .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)
@@ -339,26 +325,8 @@ editor .outline [tabindex]:focus {
 		var(--item-padding)
 		+ 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;*/
 }
 
-
-
-/*********************************************************************/
-
-.editor.show-click-zones .outline [tabindex]>span:before,
-.editor.show-click-zones .outline [tabindex]>span:after {
-	background: rgba(0,0,0,0.03);
-}
-.editor.show-click-zones .outline [tabindex]:hover>span:before,
-.editor.show-click-zones .outline [tabindex]:hover>span:after {
-	background: rgba(0,0,0,0.1);
-}
-
-

experiments/outline-editor/editor.js

@@ -618,16 +618,15 @@ var Outline = {
 				var elem = evt.target
 
 				// expand/collapse
-				if(elem.nodeName == 'SPAN' 
+				if(elem.nodeName == 'DIV' 
-						&& elem.parentElement.getAttribute('tabindex')){
+						&& elem.getAttribute('tabindex')){
 					// click: left of elem (outside)
 					if(evt.offsetX < 0){
 						// XXX item menu?
-						console.log('---', elem)
 					
 					// click: right of elem (outside)
 					} else if(elem.offsetWidth < evt.offsetX){
-						that.toggleCollapse(elem.parentElement)
+						that.toggleCollapse(elem)
 
 					// click inside element...
 					} else {
@@ -635,8 +634,7 @@ var Outline = {
 					}
 
 				// todo: toggle checkbox...
-				} else if(elem.type == 'checkbox'
+				} else if(elem.classList.contains('todo')){
-						&& elem.parentElement.parentElement.classList.contains('todo')){
 					var node = elem.parentElement.parentElement
 					var text = node.querySelector('textarea')
 					text.value = 
@@ -645,8 +643,7 @@ var Outline = {
 							: text.value.replace(/^\s*DONE(\s*)/, 'TODO$1') 
 
 				// check: toggle checkbox...
-				} else if(elem.type == 'checkbox'
+				} else if(elem.classList.contains('check')){
-						&& elem.classList.contains('check')){
 					var node = elem.parentElement.parentElement
 					var text = node.querySelector('textarea')
 					var i = [...node.querySelectorAll('.check')].indexOf(elem)

experiments/outline-editor/index.html

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="UTF-8">
 <link href="editor.css" rel="stylesheet"/>
 <style>
 
@@ -36,7 +35,8 @@ var setup = function(){
 	- Bonsai
   - 
 - ## ToDo
-  - shifting nodes up/down
+  - do a better expand/collapse icon on hover
+  - read-only mode
   - editor: bksapce/del at start/end of a block should join it with prev/next
   - editor: pressing enter in text edit mode should split text into two blocks
   - editor: caret
@@ -44,11 +44,6 @@ var setup = function(){
     - handle up/down on wrapped blocks
       _...can't seem to get caret line in a non-hacky way_
   - persistent empty first/last node (a button to create a new node)
-  - add completion percentage to blocks with todo's nested
-    either by default oron '%%' or '[%]' placeholder
-	...ratio between all nested open checkboxes to checked (???)
-  - read-only mode
-  - ~do a better expand/collapse icons~
   - ~loading from DOM -- fill textarea~
   - ~focus management~
   - ~mouse/touch controls~
@@ -57,12 +52,13 @@ var setup = function(){
   - ~shift subtree up/down~
   - ~create node~
   - ~edit node~
+  - shifting nodes up/down
   - multiple node selection
-  - copy/paste nodes/trees
   - undo 
     - delete node
     - indent/deindent
     - edit node
+  - copy/paste nodes/trees
   - markdown: tables
   - empty item height is a bit off...
   - ~serialize~/deserialize
@@ -127,8 +123,6 @@ var setup = function(){
 
 <hr>
 
-<button onclick="editor.dom.classList.toggle('show-click-zones')">show/hide click zones</button>
-
 <pre>
 
 Controls: