From 43b6faecbc943313f4de3845e7d2b3692f3e9419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Thu, 6 May 2021 19:55:38 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=BB=9A=E5=8A=A8=E6=9D=A1;m?=
 =?UTF-8?q?arkd=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/markd/index.wc  |  55 ++++---
 src/scroll/index.wc | 344 ++++++++++++++++++--------------------------
 2 files changed, 165 insertions(+), 234 deletions(-)

diff --git a/src/markd/index.wc b/src/markd/index.wc
index eb9337d..d2f39de 100644
--- a/src/markd/index.wc
+++ b/src/markd/index.wc
@@ -1,5 +1,5 @@
 <template>
-  <slot />
+  <div class="container"></div>
 </template>
 
 <style lang="scss">
@@ -9,9 +9,7 @@
   color: var(--color-dark-1);
   font-size: 14px;
 }
-slot {
-  display: block;
-}
+
 a {
   text-decoration: underline;
   color: var(--color-teal-2);
@@ -197,20 +195,21 @@ export default class Markd {
 
   __init__() {
     /* render */
-    // var elem = this.root.children[1]
-    // this.__BOX__ = elem
+    var elem = this.root.children[1]
+    this.__BOX__ = elem
   }
 
   __parse__() {
-    var txt = this.textContent.trim()
-    this.value = txt
+    this.md = this.textContent.trim()
   }
 
-  set value(txt) {
+  set md(txt) {
     if (txt) {
-      this.innerHTML = markd(txt)
-      // this.textContent = ''
+      this.__BOX__.innerHTML = markd(txt)
+    } else {
+      this.__BOX__.innerHTML = ''
     }
+    this.dispatchEvent(new CustomEvent('ready', { bubbles: true }))
   }
 
   clear() {
@@ -221,29 +220,27 @@ export default class Markd {
   mounted() {
     this.__parse__()
 
-    // this._headClickFn = $.bind(this.__BOX__, 'click', ev => {
-    //   if (ev.target.className === 'md-head-link') {
-    //     var ot = ev.target.offsetTop
-    //     console.log(ot)
-    //     document.documentElement.scrollTop = ot
-    //   }
-    // })
+    this._headClickFn = $.bind(this.__BOX__, 'click', ev => {
+      if (ev.target.className === 'md-head-link') {
+        ev.target.scrollIntoView()
+      }
+    })
 
-    // this.__observer = new MutationObserver(_ => {
-    //   this.__parse__()
-    // })
+    this.__observer = new MutationObserver(_ => {
+      this.__parse__()
+    })
 
-    // this.__observer.observe(this, {
-    //   childList: true,
-    //   subtree: true,
-    //   characterData: true
-    // })
+    this.__observer.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    })
   }
 
   unmount() {
-    // $.unbind(this.__BOX__, 'click', this._headClickFn)
-    // this.__observer.disconnect()
-    // this.clear()
+    $.unbind(this.__BOX__, 'click', this._headClickFn)
+    this.__observer.disconnect()
+    this.clear()
   }
 }
 </script>
diff --git a/src/scroll/index.wc b/src/scroll/index.wc
index 3242b41..30e022c 100644
--- a/src/scroll/index.wc
+++ b/src/scroll/index.wc
@@ -1,17 +1,25 @@
 <template>
-  <div class="container"><slot /></div>
-  <div class="is-horizontal"><span class="thumb"></span></div>
-  <div class="is-vertical"><span class="thumb"></span></div>
+  <div class="container">
+    <div class="wrapper"><slot /></div>
+    <div class="is-horizontal"><span class="thumb"></span></div>
+    <div class="is-vertical"><span class="thumb"></span></div>
+  </div>
 </template>
 
 <style lang="scss">
 :host {
-  overflow: hidden;
-  position: relative;
-  display: flex;
+  display: block;
   width: 100%;
+  height: 100%;
 
   .container {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .wrapper {
     overflow: auto;
     position: relative;
     width: calc(100% + 18px);
@@ -49,7 +57,7 @@
 .is-horizontal {
   flex-direction: column;
   left: 0;
-  bottom: 1px;
+  bottom: 0;
   width: 100%;
   height: 10px;
 
@@ -66,7 +74,7 @@
 /* 纵向 */
 .is-vertical {
   top: 0;
-  right: 1px;
+  right: 0;
   width: 10px;
   height: 100%;
 
@@ -89,11 +97,26 @@
 }
 
 :host([axis='x']) {
+  .wrapper {
+    overflow-y: hidden;
+  }
   .is-vertical {
     display: none;
   }
 }
 :host([axis='y']) {
+  .wrapper {
+    overflow-x: hidden;
+  }
+  .is-horizontal {
+    display: none;
+  }
+}
+:host([disabled]) {
+  .wrapper {
+    overflow: hidden;
+  }
+  .is-vertical,
   .is-horizontal {
     display: none;
   }
@@ -108,37 +131,47 @@ const IS_FF = !!window.sidebar
 /*  */
 export default class Scroll {
   props = {
-    thumbX: 0,
-    thumbY: 0,
-    disabled: false,
     axis: 'xy', // 滚动方向, 默认x轴和y轴都可以滚动
     delay: 1000, // 节流延迟
     distance: 1 // 触发距离阀值, 单位像素
   }
+
+  state = {
+    width: 0, // 滚动组件的真实宽度
+    height: 0, // 滚动组件的真实高度
+    scrollX: 0, // 滚动组件的滚动宽度
+    scrollY: 0, // 滚动组件的滚动高度
+    xBar: 0, // 横轴长度
+    yBar: 0, // 纵轴长度
+    thumbX: 0, //横向条滚动距离
+    thumbY: 0 // 纵向条滚动距离
+  }
+
   __init__() {
     /* render */
-    this.__BOX__ = this.root.children[1]
-    this.__X__ = this.root.children[2].children[0]
-    this.__Y__ = this.root.children[3].children[0]
+    var elem = this.root.children[1]
+    this.__BOX__ = elem.children[0]
+    this.__X__ = elem.children[1].children[0]
+    this.__Y__ = elem.children[2].children[0]
     this.__last__ = 0
   }
 
-  // get scrollTop() {
-  //   return this.__BOX__.scrollTop
-  // }
+  get scrollTop() {
+    return this.__BOX__.scrollTop
+  }
 
-  // set scrollTop(n) {
-  //   n = +n
-  //   if (n === n) {
-  //     var { sh, oh, yh } = this.props
+  set scrollTop(n) {
+    n = +n
+    if (n === n) {
+      // var { scrollY, height, yh } = this.props
 
-  //     this.__BOX__.scrollTop = n
-  //     var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
-  //     this.props.thumbY = fixedY
+      this.__BOX__.scrollTop = n
+      // var fixedY = (this.__BOX__.scrollTop / (scrollY - height)) * (height - yh)
+      // this.props.thumbY = fixedY
 
-  //     this.__Y__.style.transform = `translateY(${fixedY}px)`
-  //   }
-  // }
+      // this.__Y__.style.transform = `translateY(${fixedY}px)`
+    }
+  }
 
   get scrollLeft() {
     return this.__BOX__.scrollLeft
@@ -147,13 +180,13 @@ export default class Scroll {
   set scrollLeft(n) {
     n = +n
     if (n === n) {
-      var { sw, ow, xw } = this.props
+      // var { scrollX, width, xw } = this.props
 
       this.__BOX__.scrollLeft = n
-      var fixedX = (this.__BOX__.scrollLeft / (sw - ow)) * (ow - xw)
-      this.props.thumbX = fixedX
+      // var fixedX = (this.__BOX__.scrollLeft / (scrollX - width)) * (width - xw)
+      // this.props.thumbX = fixedX
 
-      this.__X__.style.transform = `translateX(${fixedX}px)`
+      // this.__X__.style.transform = `translateX(${fixedX}px)`
     }
   }
 
@@ -165,54 +198,35 @@ export default class Scroll {
     return this.__BOX__.scrollWidth
   }
 
-  get disabled() {
-    return this.props.disabled
-  }
-
-  set disabled(val) {
-    var type = typeof val
-
-    if (val === this.props.disabled) {
-      return
-    }
-    if ((type === 'boolean' && val) || type !== 'boolean') {
-      this.props.disabled = true
-      this.setAttribute('disabled', '')
-    } else {
-      this.props.disabled = false
-      this.removeAttribute('disabled')
-    }
-  }
-
   _fetchScrollX(moveX) {
-    var { sw, ow, xw } = this.props
+    var { scrollX, width, xw } = this.props
 
     if (moveX < 0) {
       moveX = 0
-    } else if (moveX > ow - xw) {
-      moveX = ow - xw
+    } else if (moveX > width - xw) {
+      moveX = width - xw
     }
-    this.__BOX__.scrollLeft = (sw - ow) * (moveX / (ow - xw))
+    this.__BOX__.scrollLeft = (scrollX - width) * (moveX / (width - xw))
     this.__X__.style.transform = `translateX(${moveX}px)`
 
     return moveX
   }
 
   _fetchScrollY(moveY) {
-    var { sh, oh, yh } = this.props
+    var { scrollY, height, yh } = this.props
 
     if (moveY < 0) {
       moveY = 0
-    } else if (moveY > oh - yh) {
-      moveY = oh - yh
+    } else if (moveY > height - yh) {
+      moveY = height - yh
     }
-    this.__BOX__.scrollTop = (sh - oh) * (moveY / (oh - yh))
+    this.__BOX__.scrollTop = (scrollY - height) * (moveY / (height - yh))
     this.__Y__.style.transform = `translateY(${moveY}px)`
     return moveY
   }
 
   _fireReachEnd(action = 'reach-bottom') {
-    var { sh, oh, delay, disabled } = this.props
+    var { scrollY, height, delay, disabled } = this.props
     var top = this.__BOX__.scrollTop
     var now = Date.now()
 
@@ -221,7 +235,7 @@ export default class Scroll {
     }
     if (now - this.__last__ > delay) {
       if (action === 'reach-bottom') {
-        if (oh + top < sh) {
+        if (height + top < scrollY) {
           return
         }
       } else {
@@ -236,166 +250,113 @@ export default class Scroll {
   }
 
   mounted() {
-    /*    // 初始化滚动条的位置和长度
-    this._initFn = $.bind(this.__BOX__, 'mouseenter', ev => {
-      // 禁用状态, 不允许滚动
-      if (this.disabled) {
-        return
-      }
-      var ow = this.__BOX__.offsetWidth
-      var sw = this.__BOX__.scrollWidth
-      var oh = this.__BOX__.offsetHeight
-      var sh = this.__BOX__.scrollHeight
+    // 初始化滚动条的位置和长度
+    this._initFn = $.catch(this, 'ready', ev => {
+      // 需要减去因为隐藏原生滚动条修正的18像素
+      var width = this.__BOX__.clientWidth - 18
+      var height = this.__BOX__.clientHeight - 18
+      var scrollX = this.__BOX__.scrollWidth - 18
+      var scrollY = this.__BOX__.scrollHeight - 18
 
-      var yh = ((oh * oh) / sh) >> 0 // 滚动条的高度
-      var xw = ((ow * ow) / sw) >> 0 // 滚动条的宽度
+      var yBar = (height * (height / scrollY)) >> 0 // 滚动条的高度
+      var xBar = (width * (width / scrollX)) >> 0 // 滚动条的宽度
 
-      if (yh < 50) {
-        yh = 50
+      if (yBar < 50) {
+        yBar = 50
       }
-      if (xw < 50) {
-        xw = 50
+      if (xBar < 50) {
+        xBar = 50
       }
 
       // 100%或主体高度比滚动条还短时不显示
-      if (xw >= ow) {
-        xw = 0
+      if (xBar >= width) {
+        xBar = 0
       }
-      if (yh >= oh) {
-        yh = 0
+      if (yBar >= height) {
+        yBar = 0
       }
 
-      this.props.oh = oh
-      this.props.sh = sh
-      this.props.ow = ow
-      this.props.sw = sw
-      this.props.yh = yh
-      this.props.xw = xw
+      this.state.height = height
+      this.state.width = width
+      this.state.scrollY = scrollY
+      this.state.scrollX = scrollX
+      this.state.yBar = yBar
+      this.state.xBar = xBar
 
-      this.__X__.style.width = xw + 'px'
-      this.__Y__.style.height = yh + 'px'
-      this._active = true
-    })
-
-    this._inactiveFn = $.bind(this.__BOX__, 'mouseleave', ev => {
-      delete this._active
+      this.__X__.style.width = xBar + 'px'
+      this.__Y__.style.height = yBar + 'px'
     })
 
     // 鼠标滚动事件
-    this._wheelFn = $.bind(this.__BOX__, 'wheel', ev => {
+    this._wheelFn = $.bind(this.__BOX__, 'scroll', ev => {
       // 禁用状态, 不允许滚动
       if (this.disabled) {
         return
       }
-      var { sh, oh, yh, sw, ow, xw } = this.props
+      var { axis } = this.props
+      var {
+        xBar,
+        yBar,
+        thumbX,
+        thumbY,
+        scrollY,
+        scrollX,
+        width,
+        height
+      } = this.state
+      var currTop = this.__BOX__.scrollTop
+      var currLeft = this.__BOX__.scrollLeft
+      var now = Date.now()
 
       // x轴 y轴 都为0时, 不作任何处理
-      if (!xw && !yh) {
+      if (xBar === 0 && yBar === 0) {
         return
       }
 
-      //校正兼容苹果鼠标在 chrome和FF下滚动的精度
-      var deltaX
-      var deltaY
-      var now = Date.now()
-
-      if (!this.stamp || now - this.stamp > 800) {
-        this.stamp = now
-        this.times = 1
-      }
-
-      if (IS_FF) {
-        // 区分是触摸板还是普通鼠标
-        deltaX = ev.deltaMode ? 10 * ev.deltaX : ev.deltaX
-        deltaY = ev.deltaMode ? 10 * ev.deltaY : ev.deltaY
-      } else {
-        var delta = Math.abs(ev.wheelDelta)
-        // 精度高的(小于120), 一般是触摸板或苹果的鼠标
-        if (delta < 120) {
-          deltaX = ev.deltaX
-          deltaY = ev.deltaY
-        } else {
-          deltaX = ev.deltaX / (delta / 120)
-          deltaY = ev.deltaY / (delta / 120)
-        }
-      }
-
-      if (now - this.stamp < 20) {
-        this.times += 0.05
-        if (this.times > 3) {
-          this.times = 3
-        }
-      }
-
-      deltaX *= this.times
-      deltaY *= this.times
-
       //
-      if (this.props.axis !== 'x') {
-        this.__BOX__.scrollTop += deltaY
-
-        if (yh) {
+      if (axis === 'y' || axis === 'xy') {
+        if (yBar) {
           // 修正滚动条的位置
           // 滚动比例 y 滚动条的可移动距离
-          var fixedY = (this.__BOX__.scrollTop / (sh - oh)) * (oh - yh)
+          let fixedY = (currTop / (scrollY - height)) * (height - yBar)
 
           fixedY = fixedY >> 0
 
-          if (
-            (fixedY === 0 || oh - yh === fixedY) &&
-            fixedY === this.props.thumbY
-          ) {
+          if ((fixedY === 0 || height - yBar === fixedY) && fixedY === thumbY) {
             return
           }
 
-          ev.preventDefault()
-          ev.stopPropagation()
-
-          this.props.thumbY = fixedY
+          this.state.thumbY = fixedY
           this.__Y__.style.transform = `translateY(${fixedY}px)`
 
-          if (Math.abs(deltaY) > this.props.distance) {
-            this._fireReachEnd(deltaY > 0 ? 'reach-bottom' : 'reach-top')
+          if (Math.abs(fixedY - thumbY) > this.props.distance) {
+            this._fireReachEnd(fixedY > thumbY ? 'reach-bottom' : 'reach-top')
           }
         }
       }
 
-      if (this.props.axis !== 'y') {
-        this.__BOX__.scrollLeft += deltaX
-
-        if (xw) {
+      if (axis === 'x' || axis === 'xy') {
+        if (xBar) {
           // 修正滚动条的位置
           // 滚动比例 x 滚动条的可移动距离
-          var fixedX = (this.__BOX__.scrollLeft / (sw - ow)) * (ow - xw)
+          let fixedX = (currLeft / (scrollX - width)) * (width - xBar)
 
           fixedX = fixedX >> 0
 
-          if (
-            (fixedX === 0 || ow - xw === fixedX) &&
-            fixedX === this.props.thumbX
-          ) {
+          if ((fixedX === 0 || width - xBar === fixedX) && fixedX === thumbX) {
             return
           }
 
-          ev.preventDefault()
-          ev.stopPropagation()
-
-          this.props.thumbX = fixedX
+          this.state.thumbX = fixedX
           this.__X__.style.transform = `translateX(${fixedX}px)`
         }
       }
 
-      this._active = true
-
       this.stamp = now
-      this.dispatchEvent(
-        new CustomEvent('scroll', {
-          detail: { x: this.props.thumbX, y: this.props.thumbY }
-        })
-      )
+      this.dispatchEvent(new CustomEvent('scroll'))
     })
 
-    var startX,
+    /*     var startX,
       startY,
       moveX,
       moveY,
@@ -448,40 +409,14 @@ export default class Scroll {
       $.bind(document, 'mouseup', mouseupFn)
     })
 
-    $.catch(document, 'keydown', ev => {
-      if (this._active) {
-        var { oh, sh } = this.props
-        var exec = false
-        switch (ev.keyCode) {
-          case 33: // pageUp
-            exec = true
-            this.scrollTop -= oh
-            break
-          case 34: // pageDown
-            exec = true
-            this.scrollTop += oh
-            break
-          case 35: // End
-            exec = true
-            this.scrollTop = sh
-            break
-          case 36: // Home
-            exec = true
-            this.scrollTop = 0
-            break
-        }
-        if (exec) {
-          ev.preventDefault()
-        }
-      }
-    })
+    */
 
-    this.__observer = new MutationObserver(this._initFn)
-    this.__observer.observe(this, {
-      childList: true,
-      subtree: true,
-      characterData: true
-    }) */
+    // this.__observer = new MutationObserver(this._initFn)
+    // this.__observer.observe(this, {
+    //   childList: true,
+    //   subtree: true,
+    //   attributeFilter: ['style']
+    // })
   }
 
   unmount() {
@@ -495,14 +430,13 @@ export default class Scroll {
   watch() {
     switch (name) {
       case 'axis':
-        this.props.axis = val
-        break
-      case 'disabled':
-        this[name] = true
+        this.props.axis = val || 'xy'
         break
+
       case 'delay':
         this.props.delay = +val || 1000
         break
+
       case 'distance':
         this.props.distance = +val || 1
         break