From 769b20600fbfc84157ec0ffaa0ad4dd61f47a186 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sun, 3 Sep 2023 20:33:41 +0300
Subject: [PATCH] started work on state toolbar...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 grid-n-view.html | 22 +++++++++++++++++-----
 grid-n-view.js   | 23 ++++++++++++++---------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/grid-n-view.html b/grid-n-view.html
index 7b04c3b..bc4e5e3 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -75,7 +75,7 @@ For more info see: <a href="./README.md">README.md</a>
 <button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
 <!-- XXX scrollbar still obeys gallery... -->
 <button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button>
-<button onclick="gallery.toolbar.movable()">toggle toolbar drag</button>
+<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toggle toolbar drag</button>
 <button onclick="gallery.toggleLoading()">toggle loading screen</button>
 
 <hr>
@@ -83,17 +83,29 @@ 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)">keyboard_double_arrow_left</button>
+		</div-->
+		<!-- toolbar: general... -->
 		<div class="toolbar fixed">
 			<button class="drag-handle" title="drag">drag_indicator</button> 
 			<div>
 				<button onclick="gallery" title="upload">cloud_upload</button> 
 				<button onclick="gallery" title="save">save</button> 
 			</div>
-			<!--div>
-				<button onclick="gallery" title="save">contrast</button> 
-			</div-->
 			<div>
-				<!--button onclick="gallery.details.show()" title="info">imagesmode<sec>label</sec></button--> 
 				<button onclick="gallery.details.show()" title="edit">imagesmode<sec>edit</sec></button> 
 			</div>
 			<div>
diff --git a/grid-n-view.js b/grid-n-view.js
index 23c3e22..82a104f 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -531,15 +531,20 @@ var Gallery = {
 	dom: undefined,
 
 	// XXX these are the same....
-	__toolbar: undefined,
-	get toolbar(){
+	// XXX add support for multiple toolbars...
+	__toolbars: undefined,
+	get toolbars(){
 		if(this.dom){
-			return this.__toolbar 
-				?? (this.__toolbar = {__proto__: Toolbar }
-					.setup(
-						this.dom.querySelector('.toolbar'), 
-						this)) }
-		delete this.__toolbar 
+			var that = this
+			return this.__toolbars 
+				?? (this.__toolbars = 
+					[...this.dom.querySelectorAll('.toolbar')]
+						.map(function(toolbar){
+							return {__proto__: Toolbar}
+								.setup(
+									toolbar, 
+									that) })) }
+		delete this.__toolbars
 		return undefined },
 	__lightbox: undefined,
 	get lightbox(){
@@ -1150,7 +1155,7 @@ var Gallery = {
 		var that = this
 		this.dom = dom
 
-		this.toolbar
+		this.toolbars
 
 		// image clicks...
 		this.dom.querySelector('.images')