目录锁bug，catalog-item

LeoGray · Sep 26, 2024 · 6e6d8ee · 6e6d8ee
1 parent bc5a6b8
commit 6e6d8ee
Show file tree

Hide file tree

Showing 14 changed files with 326 additions and 278 deletions.
diff --git a/components/OpenWrite.js b/components/OpenWrite.js
@@ -101,14 +101,14 @@ const OpenWrite = () => {
     }
   }, [isLoaded, router])
 
-  // 启动一个监听器，当页面上存在#read-more-wrap对象时，所有的 a .notion-table-of-contents-item 对象都禁止点击
+  // 启动一个监听器，当页面上存在#read-more-wrap对象时，所有的 a .catalog-item 对象都禁止点击
 
   return <></>
 }
 
 // 定义禁用和恢复目录项点击的函数
 const toggleTocItems = disable => {
-  const tocItems = document.querySelectorAll('a.notion-table-of-contents-item')
+  const tocItems = document.querySelectorAll('a.catalog-item')
   tocItems.forEach(item => {
     if (disable) {
       item.style.pointerEvents = 'none'

diff --git a/themes/commerce/components/Catalog.js b/themes/commerce/components/Catalog.js
@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Progress from './Progress'
-import { useGlobal } from '@/lib/global'
 
 /**
  * 目录导航组件
@@ -29,67 +29,77 @@ const Catalog = ({ toc }) => {
   const [activeSection, setActiveSection] = useState(null)
 
   const throttleMs = 200
-  const actionSectionScrollSpy = useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
       }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, throttleMs))
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
 
   // 无目录就直接返回空
   if (!toc || toc.length < 1) {
     return <></>
   }
 
-  return <div className='px-3 py-1'>
-    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='w-full py-3'>
-      <Progress />
-    </div>
-    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full  text-black'>
-        {toc.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          tocIds.push(id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
-            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
-            >
-              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`truncate ${activeSection === id ? 'font-bold text-red-600': ''}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-
+  return (
+    <div className='px-3 py-1'>
+      <div className='w-full'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
+      <div className='w-full py-3'>
+        <Progress />
+      </div>
+      <div
+        className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black'>
+          {toc.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? 'font-bold text-red-600' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
     </div>
-  </div>
+  )
 }
 
 export default Catalog
diff --git a/themes/example/components/Catalog.js b/themes/example/components/Catalog.js
@@ -73,7 +73,7 @@ const Catalog = ({ toc }) => {
                 key={id}
                 href={`#${id}`}
                 className={`notion-table-of-contents-item duration-300 transform font-light
-              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
                 <span
                   style={{
                     display: 'inline-block',

diff --git a/themes/fukasawa/components/Catalog.js b/themes/fukasawa/components/Catalog.js
@@ -74,7 +74,7 @@ const Catalog = ({ toc }) => {
               key={id}
               href={`#${id}`}
               className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400
-        notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+        notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
               <span
                 style={{
                   display: 'inline-block',

diff --git a/themes/gitbook/components/Catalog.js b/themes/gitbook/components/Catalog.js
@@ -83,7 +83,7 @@ const Catalog = ({ post }) => {
                 href={`#${id}`}
                 //  notion-table-of-contents-item
                 className={`${activeSection === id && 'border-green-500 text-green-500 font-bold'} border-l pl-4 block hover:text-green-500 border-lduration-300 transform font-light dark:text-gray-300
-              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
                 <span
                   style={{
                     display: 'inline-block',

diff --git a/themes/heo/components/Catalog.js b/themes/heo/components/Catalog.js
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
-import { useGlobal } from '@/lib/global'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 /**
  * 目录导航组件
@@ -27,64 +27,74 @@ const Catalog = ({ toc }) => {
   // 同步选中目录事件
   const [activeSection, setActiveSection] = useState(null)
 
-  const actionSectionScrollSpy = useCallback(throttle(() => {
-    const sections = document.getElementsByClassName('notion-h')
-    let prevBBox = null
-    let currentSectionId = activeSection
-    for (let i = 0; i < sections.length; ++i) {
-      const section = sections[i]
-      if (!section || !(section instanceof Element)) continue
-      if (!currentSectionId) {
-        currentSectionId = section.getAttribute('data-id')
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
       }
-      const bbox = section.getBoundingClientRect()
-      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
-      const offset = Math.max(150, prevHeight / 4)
-      // GetBoundingClientRect returns values relative to viewport
-      if (bbox.top - offset < 0) {
-        currentSectionId = section.getAttribute('data-id')
-        prevBBox = bbox
-        continue
-      }
-      // No need to continue loop, if last element has been detected
-      break
-    }
-    setActiveSection(currentSectionId)
-    const index = tocIds.indexOf(currentSectionId) || 0
-    tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
-  }, 200))
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, 200)
+  )
 
   // 无目录就直接返回空
   if (!toc || toc.length < 1) {
     return <></>
   }
 
-  return <div className='px-3 py-1 dark:text-white text-black'>
-    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
-    <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full'>
-        {toc?.map((tocItem) => {
-          const id = uuidToId(tocItem.id)
-          tocIds.push(id)
-          return (
-            <a
-              key={id}
-              href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
-            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
-            >
-              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}
-              >
-                {tocItem.text}
-              </span>
-            </a>
-          )
-        })}
-      </nav>
-
+  return (
+    <div className='px-3 py-1 dark:text-white text-black'>
+      <div className='w-full'>
+        <i className='mr-1 fas fa-stream' />
+        {locale.COMMON.TABLE_OF_CONTENTS}
+      </div>
+      <div
+        className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full'>
+          {toc?.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? 'font-bold text-indigo-600' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
     </div>
-  </div>
+  )
 }
 
 export default Catalog
diff --git a/themes/hexo/components/Catalog.js b/themes/hexo/components/Catalog.js
@@ -84,7 +84,7 @@ const Catalog = ({ toc }) => {
                 key={id}
                 href={`#${id}`}
                 className={`${activeSection === id && 'dark:border-white border-indigo-800 text-indigo-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-indigo-800 border-lduration-300 transform dark:text-indigo-400 dark:border-indigo-400
-        notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+        notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
                 <span
                   style={{
                     display: 'inline-block',

diff --git a/themes/magzine/components/Catalog.js b/themes/magzine/components/Catalog.js
@@ -79,7 +79,7 @@ const Catalog = ({ post, toc, className }) => {
                 key={id}
                 href={`#${id}`}
                 className={`${activeSection === id && 'dark:border-white border-gray-800 text-gray-800 font-bold'} hover:font-semibold border-l pl-4 block hover:text-gray-800 border-lduration-300 transform dark:text-gray-400 dark:border-gray-400
-            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
                 <span
                   style={{
                     display: 'inline-block',