Merge branch 'master' of github.com:9th-js/wcui

src/slider/index.js

@@ -13,8 +13,8 @@ class Slider extends Component {
       default: 0,
       observer() {}
     },
-    max: null,
+    max: 100,
-    min: null,
+    min: 0,
     step: 1,
     disabled: false,
     readonly: false,
@@ -75,6 +75,7 @@ class Slider extends Component {
       }
     }
     .tips {
+      user-select: none;
       position: absolute;
       top: -100%;
       border-radius: 4px;
@@ -98,66 +99,101 @@ class Slider extends Component {
       }
     }
     .cursor-default {
-      cursor: default;
+      cursor: grabbing !important;
     }
   `
-
+  progress = 0
   mounted() {
     console.log('slider mounted')
     console.log(this.$refs, 'refs')
 
-    this.$bar = this.root.querySelector('.bar')
+    this.$bar = this.$refs.bar
-    this.$dotWrap = this.root.querySelector('.dot-wrapper')
+    this.$dotWrap = this.$refs.dotWrap
-    this.$runway = this.root.querySelector('.runway')
+    this.$runway = this.$refs.runway
-    this.$tips = this.root.querySelector('.tips')
+    this.$tips = this.$refs.tips
   }
   onMousedown(e) {
-    console.log(e)
     document.documentElement.classList.toggle('cursor-default')
     const start = e.clientX
-    const preValue = this.value
+    let { value: preValue, step, max, min, progress } = this
+    preValue = preValue || min
     const onMousemove = bind(document, 'mousemove', e => {
       const distance = e.clientX - start
-      const diff = Math.round((distance / this.$runway.clientWidth) * 100)
+      const scale = distance / this.$runway.clientWidth
-      let newValue = preValue + diff
+      const diff = Math.round(scale * (max - min))
-      newValue = Math.floor(newValue)
+      let newValue = Math.floor(preValue + diff)
-      if (newValue < 0) {
+      // console.log({ diff, preValue })
-        newValue = 0
+      let newProgress = progress + Math.floor(scale * 100)
+      if (newValue < min) {
+        newValue = min
       }
-      if (newValue > 100) {
+      if (newValue > max) {
-        newValue = 100
+        newValue = max
       }
-      this.$bar.style.width = newValue + '%'
+      if (newValue % step) {
-      this.$dotWrap.style.left = newValue + '%'
+        return
-      this.$tips.style.left = newValue + '%'
+      }
+      //  console.warn(newValue)
       this.value = newValue
+      this.setProgress(newProgress)
     })
 
-    bind(document, 'mouseup', e => {
+    const onMouseup = bind(document, 'mouseup', () => {
       unbind(document, 'mousemove', onMousemove)
-      document.documentElement.classList.toggle('cursor-default')
+      unbind(document, 'mouseup', onMouseup)
     })
   }
   onClick(e) {
-    console.log(e)
+    if (e.target !== this.$refs.runway) {
+      return
+    }
+    const { max, min, step } = this
     const { clientWidth } = e.target
     const { offsetX } = e
-    this.value = Math.floor((offsetX / clientWidth) * 100)
+    const range = max - min
-    const barWidth = `${this.value}%`
+    const scale = offsetX / clientWidth
-
+    // console.log(
-    this.$bar.style.width = barWidth
+    //   {
-    this.$dotWrap.style.left = barWidth
+    //     scale,
-    this.$tips.style.left = barWidth
+    //     range
+    //   },
+    //   scale * range + min
+    // )
+    let newValue = Math.floor(scale * range + min)
+    const mod = newValue % step
+    if (mod) {
+      const half = step / 2
+      if (mod > half) {
+        newValue += step - mod
+      } else {
+        newValue -= mod
+      }
+    }
+    this.value = newValue
+    console.log(scale * 100)
+    //const progress = Math.floor(scale * 100)
+    const progress = Math.floor(((newValue - min) / range) * 100)
+    // console.log({ progress })
+    this.setProgress(progress)
+  }
+  setProgress(val) {
+    val = Math.floor(val)
+    val = val > 100 ? 100 : val
+    val = val < 0 ? 0 : val
+    this.$bar.style.width = `${val}%`
+    this.$dotWrap.style.left = `${val}%`
+    this.$tips.style.left = `${val}%`
+    this.progress = val
   }
   render() {
     return html`<div class="slider" ref="slider">
-      <div class="runway" @click=${this.onClick}>
+      <div ref="runway" class="runway" @click=${this.onClick}>
-        <div class="bar"></div>
+        <div class="bar" ref="bar"></div>
-        <div class="dot-wrapper" @mousedown=${this.onMousedown}>
+        <div class="dot-wrapper" ref="dotWrap" @mousedown=${this.onMousedown}>
-          <div class="dot" ref="dot"></div>
+          <div class="dot"></div>
         </div>
       </div>
-      <div class="tips">${this.value}</div>
+      <div class="tips" ref="tips">${this.value}</div>
     </div>`
   }
 }