fix: 修复 chapters 子组件 reload() 方法的BUG导致的 outline.reload() 失败的问题

yaohaixiao · Jan 17, 2024 · b3b4626 · b3b4626
1 parent 6b79ce3
commit b3b4626
Show file tree

Hide file tree

Showing 30 changed files with 74 additions and 49 deletions.
diff --git a/anchors.min.js b/anchors.min.js
diff --git a/anchors.min.js.map b/anchors.min.js.map
diff --git a/api/pug/examples/fixed.pug b/api/pug/examples/fixed.pug
@@ -64,3 +64,8 @@ html(lang='en')
           console.log('top', top)
         }
         outline = new Outline(Outline.DEFAULTS)
+
+        // outline.reload({
+        //   position: 'relative',
+        //   hasToolbar: true
+        // })
diff --git a/base.js b/base.js
@@ -56,7 +56,7 @@ class Base {
   }
 
   reload(options) {
-    this.destroy().initialize(this.attr(options))
+    this.destroy().initialize(options)
     return this
   }
 

diff --git a/chapters.js b/chapters.js
@@ -27,20 +27,19 @@ class Chapters extends Base {
 
     this.attrs = cloneDeep(Chapters.DEFAULTS)
 
-    this._reset()
+    this._init()
 
-    this.offsetWidth = 0
-    this.playing = false
     this.scrollTimer = null
     this.resizeTimer = null
+    this.observerTimer = null
     this.Observer = null
 
     if (options) {
       this.initialize(options)
     }
   }
 
-  _reset() {
+  _init() {
     this.$el = null
     this.$title = null
     this.$main = null
@@ -52,7 +51,9 @@ class Chapters extends Base {
 
     this.chapters = []
     this.active = 0
+    this.offsetWidth = 0
     this.offsetTop = 0
+    this.playing = false
     this.closed = false
 
     return this
@@ -304,10 +305,17 @@ class Chapters extends Base {
   }
 
   highlight(id) {
+    const $el = this.$el
     const animationCurrent = this.attr('animationCurrent')
-    const $anchor = this.$el.querySelector(`#chapter__anchor-${id}`)
     const ACTIVE = 'outline-chapters_active'
     const HIGHLIGHT = 'outline-chapters_highlight'
+    let $anchor = null
+
+    if (!$el) {
+      return this
+    }
+
+    $anchor = $el.querySelector(`#chapter__anchor-${id}`)
 
     if (!$anchor) {
       return this
@@ -466,9 +474,7 @@ class Chapters extends Base {
     }
 
     this.removeListeners()
-    this.$parentElement.removeChild(this.$el)
-
-    this.attr(Chapters.DEFAULTS)._reset()
+    this.attr(Chapters.DEFAULTS)
 
     if (this.scrollTimer) {
       clearTimeout(this.scrollTimer)
@@ -480,20 +486,27 @@ class Chapters extends Base {
       this.resizeTimer = null
     }
 
-    if (isFunction(afterDestroy)) {
-      afterDestroy.call(this)
+    if (this.observerTimer) {
+      clearTimeout(this.observerTimer)
+      this.observerTimer = null
     }
 
     if (this.Observer) {
       this.Observer = null
     }
 
+    this.$parentElement.removeChild(this.$el)
+    this._init()
+
+    if (isFunction(afterDestroy)) {
+      afterDestroy.call(this)
+    }
+
     return this
   }
 
   onObserver() {
     const selector = this.attr('selector')
-    let timer = null
 
     this.Observer = intersection(
       ($heading) => {
@@ -503,11 +516,11 @@ class Chapters extends Base {
           return false
         }
 
-        if (timer) {
-          clearTimeout(timer)
+        if (this.observerTimer) {
+          clearTimeout(this.observerTimer)
         }
 
-        timer = later(() => {
+        this.observerTimer = later(() => {
           this.highlight(id)
         }, 100)
       },

diff --git a/chapters.min.js b/chapters.min.js
diff --git a/chapters.min.js.map b/chapters.min.js.map
diff --git a/docs/examples/fixed.html b/docs/examples/fixed.html
@@ -1204,4 +1204,9 @@
   defaults.afterScroll = function(top) {
     console.log('top', top)
   }
-  outline = new Outline(Outline.DEFAULTS)</script></body></html>
+  outline = new Outline(Outline.DEFAULTS)
+
+  // outline.reload({
+  //   position: 'relative',
+  //   hasToolbar: true
+  // })</script></body></html>
diff --git a/docs/js/anchors.min.js b/docs/js/anchors.min.js
diff --git a/docs/js/anchors.min.js.map b/docs/js/anchors.min.js.map
diff --git a/docs/js/chapters.min.js b/docs/js/chapters.min.js
diff --git a/docs/js/chapters.min.js.map b/docs/js/chapters.min.js.map
diff --git a/docs/js/drawer.min.js b/docs/js/drawer.min.js
diff --git a/docs/js/drawer.min.js.map b/docs/js/drawer.min.js.map
diff --git a/docs/js/message.min.js b/docs/js/message.min.js
diff --git a/docs/js/message.min.js.map b/docs/js/message.min.js.map
diff --git a/docs/js/outline.min.js b/docs/js/outline.min.js
diff --git a/docs/js/outline.min.js.map b/docs/js/outline.min.js.map
diff --git a/docs/js/toolbar.min.js b/docs/js/toolbar.min.js
diff --git a/docs/js/toolbar.min.js.map b/docs/js/toolbar.min.js.map
diff --git a/drawer.min.js b/drawer.min.js
diff --git a/drawer.min.js.map b/drawer.min.js.map
diff --git a/message.min.js b/message.min.js
diff --git a/message.min.js.map b/message.min.js.map
diff --git a/outline.js b/outline.js
@@ -515,28 +515,30 @@ class Outline extends Base {
       document.body.removeChild($print)
     }
 
-    if (count > 0) {
+    if (count > 0 && chapters) {
       isOutside = chapters.isOutside()
 
       chapters.destroy()
       chapters = null
 
-      if (isOutside) {
+      if (isOutside && drawer) {
         drawer.destroy()
         drawer = null
       }
     }
 
-    toolbar.destroy()
-    toolbar = null
+    if (anchors) {
+      anchors.destroy()
+      anchors = null
+    }
 
-    anchors.destroy()
-    anchors = null
+    if (toolbar) {
+      toolbar.destroy()
+      toolbar = null
+    }
 
     this.attr(Outline.DEFAULTS)
 
-    this.$emit('destroyed')
-
     return this
   }
 

diff --git a/outline.min.js b/outline.min.js
diff --git a/outline.min.js.map b/outline.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yaohaixiao/outline.js",
-  "version": "3.30.2",
+  "version": "3.30.3",
   "description": "outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具。",
   "main": "outline.min.js",
   "files": [

diff --git a/toolbar.min.js b/toolbar.min.js
diff --git a/toolbar.min.js.map b/toolbar.min.js.map