fix(draggable): cancel stop-listener when started dragging again (#24)

* fix(draggable): cancel stop-listener when started dragging again

* chore(dev): replaced watch with dev-server

README.md

@@ -40,7 +40,7 @@ What this module contains:
 * Example markup for a `scroll-snap` slider
 * CSS default styling for a `scroll-snap` slider without scrollbars
 * ES6 class to slightly enhance functionality
-* ES6 class plugins for `loop`, `autoplay`, and `draggable` features
+* ES6 class plugins for `loop`, `autoplay`, and desktop/mouse `draggable` features
 * TypeScript Typings
 
 ## Sizes
@@ -186,8 +186,6 @@ You can add one or multiple of the available Plugins:
 * `ScrollSnapDraggable`: Drag the slider with your mouse. Note: this does not affect mobile behaviour and is not
   necessary for touch sliding.
 
-Additional Note: The `ScrollSnapDraggable` and `ScrollSnapLoop` **do not** work well together.
-
 ```javascript
 import { ScrollSnapSlider } from 'scroll-snap-slider/src/ScrollSnapSlider.js'
 import { ScrollSnapAutoplay } from 'scroll-snap-slider/src/ScrollSnapAutoplay.js'

demo/slider-simple.js

@@ -82,29 +82,9 @@ autoPlayInput.addEventListener('change', function () {
 })
 
 loopInput.addEventListener('change', function () {
-  if (loopInput.disabled) {
-    return
-  }
-
   loopInput.checked ? enablePlugin(loopPlugin) : disablePlugin(loopPlugin)
 })
 
 draggableInput.addEventListener('change', function () {
-  loopInput.toggleAttribute('disabled', draggableInput.checked)
-
-  if (draggableInput.checked) {
-    enablePlugin(draggablePlugin)
-
-    if (loopInput.checked) {
-      disablePlugin(loopPlugin)
-    }
-
-    return
-  }
-
-  if (loopInput.checked) {
-    enablePlugin(loopPlugin)
-  }
-
-  disablePlugin(draggablePlugin)
+  draggableInput.checked ? enablePlugin(draggablePlugin) : disablePlugin(draggablePlugin)
 })

dist/scroll-snap-slider.iife.js

@@ -183,6 +183,7 @@ var ScrollSnapSlider = function(exports) {
      */
     startDragging = (event) => {
       event.preventDefault();
+      this.slider.removeEventListener("slide-stop", this.onSlideStopAfterDrag);
       this.startX = this.lastX = event.clientX;
       this.slider.element.style.scrollBehavior = "auto";
       this.slider.element.style.scrollSnapStop = "unset";

dist/scroll-snap-slider.js

@@ -183,6 +183,7 @@ class ScrollSnapDraggable extends ScrollSnapPlugin {
    */
   startDragging = (event) => {
     event.preventDefault();
+    this.slider.removeEventListener("slide-stop", this.onSlideStopAfterDrag);
     this.startX = this.lastX = event.clientX;
     this.slider.element.style.scrollBehavior = "auto";
     this.slider.element.style.scrollSnapStop = "unset";

dist/scroll-snap-slider.mjs

@@ -181,6 +181,7 @@ class ScrollSnapDraggable extends ScrollSnapPlugin {
    */
   startDragging = (event) => {
     event.preventDefault();
+    this.slider.removeEventListener("slide-stop", this.onSlideStopAfterDrag);
     this.startX = this.lastX = event.clientX;
     this.slider.element.style.scrollBehavior = "auto";
     this.slider.element.style.scrollSnapStop = "unset";

dist/scroll-snap-slider.umd.js

@@ -185,6 +185,7 @@
      */
     startDragging = (event) => {
       event.preventDefault();
+      this.slider.removeEventListener("slide-stop", this.onSlideStopAfterDrag);
       this.startX = this.lastX = event.clientX;
       this.slider.element.style.scrollBehavior = "auto";
       this.slider.element.style.scrollSnapStop = "unset";

docs/index.html

@@ -32,7 +32,7 @@
 <li>Example markup for a <code>scroll-snap</code> slider</li>
 <li>CSS default styling for a <code>scroll-snap</code> slider without scrollbars</li>
 <li>ES6 class to slightly enhance functionality</li>
-<li>ES6 class plugins for <code>loop</code>, <code>autoplay</code>, and <code>draggable</code> features</li>
+<li>ES6 class plugins for <code>loop</code>, <code>autoplay</code>, and desktop/mouse <code>draggable</code> features</li>
 <li>TypeScript Typings</li>
 </ul>
 <a id="md:sizes" class="tsd-anchor"></a><h2><a href="#md:sizes">Sizes</a></h2><p>Here are the sizes of individual modules, using terser and gzip with default options.
@@ -115,7 +115,6 @@
 <li><code>ScrollSnapDraggable</code>: Drag the slider with your mouse. Note: this does not affect mobile behaviour and is not
 necessary for touch sliding.</li>
 </ul>
-<p>Additional Note: The <code>ScrollSnapDraggable</code> and <code>ScrollSnapLoop</code> <strong>do not</strong> work well together.</p>
 <pre><code class="language-javascript"><span class="hl-7">import</span><span class="hl-1"> { </span><span class="hl-10">ScrollSnapSlider</span><span class="hl-1"> } </span><span class="hl-7">from</span><span class="hl-1"> </span><span class="hl-2">&#39;scroll-snap-slider/src/ScrollSnapSlider.js&#39;</span><br/><span class="hl-7">import</span><span class="hl-1"> { </span><span class="hl-10">ScrollSnapAutoplay</span><span class="hl-1"> } </span><span class="hl-7">from</span><span class="hl-1"> </span><span class="hl-2">&#39;scroll-snap-slider/src/ScrollSnapAutoplay.js&#39;</span><br/><span class="hl-7">import</span><span class="hl-1"> { </span><span class="hl-10">ScrollSnapLoop</span><span class="hl-1"> } </span><span class="hl-7">from</span><span class="hl-1"> </span><span class="hl-2">&#39;scroll-snap-slider/src/ScrollSnapLoop.js&#39;</span><br/><br/><span class="hl-11">const</span><span class="hl-1"> </span><span class="hl-12">element</span><span class="hl-1"> = </span><span class="hl-10">document</span><span class="hl-1">.</span><span class="hl-0">querySelector</span><span class="hl-1">(</span><span class="hl-2">&#39;.example-slider&#39;</span><span class="hl-1">)</span><br/><span class="hl-11">const</span><span class="hl-1"> </span><span class="hl-12">slider</span><span class="hl-1"> = </span><span class="hl-11">new</span><span class="hl-1"> </span><span class="hl-0">ScrollSnapSlider</span><span class="hl-1">({ </span><span class="hl-10">element</span><span class="hl-1"> }).</span><span class="hl-0">with</span><span class="hl-1">([</span><br/><span class="hl-1">  </span><span class="hl-11">new</span><span class="hl-1"> </span><span class="hl-0">ScrollSnapAutoplay</span><span class="hl-1">(</span><span class="hl-15">1200</span><span class="hl-1">),</span><br/><span class="hl-1">  </span><span class="hl-11">new</span><span class="hl-1"> </span><span class="hl-10">ScrollSnapLoop</span><br/><span class="hl-1">])</span>
 </code><button>Copy</button></pre>
 <p>Creating your own plugin:</p>

docs/modules/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>index | scroll-snap-slider</title><meta name="description" content="Documentation for scroll-snap-slider"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"><a href="https://barthy-koeln.github.io/scroll-snap-slider/">Demo</a><a href="https://github.com/barthy-koeln/scroll-snap-slider">Repo</a><a href="https://www.npmjs.com/package/scroll-snap-slider">Package</a></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">scroll-snap-slider</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../index.html">scroll-snap-slider</a></li><li><a href="index.html">index</a></li></ul><h1>Module index</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/2e56c88/src/index.ts#L1">src/index.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">References</h3><div class="tsd-index-list"><a href="index.html#ScrollSnapSlider" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-4194304"></use></svg><span>Scroll<wbr/>Snap<wbr/>Slider</span></a>
+<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>index | scroll-snap-slider</title><meta name="description" content="Documentation for scroll-snap-slider"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"><a href="https://barthy-koeln.github.io/scroll-snap-slider/">Demo</a><a href="https://github.com/barthy-koeln/scroll-snap-slider">Repo</a><a href="https://www.npmjs.com/package/scroll-snap-slider">Package</a></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">scroll-snap-slider</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../index.html">scroll-snap-slider</a></li><li><a href="index.html">index</a></li></ul><h1>Module index</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/barthy-koeln/scroll-snap-slider/blob/e82e175/src/index.ts#L1">src/index.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">References</h3><div class="tsd-index-list"><a href="index.html#ScrollSnapSlider" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-4194304"></use></svg><span>Scroll<wbr/>Snap<wbr/>Slider</span></a>
 <a href="index.html#ScrollSnapPlugin" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-4194304"></use></svg><span>Scroll<wbr/>Snap<wbr/>Plugin</span></a>
 <a href="index.html#ScrollSnapLoop" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-4194304"></use></svg><span>Scroll<wbr/>Snap<wbr/>Loop</span></a>
 <a href="index.html#ScrollSnapAutoplay" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-4194304"></use></svg><span>Scroll<wbr/>Snap<wbr/>Autoplay</span></a>

package.json

@@ -51,6 +51,6 @@
     "build:doc": "typedoc --options ./typedoc.json src",
     "build:css": "sass --style expanded src/scroll-snap-slider.scss > dist/scroll-snap-slider.css",
     "build": "./calculate-sizes && vite build && yarn build:doc && yarn build:css",
-    "watch": "vite build --watch"
+    "dev": "vite dev"
   }
 }

src/ScrollSnapDraggable.ts

@@ -24,7 +24,7 @@ export class ScrollSnapDraggable extends ScrollSnapPlugin {
    */
   private startX: number | null
 
-  public constructor(quickSwipeDistance: number | null = null) {
+  public constructor (quickSwipeDistance: number | null = null) {
     super()
 
     this.lastX = null
@@ -36,14 +36,14 @@ export class ScrollSnapDraggable extends ScrollSnapPlugin {
   /**
    * @inheritDoc
    */
-  public get id(): string {
+  public get id (): string {
     return 'ScrollSnapDraggable'
   }
 
   /**
    * @override
    */
-  public enable(): void {
+  public enable (): void {
     this.slider.element.classList.add('-draggable')
     this.slider.addEventListener('mousedown', this.startDragging)
     addEventListener('mouseup', this.stopDragging, { capture: true })
@@ -52,7 +52,7 @@ export class ScrollSnapDraggable extends ScrollSnapPlugin {
   /**
    * @override
    */
-  public disable(): void {
+  public disable (): void {
     this.slider.element.classList.remove('-draggable')
 
     this.slider.removeEventListener('mousedown', this.startDragging)
@@ -72,7 +72,7 @@ export class ScrollSnapDraggable extends ScrollSnapPlugin {
   /**
    * Calculate the target slide after dragging
    */
-  private getFinalSlide(): number {
+  private getFinalSlide (): number {
     if (!this.quickSwipeDistance) {
       return this.slider.slide
     }
@@ -110,6 +110,7 @@ export class ScrollSnapDraggable extends ScrollSnapPlugin {
   private startDragging = (event: MouseEvent) => {
     event.preventDefault()
 
+    this.slider.removeEventListener('slide-stop', this.onSlideStopAfterDrag)
     this.startX = this.lastX = event.clientX
     this.slider.element.style.scrollBehavior = 'auto'
     this.slider.element.style.scrollSnapStop = 'unset'