feat: active tool category tab when scroll

XPoet · Mar 8, 2024 · d095039 · d095039
1 parent f48d6bd
commit d095039
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/layout/_template/tools-nav.ejs b/layout/_template/tools-nav.ejs
@@ -1,10 +1,11 @@
+<% const btoaStr = (str) => btoa(encodeURIComponent(str)).trim().replaceAll('=', '') %>
 <div class="tools-nav-box border-box">
     <ul class="tools-nav-list">
         <% for (let i = 0; i < theme.source_data.tools.length; i++) { %>
             <% const tool = theme.source_data.tools[i] %>
-            <% const anchor_id = tool.category + i %>
+            <% const anchor_id = btoaStr(tool.category) + i %>
             <% if (tool?.category) { %>
-                <li class="tool-nav-category text-ellipsis border-box <%= i === 0 ? 'active' : '' %>"
+                <li class="tool-nav-category text-ellipsis border-box <%= anchor_id %> <%= i === 0 ? 'active' : '' %>"
                     data-anchor="<%= anchor_id %>"
                 >
                     <%= tool.category %>
@@ -15,7 +16,7 @@
     <ul class="tool-item-list border-box">
         <% for (let i = 0; i < theme.source_data.tools.length; i++) { %>
             <% const tool = theme.source_data.tools[i] %>
-            <% const anchor_id = tool.category + i %>
+            <% const anchor_id = btoaStr(tool.category) + i %>
             <% if (tool?.category) { %>
                 <li class="tool-category-name text-ellipsis border-box" id="<%= anchor_id %>">
                     <span class="category-name text-ellipsis"><%= tool.category %></span>

diff --git a/source/js/page/tools-page.js b/source/js/page/tools-page.js
@@ -1,18 +1,18 @@
 /* global KEEP */
 
 function toolsPageHandle() {
-  const isHideHeader = KEEP.theme_config?.scroll?.hide_header
-
   const toolsNavBox = document.querySelector('.tools-nav-box')
 
   if (!toolsNavBox) {
     return
   }
 
+  const toolItemList = toolsNavBox.querySelector('.tool-item-list')
+  const toolItemDoms = toolItemList.querySelectorAll('.tool-item')
+  const toolCategoryAnchorDoms = toolItemList.querySelectorAll('.tool-category-name')
+  const toolNavList = toolsNavBox.querySelectorAll('.tools-nav-list .tool-nav-category')
+
   const toolItemHandle = () => {
-    const toolItemList = toolsNavBox.querySelector('.tool-item-list')
-    const toolTypeNameDoms = toolItemList.querySelectorAll('.tool-category-name')
-    const toolItemDoms = toolItemList.querySelectorAll('.tool-item')
     const toolsCount = toolItemDoms.length
     let columns = 2
 
@@ -23,7 +23,7 @@ function toolsPageHandle() {
     }
 
     toolItemList.style.gridTemplateColumns = `repeat(${columns}, 1fr)`
-    toolTypeNameDoms.forEach((ltd) => {
+    toolCategoryAnchorDoms.forEach((ltd) => {
       ltd.style.gridColumn = `span ${columns}`
 
       let folded = false
@@ -50,8 +50,6 @@ function toolsPageHandle() {
   }
   toolItemHandle()
 
-  const toolNavList = toolsNavBox.querySelectorAll('.tools-nav-list .tool-nav-category')
-
   const clearToolNavActive = () => {
     toolNavList.forEach((tn) => tn.classList.remove('active'))
   }
@@ -64,6 +62,24 @@ function toolsPageHandle() {
         tn.classList.add('active')
       })
     })
+
+    const toolCategoryAnchorScrollTopList = [...toolCategoryAnchorDoms].map(
+      (x) => x.getBoundingClientRect().top
+    )
+    let headerHeight = KEEP.utils.headerWrapperDom.getBoundingClientRect().height
+    if (KEEP.utils.isHideHeader) {
+      headerHeight = 0
+    }
+
+    window.addEventListener('scroll', () => {
+      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+      toolCategoryAnchorScrollTopList.forEach((st, idx) => {
+        if (scrollTop + headerHeight > st) {
+          clearToolNavActive()
+          toolNavList[idx].classList.add('active')
+        }
+      })
+    })
   }
 
   toolNavHandle()