From 3be4a26b143cb6fb788218ec34122a24f5e4bdd1 Mon Sep 17 00:00:00 2001
From: "Jiucheng(Oliver)" <git.jiucheng@gmail.com>
Date: Sun, 15 Dec 2024 13:11:45 -0500
Subject: [PATCH] Add 'Disable Click' feature to view settings (#23)

* Add 'Disable Click' feature to view settings

* Add 'Disable Page Turn on Click' option to MiscPanel and update view settings

* Rename 'Control' section to 'Behavior' and update 'Disable Page Turn on Click' label to 'Disable Click-to-Flip'

* Update view settings to include disableClick functionality

* Refactor disableClick handling in MiscPanel to separate useEffect for improved clarity

* Remove unused 'use' import from MiscPanel for cleaner code
---
 .../app/reader/components/FoliateViewer.tsx   |  3 ++
 .../reader/components/settings/MiscPanel.tsx  | 28 +++++++++++++++++++
 apps/readest-app/src/services/constants.ts    |  1 +
 apps/readest-app/src/types/book.ts            |  1 +
 4 files changed, 33 insertions(+)

diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 186dacad..a36d5938 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -162,6 +162,9 @@ const FoliateViewer: React.FC<{
       if (msg.data && msg.data.bookKey === bookKey) {
         const viewSettings = getViewSettings(bookKey)!;
         if (msg.data.type === 'iframe-single-click') {
+          if (viewSettings.disableClick!) {
+            return;
+          }
           const viewElement = containerRef.current;
           if (viewElement) {
             const rect = viewElement.getBoundingClientRect();
diff --git a/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx b/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
index 07ef5e07..98c811c6 100644
--- a/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
@@ -15,6 +15,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const { themeCode } = useTheme();
 
   const [animated, setAnimated] = useState(viewSettings.animated!);
+  const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
   const [userStylesheet, setUserStylesheet] = useState(viewSettings.userStylesheet!);
   const [error, setError] = useState<string | null>(null);
 
@@ -73,6 +74,16 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animated]);
 
+  useEffect(() => {
+    viewSettings.disableClick = isDisableClick;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.disableClick = isDisableClick;
+      setSettings(settings);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDisableClick]);
+
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='w-full'>
@@ -92,6 +103,23 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         </div>
       </div>
 
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>Behavior</h2>
+        <div className='card bg-base-100 border shadow'>
+          <div className='divide-y'>
+            <div className='config-item config-item-top config-item-bottom'>
+              <span className='text-gray-700'>Disable Click-to-Flip</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={isDisableClick}
+                onChange={() => setIsDisableClick(!isDisableClick)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>Custom CSS</h2>
         <div className={`card bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}>
diff --git a/apps/readest-app/src/services/constants.ts b/apps/readest-app/src/services/constants.ts
index f5daf6f2..d390cfe5 100644
--- a/apps/readest-app/src/services/constants.ts
+++ b/apps/readest-app/src/services/constants.ts
@@ -38,6 +38,7 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   marginPx: 44,
   gapPercent: 5,
   scrolled: false,
+  disableClick: false,
   maxColumnCount: 2,
   maxInlineSize: 720,
   maxBlockSize: 1440,
diff --git a/apps/readest-app/src/types/book.ts b/apps/readest-app/src/types/book.ts
index abfb7313..1cfe0514 100644
--- a/apps/readest-app/src/types/book.ts
+++ b/apps/readest-app/src/types/book.ts
@@ -40,6 +40,7 @@ export interface BookLayout {
   marginPx: number;
   gapPercent: number;
   scrolled: boolean;
+  disableClick: boolean;
   maxColumnCount: number;
   maxInlineSize: number;
   maxBlockSize: number;