working on Page/Mushaf layout

marwan · Mar 17, 2024 · 94fd0eb · 94fd0eb
1 parent d15ddaa
commit 94fd0eb
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 29 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -10,6 +10,7 @@
   // views
   import Home from "$views/Home.svelte";
   import Chapter from "$views/Chapter.svelte";
+  import Page from "$views/Page.svelte";
   import Supplications from "$views/Supplications.svelte";
   import Bookmarks from "$views/Bookmarks.svelte";
   import Changelogs from "$views/Changelogs.svelte";
@@ -42,6 +43,7 @@
       <Route path="/changelogs" component={Changelogs} />
       <Route path="/issues" component={Issues} />
       <Route path="/about" component={About} />
+      <Route path="/page" component={Page} />
       <!-- <Route path="/words" component={Words} /> -->
 
       <Route path="/:chapter/*" let:params>

diff --git a/src/components/verses/VersesWords.svelte b/src/components/verses/VersesWords.svelte
@@ -1,5 +1,5 @@
 <script>
-  export let key, value;
+  export let key, value, line;
 
   import { displayOptions, selectableThemes } from "$data/options";
   import { supplicationsFromQuran } from "$data/quranMeta";
@@ -25,37 +25,39 @@
 
 <!-- words -->
 {#each { length: value.meta.words } as _, word}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div id={`${chapter}:${verse}:${word + 1}`} on:click={() => wordAudioController({ chapter, verse, word })} class="word {$displayTypeStore === 1 ? 'text-center flex flex-col' : 'inline-flex flex-col'} {wordClasses} {$audioSettingsStore.playingWordKey === `${chapter}:${verse}:${word + 1}` && 'bg-[#ebebeb] dark:bg-slate-800'}" style={$currentPageStore === "supplications" && word + 1 < supplicationsFromQuran[key] && "opacity: 30%;"} data-timestamp={timestampSplit[word]}>
+  {#if $currentPageStore === "chapter" || ($currentPageStore === "page" && +value.words.line.split("|")[word] === line)}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div id={`${chapter}:${verse}:${word + 1}`} on:click={() => wordAudioController({ chapter, verse, word })} class="word {$displayTypeStore === 1 ? 'text-center flex flex-col' : 'inline-flex flex-col'} {wordClasses} {$audioSettingsStore.playingWordKey === `${chapter}:${verse}:${word + 1}` && 'bg-[#ebebeb] dark:bg-slate-800'}" style={$currentPageStore === "supplications" && word + 1 < supplicationsFromQuran[key] && "opacity: 30%;"} data-timestamp={timestampSplit[word]}>
+      <span class="{`arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText}`} {displayIsContinuous === true && 'inline-block group-hover:text-gray-500 dark:group-hover:text-slate-300'}" data-fontSize={fontSizes.arabicText}>
+        <!-- 1: Uthmanic Hafs Digital, 3: Indopak Madinah -->
+        {#if $wordTypeStore === 1 || $wordTypeStore === 3}
+          {arabicSplit[word]}
+          <!-- 2: Uthmanic Hafs Mushaf -->
+        {:else if $wordTypeStore === 2}
+          <span class="p{value.meta.page} {selectableThemes[$websiteThemeStore].palette === 1 && 'v4dark'} font-filter">{arabicSplit[word]}</span>
+        {/if}
+      </span>
+
+      <!-- word translation and transliteration -->
+      {#if $displayTypeStore === 1 || $displayTypeStore === 3}
+        <div class="wordTranslationText flex flex-col {fontSizes.wordTranslationText}" data-fontSize={fontSizes.wordTranslationText}>
+          <span class="leading-normal {$wordTransliterationEnabledStore === true ? 'block' : 'hidden'}">{transliterationSplit[word]}</span>
+          <span class="leading-normal {$wordTranslationEnabledStore === true ? 'block' : 'hidden'}">{translationSplit[word]}</span>
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/each}
+
+<!-- end icon -->
+{#if $currentPageStore === "chapter" || ($currentPageStore === "page" && +value.words.line.split("|")[value.meta.words - 1] === line)}
+  <div class="{$displayTypeStore === 1 ? 'text-center flex flex-col' : 'inline-flex flex-col'} {wordClasses}">
     <span class="{`arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText}`} {displayIsContinuous === true && 'inline-block group-hover:text-gray-500 dark:group-hover:text-slate-300'}" data-fontSize={fontSizes.arabicText}>
-      <!-- 1: Uthmanic Hafs Digital, 3: Indopak Madinah -->
       {#if $wordTypeStore === 1 || $wordTypeStore === 3}
-        {arabicSplit[word]}
-        <!-- 2: Uthmanic Hafs Mushaf -->
+        {value.words.end}
       {:else if $wordTypeStore === 2}
-        <span class="p{value.meta.page} {selectableThemes[$websiteThemeStore].palette === 1 && 'v4dark'} font-filter">{arabicSplit[word]}</span>
+        <span class="p{value.meta.page} {$websiteThemeStore === 2 && 'v4dark'}">{value.words.end}</span>
       {/if}
     </span>
-
-    <!-- word translation and transliteration -->
-    {#if $displayTypeStore === 1 || $displayTypeStore === 3}
-      <div class="wordTranslationText flex flex-col {fontSizes.wordTranslationText}" data-fontSize={fontSizes.wordTranslationText}>
-        <span class="leading-normal {$wordTransliterationEnabledStore === true ? 'block' : 'hidden'}">{transliterationSplit[word]}</span>
-        <span class="leading-normal {$wordTranslationEnabledStore === true ? 'block' : 'hidden'}">{translationSplit[word]}</span>
-      </div>
-    {/if}
   </div>
-{/each}
-
-<!-- end icon -->
-<div class="{$displayTypeStore === 1 ? 'text-center flex flex-col' : 'inline-flex flex-col'} {wordClasses}">
-  <span class="{`arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText}`} {displayIsContinuous === true && 'inline-block group-hover:text-gray-500 dark:group-hover:text-slate-300'}" data-fontSize={fontSizes.arabicText}>
-    <!-- 1: Uthmanic Hafs Digital, 3: Indopak Madinah -->
-    {#if $wordTypeStore === 1 || $wordTypeStore === 3}
-      {value.words.end}
-      <!-- 2: Uthmanic Hafs Mushaf -->
-    {:else if $wordTypeStore === 2}
-      <span class="p{value.meta.page} {$websiteThemeStore === 2 && 'v4dark'}">{value.words.end}</span>
-    {/if}
-  </span>
-</div>
+{/if}
diff --git a/src/views/Page.svelte b/src/views/Page.svelte
@@ -0,0 +1,40 @@
+<script>
+  import VersesWords from "$verses/VersesWords.svelte";
+  import Spinner from "$svgs/Spinner.svelte";
+  import { currentPageStore, wordTypeStore } from "$utils/stores";
+  import { updateSettings } from "$utils/updateSettings";
+
+  updateSettings({ type: "displayType", value: 4 });
+
+  let fetchData;
+
+  // fetch verses whenever there's a change
+  $: {
+    fetchData = (async () => {
+      const apiURL = "https://api.quranwbw.com/v1/page?page=1&word_type=1&word_translation=1";
+      const response = await fetch(apiURL);
+      const data = await response.json();
+      localStorage.setItem("pageData", JSON.stringify(data.data.verses));
+      return data.data.verses;
+    })();
+  }
+
+  currentPageStore.set("page");
+</script>
+
+<div class="text-center mt-8 text-xl">
+  {#await fetchData}
+    <Spinner />
+  {:then}
+    {#each Array.from(Array(15 + 1).keys()).slice(1) as line}
+      <div class="line {line} arabic-font-{$wordTypeStore}">
+        {#each Object.entries(JSON.parse(localStorage.getItem("pageData"))) as [key, value]}
+          <!-- <span>{value.words.arabic.split("|")[word]}</span> -->
+          <VersesWords {key} {value} {line} />
+        {/each}
+      </div>
+    {/each}
+  {:catch error}
+    <p>{error}</p>
+  {/await}
+</div>