Merge pull request #91 from vizzuhq/pointer-seeker

Fixed pointer seeker
vizzuhq · Dec 14, 2023 · 6900300 · 6900300
2 parents a3b6a89 + 1573e84
commit 6900300
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/AnimationQueue.js b/src/AnimationQueue.js
@@ -123,7 +123,7 @@ class AnimationQueue {
     if (configObject.length > 1) {
       startSlideConfig = configObject[0]
       this.vizzu.feature('rendering', false)
-      this.vizzu.animate(startSlideConfig.target, 0)
+      this.vizzu.animate(startSlideConfig.target, 0).catch(this.vizzuCatch)
     }
     const vizzuAnimate = this.vizzu.animate(configObject, firstAnimation.animOptions)
 
@@ -139,7 +139,7 @@ class AnimationQueue {
     })
 
     vizzuAnimate.catch((message) => {
-      if (message !== 'animation canceled') {
+      if (message.name !== 'CancelError') {
         console.error(message)
       }
     })
@@ -149,7 +149,7 @@ class AnimationQueue {
       animOptions: firstAnimation.animOptions
     }
     if (!this.paused && this.direction === 'reverse' && startSlideConfig !== null) {
-      this.vizzu.animate(startSlideConfig.target, 0)
+      this.vizzu.animate(startSlideConfig.target, 0).catch(this.vizzuCatch)
     }
   }
 
@@ -185,10 +185,12 @@ class AnimationQueue {
     this.controller.cancel()
     this.vizzu.feature('rendering', false)
     if (this.lastAnimation.configObject.length > 1) {
-      this.vizzu.animate(this.lastAnimation.configObject[0].target, {
-        position: 1,
-        duration: '0s'
-      })
+      this.vizzu
+        .animate(this.lastAnimation.configObject[0].target, {
+          position: 1,
+          duration: '0s'
+        })
+        .catch(this.vizzuCatch)
     }
     const vizzuAnimate = this.vizzu.animate(
       this._speedUp(this.lastAnimation.configObject),
@@ -203,11 +205,7 @@ class AnimationQueue {
       this.vizzu.feature('rendering', true)
     })
 
-    vizzuAnimate.catch((message) => {
-      if (message !== 'animation canceled') {
-        console.error(message)
-      }
-    })
+    vizzuAnimate.catch(this.vizzuCatch)
   }
 
   seek(percent) {
@@ -216,6 +214,12 @@ class AnimationQueue {
     this.controller.seek(percent + '%')
   }
 
+  vizzuCatch(message) {
+    if (message.name !== 'CancelError') {
+      console.error(message)
+    }
+  }
+
   getParameter(key) {
     if (this._lastParameters && key in this._lastParameters) {
       return this._lastParameters[key]

diff --git a/src/controllers/slider.js b/src/controllers/slider.js
@@ -15,6 +15,8 @@ class Slider extends HTMLElement {
     this.attachShadow({ mode: 'open' })
     this.shadowRoot.innerHTML = this._render()
 
+    let isPointerDown = false
+
     this.slider = this.shadowRoot.getElementById('slider')
 
     // Set up slider event listener
@@ -26,10 +28,26 @@ class Slider extends HTMLElement {
       this.seek(event.target.value / 10)
     })
 
+    window.addEventListener('pointermove', async (e) => {
+      if (this.isDisabled() || !isPointerDown) {
+        return
+      }
+      e.preventDefault()
+      const currentPoition = Math.min(
+        Math.max(0, e.offsetX - this.slider.offsetLeft),
+        this.slider.offsetWidth
+      )
+      const currentPoistionInPercent = currentPoition / this.slider.offsetWidth
+
+      this.seek(currentPoistionInPercent * 100)
+      this.slider.value = currentPoistionInPercent * 1000
+    })
+
     this.slider.addEventListener('pointerdown', async (e) => {
       if (this.isDisabled()) {
         return
       }
+      isPointerDown = true
       const currentSlide = this.player.animationQueue.getParameter('currentSlide')
       this.player._currentSlide = currentSlide
       this.player.animationQueue.clear()
@@ -40,6 +58,7 @@ class Slider extends HTMLElement {
       if (this.isDisabled()) {
         return
       }
+      isPointerDown = false
       this.player.animationQueue.continue()
     })
   }