feat: 功能扩展，（在配置打印样式后）有纯净的阅读视图（按ESC键可退出）；

README.md

@@ -36,6 +36,7 @@ AnchorJS 是 outline.js 的创作灵感来源。既然 AnchorJS 可创建标题
   * 支持针对（github 项目的）API 文档的 tags 和 issues 等按钮的跳转；
   * 支持自定义图标的自定义按钮，并且支持配置自定义按钮的触发事件和事件处理器；
 - 自动为文章页面添加通用的打印样式；
+- （在配置打印样式后）有纯净的阅读视图（按ESC键可退出）；
 - 可以作为 jQuery 插件使用；
 - 界面简洁大方；
 - 配置灵活，丰富，让你随心所欲掌控 outline.js；

api/less/example.less

@@ -1,12 +1,6 @@
 @import './colors';
-@import '../../src/theme/shadow';
 @import './scrollbar';
 @import './section';
 @import './case';
 @import './pager';
-@import '../../src/theme/icons';
-@import '../../src/theme/drawer';
-@import '../../src/theme/anchors';
-@import '../../src/theme/chapters';
-@import '../../src/theme/toolbar';
-@import '../../src/theme/print';
+@import '../../src/theme/outline';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yaohaixiao/outline.js",
-  "version": "3.18.1",
+  "version": "3.19.0",
   "description": "outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具。",
   "main": "outline.min.js",
   "files": [

src/outline.js

@@ -14,6 +14,9 @@ import scrollTo from './utils/dom/scrollTo'
 import _getScrollElement from './utils/dom/_getScrollElement'
 import subscribe from './utils/observer/on'
 import unsubscribe from './utils/observer/off'
+import at from './utils/event/at'
+import off from './utils/event/off'
+import stop from './utils/event/stop'
 
 import print from './print'
 
@@ -350,31 +353,64 @@ class Outline extends Base {
     return this
   }
 
-  doReading() {
+  enterReading() {
     const READING = 'outline-reading'
     const HIDDEN = `${READING}_hidden`
     const $reading = document.querySelector('#outline-print')
     const $siblings = document.querySelectorAll('.outline-print_sibling')
 
-    if (!this.reading) {
-      $siblings.forEach(($sibling) => {
-        addClass($sibling, HIDDEN)
-      })
-      addClass($reading, READING)
-      this.reading = true
-    } else {
-      removeClass($reading, READING)
-      $siblings.forEach(($sibling) => {
-        removeClass($sibling, HIDDEN)
-      })
-      this.reading = false
+    if (this.reading || !$reading) {
+      return this
+    }
+
+    $siblings.forEach(($sibling) => {
+      addClass($sibling, HIDDEN)
+    })
+    addClass($reading, READING)
+    this.reading = true
+
+    this.toolbar.toggle()
+
+    return this
+  }
+
+  exitReading() {
+    const READING = 'outline-reading'
+    const HIDDEN = `${READING}_hidden`
+    const $reading = document.querySelector('#outline-print')
+    const $siblings = document.querySelectorAll('.outline-print_sibling')
+
+    if (!this.reading || !$reading) {
+      return this
     }
 
+    removeClass($reading, READING)
+    $siblings.forEach(($sibling) => {
+      removeClass($sibling, HIDDEN)
+    })
+    this.reading = false
+
     this.toolbar.toggle()
 
     return this
   }
 
+  switchReading() {
+    const $print = document.querySelector('#outline-print')
+
+    if (!$print) {
+      return this
+    }
+
+    if (!this.reading) {
+      this.enterReading()
+    } else {
+      this.exitReading()
+    }
+
+    return this
+  }
+
   toggle() {
     const position = this.attr('position')
     const toolbar = this.toolbar
@@ -411,9 +447,14 @@ class Outline extends Base {
     let toolbar = this.toolbar
     let isOutside = false
     const count = this.count()
+    const $print = document.querySelector('#outline-print')
 
     this.removeListeners()
 
+    if ($print) {
+      document.body.removeChild($print)
+    }
+
     if (count > 0) {
       isOutside = chapters.isOutside()
 
@@ -442,11 +483,6 @@ class Outline extends Base {
     return this
   }
 
-  onReading() {
-    this.doReading()
-    return this
-  }
-
   onScrollTop() {
     this.toTop()
     return this
@@ -457,6 +493,22 @@ class Outline extends Base {
     return this
   }
 
+  onEnterReading() {
+    this.switchReading()
+    return this
+  }
+
+  onExitReading(evt) {
+    const keyCode = evt.keyCode
+
+    if (keyCode === 27 && this.reading) {
+      this.switchReading()
+      stop(evt)
+    }
+
+    return this
+  }
+
   onToolbarUpdate({ top, min, max }) {
     const toolbar = this.toolbar
     const current = Math.ceil(top)
@@ -476,19 +528,33 @@ class Outline extends Base {
   }
 
   addListeners() {
+    const $print = document.querySelector('#outline-print')
+
     subscribe('toolbar:update', this.onToolbarUpdate, this)
     subscribe('toolbar:action:up', this.onScrollTop, this)
     subscribe('toolbar:action:toggle', this.onToggle, this)
-    subscribe('toolbar:action:reading', this.onReading, this)
+    subscribe('toolbar:action:reading', this.onEnterReading, this)
     subscribe('toolbar:action:down', this.onScrollBottom, this)
+
+    if ($print) {
+      at(document, 'keyup', this.onExitReading, this, true)
+    }
+
     return this
   }
 
   removeListeners() {
+    const $print = document.querySelector('#outline-print')
+
     unsubscribe('toolbar:update')
     unsubscribe('toolbar:action:up')
     unsubscribe('toolbar:action:toggle')
     unsubscribe('toolbar:action:down')
+
+    if ($print) {
+      off(document, 'keyup', this.onExitReading)
+    }
+
     return this
   }
 }

src/print.js

@@ -6,6 +6,7 @@ import later from './utils/lang/later'
 
 const print = (origins, title) => {
   let $origins
+  let $warpper
   let $article
   let $title
   let $sibling
@@ -34,8 +35,8 @@ const print = (origins, title) => {
   $article = createElement(
     'article',
     {
-      id: 'outline-print',
-      className: 'outline-print'
+      id: 'outline-print__article',
+      className: 'outline-print__article'
     },
     ['']
   )
@@ -49,12 +50,18 @@ const print = (origins, title) => {
     [text]
   )
 
-  $article.insertBefore($title, $article.firstChild)
-
-  document.body.appendChild($article)
+  $warpper = createElement(
+    'section',
+    {
+      id: 'outline-print',
+      className: 'outline-print'
+    },
+    [$title, $article]
+  )
+  document.body.appendChild($warpper)
 
   later(() => {
-    $sibling = $article.previousElementSibling
+    $sibling = $warpper.previousElementSibling
 
     while ($sibling) {
       tagName = $sibling.tagName.toLowerCase()
@@ -64,7 +71,7 @@ const print = (origins, title) => {
       $sibling = $sibling.previousElementSibling
     }
 
-    $sibling = $article.nextElementSibling
+    $sibling = $warpper.nextElementSibling
 
     while ($sibling) {
       tagName = $sibling.tagName.toLowerCase()

src/theme/print.less

@@ -5,9 +5,9 @@
 
   &__title {
     text-align: center;
-    font-size: 20pt;
     font-family: 'Microsoft YaHei UI', Arial, sans-serif;
     font-weight: normal;
+    overflow: hidden;
   }
 }
 
@@ -27,7 +27,7 @@
       padding: 0 !important;
       overflow: hidden !important;
 
-      &__title {
+      .outline-print__title {
         font-size: 20pt !important;
       }
     }

src/theme/reading.less

@@ -15,11 +15,16 @@
   overflow: auto;
 
   .outline-print__title {
+    line-height: 1.3em;
     font-size: 3.5em;
   }
 
   &_hidden {
     display: none;
+
+    &.outline-print_sibling {
+      display: none;
+    }
   }
 }
 

src/utils/event/off.js

@@ -8,7 +8,7 @@ import _off from './_off'
  * 如果没有设置 handler，则销毁 this.$options 绑定的所有符合 type 事件类型的事件绑定
  * ========================================================================
  * @method off
- * @param {HTMLElement} el - （必须）取消事件绑定的 DOM 元素
+ * @param {HTMLElement|Object} el - （必须）取消事件绑定的 DOM 元素
  * @param {String} type - （必须）事件类型
  * @param {Function} [fn] - （可选）事件处理器回调函数
  */