fix: 添加 zIndex() 方法，处理目录菜单被页面其他 fixed 或者 sticky 定位的 DOM 元素覆盖

.github/workflows/npm-publish.yml

@@ -48,4 +48,4 @@ jobs:
       - name: Publish Package
         run: npm emit
         env:
-          NODE_AUTH_TOKEN: ${{secrets.CODECOV_TOKEN}}
+          NODE_AUTH_TOKEN: ${{secrets.PUBLISH_TOKEN}}

api/less/example.less

@@ -19,8 +19,12 @@
 }
 
 .header {
+  position: sticky;
+  z-index: 3;
+  top: 0;
   margin: 0 auto;
   border-bottom: 1px solid @border_color;
+  background-color: @white;
   text-align: center;
   overflow: hidden;
 }
@@ -66,6 +70,7 @@
 
     .outline-chapters {
       width: 240px;
+      background-color: @white;
     }
   }
 }

api/pug/properties/drawer.pug

@@ -25,6 +25,7 @@ section.section
             this.$main = null
             this.$footer = null
             this.$overlay = null
+            this.zIndex = 0
 
             // 省略其它逻辑...
           }
@@ -95,6 +96,4 @@ section.section
            afterDestroy: null
         }
 
-        Drawer.zIndex = 2000
-
         export default Drawer

docs/fixed.html

@@ -340,6 +340,7 @@
     this.$main = null
     this.$footer = null
     this.$overlay = null
+    this.zIndex = 0
 
     // 省略其它逻辑...
   }
@@ -410,8 +411,6 @@
    afterDestroy: null
 }
 
-Drawer.zIndex = 2000
-
 export default Drawer</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="property-toolbar">toolbar</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Object</dd></dl><p>Toolbar 模块：独立的固定定位的工具栏模块；</p><pre class="section__pre"><code class="section__code">// 仅展示 API 中对外公开的方法和属性
 class Toolbar extends Base {
   constructor(options) {

docs/index.html

@@ -283,6 +283,7 @@
     this.$main = null
     this.$footer = null
     this.$overlay = null
+    this.zIndex = 0
 
     // 省略其它逻辑...
   }
@@ -353,8 +354,6 @@
    afterDestroy: null
 }
 
-Drawer.zIndex = 2000
-
 export default Drawer</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="property-toolbar">toolbar</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Object</dd></dl><p>Toolbar 模块：独立的固定定位的工具栏模块；</p><pre class="section__pre"><code class="section__code">// 仅展示 API 中对外公开的方法和属性
 class Toolbar extends Base {
   constructor(options) {

docs/relative.html

@@ -340,6 +340,7 @@
     this.$main = null
     this.$footer = null
     this.$overlay = null
+    this.zIndex = 0
 
     // 省略其它逻辑...
   }
@@ -410,8 +411,6 @@
    afterDestroy: null
 }
 
-Drawer.zIndex = 2000
-
 export default Drawer</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="property-toolbar">toolbar</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Object</dd></dl><p>Toolbar 模块：独立的固定定位的工具栏模块；</p><pre class="section__pre"><code class="section__code">// 仅展示 API 中对外公开的方法和属性
 class Toolbar extends Base {
   constructor(options) {

docs/sticky.html

@@ -340,6 +340,7 @@
     this.$main = null
     this.$footer = null
     this.$overlay = null
+    this.zIndex = 0
 
     // 省略其它逻辑...
   }
@@ -410,8 +411,6 @@
    afterDestroy: null
 }
 
-Drawer.zIndex = 2000
-
 export default Drawer</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3" id="property-toolbar">toolbar</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Object</dd></dl><p>Toolbar 模块：独立的固定定位的工具栏模块；</p><pre class="section__pre"><code class="section__code">// 仅展示 API 中对外公开的方法和属性
 class Toolbar extends Base {
   constructor(options) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yaohaixiao/outline.js",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "description": "outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具。",
   "main": "outline.min.js",
   "scripts": {
@@ -36,9 +36,6 @@
     "url": "https://github.com/yaohaixiao/outline.js/issues"
   },
   "homepage": "https://github.com/yaohaixiao/outline.js#readme",
-  "dependencies": {
-    "@yaohaixiao/subscribers.js": "^1.1.0"
-  },
   "devDependencies": {
     "@babel/core": "^7.21.0",
     "@babel/preset-env": "^7.14.8",
@@ -48,6 +45,7 @@
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-terser": "^0.4.3",
     "@yaohaixiao/delegate.js": "^2.0.0",
+    "@yaohaixiao/subscribers.js": "^1.1.0",
     "babel-jest": "^29.5.0",
     "commitlint": "^17.4.4",
     "conventional-changelog-cli": "^2.2.2",

src/drawer.js

@@ -9,6 +9,7 @@ import on from './utils/event/on'
 import off from './utils/event/off'
 
 import { paintSvgSprites, createSvgIcon } from './utils/icons'
+import zIndex from './zIndex'
 
 class Drawer extends Base {
   constructor(options) {
@@ -25,6 +26,7 @@ class Drawer extends Base {
     this.$main = null
     this.$footer = null
     this.$overlay = null
+    this.zIndex = 0
 
     if (options) {
       this.initialize(options)
@@ -79,7 +81,7 @@ class Drawer extends Base {
     let $overlay
 
     paintSvgSprites()
-    Drawer.zIndex += 1
+    this.zIndex = zIndex()
 
     $title = createElement(
       'h2',
@@ -229,6 +231,7 @@ class Drawer extends Base {
   destroy() {
     const afterDestroy = this.attr('afterDestroy')
     const beforeDestroy = this.attr('beforeDestroy')
+    let index = this.zIndex
 
     if (isFunction(beforeDestroy)) {
       beforeDestroy.call(this)
@@ -248,7 +251,9 @@ class Drawer extends Base {
     this.$footer = null
     this.$overlay = null
 
-    Drawer.zIndex -= 1
+    index -= 1
+    zIndex(index)
+    this.zIndex = 0
 
     if (isFunction(afterDestroy)) {
       afterDestroy.call(this)
@@ -310,6 +315,4 @@ Drawer.DEFAULTS = {
   afterDestroy: null
 }
 
-Drawer.zIndex = 2000
-
 export default Drawer

src/theme/chapters.less

@@ -1,10 +1,7 @@
+@import './variables';
 @import './colors';
 @import './ellipsis';
 
-:root {
-  --outline-sticky-height: 100%;
-}
-
 .outline-chapters {
   position: relative;
   z-index: 1;
@@ -106,6 +103,9 @@
     display: flex;
     flex-wrap: nowrap;
     flex-direction: column;
+    position: sticky;
+    z-index: var(--outline-zIndex);
+    top: 0;
     overflow: hidden;
 
     .outline-chapters {
@@ -126,14 +126,10 @@
   }
 
   &_sticky {
-    position: sticky;
-    top: 0;
     max-height: var(--outline-sticky-height);
   }
 
   &_fixed {
-    position: fixed;
-    top: 0;
     max-height: 100%;
   }
 

src/theme/drawer.less

@@ -1,3 +1,4 @@
+@import './variables';
 @import './colors';
 @import './shadow';
 
@@ -345,7 +346,7 @@
 
   &_opened {
     visibility: visible;
-    z-index: 4;
+    z-index: var(--outline-zIndex);
 
     &.outline-drawer {
       position: fixed;

src/theme/outline.less

@@ -1,3 +1,4 @@
+@import './variables';
 @import './colors';
 @import './ellipsis';
 @import './shadow';

src/theme/variables.less

@@ -0,0 +1,4 @@
+:root {
+  --outline-sticky-height: 100%;
+  --outline-zIndex: 2000;
+}

src/utils/event/index.js

@@ -1,11 +1,13 @@
-import off from './off'
+import at from './at'
 import on from './on'
+import off from './off'
 import purge from './purgeElement'
 import stop from './stop'
 
 export default {
-  off,
+  at,
   on,
+  off,
   purge,
   stop
 }

src/utils/lang/index.js

@@ -3,8 +3,11 @@ import easeInQuad from './easeInQuad'
 import extend from './extend'
 import groupBy from './groupBy'
 import guid from './guid'
+import hasOwn from './hasOwn'
+import later from './later'
 import stripTags from './stripTags'
 import toString from './toString'
+import toTree from './toTree'
 import trim from './trim'
 
 export default {
@@ -13,7 +16,10 @@ export default {
   extend,
   groupBy,
   guid,
+  hasOwn,
+  later,
   stripTags,
   toString,
+  toTree,
   trim
 }

src/utils/lang/toString.js

@@ -1,10 +1,12 @@
-const toString = Object.prototype.toString
-
 /**
  * Object 对象原型上的 toString 方法
  * ========================================================================
  * @method toString
  * @param {*} val
  * @returns {string}
  */
+const toString = (val) => {
+  return Object.prototype.toString.apply(val)
+}
+
 export default toString

src/utils/types/isArray.js

@@ -11,7 +11,7 @@ const isArray = (o) => {
   if (Array.isArray) {
     return Array.isArray(o)
   } else {
-    return toString.apply(o) === '[object Array]'
+    return toString(o) === '[object Array]'
   }
 }
 

src/utils/types/isFragment.js

@@ -3,8 +3,7 @@ import isObject from './isObject'
 
 const isFragment = (fragment) => {
   return !!(
-    isObject(fragment) &&
-    toString.call(fragment) === '[object DocumentFragment]'
+    isObject(fragment) && toString(fragment) === '[object DocumentFragment]'
   )
 }
 

src/utils/types/isFunction.js

@@ -8,9 +8,7 @@ import toString from '../lang/toString'
  * @returns {boolean} 'val' 是 Function 类型返回 true，否则返回 false
  */
 const isFunction = (val) => {
-  return (
-    typeof val === 'function' || toString.apply(val) === '[object Function]'
-  )
+  return typeof val === 'function' || toString(val) === '[object Function]'
 }
 
 export default isFunction

src/utils/types/isHTMLCollection.js

@@ -2,7 +2,7 @@ import toString from '../lang/toString'
 import isObject from './isObject'
 
 const isHTMLCollection = (el) => {
-  return !!(isObject(el) && toString.apply(el) === '[object NodeList]')
+  return !!(isObject(el) && toString(el) === '[object NodeList]')
 }
 
 export default isHTMLCollection

src/utils/types/isObject.js

@@ -10,7 +10,7 @@ import isFunction from '../types/isFunction'
  */
 const isObject = (o) => {
   return (
-    (toString.apply(o) === '[object Object]' ||
+    (toString(o) === '[object Object]' ||
       typeof o === 'object' ||
       isFunction(o)) &&
     o !== null

src/utils/types/isTextNode.js

@@ -4,8 +4,7 @@ import isObject from './isObject'
 const isTextNode = (el) => {
   return !!(
     isObject(el) &&
-    (toString.apply(el) === '[object Text]' ||
-      (el.tagName && el.nodeType === 3))
+    (toString(el) === '[object Text]' || (el.tagName && el.nodeType === 3))
   )
 }