fix: 🐛 增加卷轴模式下的「滚动翻页时对齐边缘」选项

#277

Author: hymbz

locales/en.json

@@ -129,6 +129,7 @@
     "option": {
       "abreast_duplicate": "Column duplicates ratio",
       "abreast_mode": "Abreast scroll mode",
+      "align_edge": "Align to edge when turning page",
       "always_load_all_img": "Always load all images",
       "autoFullscreen": "Auto fullscreen",
       "autoHiddenMouse": "Auto hide mouse",

locales/hu.json

@@ -129,6 +129,7 @@
     "option": {
       "abreast_duplicate": "每列重复比例",
       "abreast_mode": "并排卷轴模式",
+      "align_edge": "Lapozáskor élhez igazítás",
       "always_load_all_img": "始终加载所有图片",
       "autoFullscreen": "Automatikus teljes képernyő",
       "autoHiddenMouse": "自动隐藏鼠标",

locales/ru.json

@@ -129,6 +129,7 @@
     "option": {
       "abreast_duplicate": "Коэффициент дублирования столбцов",
       "abreast_mode": "Режим прокрутки в ряд",
+      "align_edge": "Выравнивание по краю при перелистывании страницы",
       "always_load_all_img": "Всегда загружать все изображения",
       "autoFullscreen": "Авто полный экран",
       "autoHiddenMouse": "Автоматически скрывать курсор мыши",

locales/ta.json

@@ -129,6 +129,7 @@
     "option": {
       "abreast_duplicate": "ஒவ்வொரு நெடுவரிசை நகல் விகிதம்",
       "abreast_mode": "இணை சுருள் பயன்முறை",
+      "align_edge": "பக்கத்தைத் திருப்பும்போது விளிம்பில் சீரமை",
       "always_load_all_img": "எப்போதும் எல்லா படங்களையும் ஏற்றவும்",
       "autoFullscreen": "தானியங்கி முழுத்திரை",
       "autoHiddenMouse": "தானியங்கி மறைக்கும் சுட்டி",

locales/zh.json

@@ -129,6 +129,7 @@
     "option": {
       "abreast_duplicate": "每列重复比例",
       "abreast_mode": "并排卷轴模式",
+      "align_edge": "滚动翻页时对齐边缘",
       "always_load_all_img": "始终加载所有图片",
       "autoFullscreen": "自动全屏",
       "autoHiddenMouse": "自动隐藏鼠标",
@@ -314,7 +315,7 @@
     "module_download_complete": "图片放大模型下载完成",
     "module_download_failed": "图片放大模型下载失败",
     "module_downloading": "图片放大模型下载中...",
-    "title": "放大图片",
+    "title": "无损放大图片",
     "upscaled": "已放大",
     "upscaling": "放大中",
     "webgpu_tip": "无法使用 WebGPU 放大图片，处理速度将变慢"

src/components/Manga/actions/operate.ts

@@ -61,6 +61,8 @@ const scrollViewTurnPage = (offset: number) => {
   const dir = offset > 0 ? 'next' : 'prev';
   if (handleEndTurnPage(dir)) return;
 
+  if (!store.option.scrollMode.alignEdge) return scrollBy(offset, true);
+
   const viewBottom = scrollTop() + store.rootSize.height;
   let viewBottomPage = findTopPage(viewBottom);
   // 如果底页只露出了一点点，就当它没显示出来，避免小数滚动的误差

src/components/Manga/components/Setting.module.css

@@ -107,9 +107,12 @@
     margin-top: 1em;
   }
 
-  button[disabled] {
-    cursor: not-allowed;
+  &[data-disabled] {
     opacity: 0.5;
+
+    button {
+      cursor: not-allowed;
+    }
   }
 }
 

src/components/Manga/components/SettingPanel.tsx

@@ -1,6 +1,6 @@
 import type { Component, ParentComponent } from 'solid-js';
 
-import { createSignal, For } from 'solid-js';
+import { createSignal, For, Show } from 'solid-js';
 
 import { createEffectOn, lang } from 'helper';
 
@@ -34,14 +34,15 @@ export const SettingPanel: Component = () => (
     on:click={stopPropagation}
   >
     <For each={store.prop.editSettingList(defaultSettingList())}>
-      {([name, SettingItem, initShow], i) => {
+      {([name, SettingItem, options], i) => {
+        const initShow = options?.initShow;
         const [show, setShwo] = createSignal(Boolean(initShow));
 
         if (typeof initShow === 'function')
           createEffectOn(initShow, (val) => setShwo(Boolean(val)));
 
         return (
-          <>
+          <Show when={options?.hidden ? !options.hidden() : true}>
             {i() ? <hr /> : null}
             <div class={classes.SettingBlock} data-show={show()}>
               <SettingBlockSubtitle onClick={() => setShwo((prev) => !prev)}>
@@ -52,7 +53,7 @@ export const SettingPanel: Component = () => (
                 <SettingItem />
               </div>
             </div>
-          </>
+          </Show>
         );
       }}
     </For>

src/components/Manga/components/SettingsItem.tsx

@@ -1,11 +1,14 @@
 import type { Component, JSX } from 'solid-js';
 
+import { boolDataVal } from 'helper';
+
 import classes from '../index.module.css';
 
 export type SettingsItemProps = {
   name: string;
-  children?: JSX.Element | JSX.Element[];
+  disabled?: boolean;
 
+  children?: JSX.Element | JSX.Element[];
   class?: string;
   classList?: ClassList;
   style?: JSX.CSSProperties;
@@ -24,6 +27,7 @@ export const SettingsItem: Component<SettingsItemProps> = (props) => (
       ...props.classList,
     }}
     style={props.style}
+    data-disabled={boolDataVal(props.disabled)}
   >
     <div class={classes.SettingsItemName}> {props.name} </div>
     {props.children}

src/components/Manga/components/SettingsItemSwitch.tsx

@@ -22,13 +22,13 @@ export const SettingsItemSwitch: Component<SettingsItemSwitchProps> = (
       name={props.name}
       class={props.class}
       classList={props.classList}
+      disabled={props.disabled}
     >
       <button
         class={classes.SettingsItemSwitch}
         type="button"
         on:click={handleClick}
         data-checked={props.value}
-        disabled={props.disabled}
       >
         <div class={classes.SettingsItemSwitchRound} />
       </button>