update scrollable element

src/assets/script/utils/scroll.ts

@@ -0,0 +1,21 @@
+import {onMounted, ref} from "vue";
+import type {Ref} from "vue";
+
+export function registerScrollableComponent(component: Ref<HTMLElement | null>) {
+  const start = ref<number>(NaN);
+
+  return onMounted(() => {
+    if (component.value === null) return;
+    component.value.addEventListener('touchstart', (e) => {
+      start.value = e.touches[0].clientY;
+    })
+    component.value.addEventListener('touchmove', (e) => {
+      e.preventDefault();
+      if (component.value === null) return;
+      const current = e.touches[0].clientY;
+      const height = current - start.value;
+      start.value = current;
+      component.value.scrollTop = component.value.scrollTop - height;
+    })
+  });
+}

src/assets/script/utils/service.ts

@@ -2,7 +2,7 @@
 import { useRegisterSW } from "virtual:pwa-register/vue";
 import { ref, watch } from "vue";
 
-export const version = "1.11.0";
+export const version = "1.11.1";
 
 export const updater = ref<boolean>(false);
 

src/components/ToolBox.vue

@@ -12,6 +12,7 @@ import CardContainer from "@/components/CardContainer.vue";
 import Tool from "@/components/compositions/Tool.vue";
 import Cover from "@/components/compositions/Cover.vue";
 import {set} from "@/assets/script/engine";
+import {registerScrollableComponent} from "@/assets/script/utils/scroll";
 
 const { t } = useI18n();
 const props = defineProps<{
@@ -24,22 +25,8 @@ const setting = ref<boolean>(false);
 const popupEl = ref<HTMLElement | null>(null);
 const popupIdx = ref<number>(0);
 const element = ref<HTMLElement | null>(null);
-const start = ref<number>(NaN);
-
-onMounted(() => {
-  if (element.value === null) return;
-  element.value.addEventListener('touchstart', (e) => {
-    start.value = e.touches[0].clientY;
-  })
-  element.value.addEventListener('touchmove', (e) => {
-    e.preventDefault();
-    if (element.value === null) return;
-    const current = e.touches[0].clientY;
-    const height = current - start.value;
-    start.value = current;
-    element.value.scrollTop = element.value.scrollTop - height;
-  })
-})
+
+registerScrollableComponent(element);
 
 window.addEventListener('contextmenu', (e: MouseEvent) => {
   if (!props.focus && (!setting.value)) {

src/components/cards/GithubCard.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import {data, update} from "@/assets/script/card/github";
 import Star from "@/components/icons/star.vue";
+import {registerScrollableComponent} from "@/assets/script/utils/scroll";
+import {ref} from "vue";
 
+const element = ref<HTMLElement | null>(null);
+registerScrollableComponent(element);
 update();
 </script>
 
@@ -12,7 +16,7 @@ update();
       <span style="flex-grow: 1" />
       <span class="github-explore" @click="update">Explore</span>
     </div>
-    <div class="github-content">
+    <div class="github-content" ref="element">
       <template v-for="(repo, idx) in data" :key="idx">
         <div class="github-repo">
           <a class="github-header" :href="repo.url" target="_blank">

src/components/compositions/Window.vue

@@ -1,30 +1,15 @@
 <script setup lang="ts">
 import Close from "@/components/icons/close.vue";
 import {onMounted, ref} from "vue";
+import {registerScrollableComponent} from "@/assets/script/utils/scroll";
 
 const props = defineProps<{
   title: string,
   modelValue: boolean,
 }>();
 const emit = defineEmits(['update:modelValue']);
 const window = ref<HTMLElement | null>(null);
-
-const start = ref<number>(NaN);
-
-onMounted(() => {
-  if (window.value === null) return;
-  window.value.addEventListener('touchstart', (e) => {
-    start.value = e.touches[0].clientY;
-  })
-  window.value.addEventListener('touchmove', (e) => {
-    e.preventDefault();
-    if (window.value === null) return;
-    const current = e.touches[0].clientY;
-    const height = current - start.value;
-    start.value = current;
-    window.value.scrollTop = window.value.scrollTop - height;
-  })
-})
+registerScrollableComponent(window);
 </script>
 
 <template>