added function to auto-import bookmarks from the existing site, desig…

…n updates
marwan · Mar 27, 2024 · 56ec15b · 56ec15b
1 parent 33ba92b
commit 56ec15b
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 16 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -8,6 +8,8 @@
   import "$utils/userSettings";
   import { currentPageStore } from "$utils/stores";
 
+  import { checkOldBookmarks } from "$utils/checkOldBookmarks";
+
   // check and set user settings from URL parameters
   import "$utils/checkURLParameters";
 
@@ -29,6 +31,9 @@
   import BottomPlayer from "$ui/BottomPlayer.svelte";
   import InitialSetupModal from "$modals/InitialSetupModal.svelte";
   import AudioModal from "$modals/AudioModal.svelte";
+
+  // check old bookmarks for v3 update
+  checkOldBookmarks();
 </script>
 
 <Router>

diff --git a/src/components/ui/Navbar.svelte b/src/components/ui/Navbar.svelte
@@ -34,6 +34,8 @@
   let lastReadPage, lastReadJuz;
 
   $: {
+    // window.HSStaticMethods.autoInit();
+
     try {
       lastReadPage = document.getElementById($lastReadStore).getAttribute("data-page");
       lastReadJuz = document.getElementById($lastReadStore).getAttribute("data-juz");

diff --git a/src/components/verses/VersesButtons.svelte b/src/components/verses/VersesButtons.svelte
@@ -8,6 +8,7 @@
   import { showAudioModal } from "$utils/audioController";
   import { currentPageStore, userSettingsStore, audioSettingsStore } from "$utils/stores";
   import { updateSettings } from "$utils/updateSettings";
+  import { disabledElement } from "$utils/commonStyles";
 
   // icons
   import Bookmark from "$svgs/Bookmark.svelte";
@@ -20,6 +21,18 @@
   $: userBookmarks = JSON.parse($userSettingsStore).userBookmarks;
 
   const buttonClasses = "inline-flex items-center justify-center w-10 h-10 text-gray-400 transition-colors duration-150 rounded-lg focus:shadow-outline bg-[#ebebeb] hover:bg-gray-200 print:hidden dark:bg-slate-800 dark:hover:bg-slate-700";
+
+  let verseDropdownVisible = false;
+
+  // // hide all other dropdown and show the current one
+  // function verseDropdownToggle() {
+  //   document.querySelectorAll(".verse-dropdown").forEach((element) => {
+  //     element.classList.remove("block");
+  //     element.classList.add("hidden");
+  //   });
+
+  //   verseDropdownVisible = !verseDropdownVisible;
+  // }
 </script>
 
 <div class="verseButtons flex flex-row space-x-4 text-gray-400 text-xs grayscale">
@@ -32,7 +45,26 @@
     <svelte:component this={$audioSettingsStore.isPlaying === true && $audioSettingsStore.playingKey === key ? Pause : Play} />
   </button>
 
-  <!-- <button class={buttonClasses}>
-    <DotsVertical />
-  </button> -->
+  <!-- verses option dropdown -->
+  <!-- <div class="relative inline-block text-left">
+    <button data-dropdown-toggle="dropdown" class={buttonClasses} on:click={() => verseDropdownToggle()}>
+      <DotsVertical />
+    </button>
+
+    <div class="{verseDropdownVisible === true ? 'block' : 'hidden'} verse-dropdown absolute right-0 z-10 mt-2 min-w-max origin-top-right bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+      <div class="py-2 space-y-4">
+        <ul class=" text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+          <li>
+            <Link to="/morphology/{chapter}:{verse}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Verse Morphology</Link>
+          </li>
+          <li class={disabledElement}>
+            <Link href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Verse Tafseer</Link>
+          </li>
+          <li class={disabledElement}>
+            <Link href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Copy Verse</Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div> -->
 </div>
diff --git a/src/utils/checkOldBookmarks.js b/src/utils/checkOldBookmarks.js
@@ -0,0 +1,14 @@
+import { updateSettings } from "$utils/updateSettings";
+
+// checking if the user have any bookmarks from the old v3 update and transfer them to the new website's local settings
+export function checkOldBookmarks() {
+  let oldBookmarks = localStorage.getItem("bookmarks");
+
+  if (oldBookmarks !== null) {
+    const bookmarks = oldBookmarks.slice(0, -1).split("|");
+
+    bookmarks.forEach((bookmark) => {
+      updateSettings({ type: "userBookmarks", key: bookmark, oldCheck: true });
+    });
+  }
+}
diff --git a/src/utils/updateSettings.js b/src/utils/updateSettings.js
@@ -87,8 +87,14 @@ export function updateSettings(props) {
       const key = props.key;
       let userBookmarks = userSettings["userBookmarks"];
 
+      // for old imports, only push if bookmark doesn't exist
+      if (props.oldCheck === true) {
+        if (userBookmarks.includes(key) === false) userBookmarks.push(key);
+      }
+
+      // for existing bookmarks...
       // if the bookmark (key) already exists, then remove it, else add it
-      userBookmarks.includes(key) ? (userBookmarks = userBookmarks.filter((x) => x !== key)) : userBookmarks.push(key);
+      else userBookmarks.includes(key) ? (userBookmarks = userBookmarks.filter((x) => x !== key)) : userBookmarks.push(key);
 
       // update the bookmarks
       userSettings.userBookmarks = userBookmarks;

diff --git a/src/views/Home.svelte b/src/views/Home.svelte
@@ -32,30 +32,22 @@
     <div class="flex flex-row flex-wrap space-x-1 md:space-x-2 justify-center">
       <!-- Supplications from Quran page -->
       <div id="supplications-link" class="flex justify-center items-center block">
-        <span class={linkStyles}>
-          <Link to="/supplications">Supplications</Link>
-        </span>
+        <Link to="/supplications" class={linkStyles}>Supplications</Link>
       </div>
 
       <!-- bookmarks page -->
       <div id="bookmarks-link" class="flex justify-center items-center block">
-        <span class={linkStyles}>
-          <Link to="/bookmarks">Bookmarks</Link>
-        </span>
+        <Link to="/bookmarks" class={linkStyles}>Bookmarks</Link>
       </div>
 
       <!-- morphology page -->
       <div id="morphology-link" class="flex justify-center items-center block">
-        <span class={linkStyles}>
-          <Link to="/morphology/1:1">Morphology</Link>
-        </span>
+        <Link to="/morphology/1:1" class={linkStyles}>Morphology</Link>
       </div>
 
       <!-- search page -->
       <div id="search-link" class="flex justify-center items-center block">
-        <span class={linkStyles}>
-          <Link to="/search">Search</Link>
-        </span>
+        <Link to="/search" class={linkStyles}>Search</Link>
       </div>
     </div>
   </div>