From ad30c7e57f53b5e35ec68edb5e6e88f6a3e9e95e Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 13 Sep 2023 18:35:19 +0300
Subject: [PATCH] reworking of lookbars...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 README.md           |  1 +
 css/grid-n-view.css | 17 ++++++++++++++++-
 grid-n-view.html    | 26 ++++++++++----------------
 grid-n-view.js      |  4 ++++
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index ef2b4bb..6a91065 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - BUG?: for some reason toggling fullscreen on a mobile device changes 
 	font size...
+- toolbar: drag: broken for non-first relative toolbars...
 - <b>Save current gallery (zip/json?)</b>
 - Save current editor state (zip/json?)
 - ~~Views: Gallery / Details / Lightbox~~
diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index 052b0ed..f23d1b7 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -293,7 +293,9 @@ button:active {
 	position: sticky;
 
 	top: 0;
+	height: 0;
 	margin: 0 calc(var(--gallery-padding-horizontal) * -1);
+	overflow: visible;
 
 	z-index: calc(var(--base-layer) + 2);
 }
@@ -306,13 +308,17 @@ button:active {
 	--padding: 0.5rem;
 	--height: calc((var(--toolbar-button-size) + var(--padding) * 2));
 
-	position: absolute;
+	/*position: absolute;*/
+	position: relative;
 	display: inline-block;
 
 	left: var(--move-x);
 	top: var(--move-y);
 
 	width: fit-content;
+	min-height: var(--toolbar-button-size);
+
+	margin: 0.1em 0px;
 
 	padding: var(--padding);
 	padding-right: var(--height);
@@ -412,6 +418,15 @@ button:active {
 	border-right: solid 1px var(--gallery-secondary-color);
 }
 
+.gallery .toolbar .states:empty:after {
+	display: inline-block;
+	content: "Empty...";
+	line-height: var(--toolbar-button-size);
+	opacity: 0.3;
+	padding: 0em 0.5em;
+}
+
+
 /* buttons... */
 .gallery .toolbar button {
 	min-width: var(--toolbar-button-size);
diff --git a/grid-n-view.html b/grid-n-view.html
index 2c410a3..ae11926 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -83,21 +83,6 @@ For more info see: <a href="./README.md">README.md</a>
 <div class="gallery otter">
 	<!-- toolbar -->
 	<div class="toolbar-anchor">
-		<!-- toolbar: states... -->
-		<!--div class="toolbar fixed">
-			<button class="drag-handle" title="Drag">drag_indicator</button> 
-			<div>
-				<button onclick="gallery.crop('marked')" title="Crop marked">select<sec>crossword</sec></button>
-				<button onclick="gallery.uncrop()" title="Uncrop">select<sec>grid_on</sec></button>
-				<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button>
-			</div>
-			<div class="states">
-				<button title="1">1</button> 
-				<button title="2">2</button> 
-				<button title="3">3</button> 
-			</div>
-			<button class="collapse" title="toggle toolbar (hold to make sticky)">crossword</button>
-		</div-->
 		<!-- toolbar: general... -->
 		<div class="toolbar fixed">
 			<button class="drag-handle" title="Drag">drag_indicator</button> 
@@ -128,7 +113,16 @@ For more info see: <a href="./README.md">README.md</a>
 			<div>
 				<button onclick="gallery.clear()" title="clear">grid_on<sec>close</sec></button> 
 			</div>
-			<button class="collapse" title="Edit gallery (hold to make sticky)">edit_square</button>
+			<button class="collapse" title="Edit (hold to make sticky)">edit_square</button>
+		</div>
+		<!-- toolbar: states... -->
+		<div class="toolbar fixed">
+			<button class="drag-handle" title="Drag">drag_indicator</button> 
+			<!--div>
+				<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button>
+			</div-->
+			<div class="states"></div>
+			<button class="collapse" title="Saved (hold to make sticky)">crossword</button>
 		</div>
 	</div>
 	<!-- gallery: content -->
diff --git a/grid-n-view.js b/grid-n-view.js
index e4cd760..57f4b8e 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -155,6 +155,7 @@ function(evt, id){
 
 // - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - -
 
+// XXX account for relative-positioned elements...
 // XXX constrain this to:
 // 		viewport -- DONE but needs to be smoother...
 // 		parent
@@ -241,6 +242,8 @@ function(options={}){
 			data = {
 				bounds: bounds,
 				offset: {
+					// XXX get offset relative to position parent...
+					// 		...or relative to screen...
 					x: x - elem.offsetLeft, 
 					y: y - elem.offsetTop,
 				},
@@ -308,6 +311,7 @@ function(options={}){
 					Math.max(
 						screen.top,
 						data.y)) }
+			// deferred render..
 			// NOTE: we only allow a single requestAnimationFrame(..)
 			// 		to run per frame...
 			if(!data.animate){