From 41f390b305909d77d09b85bd979000181e6cb70c Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Sun, 6 Oct 2024 21:24:50 -0500
Subject: [PATCH] Add a classname to recto configuration

Adding class name so that it can be toggled between 'recto' and 'verso'.  Verso being the normal left/right configuration, no styling is needed.  With recto, the first page is shifted to the second slot, or right side.
---
 client/homebrew/brewRenderer/brewRenderer.less   | 2 +-
 client/homebrew/brewRenderer/toolBar/toolBar.jsx | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less
index f8631385a..3ae1f0685 100644
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -14,7 +14,7 @@
 			grid-template-rows: repeat(3, auto); 
 			gap: 10px 10px; 
 			justify-content: center;
-			& .page:first-child {
+			&.recto .page:first-child {
 				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
 				// todo: add a checkbox to toggle this setting
 				grid-column-start: 2; 
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 11cb36900..58071320e 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -12,6 +12,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	const [zoomLevel, setZoomLevel] = useState(100);
 	const [pageNum, setPageNum] = useState(currentPage);
 	const [arrangement, setArrangement] = useState('single');
+	const [startOnRight, setStartOnRight] = useState(true);
 	const [toolsVisible, setToolsVisible] = useState(true);
 	const modes = ['single', 'facing', 'flow'];
 
@@ -31,8 +32,11 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		if(pagesContainer) {
 			modes.forEach((mode)=>pagesContainer.classList.remove(mode));
 			pagesContainer.classList.add(arrangement);
+			['recto', 'verso'].forEach((leaf)=>pagesContainer.classList.remove(leaf));
+			pagesContainer.classList.add(startOnRight ? 'recto' : 'verso');
 		}
 	}, [arrangement]);
+	}, [arrangement, startOnRight]);
 
 
 	const handleZoomButton = (zoom)=>{