feat: support realease and cancel events

huozhi · May 25, 2019 · 758f9d7 · 758f9d7
1 parent 9d94460
commit 758f9d7
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 40 deletions.
diff --git a/example/app.js b/example/app.js
@@ -5,6 +5,8 @@ const logs = []
 const logNode = document.getElementById('logs')
 const statusNode = document.getElementById('status')
 const rootNode = document.getElementById('app')
+const mouseToggler = document.querySelector('#mouse-toggler')
+const touchToggler = document.querySelector('#touch-toggler')
 const block = document.querySelector('.scrub__head')
 
 const mouseEvents = [
@@ -31,46 +33,67 @@ function renderLog() {
 }
 
 function app() {
-  window.addEventListener('touchmove', e => e.preventDefault())
-
-  const allEvents = mouseEvents.concat(touchEvents).concat(pointerEvents)
+  const allEvents = []; mouseEvents.concat(touchEvents).concat(pointerEvents)
   allEvents.forEach(event => {
     rootNode.addEventListener(event, () => {
-      const args = [event, event.pointerType].filter(Boolean)
-      logging(args.join(' '))
-      renderLog()
+      // add promise 'cause directly re-render will block checkbox triggering
+      Promise.resolve(() => {
+        const args = [event, event.pointerType].filter(Boolean)
+        logging(args.join(' '))
+        renderLog()
+      })
     })
   })
 
   function start(e) {
-    statusNode.innerText = window.PointerEvent ? 'PointerStart' : 'Start'
+    statusNode.innerText = 'Scrub Start'
     const clientX = e.touches ? e.touches[0].clientX : e.clientX
-
     block.style.left = `${clientX - 40}px`
   }
 
   function move(e) {
-    statusNode.innerText = window.PointerEvent ? 'PointerMove' : 'Move'
+    statusNode.innerText = 'Scrub Move'
     const clientX = e.touches ? e.touches[0].clientX : e.clientX
     block.style.left = `${clientX - 40}px`
   }
 
   function end() {
-    statusNode.innerText = window.PointerEvent ? 'PointerEnd' : 'End'
+    statusNode.innerText = 'Scrub End'
+  }
+
+  function observeScrubConfiguration({isMouseSupportEnabled, isTouchSupportEnabled}) {
+    return scrub(
+      block,
+      {
+        onStart: start,
+        onMove: move,
+        onEnd: end
+      },
+      {
+        mouse: isMouseSupportEnabled,
+        touch: isTouchSupportEnabled,
+      }
+    )
   }
 
-  scrub(
-    block,
-    {
-      onStart: start,
-      onMove: move,
-      onEnd: end
-    },
-    {
-      mouse: true,
-      touch: true
-    }
-  )
+  let releaseScrub = () => {}
+  ;[mouseToggler, touchToggler].forEach(toggler => {
+    toggler.addEventListener('change', () => {
+      console.log('onchange', mouseToggler.value, mouseToggler.checked, touchToggler.checked)
+      if (!mouseToggler.checked) mouseToggler.removeAttribute('checked')
+      if (!touchToggler.checked) touchToggler.removeAttribute('checked')
+      releaseScrub();
+      releaseScrub = observeScrubConfiguration({
+        isMouseSupportEnabled: mouseToggler.checked, 
+        isTouchSupportEnabled: touchToggler.checked
+      })
+    })
+  })
+
+  releaseScrub = observeScrubConfiguration({
+    isMouseSupportEnabled: mouseToggler.checked, 
+    isTouchSupportEnabled: touchToggler.checked
+  })
 }
 
 app()
diff --git a/example/index.html b/example/index.html
@@ -2,14 +2,22 @@
 <html lang="en">
 
 <head>
-	<title>Scrub</title>
+	<title>Universal Scrub Experience</title>
 	<meta charset="UTF-8" />
 	<meta name="viewport" content="width=device-width">
 </head>
 
 <body>
 	<div id="app">
+		<h1>
+			Universal Scrub Experience
+		</h1>
+		<div class="togglers">
+			<input type="checkbox" checked id="touch-toggler"> Enable Touch Support
+			<input type="checkbox" checked id="mouse-toggler"> Enable Mouse Support
+		</div>
 		<div id="status">Pending</div>
+
 		<div id="logs"></div>
 		<div class="scrub">
 			<div class="scrub__head"></div>

diff --git a/example/styles.css b/example/styles.css
@@ -19,19 +19,21 @@ body {
 }
 
 #app {
+  margin: auto;
+  position: relative;
   width: 100%;
+  max-width: 640px;
   padding: 0 20px;
-  max-height: 100%;
+  height: 100%;
 }
 
 #logs {
   position: absolute;
-  bottom: 10px;
-  right: 0;
+  bottom: 20px;
+  right: 20px;
 }
 
 .scrub {
-  position: absolute;
   margin-top: 60px;
   width: 350px;
   height: 20px;
@@ -47,3 +49,7 @@ body {
   margin-top: -20px;
   top: 50%;
 }
+
+.togglers {
+  margin-bottom: 30px;
+}
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "dist/scrub.js",
   "scripts": {
     "start": "parcel example/index.html -d example/dist --cache-dir example/.cache",
-    "build": "rm -rf dist/* && bunchee src/scrub.js"
+    "build": "bunchee src/scrub.js"
   },
   "repository": {
     "type": "git",

diff --git a/src/scrub.js b/src/scrub.js
@@ -19,31 +19,37 @@ function scrub(
     ? ['pointerdown', 'pointermove', 'pointerup']
     : ['touchstart', 'touchmove', 'touchend']
 
-  const cancelEvent = isPointerSupported ? 'pointerleave' : 'touchcancel'
+  const cancelEvent = isPointerSupported ? 'pointercancel' : 'touchcancel'
 
   const [startEvent, moveEvent, endEvent] = events
   let scrubbing = false
 
+  function onScrubStart(e) {
+    scrubbing = true
+    onStart(e)
+  }
+
+  function onScrubEnd(e) {
+    onEnd(e)
+    scrubbing = false
+  }
+
   function handleStart(e) {
     scrubbing = true
-    if (isMouseEnabled && isMouseTypePointerEvent(e)) onStart(e)
-    if (isTouchEnabled && (isTouchTypePointerEvent(e) || isTouchEvent(e)))
-      onStart(e)
+    if (isMouseEnabled && isMouseTypePointerEvent(e)) onScrubStart(e)
+    if (isTouchEnabled && (isTouchTypePointerEvent(e) || isTouchEvent(e))) onScrubStart(e)
   }
 
   function handleMove(e) {
     if (scrubbing) {
       if (isMouseEnabled && isMouseTypePointerEvent(e)) onMove(e)
-      if (isTouchEnabled && (isTouchTypePointerEvent(e) || isTouchEvent(e)))
-        onMove(e)
+      if (isTouchEnabled && (isTouchTypePointerEvent(e) || isTouchEvent(e))) onMove(e)
     }
   }
 
-  function handleEnd(e) {
-    scrubbing = false
-    if (isMouseEnabled && isMouseTypePointerEvent(e)) onEnd(e)
-    if (isTouchEnabled && (isTouchTypePointerEvent(e) || isTouchEvent(e)))
-      onEnd(e)
+  function handleEnd(e) {    
+    if (isMouseEnabled && isMouseTypePointerEvent(e)) onScrubEnd(e)
+    if (isTouchEnabled && (isTouchTypePointerEvent(e) || isTouchEvent(e))) onScrubEnd(e)
   }
 
   node.addEventListener(startEvent, handleStart)
@@ -55,7 +61,18 @@ function scrub(
     node.addEventListener('mousedown', handleStart)
     node.addEventListener('mousemove', handleMove)
     node.addEventListener('mouseup', handleEnd)
-    node.addEventListener('mouseleave', handleEnd)
+  }
+
+  return function release() {
+    node.removeEventListener(startEvent, handleStart)
+    node.removeEventListener(moveEvent, handleStart)
+    node.removeEventListener(endEvent, handleStart)
+
+    if (!isPointerSupported && isMouseEnabled) {
+      node.removeEventListener('mousedown', handleStart)
+      node.removeEventListener('mousemove', handleMove)
+      node.removeEventListener('mouseup', handleEnd)
+    }
   }
 }