From e704198437fb589ec8c954d12700d2a1f911522c Mon Sep 17 00:00:00 2001
From: Zéro~Informatique
Date: Sat, 3 Sep 2022 04:41:03 +0200
Subject: viewer: refactoring for tag and sort dropdowns

---
 viewer/src/components/LdDropdown.vue              | 92 ++++++++++++++++++++++
 viewer/src/views/MainLayout.vue                   |  1 +
 viewer/src/views/layout/left/LayoutTagInput.vue   | 93 +++++++++--------------
 viewer/src/views/layout/top/LayoutCommandSort.vue | 60 ++++-----------
 4 files changed, 142 insertions(+), 104 deletions(-)
 create mode 100644 viewer/src/components/LdDropdown.vue

(limited to 'viewer')

diff --git a/viewer/src/components/LdDropdown.vue b/viewer/src/components/LdDropdown.vue
new file mode 100644
index 0000000..2ab3252
--- /dev/null
+++ b/viewer/src/components/LdDropdown.vue
@@ -0,0 +1,92 @@
+<template>
+  <div style="position:relative;">
+    <Transition name="fade">
+      <div
+        v-if="model"
+        ref="dropdown"
+        class="scrollbar"
+        :class="$style.dropdown"
+        v-bind="attrs"
+      >
+        <div
+          v-for="(option,idx) in props.list"
+          :key="listKey ? option[props.listKey] : idx"
+          :tabindex="props.tabindexRoot + idx"
+          @click="emit('select', option)"
+          @keypress.enter.space="emit('select', option)"
+        >
+          <slot
+            name="option"
+            :option="option"
+          />
+        </div>
+        <slot
+          v-if="!props.list.length"
+          name="empty"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside, onKeyStroke, useVModel } from '@vueuse/core';
+import { ref, useAttrs, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  // Vue 3 currently won't allow generics in props
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  list: { type: Array<any>, required: true },
+  listKey: { type: [String, Number], default: null },
+  tabindexRoot: { type: Number, required: true },
+});
+const emit = defineEmits(['update:modelValue', 'select', 'opening', 'closing']);
+const model = useVModel(props, 'modelValue', emit);
+
+const attrs = useAttrs();
+
+const dropdown = ref();
+
+watch(() => model.value, value => {
+  if (value) emit('opening');
+  else emit('closing');
+});
+
+onClickOutside(dropdown, closeDropdown);
+onKeyStroke('Escape', closeDropdown);
+
+function closeDropdown() {
+  setTimeout(() => (model.value = false));
+}
+</script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  z-index: 99;
+  width: $layout-left;
+  color: $input-color;
+  background-color: $dropdown-item-color;
+  padding: 4px 0px;
+  > div {
+    padding: 4px 0;
+    margin: 2px; // For the focus border
+    cursor: pointer;
+    &:hover {
+      background-color: $dropdown-item-hover-color;
+    }
+    &:focus {
+      outline: solid 1px $button-active-color;
+    }
+  }
+}
+  </style>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 9c84116..d8b3300 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -103,6 +103,7 @@ function validateSpashScreen() {
   overflow: hidden;
   touch-action: none;
   background-color: $content-bgcolor;
+  margin: 0;
 }
 .layout {
   position: fixed;
diff --git a/viewer/src/views/layout/left/LayoutTagInput.vue b/viewer/src/views/layout/left/LayoutTagInput.vue
index 7ad3ed0..a37c546 100644
--- a/viewer/src/views/layout/left/LayoutTagInput.vue
+++ b/viewer/src/views/layout/left/LayoutTagInput.vue
@@ -27,42 +27,38 @@
     @keypress.enter="inputEnter"
     @keydown.backspace="inputBackspace"
   />
-  <div style="position:relative;">
-    <Transition name="fade">
+  <LdDropdown
+    ref="dropdown"
+    v-model="showDropdown"
+    :list="filteredTags"
+    list-key="tagfiltered"
+    :tabindex-root="51"
+    :class="$style.dropdown"
+    :style="dropdownStyle"
+    @select="addTag"
+    @opening="emit('opening')"
+    @closing="cleanSearch(); emit('closing');"
+  >
+    <template #option="{option}:{option:TagSearch}">
+      <div v-text="option.display" />
+      <div v-text="option.items.length" />
+    </template>
+    <template #empty>
       <div
-        v-if="openDropdown"
-        ref="dropdown"
-        class="scrollbar"
-        :class="$style.dropdown"
-        :style="dropdownStyle"
-      >
-        <div
-          v-for="(tag,idx) in filteredTags"
-          :key="tag.tagfiltered"
-          :tabindex="51 + idx"
-          @click="addTag(tag)"
-          @keypress.enter.space="addTag(tag)"
-        >
-          <div v-text="tag.display" />
-          <div v-text="tag.items.length" />
-        </div>
-        <div
-          v-if="!filteredTags.length"
-          class="disaled"
-          :class="$style.nomatch"
-          v-text="t('tagInput.nomatch')"
-        />
-      </div>
-    </Transition>
-  </div>
+        :class="$style.nomatch"
+        v-text="t('tagInput.nomatch')"
+      />
+    </template>
+  </LdDropdown>
 </template>
 
 <script setup lang="ts">
 import { TagSearch } from '@/@types/tag';
+import LdDropdown from '@/components/LdDropdown.vue';
 import LdInput from '@/components/LdInput.vue';
 import { useIndexFactory } from '@/services/indexFactory';
 import { useGalleryStore } from '@/store/galleryStore';
-import { computedEager, onClickOutside, onKeyStroke, useElementBounding, useFocus, useVModel } from '@vueuse/core';
+import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core';
 import { computed, ref, StyleValue, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -77,19 +73,15 @@ const galeryStore = useGalleryStore();
 const indexFactory = useIndexFactory();
 
 const search = ref('');
-const openDropdown = computedEager<boolean>(() => !!search.value);
-watchEffect(() => {
-  if (openDropdown.value) emit('opening');
-  else emit('closing');
-});
+const showDropdown = ref(false);
+
+watchEffect(() => (showDropdown.value = !!search.value));
 
 // ---
 
 const dropdown = ref();
 const { top } = useElementBounding(dropdown);
 const dropdownStyle = computedEager<StyleValue>(() => ({ height: `calc(100vh - 8px - ${top.value}px)` }));
-onClickOutside(dropdown, closeDropdown);
-onKeyStroke('Escape', closeDropdown);
 
 const input = ref();
 const { focused } = useFocus(input);
@@ -111,16 +103,16 @@ function addTag(tag?: TagSearch) {
   const toPush = tag ?? filteredTags.value[0];
   if (!toPush) return;
   model.value.push(toPush);
-  closeDropdown();
+  cleanSearch();
 }
 function inputEnter() {
   if (search.value) addTag();
   else emit('search');
 }
 function inputBackspace() {
-  !openDropdown.value && model.value.pop();
+  !showDropdown.value && model.value.pop();
 }
-function closeDropdown() {
+function cleanSearch() {
   search.value = '';
   focused.value = true;
 }
@@ -130,35 +122,20 @@ function closeDropdown() {
 @import "~@/assets/scss/theme";
 
 .dropdown {
-  position: absolute;
-  left: 0;
-  z-index: 10;
-  width: $layout-left;
-  color: $input-color;
-  background-color: $dropdown-item-color;
-  padding: 4px 0px;
   > div {
     display: flex;
     justify-content: space-between;
-    padding: 4px 0;
-    margin: 2px; // For the focus border
-    cursor: pointer;
     > div {
       padding: 0 4px;
     }
     > div:last-child {
       color: $text-light;
     }
-    &:hover {
-      background-color: $dropdown-item-hover-color;
-    }
-    &:focus {
-      outline: solid 1px $button-active-color;
-    }
-    &.nomatch {
-      color: $text-light;
-      justify-content: center;
-    }
+  }
+  .nomatch {
+    color: $disabled-color;
+    justify-content: center;
+    cursor: default;
   }
 }
 </style>
diff --git a/viewer/src/views/layout/top/LayoutCommandSort.vue b/viewer/src/views/layout/top/LayoutCommandSort.vue
index bb9744e..8336621 100644
--- a/viewer/src/views/layout/top/LayoutCommandSort.vue
+++ b/viewer/src/views/layout/top/LayoutCommandSort.vue
@@ -22,41 +22,35 @@
   <LdLink
     :title="t('command.sort.title')"
     :tabindex="props.tabindex"
-    @click="openDropdown"
+    @click="showDropdown=!showDropdown"
   >
     <fa-icon
       :icon="faSortAmountDown"
       size="lg"
     />
     <teleport to="body">
-      <Transition name="fade">
-        <div
-          v-if="showDropdown"
-          ref="dropdown"
-          :class="$style.dropdown"
-        >
-          <div
-            v-for="(sort,idx) in itemComparator.ITEM_SORTS"
-            :key="sort.name"
-            :tabindex="props.tabindex + idx + 1"
-            @click="selectedSort=sort"
-            @keypress.enter.space="selectedSort=sort"
-          >
-            <fa-icon :icon="sort.name == selectedSort.name ? faDotCircle : faCircle" />
-            <span v-text="sort.text" />
-          </div>
-        </div>
-      </Transition>
+      <LdDropdown
+        v-model="showDropdown"
+        :list="itemComparator.ITEM_SORTS"
+        :tabindex-root="props.tabindex + 1"
+        :class="$style.dropdown"
+        @select="(sort: ItemSort) => selectedSort=sort"
+      >
+        <template #option="{option}:{option:ItemSort}">
+          <fa-icon :icon="option.name == selectedSort.name ? faDotCircle : faCircle" />
+          <span v-text="option.text" />
+        </template>
+      </LdDropdown>
     </teleport>
   </LdLink>
 </template>
 
 <script setup lang="ts">
+import LdDropdown from '@/components/LdDropdown.vue';
 import LdLink from '@/components/LdLink.vue';
 import { ItemSort, useItemComparator } from '@/services/itemComparator';
 import { useUiStore } from '@/store/uiStore';
 import { faCircle, faDotCircle, faSortAmountDown } from '@fortawesome/free-solid-svg-icons';
-import { onClickOutside, onKeyStroke } from '@vueuse/core';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -74,44 +68,18 @@ const selectedSort = computed({
 });
 
 const showDropdown = ref(false);
-
-const dropdown = ref();
-onClickOutside(dropdown, closeDropdown);
-onKeyStroke('Escape', closeDropdown);
-
-function openDropdown() {
-  showDropdown.value = true;
-}
-function closeDropdown() {
-  setTimeout(() => (showDropdown.value = false));
-}
 </script>
 
 <style lang="scss" module>
 @import "~@/assets/scss/theme";
 
 .dropdown {
-  position: absolute;
   top: $layout-top;
-  left: 0;
-  z-index: 10;
-  width: $layout-left;
-  color: $input-color;
-  background-color: $dropdown-item-color;
-  padding: 8px 0px;
-  cursor: pointer;
   > div {
     padding: 8px 14px;
-    margin: 2px; // For the focus border
     > span {
       padding-left: 12px;
     }
-    &:hover {
-      background-color: $dropdown-item-hover-color;
-    }
-    &:focus {
-      outline: solid 1px $button-active-color;
-    }
   }
 }
 </style>
-- 
cgit v1.2.3