refactor: small rewrite for search filter

ACC-Hymns · Sep 20, 2024 · 21a42dd · 21a42dd
1 parent cf8e712
commit 21a42dd
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "tone": "^14.7.77",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
+    "vue3-click-away": "^1.2.4",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

diff --git a/src/main.ts b/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 
 import App from "./App.vue";
+import VueClickAway from "vue3-click-away";
 import router from "./router";
 
 import { defineCustomElements } from "@ionic/pwa-elements/loader";
@@ -15,6 +16,7 @@ import "@/scripts/dark_mode";
 const app = createApp(App);
 
 app.use(createPinia());
+app.use(VueClickAway);
 app.use(router);
 
 // set webview settings

diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
@@ -111,27 +111,16 @@ onMounted(async () => {
     restoreScrollPosition(route.fullPath);
 });
 
-const filter_content = ref<Element>();
+const isOpen = ref<bool>(false);
 
-var isOpen = false;
-
-function resetModals() {
-    if (filter_content.value?.classList.contains("dropdown-content-active") && !isOpen) filter_content.value?.classList.remove("dropdown-content-active");
-    isOpen = false;
+function resetDropdown() {
+    isOpen.value = false;
 }
-
-function showDropdown() {
-    if (filter_content.value?.classList.contains("dropdown-content-active")) {
-        filter_content.value?.classList.remove("dropdown-content-active");
-        isOpen = false;
-    } else {
-        isOpen = true;
-        filter_content.value?.classList.add("dropdown-content-active");
-    }
+function toggleDropdown() {
+    isOpen.value = !isOpen.value;
 }
 
 let book_filters = ref<Element[]>([]);
-let all_hymnals_filter = ref<Element>();
 
 function filterBook(short_book_name: string) {
     isOpen = true;
@@ -167,7 +156,6 @@ function calculateIconFilter(color: string) {
 </script>
 
 <template>
-    <div @click="resetModals" class="blocker">
         <h1 class="pagetitle">Search</h1>
         <div class="search-bar">
             <input v-model="search_query" placeholder="Search for a song title or number..." aria-label="Search through site content" />
@@ -181,13 +169,13 @@ function calculateIconFilter(color: string) {
             </button>
         </div>
         <div class="filters">
-            <a @click="showDropdown()" class="dropdown">
+            <a @click="toggleDropdown()" v-click-away="resetDropdown" class="dropdown">
                 <p class="dropdown-text">Filters</p>
                 <img class="ionicon filter-icon" src="/assets/filter-outline.svg" />
             </a>
-            <div class="dropdown-content" ref="filter_content">
+            <div class="dropdown-content" :class="isOpen ? 'dropdown-content-active' : ''">
                 <a>
-                    <div class="dropdown-content-top-item" ref="all_hymnals_filter" @click="clearFilters">
+                    <div class="dropdown-content-top-item" @click="clearFilters">
                         <img class="ionicon checkmark-icon" :src="checkmarked(search_params.bookFilters.length == 0)" />
                         <div class="dropdown-content-text">All Hymnals</div>
                     </div>
@@ -222,7 +210,6 @@ function calculateIconFilter(color: string) {
                 <div class="song__title">Show more</div>
             </div>
         </div>
-    </div>
 
     <nav class="nav">
         <RouterLink to="/" class="nav__link">

diff --git a/src/views/SettingsAboutAttributionsView.vue b/src/views/SettingsAboutAttributionsView.vue
@@ -45,6 +45,10 @@ const { back } = useNavigator();
             <h3 class="release">Vue Draggable</h3>
             <h5 class="releaseDate" style="color: rgb(200, 200, 200)">{{ clean_version(dependencies.vuedraggable) }}</h5>
         </a>
+        <a href="https://github.com/SortableJS/vue.draggable.next/" class="attribution">
+            <h3 class="release">Vue3 Click Away</h3>
+            <h5 class="releaseDate" style="color: rgb(200, 200, 200)">{{ clean_version(dependencies["vue3-click-away"]) }}</h5>
+        </a>
         <a href="https://github.com/notoriousb1t/polymorph" class="attribution">
             <h3 class="release">Polymorph.js</h3>
             <h5 class="releaseDate" style="color: rgb(200, 200, 200)">{{ clean_version(dependencies["polymorph-js"]) }}</h5>

diff --git a/src/views/SettingsConnect.vue b/src/views/SettingsConnect.vue
@@ -384,7 +384,7 @@ function get_lock_icon() {
                     <img class="entrypoint ionicon" src="/assets/chevron-forward-outline.svg" />
                 </a>
                 <a @click="bibleReading = true" class="settings-option">
-                    <span>Set Biblie Reading</span>
+                    <span>Set Bible Reading</span>
                     <img class="entrypoint ionicon" src="/assets/chevron-forward-outline.svg" />
                 </a>
                 <a @click="clear" class="settings-option">