From fd33e5459785edb2bdde871b08f79dffd691ff21 Mon Sep 17 00:00:00 2001
From: "J. Ritchie Carroll" <ritchiecarroll@gmail.com>
Date: Sat, 17 Jun 2023 18:53:35 -0500
Subject: [PATCH] Updated TOC in Default2022 presentation style to be resizable

---
 .../Default2022/Templates/TopicTemplate.html  |  8 +++--
 .../Default2022/scripts/presentationStyle.js  | 35 +++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/SHFB/Source/PresentationStyles/Default2022/Templates/TopicTemplate.html b/SHFB/Source/PresentationStyles/Default2022/Templates/TopicTemplate.html
index b1919bf2..4f5e78fe 100644
--- a/SHFB/Source/PresentationStyles/Default2022/Templates/TopicTemplate.html
+++ b/SHFB/Source/PresentationStyles/Default2022/Templates/TopicTemplate.html
@@ -118,12 +118,12 @@
 				</ul>
 			</nav>
 
-			<div class="columns pl-5 pr-5 fixedContent">
+			<div id="ContentContainer" class="columns pl-5 pr-5 fixedContent">
 				<div id="ShowHideTOCColumn" class="column is-hidden-tablet">
 					<a id="ShowHideTOC"><include item="showHideTOC" /></a>
 				</div>
 
-				<div id="TOCColumn" class="column is-hidden-mobile">
+				<div id="TOCColumn" class="column is-hidden-mobile" style="flex-basis: initial; flex-grow: 0.25">
 					<nav class="toc">
 						<ul id="TableOfContents" class="toc-menu">
 							<!-- TOC entries will be added client-side from the TOC fragment file -->
@@ -131,7 +131,9 @@
 					</nav>
 				</div>
 
-				<div id="TopicContent" class="column content is-7">
+				<div id="Resizer" style="cursor: ew-resize; width: 5px; background: #e6e6e6; margin-top: 8px; margin-bottom: 12px"></div>
+
+				<div id="TopicContent" class="column content is-7" style="flex-grow: 1">
 					<!-- Topic content will go here -->
 				</div>
 
diff --git a/SHFB/Source/PresentationStyles/Default2022/scripts/presentationStyle.js b/SHFB/Source/PresentationStyles/Default2022/scripts/presentationStyle.js
index af9c1473..27a35d77 100644
--- a/SHFB/Source/PresentationStyles/Default2022/scripts/presentationStyle.js
+++ b/SHFB/Source/PresentationStyles/Default2022/scripts/presentationStyle.js
@@ -21,6 +21,41 @@
 
 // Ignore Spelling: fti json
 
+//===============================================================================================================
+// This section contains the methods used to handle resizing the TOC section
+
+var resizer, tocDiv;
+
+window.onload = function() {
+    resizer = document.getElementById("Resizer");
+    tocDiv = document.getElementById("TOCColumn");
+
+    resizer.addEventListener("mousedown", function(e) {
+        e.preventDefault();
+        document.addEventListener("mousemove", ResizerMouseMove);
+        document.addEventListener("mouseup", ResizerMouseUp);
+    });
+}
+
+function ResizerMouseMove(e) {
+    const container = document.getElementById("ContentContainer");
+    const containerRect = container.getBoundingClientRect();
+    const newWidth = e.clientX - containerRect.left - 80;
+
+    // Ensure that divs are not smaller than some arbitrary minimal width
+    const minWidth = 50; // pixels
+    const contentDivWidth = containerRect.width - newWidth;
+
+    if (newWidth > minWidth && contentDivWidth > minWidth) {
+        tocDiv.style.width = newWidth + 'px';
+    }
+}
+
+function ResizerMouseUp() {
+    document.removeEventListener("mousemove", ResizerMouseMove);
+    document.removeEventListener("mouseup", ResizerMouseUp);
+}
+
 //===============================================================================================================
 // This section contains the methods used to implement the language filter