From 27824fe2dd2fd6bb297dc23e185cc072d20b75cc Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 20 Dec 2024 00:15:41 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Rewrite=20<SiteTopBanner/>=20wit?=
 =?UTF-8?q?h=20<Transition/>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/_transitions.scss             |  19 +++
 src/components/SiteTopBanner.vue             | 171 +++++++++++--------
 src/components/SiteTopBannerForChristmas.vue |  15 ++
 src/layouts/default.vue                      |   2 +-
 src/layouts/index.vue                        |   2 +-
 5 files changed, 140 insertions(+), 69 deletions(-)
 create mode 100644 src/components/SiteTopBannerForChristmas.vue

diff --git a/src/assets/css/_transitions.scss b/src/assets/css/_transitions.scss
index 72a8bf06c..0bf1b6c91 100644
--- a/src/assets/css/_transitions.scss
+++ b/src/assets/css/_transitions.scss
@@ -18,3 +18,22 @@
     transition-timing-function: ease-in;
   }
 }
+
+.scroll-up- {
+  &enter {
+    transform: translateY(100%);
+  }
+  &leave-to {
+    transform: translateY(-100%);
+  }
+
+  &enter-active,
+  &leave-active {
+    transition-property: opacity, transform !important;
+    transition-duration: 2s;
+  }
+  &enter-active,
+  &leave-active {
+    transition-timing-function: cubic-bezier(0.7, 0, 0.25, 1);
+  }
+}
diff --git a/src/components/SiteTopBanner.vue b/src/components/SiteTopBanner.vue
index c2c25197c..4cd3748bf 100644
--- a/src/components/SiteTopBanner.vue
+++ b/src/components/SiteTopBanner.vue
@@ -1,93 +1,130 @@
 <template>
-  <div
-    v-if="showBanner"
-    class="z-[500] w-full h-[40px] overflow-hidden flex items-center justify-center text-white bg-like-green relative"
-  >
-    <div class="h-[24px] overflow-hidden relative">
-      <div class="scrolling-content">
-        <div
-          v-for="(message, index) in repeatedMessages"
-          :key="index"
-          class="h-[24px] text-[14px] flex items-center justify-center"
-        >
-          {{ message }}
-        </div>
-      </div>
-    </div>
+  <Transition @enter="handleBannerEnter" @leave="handleBannerLeave">
+    <div
+      v-if="isShowBanner"
+      :class="[
+        'relative',
+        'top-0',
+        'z-[500]',
+
+        'flex',
+        'items-center',
+        'justify-center',
 
-    <ButtonV2
-      preset="plain"
-      size="small"
-      class="absolute translate-y-[-50%] right-[12px] top-1/2"
-      @click="closeBanner"
+        'overflow-hidden',
+
+        'w-full',
+        'h-[40px]',
+
+        'text-white',
+        'bg-like-green',
+      ]"
     >
-      <IconClose class="transform scale-75 laptop:scale-100" />
-    </ButtonV2>
-  </div>
+      <Transition name="scroll-up">
+        <div
+          :key="activeMessage"
+          :class="[
+            'absolute',
+            'inset-0',
+
+            'flex',
+            'justify-center',
+            'items-center',
+
+            'text-[14px]',
+            'text-center',
+          ]"
+          v-text="activeMessage"
+        />
+      </Transition>
+
+      <ButtonV2
+        preset="plain"
+        size="small"
+        class="absolute translate-y-[-50%] right-[12px] top-1/2"
+        @click="closeBanner"
+      >
+        <IconClose class="transform scale-75 laptop:scale-100" />
+      </ButtonV2>
+    </div>
+  </Transition>
 </template>
 
 <script>
+const LAST_CLOSED_AT_KEY = 'site-top-banner-last-closed-at';
+
 export default {
+  name: 'SiteTopBanner',
+  props: {
+    messages: {
+      type: Array,
+      default: () => [],
+    },
+    interval: {
+      type: Number,
+      default: 4000,
+    },
+  },
   data() {
     return {
-      messages: [
-        this.$t('christmas_campaign_text_1'),
-        this.$t('christmas_campaign_text_2'),
-        this.$t('christmas_campaign_text_3'),
-      ],
-      showBanner: true,
+      isShowBanner: false,
+      activeMessageIndex: 0,
     };
   },
   computed: {
-    repeatedMessages() {
-      return this.messages.concat(this.messages);
+    activeMessage() {
+      return this.messages[this.activeMessageIndex];
     },
   },
-  created() {
-    this.checkBannerStatus();
+  mounted() {
+    this.showBannerIfPossible();
+  },
+  beforeDestroy() {
+    this.clearInterval();
   },
   methods: {
+    handleBannerEnter(el, done) {
+      this.$gsap.gsap.from(el, {
+        height: 0,
+        duration: 0.5,
+        onComplete: done,
+      });
+    },
+    handleBannerLeave(el, done) {
+      this.$gsap.gsap.to(el, {
+        height: 0,
+        duration: 0.5,
+        onComplete: done,
+      });
+    },
+    nextMessage() {
+      this.activeMessageIndex =
+        (this.activeMessageIndex + 1) % this.messages.length;
+    },
+    clearInterval() {
+      if (this.messageInterval) {
+        clearInterval(this.messageInterval);
+        this.messageInterval = null;
+      }
+    },
     closeBanner() {
-      this.showBanner = false;
+      this.isShowBanner = false;
       try {
-        window.localStorage.setItem('bannerClosedTime', Date.now());
-      } catch (error) {}
+        window.localStorage.setItem(LAST_CLOSED_AT_KEY, Date.now());
+      } finally {
+        this.clearInterval();
+      }
     },
-    checkBannerStatus() {
+    showBannerIfPossible() {
       try {
-        const lastClosedTime = window.localStorage.getItem('bannerClosedTime');
+        const lastClosedTime = window.localStorage.getItem(LAST_CLOSED_AT_KEY);
         const oneDay = 24 * 60 * 60 * 1000;
-        if (lastClosedTime && Date.now() - lastClosedTime < oneDay) {
-          this.showBanner = false;
+        if (!lastClosedTime || Date.now() - lastClosedTime >= oneDay) {
+          this.isShowBanner = true;
+          this.messageInterval = setInterval(this.nextMessage, this.interval);
         }
-      } catch (error) {}
+      } catch {}
     },
   },
 };
 </script>
-
-<style scoped>
-.scrolling-content {
-  display: flex;
-  flex-direction: column;
-  animation: scrollUp 12s cubic-bezier(0.7, 0, 0.25, 1) infinite;
-}
-
-@keyframes scrollUp {
-  0%,
-  16.666% {
-    transform: translateY(0%);
-  }
-  33.333%,
-  50% {
-    transform: translateY(-16.666%);
-  }
-  66.666%,
-  83.333% {
-    transform: translateY(-33.333%);
-  }
-  100% {
-    transform: translateY(-50%);
-  }
-}
-</style>
diff --git a/src/components/SiteTopBannerForChristmas.vue b/src/components/SiteTopBannerForChristmas.vue
new file mode 100644
index 000000000..7a3f24e94
--- /dev/null
+++ b/src/components/SiteTopBannerForChristmas.vue
@@ -0,0 +1,15 @@
+<template>
+  <SiteTopBanner
+    :messages="[
+      $t('christmas_campaign_text_1'),
+      $t('christmas_campaign_text_2'),
+      $t('christmas_campaign_text_3'),
+    ]"
+  />
+</template>
+
+<script>
+export default {
+  name: 'SiteTopBannerForChristmas',
+};
+</script>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 46271d6fe..d35d3fbdf 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-stretch min-h-screen">
-    <SiteTopBanner />
+    <SiteTopBannerForChristmas />
     <!-- <AlertBanner
       v-if="getRouteBaseName($route) !== 'nft-class-classId' && $route.params.classId !== alertBannerNFTClassId"
       :primary-button-text="$t('alert_banner_actions_purchase')"
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 391e636d3..03f690ae3 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -3,7 +3,7 @@
     <AlertBanner v-if="uiIsChainUpgrading">{{
       $t('notice_chain_upgrading')
     }}</AlertBanner>
-    <SiteTopBanner />
+    <SiteTopBannerForChristmas />
 
     <nuxt
       :class="[