v 0.4.11

fixes #49
Stryzhevskyi · Sep 7, 2019 · ff029ec · ff029ec
1 parent c2b199d
commit ff029ec
Show file tree

Hide file tree

Showing 7 changed files with 195 additions and 1,180 deletions.
diff --git a/dist/range-slider.js b/dist/range-slider.js
diff --git a/dist/range-slider.js.map b/dist/range-slider.js.map
diff --git a/dist/range-slider.min.js b/dist/range-slider.min.js
diff --git a/dist/range-slider.min.js.map b/dist/range-slider.min.js.map
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "rangeslider-pure",
   "title": "range-slider",
   "description": "Simple, small and fast vanilla JavaScript polyfill for the HTML5 <input type=\"range\"> slider element",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "main": "dist/range-slider.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --no-inline --watch-content-base",
@@ -52,8 +52,7 @@
     "cross-env": "5.0.5",
     "css-loader": "0.28.7",
     "cssnano": "3.10.0",
-    "cssnext": "1.8.4",
-    "eslint": "4.7.0",
+    "eslint": "4.18.2",
     "eslint-config-standard": "10.2.1",
     "eslint-loader": "2.1.1",
     "eslint-plugin-import": "2.7.0",

diff --git a/src/range-slider.js b/src/range-slider.js
@@ -30,6 +30,8 @@ const defaults = {
   vertical: false
 };
 
+let verticalSlidingFixRegistered = false;
+
 /**
  * Plugin
  * @param {HTMLElement} element
@@ -43,6 +45,8 @@ export default class RangeSlider {
     let stickAttribute;
     let stickValues;
 
+    RangeSlider.instances.push(this);
+
     this.element = element;
     this.options = func.simpleExtend(defaults, options);
     this.polyfill = this.options.polyfill;
@@ -55,6 +59,8 @@ export default class RangeSlider {
     this.isInteractsNow = false;
     this.needTriggerEvents = false;
 
+    this._addVerticalSlideScrollFix();
+
     // Plugin should only be used as a polyfill
     if (!this.polyfill) {
       // Input range support?
@@ -195,6 +201,37 @@ export default class RangeSlider {
     this.element.addEventListener('change', this._changeEventListener, false);
   }
 
+  /**
+   * A lightweight plugin wrapper around the constructor,preventing against multiple instantiations
+   * @param {Element} el
+   * @param {Object} options
+   */
+  static create(el, options) {
+    const createInstance = (el) => {
+      let data = el[pluginName];
+
+      // Create a new instance.
+      if (!data) {
+        data = new RangeSlider(el, options);
+        el[pluginName] = data;
+      }
+    };
+
+    if (el.length) {
+      Array.prototype.slice.call(el).forEach(function (el) {
+        createInstance(el);
+      });
+    } else {
+      createInstance(el);
+    }
+  }
+
+  static _touchMoveScrollHandler (event) {
+    if (RangeSlider.slidingVertically) {
+      event.preventDefault();
+    }
+  }
+
   /* public methods */
 
   /**
@@ -249,30 +286,11 @@ export default class RangeSlider {
     if (this.range) {
       this.range.parentNode.removeChild(this.range);
     }
-  }
-
-  /**
-   * A lightweight plugin wrapper around the constructor,preventing against multiple instantiations
-   * @param {Element} el
-   * @param {Object} options
-   */
-  static create(el, options) {
-    const createInstance = (el) => {
-      let data = el[pluginName];
 
-      // Create a new instance.
-      if (!data) {
-        data = new RangeSlider(el, options);
-        el[pluginName] = data;
-      }
-    };
+    RangeSlider.instances = RangeSlider.instances.filter((plugin) => plugin !== this);
 
-    if (el.length) {
-      Array.prototype.slice.call(el).forEach(function (el) {
-        createInstance(el);
-      });
-    } else {
-      createInstance(el);
+    if (!RangeSlider.instances.some((plugin) => plugin.vertical)) {
+      this._removeVerticalSlideScrollFix();
     }
   }
 
@@ -354,6 +372,18 @@ export default class RangeSlider {
     }
   }
 
+  _addVerticalSlideScrollFix() {
+    if (this.vertical && !verticalSlidingFixRegistered) {
+      document.addEventListener('touchmove', RangeSlider._touchMoveScrollHandler, { passive: false });
+      verticalSlidingFixRegistered = true;
+    }
+  }
+
+  _removeVerticalSlideScrollFix() {
+    document.removeEventListener('touchmove', RangeSlider._touchMoveScrollHandler);
+    verticalSlidingFixRegistered = false;
+  }
+
   _handleResize() {
     return func.debounce(() => {
       // Simulate resizeEnd event.
@@ -409,6 +439,10 @@ export default class RangeSlider {
       if (this.onSlideEnd && typeof this.onSlideEnd === 'function') {
         this.onSlideEnd(this.value, this.percent, this.position);
       }
+
+      if (this.vertical) {
+        RangeSlider.slidingVertically = false;
+      }
     }
     this.onSlideEventsCount = 0;
     this.isInteractsNow = false;
@@ -464,6 +498,10 @@ export default class RangeSlider {
       if (this.onSlide && typeof this.onSlide === 'function') {
         this.onSlide(this.value, this.percent, this.position);
       }
+
+      if (this.vertical) {
+        RangeSlider.slidingVertically = true;
+      }
     }
 
     this.onSlideEventsCount++;
@@ -601,3 +639,5 @@ export default class RangeSlider {
 RangeSlider.version = VERSION;
 RangeSlider.dom = dom;
 RangeSlider.functions = func;
+RangeSlider.instances = [];
+RangeSlider.slidingVertically = false;