fix: fixes issue with html IDs for some month names

javalent · May 26, 2023 · fff519f · fff519f
1 parent 0839738
commit fff519f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/calendar/ui/Month/Month.svelte b/src/calendar/ui/Month/Month.svelte
@@ -83,7 +83,7 @@
 </script>
 
 {#if $viewState == ViewState.Year}
-    <h4 class="month-header" id={displayedMonth.name}>
+    <h4 class="month-header">
         <span class="calendarium-month month">{displayedMonth.name}</span>
     </h4>
 {/if}
@@ -159,7 +159,7 @@
         height: 100%;
     }
     .month-header {
-        margin-bottom: 0;
+        margin: 0;
     }
     .month {
         width: 100%;

diff --git a/src/calendar/ui/Year/Year.svelte b/src/calendar/ui/Year/Year.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { getTypedContext } from "src/calendar/view";
     import Month from "../Month/Month.svelte";
+    import { nanoid } from "src/utils/functions";
 
     let yearContainer: HTMLDivElement;
 
@@ -22,15 +23,27 @@
         yearStore.getMonthFromCache($monthArray.indexOf(m))
     ); */
     const focus = (year: HTMLElement) => {
-        const header = year.querySelector(`#${$displayedMonth.name}`);
+        const header = year.querySelector(
+            `#${getIdForMonth($displayedMonth.name)}`
+        );
         if (header) header.scrollIntoView(true);
     };
+    const id_map = new Map();
+    const getIdForMonth = (month: string) => {
+        if (!id_map.has(month)) {
+            id_map.set(
+                month,
+                `ID_${nanoid(5)}_${month.replace(/^[^a-z]+|[^\w:.-]+/gi, "")}`
+            );
+        }
+        return id_map.get(month);
+    };
 </script>
 
 <div class="year-view">
     <div class="year" bind:this={yearContainer} use:focus class:full={$full}>
         {#each $monthArray as month, index}
-            <div class="month-container">
+            <div class="month-container" id={getIdForMonth(month.name)}>
                 <Month year={$displaying.year} month={index} />
             </div>
         {/each}