From 4998ac950cc9ea40a42192078768fbb00a5c1412 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Mon, 9 Oct 2023 19:37:08 +0300
Subject: [PATCH] minor refactoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 experiments/outline-editor/editor.css |  3 ++-
 experiments/outline-editor/editor.js  | 29 ++++++++++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css
index 1ba8656..6160c4b 100755
--- a/experiments/outline-editor/editor.css
+++ b/experiments/outline-editor/editor.css
@@ -134,13 +134,14 @@
 	opacity: 0.1;
 }
 /* click/tap zone for expand button... */
-.editor .outline [tabindex]>span:before {
+.editor .outline [tabindex]:before {
 	content: "";
 	position: absolute;
 	display: inline-block;
 	right: -2rem;
 	width: 2rem;
 	height: calc(1em + var(--item-padding) * 2);
+	background: transparent;
 }
 /*
 .editor .outline div[collapsed]:before,
diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js
index 430df12..5c8ea4c 100755
--- a/experiments/outline-editor/editor.js
+++ b/experiments/outline-editor/editor.js
@@ -596,6 +596,9 @@ var Outline = {
 				: focused.setAttribute('selected', '') },
 	},
 
+	// XXX might be a good idea to defer specific actions to event-like 
+	// 		handlers...
+	// 		e.g. clicking left if block -> .blockleft(..) ... etc.
 	setup: function(dom){
 		var that = this
 		this.dom = dom
@@ -609,22 +612,34 @@ var Outline = {
 		outline.addEventListener('click', 
 			function(evt){
 				var elem = evt.target
+
 				// expand/collapse
-				// NOTE: clicking outside the element to the right i.e. on :after/:before
 				if(elem.nodeName == 'DIV' 
-						&& elem.getAttribute('tabindex')
-						&& elem.offsetWidth < evt.offsetX){
-					that.toggleCollapse(elem) }
+						&& elem.getAttribute('tabindex')){
+					// click: left of elem (outside)
+					if(evt.offsetX < 0){
+						// XXX item menu?
+					
+					// click: right of elem (outside)
+					} else if(elem.offsetWidth < evt.offsetX){
+						that.toggleCollapse(elem)
+
+					// click inside element...
+					} else {
+						// XXX 
+					}
+
 				// todo: toggle checkbox...
-				if(elem.classList.contains('todo')){
+				} else if(elem.classList.contains('todo')){
 					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') } 
+							: text.value.replace(/^\s*DONE(\s*)/, 'TODO$1') 
+
 				// check: toggle checkbox...
-				if(elem.classList.contains('check')){
+				} else if(elem.classList.contains('check')){
 					var node = elem.parentElement.parentElement
 					var text = node.querySelector('textarea')
 					var i = [...node.querySelectorAll('.check')].indexOf(elem)