renamed all store variables, re-organized verseTranslationsLanguages,…

… design changes
marwan · Mar 31, 2024 · 292bb61 · 292bb61
1 parent a5eb871
commit 292bb61
Show file tree

Hide file tree

Showing 32 changed files with 297 additions and 260 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -9,7 +9,7 @@
   import "$utils/checkURLParameters";
 
   import { Router, Route } from "svelte-routing";
-  import { currentPageStore } from "$utils/stores";
+  import { __currentPage } from "$utils/stores";
   import { checkOldBookmarks } from "$utils/checkOldBookmarks";
 
   // views
@@ -37,7 +37,7 @@
 </script>
 
 <Router>
-  <div class="max-w-screen-lg mx-auto pt-16 pb-24 select-none {$currentPageStore === 'page' ? 'px-0 md:px-4' : 'px-4'}">
+  <div class="max-w-screen-lg mx-auto pt-16 pb-24 select-none {$__currentPage === 'page' ? 'px-0 md:px-4' : 'px-4'}">
     <!-- include the UI elements -->
     <Navbar />
     <Drawer />

diff --git a/src/components/morphology/MorphologyTable.svelte b/src/components/morphology/MorphologyTable.svelte
@@ -2,7 +2,7 @@
   export let wordData, tableType;
 
   import { Link } from "svelte-routing";
-  import { wordTypeStore } from "$utils/stores";
+  import { __wordType } from "$utils/stores";
   import { buttonElement } from "$utils/commonStyles";
 
   const tableTitles = {
@@ -43,7 +43,7 @@
             {#each Array.from(Array(lastWordToLoad + 1).keys()).slice(1) as word}
               <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                 <td class="px-6 py-4"> {word} </td>
-                <td class="px-6 py-4 arabic-font-{$wordTypeStore} text-xl md:text-2xl"> {wordData[word - 1].arabic} </td>
+                <td class="px-6 py-4 arabic-font-{$__wordType} text-xl md:text-2xl"> {wordData[word - 1].arabic} </td>
                 <td class="px-6 py-4"> {wordData[word - 1].translation} </td>
                 <td class="px-6 py-4"> {wordData[word - 1].transliteration} </td>
                 <td class="px-6 py-4"> <Link to="/{wordData[word - 1].key.split(':')[0]}/{wordData[word - 1].key.split(':')[1]}">{wordData[word - 1].key.split(":")[0]}:{wordData[word - 1].key.split(":")[1]}</Link> </td>

diff --git a/src/components/ui/BottomNavbar.svelte b/src/components/ui/BottomNavbar.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Link } from "svelte-routing";
-  import { audioSettingsStore } from "$utils/stores";
-  import { chapterNumberStore, displayTypeStore, currentPageStore, bottomNavbarVisibleStore } from "$utils/stores";
+  import { __audioSettings } from "$utils/stores";
+  import { __chapterNumber, __displayType, __currentPage, __bottomNavbarVisible } from "$utils/stores";
   import { resetAudioSettings, showAudioModal, playAudio } from "$utils/audioController";
   import { quranMetaData } from "$data/quranMeta";
   import { disabledElement } from "$utils/commonStyles";
@@ -16,33 +16,33 @@
   import Eye from "$svgs/Eye.svelte";
 
   function audioController() {
-    if ($audioSettingsStore.isPlaying === true) {
+    if ($__audioSettings.isPlaying === true) {
       resetAudioSettings();
     } else {
       playAudio({
         type: "verse",
-        chapter: $chapterNumberStore,
+        chapter: $__chapterNumber,
         verse: 1,
         firstToPlay: +document.querySelector("#verses-block :nth-child(1)").id.split(":")[1], // first verse of page
-        lastToPlay: quranMetaData[$chapterNumberStore].verses,
+        lastToPlay: quranMetaData[$__chapterNumber].verses,
         timesToRepeat: 1,
         delay: 0,
       });
     }
   }
 </script>
 
-<div class={$currentPageStore === "chapter" ? "block" : "hidden"}>
-  <div class="{$bottomNavbarVisibleStore === true ? 'block' : 'hidden'} fixed z-20 w-full h-16 max-w-xs md:max-w-lg shadow-md -translate-x-1/2 bg-white backdrop-filter backdrop-blur-lg bg-opacity-50 border border-gray-200 rounded-full bottom-4 left-1/2 grayscale">
+<div class={$__currentPage === "chapter" ? "block" : "hidden"}>
+  <div class="{$__bottomNavbarVisible === true ? 'block' : 'hidden'} fixed z-20 w-full h-16 max-w-xs md:max-w-lg shadow-md -translate-x-1/2 bg-white backdrop-filter backdrop-blur-lg bg-opacity-50 border border-gray-200 rounded-full bottom-4 left-1/2 grayscale">
     <div class="grid h-full max-w-lg grid-cols-5 mx-auto">
       <!-- Previous Chapter -->
-      <Link to="/{$chapterNumberStore - 1}" class="{$chapterNumberStore === 1 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
+      <Link to="/{$__chapterNumber - 1}" class="{$__chapterNumber === 1 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <ChevronLeft />
         <span class="sr-only">Previous Chapter</span>
       </Link>
 
       <!-- 2nd icon -->
-      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $displayTypeStore === 5 ? 1 : $displayTypeStore + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 relative inline-flex items-center hover:bg-gray-200 dark:hover:bg-gray-800 group">
+      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $__displayType === 5 ? 1 : $__displayType + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 relative inline-flex items-center hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <Eye />
         <span class="sr-only">Display Type</span>
       </button>
@@ -51,13 +51,13 @@
       <!-- play/pause button -->
       <div class="flex items-center justify-center">
         <button type="button" on:click={() => audioController()} class="inline-flex flex-col items-center justify-center w-10 h-10 font-medium bg-[#ebebeb] hover:bg-gray-200 rounded-full group focus:ring-2 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
-          <svelte:component this={$audioSettingsStore.isPlaying === true ? Pause : PlaySolid} />
+          <svelte:component this={$__audioSettings.isPlaying === true ? Pause : PlaySolid} />
 
           <span class="sr-only">Play/Pause</span>
 
           <!-- show badge when a verse is playing -->
-          {#if $audioSettingsStore.isPlaying === true && $audioSettingsStore.audioType === "verse"}
-            <div class="absolute inline-flex items-center justify-center z-30 text-xs px-2 text-white bg-gray-500 border-2 border-white rounded-md -top-3 dark:border-gray-900">{$audioSettingsStore.playingKey}</div>
+          {#if $__audioSettings.isPlaying === true && $__audioSettings.audioType === "verse"}
+            <div class="absolute inline-flex items-center justify-center z-30 text-xs px-2 text-white bg-gray-500 border-2 border-white rounded-md -top-3 dark:border-gray-900">{$__audioSettings.playingKey}</div>
           {/if}
         </button>
       </div>
@@ -69,7 +69,7 @@
       </button>
 
       <!-- Next Chapter -->
-      <Link to="/{$chapterNumberStore + 1}" class="{$chapterNumberStore === 114 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
+      <Link to="/{$__chapterNumber + 1}" class="{$__chapterNumber === 114 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <ChevronRight />
         <span class="sr-only">Next Chapter</span>
       </Link>