feat: ✨ 增加「启用菜单区域」设置项，以便禁用点击中间唤出菜单功能

https://sleazyfork.org/scripts/comicread/discussions/308707

Author: hymbz

locales/en.json

@@ -144,6 +144,7 @@
       "dir_ltr": "LTR (American comics)",
       "dir_rtl": "RTL (Japanese manga)",
       "disable_auto_enlarge": "Disable automatic image enlarge",
+      "enable_menu": "Enable menu area",
       "first_page_fill": "Enable first page fill by default",
       "fit_to_width": "Fit to width",
       "img_recognition": "Image Recognition",

locales/hu.json

@@ -144,6 +144,7 @@
       "dir_ltr": "从左到右（美漫）",
       "dir_rtl": "从右到左（日漫）",
       "disable_auto_enlarge": "禁止图片自动放大",
+      "enable_menu": "Menüterület engedélyezése",
       "first_page_fill": "默认启用首页填充",
       "fit_to_width": "图片适合宽度",
       "img_recognition": "图像识别",

locales/ru.json

@@ -144,6 +144,7 @@
       "dir_ltr": "Чтение слева направо (Американские комиксы)",
       "dir_rtl": "Чтение справа налево (Японская манга)",
       "disable_auto_enlarge": "Отключить автоматическое масштабирование изображений",
+      "enable_menu": "Включить область меню",
       "first_page_fill": "Включить заполнение первой страницы по умолчанию",
       "fit_to_width": "По ширине",
       "img_recognition": "распознавание изображений",

locales/ta.json

@@ -144,6 +144,7 @@
       "dir_ltr": "இடமிருந்து வலமாக (மெய் மேன்)",
       "dir_rtl": "வலமிருந்து இடமாக (ரிமான்)",
       "disable_auto_enlarge": "தடைசெய்யப்பட்ட படங்கள் தானாக விரிவாக்கப்படுகின்றன",
+      "enable_menu": "மெனு பகுதியை இயக்கு",
       "first_page_fill": "இயல்பாக, முகப்புப்பக்க நிரப்புதலை இயக்கவும்",
       "fit_to_width": "அகலத்திற்கு ஏற்ற படம்",
       "img_recognition": "பட ஏற்பு",

locales/zh.json

@@ -144,6 +144,7 @@
       "dir_ltr": "从左到右（美漫）",
       "dir_rtl": "从右到左（日漫）",
       "disable_auto_enlarge": "禁止图片自动放大",
+      "enable_menu": "启用菜单区域",
       "first_page_fill": "默认启用首页填充",
       "fit_to_width": "图片适合宽度",
       "img_recognition": "图像识别",

src/components/Manga/actions/pointer.ts

@@ -24,7 +24,7 @@ const findClickEle = (
   for (const e of eleList) {
     const rect = e.getBoundingClientRect();
     if (inRange(rect.left, x, rect.right) && inRange(rect.top, y, rect.bottom))
-      return e;
+      return e as HTMLElement;
   }
 };
 
@@ -40,7 +40,7 @@ const handlePageClick = (e: MouseEvent) => {
   }
 
   const targetArea = findClickEle(refs.touchArea.children, e);
-  if (!targetArea) return;
+  if (!targetArea || targetArea.style.visibility === 'hidden') return;
   const areaName = (targetArea as HTMLElement).dataset.area as Area | undefined;
   if (!areaName) return;
 
@@ -50,8 +50,6 @@ const handlePageClick = (e: MouseEvent) => {
       state.show.toolbar = !state.show.toolbar;
     });
 
-  if (!store.option.clickPageTurn.enabled || store.option.zoom.ratio !== 100)
-    return;
   setState((state) => {
     resetUI(state);
 

src/components/Manga/components/TouchArea.module.css

@@ -24,7 +24,7 @@
     opacity: 1;
   }
 
-  & .touchArea {
+  .touchArea {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -63,26 +63,17 @@
   }
 }
 
-.touchAreaRoot:not([data-turn-page]) {
-  & .touchArea[data-area='next'],
-  & .touchArea[data-area='NEXT'],
-  & .touchArea[data-area='prev'],
-  & .touchArea[data-area='PREV'] {
-    visibility: hidden;
-  }
-}
-
 .touchAreaRoot[data-area='edge'] {
   grid-template-columns: 1fr min(30%, 10em) 1fr;
 }
 
 .root[data-mobile] {
-  & .touchAreaRoot {
+  .touchAreaRoot {
     flex-direction: column !important;
     letter-spacing: 0;
   }
 
-  & [data-area]::after {
+  [data-area]::after {
     font-size: 0.8em;
   }
 }

src/components/Manga/components/TouchArea.tsx

@@ -47,21 +47,35 @@ export const dir = createRootMemo(() => {
   return store.option.dir === 'rtl' ? 'ltr' : 'rtl';
 });
 
+const isShowArea = (area: Area) => {
+  switch (area) {
+    case 'PREV':
+    case 'prev':
+    case 'NEXT':
+    case 'next':
+      return store.option.clickPageTurn.enabled;
+
+    case 'MENU':
+    case 'menu':
+      return store.option.clickPageTurn.enableMenu;
+  }
+};
+
 export const TouchArea: Component = () => (
   <div
     ref={bindRef('touchArea')}
     class={classes.touchAreaRoot}
     dir={dir()}
     data-show={boolDataVal(store.show.touchArea)}
     data-area={areaType()}
-    data-turn-page={boolDataVal(store.option.clickPageTurn.enabled)}
   >
     <For each={areaArrayMap[areaType()]}>
       {(rows) => (
         <For each={rows}>
           {(area) => (
             <div
               class={classes.touchArea}
+              style={{ visibility: isShowArea(area) ? undefined : 'hidden' }}
               data-area={area}
               role="button"
               tabIndex={-1}

src/components/Manga/defaultSettingList.tsx

@@ -263,6 +263,18 @@ export const defaultSettingList: () => SettingList = () => [
           name={t('other.enabled')}
           {...bindOption('clickPageTurn', 'enabled')}
         />
+
+        <SettingsItemSwitch
+          name={t('setting.option.show_clickable_area')}
+          value={store.show.touchArea}
+          onChange={() => setState('show', 'touchArea', !store.show.touchArea)}
+        />
+
+        <SettingsItemSwitch
+          name={t('setting.option.enable_menu')}
+          {...bindOption('clickPageTurn', 'enableMenu')}
+        />
+
         <SettingsShowItem when={store.option.clickPageTurn.enabled}>
           <SettingsItemSelect
             name={t('setting.option.click_page_turn_area')}
@@ -276,12 +288,6 @@ export const defaultSettingList: () => SettingList = () => [
             {...bindOption('clickPageTurn', 'reverse')}
           />
         </SettingsShowItem>
-
-        <SettingsItemSwitch
-          name={t('setting.option.show_clickable_area')}
-          value={store.show.touchArea}
-          onChange={() => setState('show', 'touchArea', !store.show.touchArea)}
-        />
       </>
     ),
   ],

src/components/Manga/store/option.ts

@@ -58,6 +58,7 @@ export type Option = {
     enabled: boolean;
     /** 左右反转点击区域 */
     reverse: boolean;
+    enableMenu: boolean;
     /** 区域排列类型 */
     area: keyof typeof areaArrayMap;
   };
@@ -139,6 +140,7 @@ const _defaultOption: Readonly<Option> = {
     enabled: 'ontouchstart' in document.documentElement,
     reverse: false,
     area: 'left_right',
+    enableMenu: true,
   },
   firstPageFill: true,
   disableZoom: false,