From b8b59e042ecf74d2ed4b459074e7157aa578465b Mon Sep 17 00:00:00 2001 From: arthur-lemeur <113124595+arthur-lemeur@users.noreply.github.com> Date: Thu, 31 Oct 2024 15:00:12 +0100 Subject: [PATCH] fix(ui): readerSettings ranges to match options-values (Fixes #2500 PR #2504) --- .../reader/components/ReaderSettings.tsx | 97 ++++++++----------- .../reader/components/options-values.ts | 4 +- 2 files changed, 42 insertions(+), 59 deletions(-) diff --git a/src/renderer/reader/components/ReaderSettings.tsx b/src/renderer/reader/components/ReaderSettings.tsx index a10764bff..6dcbb6959 100644 --- a/src/renderer/reader/components/ReaderSettings.tsx +++ b/src/renderer/reader/components/ReaderSettings.tsx @@ -44,7 +44,7 @@ import * as DefaultPageIcon from "readium-desktop/renderer/assets/icons/defaultP import classNames from "classnames"; import { IPdfPlayerColumn, IPdfPlayerScale, IPdfPlayerView } from "../pdf/common/pdfReader.type"; -import { IReaderSettingsProps } from "./options-values"; +import optionsValues, { AdjustableSettingsStrings, IReaderSettingsProps } from "./options-values"; import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator"; import { ReaderConfig, TTheme } from "readium-desktop/common/models/reader"; import { FONT_LIST, FONT_LIST_WITH_JA } from "readium-desktop/utils/fontList"; @@ -396,36 +396,38 @@ export const FontFamily = () => { interface ITable { title: string, ariaLabel: string, - min: number, - max: number, - step: number, ariaValuemin: number, defaultValue: string, - parameter: "pageMargins" | "wordSpacing" | "letterSpacing" | "paraSpacing" | "lineHeight", + parameter: keyof AdjustableSettingsStrings; altParameter: string, rem: boolean, } const Slider = ({ value, option, set }: { value: string, option: ITable, set: (a: Pick) => void }) => { const [currentSliderValue, setCurrentSliderValue] = React.useState(option.defaultValue); + const [currentIndex, setCurrentIndex] = React.useState(() => (optionsValues[option.parameter] || [] ).findIndex((el) => el === option.defaultValue) || 0); React.useEffect(() => { - setCurrentSliderValue(value.replace(/rem/g, "")); - }, [value]); + setCurrentSliderValue(value); + const newIndex = (optionsValues[option.parameter] || [] ).findIndex((el) => el === value) || 0; + setCurrentIndex(newIndex); + }, [value, option.parameter]); + + const updateValue = (index: number) => { + const newValue = (optionsValues[option.parameter] || [])[index] || "0"; + setCurrentSliderValue(newValue); + setCurrentIndex(index); + set({ [option.parameter]: newValue } as Pick); + }; const click = (direction: string) => { - const step = option.step; - let newStepValue: number; - - if (direction === "out") { - newStepValue = Number(currentSliderValue.replace(/rem/g, "")) - step; - } else { - newStepValue = Number(currentSliderValue.replace(/rem/g, "")) + step; - } - const clampedValue = Math.min(Math.max(newStepValue, option.min), option.max); - const valueToString = clampedValue.toFixed(2); - setCurrentSliderValue(valueToString); - set({ [option.parameter]: valueToString + (option.rem ? "rem" : "") } as Pick); + setCurrentIndex((prevIndex) => { + const newIndex = direction === "out" ? prevIndex - 1 : prevIndex + 1; + if (newIndex >= 0 && newIndex < optionsValues[option.parameter].length) { + updateValue(newIndex); + } + return prevIndex; + }); }; return ( @@ -433,38 +435,34 @@ const Slider = ({ value, option, set }: { value: string, option: ITable, set: (a

{option.title}

- { - currentSliderValue === "0" ? "auto" : - currentSliderValue.includes("rem") ? - currentSliderValue : - currentSliderValue + (option.rem ? "rem" : "") - }

+ {currentSliderValue === "0" ? "auto" : currentSliderValue} +

- - + + { - const newValue = e.target.value; - setCurrentSliderValue(newValue); - set({ [option.parameter]: newValue + (option.rem ? "rem" : "") } as Pick); - }} + onChange={(e) => updateValue(parseInt(e.target.value, 10))} className={currentSliderValue === "0" ? stylesSettings.range_inactive : ""} /> - +
); @@ -482,9 +480,6 @@ const ReadingSpacing = () => { { title: `${__("reader.settings.margin")}`, ariaLabel: "label_pageMargins", - min: 0.5, - max: 2, - step: 0.25, ariaValuemin: 0, defaultValue: pageMargins, parameter: "pageMargins", @@ -494,9 +489,6 @@ const ReadingSpacing = () => { { title: `${__("reader.settings.wordSpacing")}`, ariaLabel: "label_wordSpacing", - min: 0.05, - max: 1, - step: 0.05, ariaValuemin: 0, defaultValue: wordSpacing, parameter: "wordSpacing", @@ -506,9 +498,6 @@ const ReadingSpacing = () => { { title: `${__("reader.settings.letterSpacing")}`, ariaLabel: "label_letterSpacing", - min: 0.05, - max: 0.5, - step: 0.05, ariaValuemin: 0, defaultValue: letterSpacing, parameter: "letterSpacing", @@ -518,9 +507,6 @@ const ReadingSpacing = () => { { title: `${__("reader.settings.paraSpacing")}`, ariaLabel: "label_paraSpacing", - min: 0.5, - max: 3, - step: 0.5, ariaValuemin: 0, defaultValue: paraSpacing, parameter: "paraSpacing", @@ -530,9 +516,6 @@ const ReadingSpacing = () => { { title: `${__("reader.settings.lineSpacing")}`, ariaLabel: "label_lineHeight", - min: 0.5, - max: 3, - step: 0.5, ariaValuemin: 0, defaultValue: lineHeight, parameter: "lineHeight", diff --git a/src/renderer/reader/components/options-values.ts b/src/renderer/reader/components/options-values.ts index 47de7f35e..aacccdbd6 100644 --- a/src/renderer/reader/components/options-values.ts +++ b/src/renderer/reader/components/options-values.ts @@ -88,14 +88,14 @@ export const lineHeight: string[] = [ "2", ]; -const optionsValues = { +const optionsValues: AdjustableSettingsStrings = { fontSize, pageMargins, wordSpacing, letterSpacing, paraSpacing, lineHeight, -} as AdjustableSettingsStrings; +}; export type AdjustableSettingsStrings = { [key in keyof ReaderConfigStringsAdjustables]: string[];