fix: 修复 sticky 定位，窗口调整大小，chapters 导航栏高度没有自适应窗口大小变化的问题

anchors.js

@@ -12,7 +12,6 @@ import offsetTop from './utils/dom/offsetTop'
 import on from './utils/event/on'
 import off from './utils/event/off'
 import stop from './utils/event/stop'
-import publish from './utils/observer/emit'
 import paint from './utils/icons/paint'
 
 import _updateHeading from './_updateHeading'
@@ -173,7 +172,7 @@ class Anchors extends Base {
       }
 
       later(() => {
-        publish('toolbar:update', {
+        this.$emit('toolbar:update', {
           top,
           min,
           max

api/pug/methods/$off.pug

@@ -34,10 +34,10 @@ section.section
           console.log('handler:', msg)
         }
 
-        outline.$on('created', handler)
+        outline.$on('created')
 
         // 取消订阅 author 主题
-        outline.$off('created', handler)
+        outline.$off('created')
 
         // 不会有任何反应，因为已经取消订阅了
         outline.$emit('created')

api/pug/properties/section.pug

@@ -3,10 +3,10 @@ section.section
     h2.section__title Properties
   div.section__content
     p outline.js 重构后，对外放 4 个重要的属性：anchors、drawer、chapters 和 toolbar。它们都是独立的对象实例，提供了 outline.js 所有的能力（属性和方法）。
-  include DEFAULTS
   include attrs
   include buttons
   include anchors
   include chapters
   include drawer
   include toolbar
+  include DEFAULTS

api/pug/script.pug

@@ -1,25 +1,23 @@
 script(src="js/outline.min.js")
 script.
-  (function(){
-    const defaults = Outline.DEFAULTS
-    let outline
+  const defaults = Outline.DEFAULTS
+  let outline
 
-    defaults.selector = 'h2,h3'
-    defaults.title = false
-    defaults.showCode = false
-    defaults.position = 'sticky'
-    defaults.parentElement = '#aside'
-    defaults.scrollElement = '#main'
-    defaults.articleElement = '#article'
-    defaults.git = 'https://github.com/yaohaixiao/outline.js'
-    defaults.tags = 'https://github.com/yaohaixiao/outline.js/tags'
-    defaults.issues = 'https://github.com/yaohaixiao/outline.js/issues'
-    defaults.print = {
-      element: '#article',
-      title: document.querySelector('.main__h1')
-    }
-    defaults.chapterTextFilter = (text) => {
-      return text.replace(/\s*\(.*?\)/, '()')
-    }
-    outline = new Outline(Outline.DEFAULTS)
-  })()
+  defaults.selector = 'h2,h3'
+  defaults.title = false
+  defaults.showCode = false
+  defaults.position = 'sticky'
+  defaults.parentElement = '#aside'
+  defaults.scrollElement = '#main'
+  defaults.articleElement = '#article'
+  defaults.git = 'https://github.com/yaohaixiao/outline.js'
+  defaults.tags = 'https://github.com/yaohaixiao/outline.js/tags'
+  defaults.issues = 'https://github.com/yaohaixiao/outline.js/issues'
+  defaults.print = {
+    element: '#article',
+    title: document.querySelector('.main__h1')
+  }
+  defaults.chapterTextFilter = (text) => {
+    return text.replace(/\s*\(.*?\)/, '()')
+  }
+  outline = new Outline(Outline.DEFAULTS)

chapters.js

@@ -16,7 +16,6 @@ import removeClass from './utils/dom/removeClass'
 import offsetTop from './utils/dom/offsetTop'
 import getStyle from './utils/dom/getStyle'
 import setProperty from './utils/dom/setProperty'
-import publish from './utils/observer/emit'
 import cloneDeep from './utils/lang/cloneDeep'
 
 import _getScrollElement from './utils/dom/_getScrollElement'
@@ -511,7 +510,7 @@ class Chapters extends Base {
 
       later(() => {
         this.playing = false
-        publish('toolbar:update', {
+        this.$emit('toolbar:update', {
           top,
           min,
           max
@@ -552,7 +551,7 @@ class Chapters extends Base {
         this.sticky()
       }
 
-      publish('toolbar:update', {
+      this.$emit('toolbar:update', {
         top,
         min,
         max
@@ -587,7 +586,7 @@ class Chapters extends Base {
     on($el, '.outline-chapters__anchor', 'click', this.onSelect, this, true)
     at($element, 'scroll', this.onScroll, this, true)
     if (this.isSticky()) {
-      at($element, 'resize', this.onResize, this, true)
+      at(window, 'resize', this.onResize, this, true)
     }
 
     return this
@@ -608,7 +607,7 @@ class Chapters extends Base {
     off($element, 'scroll', this.onScroll)
 
     if (this.isSticky()) {
-      at($element, 'resize', this.onResize)
+      at(window, 'resize', this.onResize)
     }
 
     if (this.Observer) {

docs/fixed.html

@@ -313,32 +313,7 @@
 defaults.chapterTextFilter = (text) => {
   return text.replace(/\(.*?\)/, '()')
 }
-outline = new Outline(Outline.DEFAULTS)</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Properties</h2></header><div class="section__content"><p>outline.js 重构后，对外放 4 个重要的属性：anchors、drawer、chapters 和 toolbar。它们都是独立的对象实例，提供了 outline.js 所有的能力（属性和方法）。</p></div><section class="section"><header class="section__header"><h3 class="section__h3">Outline.DEFAULTS</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="api-param-value">Object</dd></dl><p>静态属性，存储的是 Outline 对象默认配置选项：</p><pre class="section__pre"><code class="section__code">Outline.DEFAULTS = {
-  articleElement: '#article',
-  selector: 'h2,h3,h4,h5,h6',
-  title: '目录',
-  scrollElement: 'html,body',
-  position: 'relative',
-  parentElement: '#aside',
-  placement: 'rtl',
-  showCode: true,
-  anchorURL: '',
-  stickyHeight: 0,
-  homepage: '',
-  git: '',
-  tags: '',
-  issues: '',
-  tools: [],
-  print: {
-    element: '',
-    title: ''
-  },
-  customClass: '',
-  afterSticky: null,
-  afterToggle: null,
-  afterScroll: null,
-  chapterTextFilter: null
-}</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3">attrs</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>存储的是 Outline 对象当前使用中的配置选项：</p><p>说明：建议使用 attr(prop) 方法来获取属性，避免直接调用属性。</p><pre class="section__pre"><code class="section__code">// 设置默认配置项
+outline = new Outline(Outline.DEFAULTS)</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Properties</h2></header><div class="section__content"><p>outline.js 重构后，对外放 4 个重要的属性：anchors、drawer、chapters 和 toolbar。它们都是独立的对象实例，提供了 outline.js 所有的能力（属性和方法）。</p></div><section class="section"><header class="section__header"><h3 class="section__h3">attrs</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>存储的是 Outline 对象当前使用中的配置选项：</p><p>说明：建议使用 attr(prop) 方法来获取属性，避免直接调用属性。</p><pre class="section__pre"><code class="section__code">// 设置默认配置项
 const outline = new Outline(Outline.DEFAULTS)
 
 // 查看全部配置信息
@@ -756,7 +731,32 @@
 
 Drawer.zIndex = 2000
 
-export default Toolbar</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Methods</h2></header><div class="section__content"><p>outline.js 的提供的方法如下：</p></div><section class="section"><header class="section__header"><h3 class="section__h3">attr([prop, value])</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><p>attr() 方法用来设置或者获取初始化时配置的 attrs 信息的。</p><h4 class="section__h4">Parameters</h4><h5 class="section__h4">prop</h5><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">String|HTMLElement</dd></dl><p>（可选）options 中的属性名称或者要配置的 attrs 信息。</p><h5 class="section__h4">value</h5><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Any</dd></dl><p>（可选）要设置的 prop 属性的值</p><ul><li>不传递任何参数：返回完整的 attrs 配置信息；</li><li>仅传递 prop：</li><ul><li>String: 返回 attrs 配型信息中与 prop 对应的值；</li><li>Object: 用来设置 attrs 配置信息；</li></ul><li>同时传递 prop 和 value 参数：设置 attrs 配置信息中的某个属性值；</li></ul><h4 class="section__h4">Returns</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Any</dd></dl><p>配置信息 attrs 的属性值或者 Outline 对象。</p><pre class="section__pre"><code class="section__code">const outline = new Outline({
+export default Toolbar</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3">Outline.DEFAULTS</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="api-param-value">Object</dd></dl><p>静态属性，存储的是 Outline 对象默认配置选项：</p><pre class="section__pre"><code class="section__code">Outline.DEFAULTS = {
+  articleElement: '#article',
+  selector: 'h2,h3,h4,h5,h6',
+  title: '目录',
+  scrollElement: 'html,body',
+  position: 'relative',
+  parentElement: '#aside',
+  placement: 'rtl',
+  showCode: true,
+  anchorURL: '',
+  stickyHeight: 0,
+  homepage: '',
+  git: '',
+  tags: '',
+  issues: '',
+  tools: [],
+  print: {
+    element: '',
+    title: ''
+  },
+  customClass: '',
+  afterSticky: null,
+  afterToggle: null,
+  afterScroll: null,
+  chapterTextFilter: null
+}</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Methods</h2></header><div class="section__content"><p>outline.js 的提供的方法如下：</p></div><section class="section"><header class="section__header"><h3 class="section__h3">attr([prop, value])</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><p>attr() 方法用来设置或者获取初始化时配置的 attrs 信息的。</p><h4 class="section__h4">Parameters</h4><h5 class="section__h4">prop</h5><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">String|HTMLElement</dd></dl><p>（可选）options 中的属性名称或者要配置的 attrs 信息。</p><h5 class="section__h4">value</h5><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Any</dd></dl><p>（可选）要设置的 prop 属性的值</p><ul><li>不传递任何参数：返回完整的 attrs 配置信息；</li><li>仅传递 prop：</li><ul><li>String: 返回 attrs 配型信息中与 prop 对应的值；</li><li>Object: 用来设置 attrs 配置信息；</li></ul><li>同时传递 prop 和 value 参数：设置 attrs 配置信息中的某个属性值；</li></ul><h4 class="section__h4">Returns</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Any</dd></dl><p>配置信息 attrs 的属性值或者 Outline 对象。</p><pre class="section__pre"><code class="section__code">const outline = new Outline({
    article: '#article',
    title: 'Outline v2.0.0'
 })
@@ -1019,10 +1019,10 @@
   console.log('handler:', msg)
 }
 
-outline.$on('created', handler)
+outline.$on('created')
 
 // 取消订阅 author 主题
-outline.$off('created', handler)
+outline.$off('created')
 
 // 不会有任何反应，因为已经取消订阅了
 outline.$emit('created')</code></pre></div></section></section><h2>License</h2><p>JavaScript Code Licensed under MIT License.</p><p>API Documentation Licensed under CC BY 3.0</p></main></article><footer class="footer"><footer class="main__footer" id="footer"><p>Copyright &copy; 2023 <a href="https://github.com/yaohaixiao">Robert Yao</a>, all right reserved.</p><p>Code licensed under&nbsp;<a href="http://opensource.org/licenses/mit-license.html">MIT License</a></p><p>Documentation licensed under<a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></p><p><a href="https://github.com/yaohaixiao/outline.js">View on GitHub</a> ·

docs/flex.html

@@ -319,32 +319,7 @@
 defaults.chapterTextFilter = (text) => {
   return text.replace(/\(.*?\)/, '()')
 }
-outline = new Outline(Outline.DEFAULTS)</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Properties</h2></header><div class="section__content"><p>outline.js 重构后，对外放 4 个重要的属性：anchors、drawer、chapters 和 toolbar。它们都是独立的对象实例，提供了 outline.js 所有的能力（属性和方法）。</p></div><section class="section"><header class="section__header"><h3 class="section__h3">Outline.DEFAULTS</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="api-param-value">Object</dd></dl><p>静态属性，存储的是 Outline 对象默认配置选项：</p><pre class="section__pre"><code class="section__code">Outline.DEFAULTS = {
-  articleElement: '#article',
-  selector: 'h2,h3,h4,h5,h6',
-  title: '目录',
-  scrollElement: 'html,body',
-  position: 'relative',
-  parentElement: '#aside',
-  placement: 'rtl',
-  showCode: true,
-  anchorURL: '',
-  stickyHeight: 0,
-  homepage: '',
-  git: '',
-  tags: '',
-  issues: '',
-  tools: [],
-  print: {
-    element: '',
-    title: ''
-  },
-  customClass: '',
-  afterSticky: null,
-  afterToggle: null,
-  afterScroll: null,
-  chapterTextFilter: null
-}</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3">attrs</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>存储的是 Outline 对象当前使用中的配置选项：</p><p>说明：建议使用 attr(prop) 方法来获取属性，避免直接调用属性。</p><pre class="section__pre"><code class="section__code">// 设置默认配置项
+outline = new Outline(Outline.DEFAULTS)</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Properties</h2></header><div class="section__content"><p>outline.js 重构后，对外放 4 个重要的属性：anchors、drawer、chapters 和 toolbar。它们都是独立的对象实例，提供了 outline.js 所有的能力（属性和方法）。</p></div><section class="section"><header class="section__header"><h3 class="section__h3">attrs</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>存储的是 Outline 对象当前使用中的配置选项：</p><p>说明：建议使用 attr(prop) 方法来获取属性，避免直接调用属性。</p><pre class="section__pre"><code class="section__code">// 设置默认配置项
 const outline = new Outline(Outline.DEFAULTS)
 
 // 查看全部配置信息
@@ -762,7 +737,32 @@
 
 Drawer.zIndex = 2000
 
-export default Toolbar</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Methods</h2></header><div class="section__content"><p>outline.js 的提供的方法如下：</p></div><section class="section"><header class="section__header"><h3 class="section__h3">attr([prop, value])</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><p>attr() 方法用来设置或者获取初始化时配置的 attrs 信息的。</p><h4 class="section__h4">Parameters</h4><h5 class="section__h4">prop</h5><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">String|HTMLElement</dd></dl><p>（可选）options 中的属性名称或者要配置的 attrs 信息。</p><h5 class="section__h4">value</h5><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Any</dd></dl><p>（可选）要设置的 prop 属性的值</p><ul><li>不传递任何参数：返回完整的 attrs 配置信息；</li><li>仅传递 prop：</li><ul><li>String: 返回 attrs 配型信息中与 prop 对应的值；</li><li>Object: 用来设置 attrs 配置信息；</li></ul><li>同时传递 prop 和 value 参数：设置 attrs 配置信息中的某个属性值；</li></ul><h4 class="section__h4">Returns</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Any</dd></dl><p>配置信息 attrs 的属性值或者 Outline 对象。</p><pre class="section__pre"><code class="section__code">const outline = new Outline({
+export default Toolbar</code></pre></div></section><section class="section"><header class="section__header"><h3 class="section__h3">Outline.DEFAULTS</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="api-param-value">Object</dd></dl><p>静态属性，存储的是 Outline 对象默认配置选项：</p><pre class="section__pre"><code class="section__code">Outline.DEFAULTS = {
+  articleElement: '#article',
+  selector: 'h2,h3,h4,h5,h6',
+  title: '目录',
+  scrollElement: 'html,body',
+  position: 'relative',
+  parentElement: '#aside',
+  placement: 'rtl',
+  showCode: true,
+  anchorURL: '',
+  stickyHeight: 0,
+  homepage: '',
+  git: '',
+  tags: '',
+  issues: '',
+  tools: [],
+  print: {
+    element: '',
+    title: ''
+  },
+  customClass: '',
+  afterSticky: null,
+  afterToggle: null,
+  afterScroll: null,
+  chapterTextFilter: null
+}</code></pre></div></section></section><section class="section"><header class="section__header"><h2 class="section__title">Methods</h2></header><div class="section__content"><p>outline.js 的提供的方法如下：</p></div><section class="section"><header class="section__header"><h3 class="section__h3">attr([prop, value])</h3></header><div class="section__content"><h4 class="section__h4">Description</h4><p>attr() 方法用来设置或者获取初始化时配置的 attrs 信息的。</p><h4 class="section__h4">Parameters</h4><h5 class="section__h4">prop</h5><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">String|HTMLElement</dd></dl><p>（可选）options 中的属性名称或者要配置的 attrs 信息。</p><h5 class="section__h4">value</h5><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Any</dd></dl><p>（可选）要设置的 prop 属性的值</p><ul><li>不传递任何参数：返回完整的 attrs 配置信息；</li><li>仅传递 prop：</li><ul><li>String: 返回 attrs 配型信息中与 prop 对应的值；</li><li>Object: 用来设置 attrs 配置信息；</li></ul><li>同时传递 prop 和 value 参数：设置 attrs 配置信息中的某个属性值；</li></ul><h4 class="section__h4">Returns</h4><dl class="section__dl"><dt class="section__dt">Type：</dt><dd class="section__dd">Any</dd></dl><p>配置信息 attrs 的属性值或者 Outline 对象。</p><pre class="section__pre"><code class="section__code">const outline = new Outline({
    article: '#article',
    title: 'Outline v2.0.0'
 })
@@ -1025,10 +1025,10 @@
   console.log('handler:', msg)
 }
 
-outline.$on('created', handler)
+outline.$on('created')
 
 // 取消订阅 author 主题
-outline.$off('created', handler)
+outline.$off('created')
 
 // 不会有任何反应，因为已经取消订阅了
 outline.$emit('created')</code></pre></div></section></section><h2>License</h2><p>JavaScript Code Licensed under MIT License.</p><p>API Documentation Licensed under CC BY 3.0</p></article><footer class="footer"><footer class="main__footer" id="footer"><p>Copyright &copy; 2023 <a href="https://github.com/yaohaixiao">Robert Yao</a>, all right reserved.</p><p>Code licensed under&nbsp;<a href="http://opensource.org/licenses/mit-license.html">MIT License</a></p><p>Documentation licensed under<a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></p><p><a href="https://github.com/yaohaixiao/outline.js">View on GitHub</a> ·