From 6d3747081440beb39bab6ff7eed32fe3d14a40da Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Mon, 13 Apr 2026 16:51:11 -0400
Subject: [PATCH] Add panel mode toggle to reader settings menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a checkbox menu item to the demo reader's settings menu that
allows users to toggle panel detection mode on or off.

Implementation details:
- Adds "Panel Mode" checkbox to existing settings menu
- Uses the createMenu API with type="checkbox"
- Safely checks for togglePanelMode method availability
- Checks current panel-mode state before toggling
- Properly enables/disables panel mode via attribute API

User-facing behavior:
- Click gear icon → settings menu appears
- Check/uncheck "Panel Mode" to enable/disable
- Works seamlessly with existing layout options
- Only active when viewing fixed-layout content

This change only affects the demo reader (reader.html + reader.js),
not the foliate-js library itself. The library's panel detection
API in fixed-layout.js remains unchanged.

The panel mode toggle provides easy access to the new panel
navigation features for testing and demonstration purposes.
---
 reader.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/reader.js b/reader.js
index ff7be63..a439969 100644
--- a/reader.js
+++ b/reader.js
@@ -101,6 +101,24 @@ class Reader {
           this.view?.renderer.setAttribute("flow", value);
         },
       },
+      {
+        name: "panel-mode",
+        label: "Panel Mode",
+        type: "checkbox",
+        checked: false,
+        onclick: () => {
+          // ← No 'value' parameter for checkbox
+          const renderer = this.view?.renderer;
+          if (!renderer?.togglePanelMode) return;
+
+          const isActive = renderer.hasAttribute("panel-mode");
+          if (isActive) {
+            renderer.removeAttribute("panel-mode");
+          } else {
+            renderer.togglePanelMode();
+          }
+        },
+      },
     ]);
     menu.element.classList.add("menu");