Added enable() and disable() methods for toggling ability to drag.

fxos-components · Sep 3, 2015 · 3648b01 · 3648b01
1 parent 8bb677e
commit 3648b01
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 3 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "drag",
   "main": "drag.js",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "homepage": "https://github.com/gaia-components/drag",
   "authors": [
     "Wilson Page <wilsonpage@me.com>"

diff --git a/drag.js b/drag.js
@@ -60,6 +60,7 @@ function Drag(config) {
   debug('init', config);
   this.config(config);
   this.dragging = false;
+  this.enabled = true;
   this.setupEvents();
 }
 
@@ -92,6 +93,29 @@ Drag.prototype.setupEvents = function() {
   this.handle.el.addEventListener(pointer.down, this.onPointerStart);
 };
 
+/**
+ * Enables dragging.
+ *
+ * @public
+ */
+Drag.prototype.enable = function() {
+  this.enabled = true;
+};
+
+/**
+ * Disables dragging.
+ *
+ * @public
+ */
+Drag.prototype.disable = function() {
+  this.enabled = false;
+
+  if (this.point) {
+    this.translate(this.startPosition.x, this.startPosition.y);
+    this.onPointerEnd();
+  }
+};
+
 /**
  * Adds events listeners and updates
  * the `dragging` flag.
@@ -100,10 +124,20 @@ Drag.prototype.setupEvents = function() {
  * @private
  */
 Drag.prototype.onPointerStart = function(e) {
+  if (!this.enabled) {
+    return;
+  }
+
   debug('pointer start', e);
   this.point = getPoint(e);
+  this.startPosition = {
+    x: this.handle.x,
+    y: this.handle.y
+  };
+
   addEventListener(pointer.move, this.onPointerMove);
   addEventListener(pointer.up, this.onPointerEnd);
+
   clearTimeout(this.timeout);
   this.timeout = setTimeout(() => this.dragging = true, 200);
 };
@@ -117,11 +151,18 @@ Drag.prototype.onPointerStart = function(e) {
  */
 Drag.prototype.onPointerEnd = function(e) {
   debug('pointer end', e);
+  this.point = null;
+  this.startPosition = null;
+
   clearTimeout(this.timeout);
   this.timeout = setTimeout(() => this.dragging = false);
+
   removeEventListener(pointer.move, this.onPointerMove);
   removeEventListener(pointer.up, this.onPointerEnd);
-  this.dispatch('ended', e);
+
+  if (this.enabled) {
+    this.dispatch('ended', e);
+  }
 };
 
 /**

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "drag",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "",
   "main": "drag.js",
   "scripts": {

diff --git a/test/test.js b/test/test.js
@@ -74,6 +74,78 @@ suite('Drag', function() {
       assert.equal(style.transform, 'translate(300px, 0px)');
       touch(window,'touchend', x, y);
     });
+
+    test('it doesn\'t move when disabled', function() {
+      var style = this.handle.style;
+      var x = this.handle.offsetLeft + 10;
+      var y = this.handle.offsetTop;
+
+      this.drag.translate(0, 0);
+      this.drag.disable();
+      touch(this.handle,'touchstart', x, y);
+      touch(window,'touchmove', x, y);
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchend', x, y);
+    });
+
+    test('it resets when disabled while dragging', function() {
+      var style = this.handle.style;
+      var x = this.handle.offsetLeft + 10;
+      var y = this.handle.offsetTop;
+
+      touch(this.handle,'touchstart', x, y);
+      touch(window,'touchmove', x, y);
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(5px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(10px, 0px)');
+      this.drag.disable();
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchend', x, y);
+    });
+
+    test('it moves with the pointer when re-enabled', function() {
+      var style = this.handle.style;
+      var x = this.handle.offsetLeft + 10;
+      var y = this.handle.offsetTop;
+
+      this.drag.translate(0, 0);
+      this.drag.disable();
+      touch(this.handle,'touchstart', x, y);
+      touch(window,'touchmove', x, y);
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(0px, 0px)');
+      touch(window,'touchend', x, y);
+
+      this.drag.enable();
+      touch(this.handle,'touchstart', x, y);
+      touch(window,'touchmove', x, y);
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(5px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(10px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(15px, 0px)');
+      touch(window,'touchmove', x+=5, y);
+      assert.equal(style.transform, 'translate(20px, 0px)');
+      touch(window,'touchend', x, y);
+    });
   });
 
   suite('events', function() {