From 4d3afb5e31e5f030b33463662dc7780a8e610fa7 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 21 Nov 2023 14:16:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90loading=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/image-preview/index.js |   6 +-
 src/loading/index.js       | 111 ++++++++++++++++++++-----------------
 2 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/src/image-preview/index.js b/src/image-preview/index.js
index a027f58..03760a7 100644
--- a/src/image-preview/index.js
+++ b/src/image-preview/index.js
@@ -138,7 +138,7 @@ class ImagePreview extends Component {
     this.setZoom(this.#state.scale / 1.2)
   }
   setZoom(val) {
-    const { maxZoom, minZoom } = this
+    let { maxZoom, minZoom } = this
     val = Math.max(val, minZoom)
     val = Math.min(val, maxZoom)
     val = val.toFixed(2)
@@ -195,7 +195,7 @@ class ImagePreview extends Component {
     bind(this.$refs.images, 'mousedown', e => {
       let { clientX: startX, clientY: startY } = e
       let { x, y } = this.#state
-      const onmousemove = bind(document, 'mousemove', e => {
+      let onmousemove = bind(document, 'mousemove', e => {
         e.preventDefault()
         let { clientX, clientY } = e
         let deltaX = clientX - startX
@@ -206,7 +206,7 @@ class ImagePreview extends Component {
           y: deltaY + y
         })
       })
-      const onmouseup = bind(document, 'mouseup', _ => {
+      let onmouseup = bind(document, 'mouseup', _ => {
         unbind(document, 'mousemove', onmousemove)
         unbind(document, 'mouseup', onmouseup)
       })
diff --git a/src/loading/index.js b/src/loading/index.js
index 16ae068..8f64468 100644
--- a/src/loading/index.js
+++ b/src/loading/index.js
@@ -4,23 +4,28 @@
  * @date 2023/04/26 15:20:28
  */
 
-import { html, css, Component, styleMap, nextTick } from 'wkit'
+import { html, css, Component, styleMap } from 'wkit'
 
 class Loading extends Component {
   static props = {
+    progress: 'num!0',
+    duration: 3000,
     value: {
       type: Boolean,
-      default: false,
       observer(v) {
-        if (v && this.loading) {
-          this.#start = void 0
-          this.value = false
-          this.#progress = 0
-          requestAnimationFrame(this.loading)
+        if (this.duration > 0) {
+          if (v) {
+            requestAnimationFrame(this.#loading.bind(this))
+          }
+        } else {
+          if (v) {
+            this.setAttribute('loading', '')
+          } else {
+            this.removeAttribute('loading')
+          }
         }
       }
-    },
-    duration: 3000
+    }
   }
 
   static styles = [
@@ -37,58 +42,60 @@ class Loading extends Component {
 
       .thumb {
         width: 0;
-        height: 1px;
-        background: var(--color-teal-1);
-        box-shadow: 0 0 5px var(--color-teal-1);
+        height: var(--wc-loading-height, 2px);
+        background: var(--wc-loading-background, var(--color-teal-1));
+        box-shadow: 0 0 5px var(--wc-loading-background, var(--color-teal-1));
+        will-change: width;
+        transition: width 0.1s linear;
+      }
+
+      :host([loading]) {
+        .thumb {
+          width: 25% !important;
+          animation: autoplay 1s infinite ease-in-out;
+        }
+      }
+
+      @keyframes autoplay {
+        from,
+        to {
+          transform: translateX(0);
+        }
+        50% {
+          transform: translateX(calc(100vw - 100%));
+        }
       }
     `
   ]
 
-  #force2end = false
-  #start = 0
-  #progress = 0
+  #start
 
-  end() {
-    this.#force2end = true
-  }
-
-  mounted() {
-    this.loading = timestamp => {
-      if (this.#force2end) {
-        if (this.#progress === 100) {
-          this.#force2end = false
-          this.#progress = 0
-          this.$requestUpdate()
-          return
-        }
-        this.#progress = 100
-        this.$requestUpdate()
-      } else {
-        if (this.#start === void 0) {
-          this.#start = timestamp
-        }
-
-        let _time = timestamp - this.#start
-
-        let tmp = ~~(_time / (this.duration / 100))
-        if (tmp !== this.#progress) {
-          this.#progress = tmp
-          this.$requestUpdate()
-        }
-
-        if (_time > this.duration) {
-          this.#progress = 0
-          return
-        }
-      }
-
-      requestAnimationFrame(this.loading)
+  #loading(stamp) {
+    if (this.#start === void 0) {
+      this.#start = stamp
     }
+
+    let time = stamp - this.#start
+    let tmp = ~~(time / (this.duration / 100))
+
+    if (tmp !== this.progress) {
+      this.progress = tmp
+    }
+
+    if (time > this.duration) {
+      this.progress = 0
+      this.#start = void 0
+      this.value = false
+      this.$emit('input')
+      this.$emit('change')
+      return
+    }
+    requestAnimationFrame(this.#loading.bind(this))
   }
 
   render() {
-    let pc = styleMap({ width: this.#progress + '%' })
-    return html` <span class="thumb" style=${pc}></span> `
+    let style = styleMap({ width: this.progress + '%' })
+    return html` <span class="thumb" style=${style}></span> `
   }
 }