From e1f90756f133c381d453ad2218e0b298c30b6b78 Mon Sep 17 00:00:00 2001
From: Benny Guo <bennyxguo6@gmail.com>
Date: Mon, 21 Aug 2023 17:44:34 +0800
Subject: [PATCH] fix: color style for header when switching mode and sticky
 issue

resolve #321 #319
---
 src/components/Dropdown/src/DropdownItem.vue |   2 +-
 src/components/Header/src/Controls.vue       |   9 +-
 src/components/Header/src/Header.vue         |  45 ++----
 src/components/Header/src/Logo.vue           |  14 +-
 src/components/Header/src/Navigation.vue     |  23 ++-
 src/components/Navigator.vue                 |  48 +++---
 src/components/ProgressBar.vue               |  19 ++-
 src/components/Sticky.vue                    | 149 +++++++++++--------
 src/stores/navigator.ts                      |   6 +-
 src/utils/index.ts                           |  10 ++
 10 files changed, 191 insertions(+), 134 deletions(-)

diff --git a/src/components/Dropdown/src/DropdownItem.vue b/src/components/Dropdown/src/DropdownItem.vue
index 6ea6ed20..d4198c81 100644
--- a/src/components/Dropdown/src/DropdownItem.vue
+++ b/src/components/Dropdown/src/DropdownItem.vue
@@ -25,7 +25,7 @@ export default defineComponent({
       handleClick,
       itemClasses: computed(() => {
         return {
-          'block cursor-pointer hover:bg-ob-trans my-1 px-4 py-1 font-medium hover:text-ob-bright':
+          'text-ob-bright block cursor-pointer hover:bg-ob-trans my-1 px-4 py-1 font-medium text-invert hover:text-ob-bright':
             true,
           active: !!props.active
         }
diff --git a/src/components/Header/src/Controls.vue b/src/components/Header/src/Controls.vue
index 47673900..84c6e391 100644
--- a/src/components/Header/src/Controls.vue
+++ b/src/components/Header/src/Controls.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="header-controls ml-auto top-0 right-0 flex flex-row items-center text-white invert-text"
+    class="header-controls ml-auto top-0 right-0 flex flex-row items-center text-white"
     @keydown.k="handleOpenModal(true)"
     tabindex="0"
   >
     <div :class="leftControlClasses">
       <span
-        class="icon-control flex items-center"
+        class="icon-control flex items-center text-invert"
         data-dia="search"
         @click="handleOpenModal(true)"
       >
@@ -23,7 +23,10 @@
         @command="handleClick"
         :value="currentLocale"
       >
-        <span class="icon-control flex items-center" data-dia="language">
+        <span
+          class="icon-control flex items-center text-invert"
+          data-dia="language"
+        >
           <SvgIcon
             icon-class="translate"
             fill="currentColor"
diff --git a/src/components/Header/src/Header.vue b/src/components/Header/src/Header.vue
index e66c5bed..9a307445 100644
--- a/src/components/Header/src/Header.vue
+++ b/src/components/Header/src/Header.vue
@@ -17,9 +17,17 @@
 </template>
 
 <script lang="ts">
+/**
+ * Lodash package is imported through CDN.
+ *
+ * For version 4.17.21
+ */
+declare const _: any
+
 import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
 import { Logo, Navigation, Controls, Notification } from '../index'
 import Sticky from '@/components/Sticky.vue'
+import { useNavigatorStore } from '@/stores/navigator'
 
 export default defineComponent({
   name: 'Header',
@@ -34,44 +42,20 @@ export default defineComponent({
     msg: String
   },
   setup() {
+    const navigatorStore = useNavigatorStore()
     const active = ref<boolean>(false)
-    const progress = ref(0)
-    let scrollingHandler = 0
 
     const handleActiveState = (value: boolean) => {
       active.value = value
     }
 
-    const scrollHandler = () => {
-      clearTimeout(scrollingHandler)
-
-      setTimeout(() => {
-        progress.value = Number(
-          (
-            (window.scrollY /
-              (document.documentElement.scrollHeight - window.innerHeight)) *
-            100
-          ).toFixed(0)
-        )
-      }, 0)
-    }
-
-    onMounted(() => {
-      document.addEventListener('scroll', scrollHandler)
-    })
-
-    onUnmounted(() => {
-      document.removeEventListener('scroll', scrollHandler)
-    })
-
     return {
       containerClasses: computed(() => ({
         'header-container': true,
         'header-active': active.value
       })),
+      progress: computed(() => navigatorStore.progress),
       handleActiveState,
-      scrollHandler,
-      progress,
       active
     }
   }
@@ -83,7 +67,7 @@ export default defineComponent({
   &.header-active {
     @apply bg-ob-deep-800 shadow-xl text-ob-bright;
   }
-  transition: 0.6s all ease;
+  transition: 0.5s all ease;
   .site-header {
     @apply relative flex z-50 py-4;
     margin: 0 auto;
@@ -91,11 +75,8 @@ export default defineComponent({
 }
 
 .header-active {
-  .logo-image {
-    @apply scale-125;
-  }
-  .invert-text {
-    @apply text-ob-bright;
+  .text-invert {
+    @apply text-ob-bright hover:opacity-60;
   }
 }
 </style>
diff --git a/src/components/Header/src/Logo.vue b/src/components/Header/src/Logo.vue
index 6c45c006..5e3d019c 100644
--- a/src/components/Header/src/Logo.vue
+++ b/src/components/Header/src/Logo.vue
@@ -15,19 +15,19 @@
 
     <div class="flex flex-col justify-center">
       <span
-        class="invert-text flex text-xl leading-tight text-white font-extrabold"
+        class="text-invert flex text-xl leading-tight text-white font-extrabold"
         v-if="themeConfig.site.author"
       >
         {{ themeConfig.site.author }}
       </span>
       <span
         v-else
-        class="invert-text flex text-xl leading-tight text-white font-extrabold"
+        class="text-invert flex text-xl leading-tight text-white font-extrabold"
       >
         LOADING
       </span>
       <span
-        class="invert-text font-extrabold text-[0.45rem] leading-tight uppercase text-white"
+        class="text-invert font-extrabold text-[0.45rem] leading-tight uppercase text-white"
       >
         {{ themeConfig.site.nick || 'BLOG' }}
       </span>
@@ -58,7 +58,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .header-logo {
   &:hover .logo-image {
     @apply scale-125;
@@ -69,4 +69,10 @@ export default defineComponent({
   @apply w-8 h-8;
   transition: 0.3s all ease;
 }
+
+.header-active {
+  .logo-image {
+    @apply scale-125;
+  }
+}
 </style>
diff --git a/src/components/Header/src/Navigation.vue b/src/components/Header/src/Navigation.vue
index 078989e4..4b67f673 100644
--- a/src/components/Header/src/Navigation.vue
+++ b/src/components/Header/src/Navigation.vue
@@ -1,15 +1,13 @@
 <template>
   <nav class="items-center flex-1 hidden lg:flex">
-    <ul
-      class="flex flex-row items-center list-none px-6 text-white invert-text"
-    >
+    <ul class="flex flex-row items-center list-none px-6 text-white">
       <li
         class="not-italic font-medium text-xs h-full relative flex flex-col items-center justify-center cursor-pointer text-center py-2 px-2"
         v-for="route in routes"
         :key="route.path"
       >
         <div
-          class="nav-link invert-text text-sm block px-1.5 py-0.5 rounded-md relative uppercase cursor-pointer"
+          class="nav-link text-sm block px-1.5 py-0.5 rounded-md relative uppercase cursor-pointer"
           @click="pushPage(route.path)"
           v-if="route.children && route.children.length === 0"
           :data-menu="route.name"
@@ -111,16 +109,16 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .nav-link {
-  @apply hover:text-ob-bright font-extrabold;
+  @apply hover:text-white font-extrabold;
   &:hover {
     &:before {
       @apply opacity-60 bg-gray-800;
     }
   }
   &:before {
-    @apply absolute rounded-lg opacity-0 transition bg-ob-deep-800 z-40;
+    @apply absolute rounded-lg opacity-0 bg-transparent transition z-40;
     content: '';
     top: -4px;
     left: -4px;
@@ -128,4 +126,15 @@ export default defineComponent({
     height: calc(100% + 8px);
   }
 }
+
+.header-active {
+  .nav-link {
+    @apply text-ob-bright;
+    &:hover {
+      &:before {
+        @apply bg-ob-trans;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index 9f5079b9..874aefeb 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -94,6 +94,13 @@
 </template>
 
 <script lang="ts">
+/**
+ * Lodash package is imported through CDN.
+ *
+ * For version 4.17.21
+ */
+declare const _: any
+
 import { useAppStore } from '@/stores/app'
 import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -122,26 +129,26 @@ export default defineComponent({
     let menuReopenHandler = 0
     let needReopen = ref(false)
 
-    const scrollHandler = () => {
-      clearTimeout(scrollingHandler)
-      clearTimeout(menuReopenHandler)
-
-      scrolling.value = true
-      scrollingHandler = window.setTimeout(() => {
-        scrolling.value = false
-      }, 700)
+    const scrollHandler = _.throttle(
+      () => {
+        clearTimeout(scrollingHandler)
+        clearTimeout(menuReopenHandler)
 
-      if (needReopen.value || navigatorStore.openNavigator === true) {
-        if (navigatorStore.openNavigator === true)
-          navigatorStore.setOpenNavigator(false)
-        needReopen.value = true
-        menuReopenHandler = window.setTimeout(() => {
-          navigatorStore.openNavigator = true
-          needReopen.value = false
+        scrolling.value = true
+        scrollingHandler = window.setTimeout(() => {
+          scrolling.value = false
         }, 700)
-      }
 
-      setTimeout(() => {
+        if (needReopen.value || navigatorStore.openNavigator === true) {
+          if (navigatorStore.openNavigator === true)
+            navigatorStore.setOpenNavigator(false)
+          needReopen.value = true
+          menuReopenHandler = window.setTimeout(() => {
+            navigatorStore.openNavigator = true
+            needReopen.value = false
+          }, 700)
+        }
+
         progress.value = Number(
           (
             (window.scrollY /
@@ -149,8 +156,10 @@ export default defineComponent({
             100
           ).toFixed(0)
         )
-      }, 0)
-    }
+      },
+      100,
+      { trailing: true, leading: true }
+    )
 
     const handleNavigatorToggle = () => {
       const timeNow = new Date().getTime()
@@ -188,6 +197,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
+      scrollHandler()
       document.addEventListener('scroll', scrollHandler)
     })
 
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 0fb99ae1..c0878a55 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -7,6 +7,13 @@
 </template>
 
 <script lang="ts">
+/**
+ * Lodash package is imported through CDN.
+ *
+ * For version 4.17.21
+ */
+declare const _: any
+
 import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
 
 export default defineComponent({
@@ -14,15 +21,19 @@ export default defineComponent({
   setup() {
     const progress = ref(0)
 
-    const scrollHandler = () =>
-      setTimeout(() => {
+    const scrollHandler = _.throttle(
+      () => {
         progress.value =
-          (window.pageYOffset /
+          (window.scrollY /
             (document.documentElement.scrollHeight - window.innerHeight)) *
           100
-      }, 16)
+      },
+      100,
+      { trailing: true, leading: true }
+    )
 
     onMounted(() => {
+      scrollHandler()
       document.addEventListener('scroll', scrollHandler)
     })
 
diff --git a/src/components/Sticky.vue b/src/components/Sticky.vue
index a71ed2c7..729ae232 100644
--- a/src/components/Sticky.vue
+++ b/src/components/Sticky.vue
@@ -9,6 +9,14 @@
 </template>
 
 <script lang="ts">
+/**
+ * Lodash package is imported through CDN.
+ *
+ * For version 4.17.21
+ */
+declare const _: any
+
+import { useNavigatorStore } from '@/stores/navigator'
 import { StyleValue, computed, defineComponent, ref, watch } from 'vue'
 
 export default defineComponent({
@@ -53,6 +61,7 @@ export default defineComponent({
       newTop = ref(0),
       top = ref(0),
       isBottom = ref(false)
+    const navigatorStore = useNavigatorStore()
 
     const styles = computed(
       () =>
@@ -71,6 +80,7 @@ export default defineComponent({
     )
 
     return {
+      navigatorStore,
       styles,
       active,
       position,
@@ -84,15 +94,16 @@ export default defineComponent({
   },
   mounted() {
     this.height = this.$el.getBoundingClientRect().height
-    window.addEventListener('scroll', this.handleScroll)
-    window.addEventListener('resize', this.handleResize)
+    this.updateScroll()
+    document.addEventListener('scroll', this.handleScroll)
+    document.addEventListener('resize', this.handleResize)
   },
   activated() {
-    this.handleScroll()
+    this.updateScroll()
   },
   unmounted() {
-    window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleResize)
+    document.removeEventListener('scroll', this.handleScroll)
+    document.removeEventListener('resize', this.handleResize)
   },
   methods: {
     sticky(top: number, position: any) {
@@ -123,71 +134,83 @@ export default defineComponent({
     },
     handleScroll() {
       /**
-       * setTimeout is added due to the warning of
+       * throttle is added due to the warning of
        * "This site appears to use a scroll-linked
        * positioning effect. This may not work well
        * with asynchronous panning; " (On FireFox)
        */
-      setTimeout(() => {
-        const documentHeight = document.documentElement.scrollHeight
-        const width = this.$el.getBoundingClientRect().width
-        const height = this.$el.getBoundingClientRect().height
-
-        // Use `Dynamic Element Class` when your content will change
-        // which will affect the height of your fixed container
-        // this will update the height of your fixed container
-        if (this.dynamicElClass !== '') {
-          const dynamicEl = this.$el.querySelector(this.dynamicElClass)
-          this.height = dynamicEl.getBoundingClientRect().height || height
-        }
+      _.throttle(this.updateScroll, 100, { trailing: true, leading: true })()
+    },
+    updateProgress() {
+      const progress = Number(
+        (
+          (window.scrollY /
+            (document.documentElement.scrollHeight - window.innerHeight)) *
+          100
+        ).toFixed(0)
+      )
+
+      this.navigatorStore.updateProgress(progress)
+    },
+    updateScroll() {
+      this.updateProgress()
+
+      const documentHeight = document.documentElement.scrollHeight
+      const width = this.$el.getBoundingClientRect().width
+      const height = this.$el.getBoundingClientRect().height
+
+      // Use `Dynamic Element Class` when your content will change
+      // which will affect the height of your fixed container
+      // this will update the height of your fixed container
+      if (this.dynamicElClass !== '') {
+        const dynamicEl = this.$el.querySelector(this.dynamicElClass)
+        this.height = dynamicEl.getBoundingClientRect().height || height
+      }
 
-        const scrollTop = window.scrollY
-        this.width = width || 'auto'
-        const offsetTop = this.$el.getBoundingClientRect().top
-
-        // When the fixed container reaches the ending element container
-        // Fix position property will be turned off, and the fixed container
-        // will stop right before the ending element.
-        const endingEl =
-          this.endingElId !== ''
-            ? document.getElementById(this.endingElId)
-            : null
-
-        const endingElSpacing = documentHeight - (endingEl?.offsetTop ?? 0)
-
-        const wrapperEl = document.getElementById('App-Wrapper')
-
-        const containerBottomSpacing = parseInt(
-          window.getComputedStyle(wrapperEl || document.documentElement)
-            .paddingBottom,
-          10
-        )
-
-        const endingPos =
-          endingEl && endingEl instanceof HTMLElement
-            ? documentHeight -
-              scrollTop -
-              height -
-              this.stickyTop -
-              this.stickyBottom -
-              endingElSpacing -
-              containerBottomSpacing
-            : documentHeight
-
-        if (offsetTop < this.stickyTop) {
-          this.active = false
-          if (endingPos <= 0) {
-            this.isBottom = true
-            this.sticky(-1, 'absolute')
-          } else {
-            this.isBottom = false
-            this.sticky(this.stickyTop, 'fixed')
-          }
-          return
+      const scrollTop = window.scrollY
+      this.width = width || 'auto'
+      const offsetTop = this.$el.getBoundingClientRect().top
+
+      // When the fixed container reaches the ending element container
+      // Fix position property will be turned off, and the fixed container
+      // will stop right before the ending element.
+      const endingEl =
+        this.endingElId !== '' ? document.getElementById(this.endingElId) : null
+
+      const endingElSpacing = documentHeight - (endingEl?.offsetTop ?? 0)
+
+      const wrapperEl = document.getElementById('App-Wrapper')
+
+      const containerBottomSpacing = parseInt(
+        window.getComputedStyle(wrapperEl || document.documentElement)
+          .paddingBottom,
+        10
+      )
+
+      const endingPos =
+        endingEl && endingEl instanceof HTMLElement
+          ? documentHeight -
+            scrollTop -
+            height -
+            this.stickyTop -
+            this.stickyBottom -
+            endingElSpacing -
+            containerBottomSpacing
+          : documentHeight
+
+      if (offsetTop < this.stickyTop) {
+        this.active = false
+        if (endingPos <= 0) {
+          this.isBottom = true
+          this.sticky(-1, 'absolute')
+        } else {
+          this.isBottom = false
+          this.sticky(this.stickyTop, 'fixed')
         }
+        return
+      }
 
-        this.handleReset()
-      }, 16)
+      this.handleReset()
     },
     handleResize() {
       if (this.isSticky) {
diff --git a/src/stores/navigator.ts b/src/stores/navigator.ts
index ab2baf89..3be7de8e 100644
--- a/src/stores/navigator.ts
+++ b/src/stores/navigator.ts
@@ -7,7 +7,8 @@ export const useNavigatorStore = defineStore({
   state: () => ({
     openMenu: false,
     openNavigator: false,
-    isDone: false
+    isDone: false,
+    progress: 0
   }),
   getters: {},
   actions: {
@@ -23,6 +24,9 @@ export const useNavigatorStore = defineStore({
     },
     setOpenNavigator(status: boolean) {
       this.openNavigator = status
+    },
+    updateProgress(progress: number) {
+      this.progress = progress
     }
   }
 })
diff --git a/src/utils/index.ts b/src/utils/index.ts
index da5851a0..999cd06a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -164,3 +164,13 @@ export function shuffleArray<T = any>(array: T[]): T[] {
   }
   return array
 }
+
+export function throttle(func: () => void, timeFrame: number) {
+  let time = Number(new Date())
+  return function () {
+    if (time + timeFrame - Date.now() < 0) {
+      func()
+      time = Date.now()
+    }
+  }
+}