From 22208d4c68fbc2b6b56a6ee42124db5cedb267b0 Mon Sep 17 00:00:00 2001
From: Natty <natty.sh.git@gmail.com>
Date: Wed, 10 Jan 2024 21:27:03 +0100
Subject: [PATCH] Frontend: Removed the click-anime Vue directive

---
 .../client/src/components/MkLaunchPad.vue     | 11 +-----
 .../client/src/components/MkPostForm.vue      |  1 -
 .../frontend/client/src/components/MkTab.vue  | 39 +++++++++----------
 .../client/src/directives/click-anime.ts      | 31 ---------------
 .../frontend/client/src/directives/index.ts   |  2 -
 .../client/src/pages/gallery/post.vue         |  3 --
 fe_calckey/frontend/client/src/pages/page.vue |  2 -
 .../frontend/client/src/pages/user/home.vue   |  3 --
 fe_calckey/frontend/client/src/style.scss     | 29 --------------
 .../src/ui/_common_/navbar-for-mobile.vue     | 20 ++--------
 .../client/src/ui/_common_/navbar.vue         |  6 ---
 11 files changed, 22 insertions(+), 125 deletions(-)
 delete mode 100644 fe_calckey/frontend/client/src/directives/click-anime.ts

diff --git a/fe_calckey/frontend/client/src/components/MkLaunchPad.vue b/fe_calckey/frontend/client/src/components/MkLaunchPad.vue
index 29d2ecf..a2df843 100644
--- a/fe_calckey/frontend/client/src/components/MkLaunchPad.vue
+++ b/fe_calckey/frontend/client/src/components/MkLaunchPad.vue
@@ -18,7 +18,6 @@
                 <template v-for="item in items">
                     <button
                         v-if="item.action"
-                        v-click-anime
                         class="_button"
                         @click="
                             ($event) => {
@@ -33,12 +32,7 @@
                             ><i class="ph-circle ph-fill"></i
                         ></span>
                     </button>
-                    <MkA
-                        v-else
-                        v-click-anime
-                        :to="item.to"
-                        @click.passive="close()"
-                    >
+                    <MkA v-else :to="item.to" @click.passive="close()">
                         <i class="icon" :class="item.icon"></i>
                         <div class="text">{{ item.text }}</div>
                         <span v-if="item.indicate" class="indicator"
@@ -52,14 +46,11 @@
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
 import MkModal from "@/components/MkModal.vue";
 import { navbarItemDef } from "@/navbar";
-import { instanceName } from "@/config";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { deviceKind } from "@/scripts/device-kind";
-import * as os from "@/os";
 
 const props = withDefaults(
     defineProps<{
diff --git a/fe_calckey/frontend/client/src/components/MkPostForm.vue b/fe_calckey/frontend/client/src/components/MkPostForm.vue
index 6e744f2..491e411 100644
--- a/fe_calckey/frontend/client/src/components/MkPostForm.vue
+++ b/fe_calckey/frontend/client/src/components/MkPostForm.vue
@@ -15,7 +15,6 @@
             </button>
             <button
                 v-if="$props.editId == null"
-                v-click-anime
                 v-tooltip="i18n.ts.switchAccount"
                 class="account _button"
                 @click="openAccountMenu"
diff --git a/fe_calckey/frontend/client/src/components/MkTab.vue b/fe_calckey/frontend/client/src/components/MkTab.vue
index 5191714..fcf367e 100644
--- a/fe_calckey/frontend/client/src/components/MkTab.vue
+++ b/fe_calckey/frontend/client/src/components/MkTab.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, resolveDirective, withDirectives } from "vue";
+import { defineComponent, h } from "vue";
 
 export default defineComponent({
     props: {
@@ -24,27 +24,24 @@ export default defineComponent({
                 role: "tablist",
             },
             options.map((option) =>
-                withDirectives(
-                    h(
-                        "button",
-                        {
-                            class: "_button",
-                            role: "tab",
-                            key: option.key,
-                            "aria-selected":
-                                this.modelValue === option.props?.value
-                                    ? "true"
-                                    : "false",
-                            onClick: () => {
-                                this.$emit(
-                                    "update:modelValue",
-                                    option.props?.value
-                                );
-                            },
+                h(
+                    "button",
+                    {
+                        class: "_button",
+                        role: "tab",
+                        key: option.key,
+                        "aria-selected":
+                            this.modelValue === option.props?.value
+                                ? "true"
+                                : "false",
+                        onClick: () => {
+                            this.$emit(
+                                "update:modelValue",
+                                option.props?.value
+                            );
                         },
-                        option.children
-                    ),
-                    [[resolveDirective("click-anime")]]
+                    },
+                    option.children
                 )
             )
         );
diff --git a/fe_calckey/frontend/client/src/directives/click-anime.ts b/fe_calckey/frontend/client/src/directives/click-anime.ts
deleted file mode 100644
index 9a31351..0000000
--- a/fe_calckey/frontend/client/src/directives/click-anime.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Directive } from "vue";
-import { defaultStore } from "@/store";
-
-export default {
-    mounted(el, binding, vn) {
-        /*
-		if (!defaultStore.state.animation) return;
-
-		el.classList.add('_anime_bounce_standBy');
-
-		el.addEventListener('mousedown', () => {
-			el.classList.add('_anime_bounce_standBy');
-			el.classList.add('_anime_bounce_ready');
-
-			el.addEventListener('mouseleave', () => {
-				el.classList.remove('_anime_bounce_ready');
-			});
-		});
-
-		el.addEventListener('click', () => {
-			el.classList.add('_anime_bounce');
-		});
-
-		el.addEventListener('animationend', () => {
-			el.classList.remove('_anime_bounce_ready');
-			el.classList.remove('_anime_bounce');
-			el.classList.add('_anime_bounce_standBy');
-		});
-		*/
-    },
-} as Directive;
diff --git a/fe_calckey/frontend/client/src/directives/index.ts b/fe_calckey/frontend/client/src/directives/index.ts
index 6bedcaf..fb6e68c 100644
--- a/fe_calckey/frontend/client/src/directives/index.ts
+++ b/fe_calckey/frontend/client/src/directives/index.ts
@@ -8,7 +8,6 @@ import tooltip from "./tooltip";
 import hotkey from "./hotkey";
 import appear from "./appear";
 import anim from "./anim";
-import clickAnime from "./click-anime";
 import panel from "./panel";
 import adaptiveBorder from "./adaptive-border";
 import focus from "./focus";
@@ -23,7 +22,6 @@ export default function (app: App) {
     app.directive("hotkey", hotkey);
     app.directive("appear", appear);
     app.directive("anim", anim);
-    app.directive("click-anime", clickAnime);
     app.directive("panel", panel);
     app.directive("adaptive-border", adaptiveBorder);
     app.directive("focus", focus);
diff --git a/fe_calckey/frontend/client/src/pages/gallery/post.vue b/fe_calckey/frontend/client/src/pages/gallery/post.vue
index 6e40f0a..431b4fc 100644
--- a/fe_calckey/frontend/client/src/pages/gallery/post.vue
+++ b/fe_calckey/frontend/client/src/pages/gallery/post.vue
@@ -60,7 +60,6 @@
                                     <button
                                         v-if="$i && $i.id === post.user.id"
                                         v-tooltip="i18n.ts.edit"
-                                        v-click-anime
                                         class="_button"
                                         @click="edit"
                                     >
@@ -70,7 +69,6 @@
                                     </button>
                                     <button
                                         v-tooltip="i18n.ts.shareWithNote"
-                                        v-click-anime
                                         class="_button"
                                         @click="shareWithNote"
                                     >
@@ -81,7 +79,6 @@
                                     <button
                                         v-if="shareAvailable()"
                                         v-tooltip="i18n.ts.share"
-                                        v-click-anime
                                         class="_button"
                                         @click="share"
                                     >
diff --git a/fe_calckey/frontend/client/src/pages/page.vue b/fe_calckey/frontend/client/src/pages/page.vue
index 851b256..e2a843a 100644
--- a/fe_calckey/frontend/client/src/pages/page.vue
+++ b/fe_calckey/frontend/client/src/pages/page.vue
@@ -120,7 +120,6 @@
                             <div class="other">
                                 <button
                                     v-tooltip="i18n.ts.shareWithNote"
-                                    v-click-anime
                                     class="_button"
                                     @click="shareWithNote"
                                 >
@@ -131,7 +130,6 @@
                                 <button
                                     v-if="shareAvailable()"
                                     v-tooltip="i18n.ts.share"
-                                    v-click-anime
                                     class="_button"
                                     @click="share"
                                 >
diff --git a/fe_calckey/frontend/client/src/pages/user/home.vue b/fe_calckey/frontend/client/src/pages/user/home.vue
index 5831e02..1b5f81a 100644
--- a/fe_calckey/frontend/client/src/pages/user/home.vue
+++ b/fe_calckey/frontend/client/src/pages/user/home.vue
@@ -309,7 +309,6 @@
                         </div>
                         <div class="status">
                             <MkA
-                                v-click-anime
                                 :to="userPage(user)"
                                 :class="{ active: page === 'index' }"
                             >
@@ -317,7 +316,6 @@
                                 <span>{{ i18n.ts.notes }}</span>
                             </MkA>
                             <MkA
-                                v-click-anime
                                 :to="userPage(user, 'following')"
                                 :class="{ active: page === 'following' }"
                             >
@@ -325,7 +323,6 @@
                                 <span>{{ i18n.ts.following }}</span>
                             </MkA>
                             <MkA
-                                v-click-anime
                                 :to="userPage(user, 'followers')"
                                 :class="{ active: page === 'followers' }"
                             >
diff --git a/fe_calckey/frontend/client/src/style.scss b/fe_calckey/frontend/client/src/style.scss
index 6af5837..d57c159 100644
--- a/fe_calckey/frontend/client/src/style.scss
+++ b/fe_calckey/frontend/client/src/style.scss
@@ -735,35 +735,6 @@ hr {
     }
 }
 
-._anime_bounce {
-    will-change: transform;
-    animation: bounce ease 0.7s;
-    animation-iteration-count: 1;
-    transform-origin: 50% 50%;
-}
-._anime_bounce_ready {
-    will-change: transform;
-    transform: scaleX(0.9) scaleY(0.9);
-}
-._anime_bounce_standBy {
-    transition: transform 0.1s ease;
-}
-
-@keyframes bounce {
-    0% {
-        transform: scaleX(0.9) scaleY(0.9);
-    }
-    19% {
-        transform: scaleX(1.1) scaleY(1.1);
-    }
-    48% {
-        transform: scaleX(0.95) scaleY(0.95);
-    }
-    100% {
-        transform: scaleX(1) scaleY(1);
-    }
-}
-
 .ph-xxs {
     font-size: 0.5em;
 }
diff --git a/fe_calckey/frontend/client/src/ui/_common_/navbar-for-mobile.vue b/fe_calckey/frontend/client/src/ui/_common_/navbar-for-mobile.vue
index 0e0fed7..4916ec7 100644
--- a/fe_calckey/frontend/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/fe_calckey/frontend/client/src/ui/_common_/navbar-for-mobile.vue
@@ -8,7 +8,6 @@
                     :style="{ backgroundImage: `url(${$i.bannerUrl})` }"
                 ></div>
                 <button
-                    v-click-anime
                     v-tooltip.noDelay.right="
                         `${i18n.ts.account}: @${$i.username}`
                     "
@@ -23,13 +22,7 @@
                 </button>
             </div>
             <div class="middle">
-                <MkA
-                    v-click-anime
-                    class="item index"
-                    active-class="active"
-                    to="/"
-                    exact
-                >
+                <MkA class="item index" active-class="active" to="/" exact>
                     <i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i
                     ><span class="text">{{ i18n.ts.timeline }}</span>
                 </MkA>
@@ -41,7 +34,6 @@
                             navbarItemDef[item] &&
                             navbarItemDef[item].show !== false
                         "
-                        v-click-anime
                         class="item _button"
                         :class="[item, { active: navbarItemDef[item].active }]"
                         active-class="active"
@@ -69,7 +61,6 @@
                 <div class="divider"></div>
                 <MkA
                     v-if="$i.isAdmin || $i.isModerator"
-                    v-click-anime
                     class="item"
                     active-class="active"
                     to="/admin"
@@ -77,7 +68,7 @@
                     <i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i
                     ><span class="text">{{ i18n.ts.controlPanel }}</span>
                 </MkA>
-                <button v-click-anime class="item _button" @click="more">
+                <button class="item _button" @click="more">
                     <i
                         class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
                     ></i
@@ -86,12 +77,7 @@
                         ><i class="icon ph-circle ph-fill"></i
                     ></span>
                 </button>
-                <MkA
-                    v-click-anime
-                    class="item"
-                    active-class="active"
-                    to="/settings"
-                >
+                <MkA class="item" active-class="active" to="/settings">
                     <i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i
                     ><span class="text">{{ i18n.ts.settings }}</span>
                 </MkA>
diff --git a/fe_calckey/frontend/client/src/ui/_common_/navbar.vue b/fe_calckey/frontend/client/src/ui/_common_/navbar.vue
index e56d5dd..a3f3ea4 100644
--- a/fe_calckey/frontend/client/src/ui/_common_/navbar.vue
+++ b/fe_calckey/frontend/client/src/ui/_common_/navbar.vue
@@ -8,7 +8,6 @@
                     :style="{ backgroundImage: `url(${$i.bannerUrl})` }"
                 ></div>
                 <button
-                    v-click-anime
                     v-tooltip.noDelay.right="
                         `${i18n.ts.account}: @${$i.username}`
                     "
@@ -24,7 +23,6 @@
             </div>
             <nav class="middle">
                 <MkA
-                    v-click-anime
                     v-tooltip.noDelay.right="i18n.ts.timeline"
                     class="item index"
                     active-class="active"
@@ -42,7 +40,6 @@
                             navbarItemDef[item] &&
                             navbarItemDef[item].show !== false
                         "
-                        v-click-anime
                         v-tooltip.noDelay.right="
                             i18n.ts[navbarItemDef[item].title]
                         "
@@ -73,7 +70,6 @@
                 <div class="divider"></div>
                 <MkA
                     v-if="$i.isAdmin || $i.isModerator"
-                    v-click-anime
                     v-tooltip.noDelay.right="i18n.ts.controlPanel"
                     class="item _button"
                     active-class="active"
@@ -92,7 +88,6 @@
                     ><span class="text">{{ i18n.ts.controlPanel }}</span>
                 </MkA>
                 <button
-                    v-click-anime
                     v-tooltip.noDelay.right="i18n.ts.more"
                     class="item _button"
                     @click="more"
@@ -106,7 +101,6 @@
                     ></span>
                 </button>
                 <MkA
-                    v-click-anime
                     v-tooltip.noDelay.right="i18n.ts.settings"
                     class="item _button"
                     active-class="active"