From d94b25f693763cdf91eeb82d515ffcbfe2d19a4b Mon Sep 17 00:00:00 2001 From: sina_sajjadi Date: Wed, 25 Dec 2024 17:46:50 +0330 Subject: [PATCH] fix: enhance modal accessibility, improve audio settings, and update sidebar translations --- next.config.ts | 12 ++--- src/components/modals/audio-setting.tsx | 15 +++++- src/components/modals/reciters.tsx | 52 ++++++++----------- src/components/modals/setting.tsx | 2 + src/components/sidebar/list.tsx | 68 +++++++++++-------------- src/components/sidebar/tabs.tsx | 2 +- 6 files changed, 72 insertions(+), 79 deletions(-) diff --git a/next.config.ts b/next.config.ts index e13e7d8..7e13f17 100644 --- a/next.config.ts +++ b/next.config.ts @@ -7,12 +7,12 @@ const nextConfig: NextConfig = { images: { domains: ["habibapp.com"], // Add the domain for image hosting }, -typescript : { - ignoreBuildErrors : true -}, -eslint : { - ignoreDuringBuilds : true -} +// typescript : { +// ignoreBuildErrors : true +// }, +// eslint : { +// ignoreDuringBuilds : true +// } // Add other Next.js config options here as needed }; diff --git a/src/components/modals/audio-setting.tsx b/src/components/modals/audio-setting.tsx index bd2f63c..e8ec8f5 100644 --- a/src/components/modals/audio-setting.tsx +++ b/src/components/modals/audio-setting.tsx @@ -33,14 +33,25 @@ const AudioSetting: React.FC = ({ className = "" }) => { audioRef.current.playbackRate = speed; // Update the audio playback speed } }, [speed]); // Re-run this effect whenever speed changes - const modalClasses = windowWidth < 1024 ? "" : "max-w-96 bottom-20 right-0"; const increaseSpeed = () => { setSpeed((prevSpeed) => (prevSpeed < 2 ? +(prevSpeed + 0.2).toFixed(1) : 1)); }; - + + const handleClickOutside = (event: MouseEvent) => { + if (modalRef.current && !modalRef.current.contains(event.target as Node)) { + closeModal(); // Close the modal if clicked outside + } + }; + + useEffect(() => { + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); return (
= ({ className = "" }) => { const modalRef = useRef(null); const closeButtonRef = useRef(null); const previouslyFocusedElement = useRef(null); - const [windowWidth, setWindowWidth] = useState(window.innerWidth); + const [windowWidth, setWindowWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 0); const [reciters, setReciters] = useState([]); const params = useParams(); const slug = params?.slug as string; const id = slug.split("-").pop(); - const modalClasses = windowWidth < 1024 ? "" : "max-w-96 bottom-20 right-0"; - - console.log(windowWidth); + const modalClasses = windowWidth < 1024 ? "" : "max-w-96 bottom-20 right-0"; useEffect(() => { http.get(`web/mafatih/${id}/reciters/`).then((res) => { - console.log("fdasfdasfads", res); setReciters(res.data.results); }); @@ -38,18 +35,14 @@ const RecitersModal: React.FC = ({ className = "" }) => { window.addEventListener("resize", handleResize); - // Cleanup the event listener on component unmount return () => { window.removeEventListener("resize", handleResize); }; }, [id]); - // Handle modal visibility and accessibility + useEffect(() => { const handleOutsideClick = (event: MouseEvent) => { - if ( - modalRef.current && - !modalRef.current.contains(event.target as Node) - ) { + if (modalRef.current && !modalRef.current.contains(event.target as Node)) { closeModal(); } }; @@ -60,32 +53,24 @@ const RecitersModal: React.FC = ({ className = "" }) => { } }; + document.addEventListener("mousedown", handleOutsideClick); + document.addEventListener("keydown", handleKeyDown); + + // Save the previously focused element and set modal focus if (displaySetting) { previouslyFocusedElement.current = document.activeElement as HTMLElement; - document.addEventListener("mousedown", handleOutsideClick); - document.addEventListener("keydown", handleKeyDown); - // Prevent background scrolling - document.body.style.overflow = "hidden"; - // Shift focus to close button + document.body.style.overflow = "hidden"; // Prevent background scrolling closeButtonRef.current?.focus(); - } else { - document.removeEventListener("mousedown", handleOutsideClick); - document.removeEventListener("keydown", handleKeyDown); - document.body.style.overflow = "auto"; - // Return focus to previously focused element - previouslyFocusedElement.current?.focus(); } return () => { document.removeEventListener("mousedown", handleOutsideClick); document.removeEventListener("keydown", handleKeyDown); - document.body.style.overflow = "auto"; + document.body.style.overflow = "auto"; // Restore scrolling + previouslyFocusedElement.current?.focus(); // Restore focus }; - }, []); - console.log(reciters); - reciters.map((item) => { - console.log(item); - }); + }, [displaySetting]); + return (
= ({ className = "" }) => { role="dialog" aria-modal="true" > -
+
Reciter
-
-
@@ -108,7 +96,7 @@ const RecitersModal: React.FC = ({ className = "" }) => { closeModal(); }} key={reciter?.id} - className="flex py-4 px-6 items-center gap-4 border-b hover:bg-[#EBEBEB] cursor-pointer" + className="flex py-4 px-6 items-center gap-4 border-b hover:bg-[#EBEBEB] cursor-pointer" >
= ({ className = "" }) => { // Handle modal visibility and accessibility useEffect(() => { const handleOutsideClick = (event: MouseEvent) => { + console.log(modalRef.current , modalRef.current.contains(event.target as Node)); if ( modalRef.current && !modalRef.current.contains(event.target as Node) ) { + if (modalView === "SETTING_VIEW") { closeModal(); } else { diff --git a/src/components/sidebar/list.tsx b/src/components/sidebar/list.tsx index 0e9a1a6..4b01b60 100644 --- a/src/components/sidebar/list.tsx +++ b/src/components/sidebar/list.tsx @@ -16,45 +16,39 @@ import { Category, Dua, ListProps } from "../utils/types"; const List: React.FC = ({ tab, path, setPath, data, setData }) => { const [loading, setLoading] = useState(false); + const [currentDhikr, setCurrentDhikr] = useState(""); + const [currentTranslation, setCurrentTranslation] = useState(""); const router = useRouter(); const today = new Date(); const dayOfWeek = new Intl.DateTimeFormat("en-US", { weekday: "long", }).format(today); - +let locale : string ; // Mapping of days of the week to their respective Dhikr phrases with vowels and English translations - const dhikrMap: { [key: string]: { dhikr: string; english: string } } = { - Saturday: { - dhikr: "یَا رَبِّ الْعالَمِین", - english: "O Lord of the Worlds", - }, - Sunday: { - dhikr: "یَا ذَا الْجَلاَلِ وَ الْاِکْرَامِ", - english: "O Lord of Glory and Honor", - }, - Monday: { - dhikr: "یَا قَاضِیَ الْحَاجَاتِ", - english: "O the Judge of needs", - }, - Tuesday: { - dhikr: "یَا أَرْحَمَ الرَّاحِمِین", - english: "O Most Merciful of all givers", - }, - Wednesday: { - dhikr: "یَا حَیُّ یَا قَیُّومُ", - english: "O Ever-Living, O Sustainer", - }, - Thursday: { - dhikr: "لَا إِلٰهَ إِلَّا اللَّهُ الْمَلِکُ الْحَقُّ الْمُبِینُ", - english: - "There is no god but Allah, the Sovereign, the True, the Manifest", - }, - Friday: { - dhikr: "اللّهُمّ صَلِّ عَلَى مُحَمَّدٍ وَ آلِ مُحَمَّدٍ", - english: - "O Allah, send blessings upon Muhammad and the family of Muhammad", - }, - }; + useEffect(() => { + locale = localStorage.getItem("locale") || "en"; + if (tab === "Today") { + setLoading(true); + http + .get("web/mafatih-duas/dhikrs/?today=true") + .then((res) => { + const dhikrForToday = res.data.find( + (item: any) => item.day === dayOfWeek + ); + if (dhikrForToday) { + setCurrentDhikr(dhikrForToday.text); + setCurrentTranslation( + dhikrForToday.translation[locale] || dhikrForToday.translation.en + ); + } + setLoading(false); + }) + .catch((error) => { + console.error("Error fetching Dhikr data:", error); + setLoading(false); + }); + } + }, [tab, dayOfWeek, locale]); const openCategory = (category: Category) => { setData({ type: "children", data: category.children }); @@ -138,15 +132,13 @@ const List: React.FC = ({ tab, path, setPath, data, setData }) => { }); }); } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [path]); if (loading) { return

Loading ...

; } - const currentDhikr = dhikrMap[dayOfWeek]?.dhikr || ""; - const currentEnglish = dhikrMap[dayOfWeek]?.english || ""; console.log(data); return ( @@ -174,7 +166,7 @@ const List: React.FC = ({ tab, path, setPath, data, setData }) => { {colorizeVowels(currentDhikr)}
-

{currentEnglish}

+

{currentTranslation}

@@ -238,7 +230,7 @@ const List: React.FC = ({ tab, path, setPath, data, setData }) => { )} ); - } + } }) ) : (
diff --git a/src/components/sidebar/tabs.tsx b/src/components/sidebar/tabs.tsx index 0702a2e..cea0d81 100644 --- a/src/components/sidebar/tabs.tsx +++ b/src/components/sidebar/tabs.tsx @@ -86,7 +86,7 @@ const Tabs = () => {
{/* Render the path names */} -
    +
      {tabs.map((tab) => (