add Destroy method. Ref #72

add CommonJS exports in dist/pkgd files Add changelog tick version v1.1.2
desandro · Dec 16, 2014 · 634a05d · 634a05d
1 parent e14030e
commit 634a05d
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -130,6 +130,12 @@ draggie.once( 'dragMove', function() {
 
 ## Methods
 
+### destroy
+
+``` js
+draggie.destroy()
+```
+
 ### disable
 
 ``` js

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "draggabilly",
   "main": "draggabilly.js",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "make that shiz draggable",
   "dependencies": {
     "classie": "^1",

diff --git a/changelog.md b/changelog.md
@@ -0,0 +1,54 @@
+# Changelog
+
+#### v1.1.2
+
+Add `destroy` method. Fixes [#72](https://github.com/desandro/draggabilly/issues/72)
+
+#### v1.1.1
+
++ Add packaged files in `dist/`. Fixes [#55](https://github.com/desandro/draggabilly/issues/55)
++ Add CommonJS support for npm and Browserify
+
+### v1.1.0
+
+Add support for IE10, IE11, Microsoft Surface
+
+#### v1.0.9
+
+Add `axis` option. Fixes [#31](https://github.com/desandro/draggabilly/issues/31)
+
+#### v1.0.8
+
+Add `grid` option. Fixes [#20](https://github.com/desandro/draggabilly/issues/20)
+
+#### v1.0.7
+
+Dismiss right-button clicks. Fixes [#29](https://github.com/desandro/draggabilly/issues/29)
+
+#### v1.0.6
+
+Fix IE8 bug with double-bound events. Fixes [#38](https://github.com/desandro/draggabilly/issues/38)
+
+#### v1.0.5
+
+Fix AMD dependencies
+
+#### v1.0.4
+
+Bind `touchcancel` event. Fixes [#18](https://github.com/desandro/draggabilly/issues/18)
+
+#### v1.0.3
+
+Fix IE8 bug, dragging images. Fixes [#22](https://github.com/desandro/draggabilly/issues/22)
+
+#### v1.0.2
+
+Add AMD support. Fixes [#6](https://github.com/desandro/draggabilly/issues/6)
+
+#### v1.0.1
+
+Refactor isElement
+
+## v1.0.0
+
+Initial public release
diff --git a/dist/draggabilly.pkgd.js b/dist/draggabilly.pkgd.js
@@ -1,5 +1,5 @@
 /*!
- * Draggabilly PACKAGED v1.1.0
+ * Draggabilly PACKAGED v1.1.2
  * Make that shiz draggable
  * http://draggabilly.desandro.com
  * MIT license
@@ -846,7 +846,7 @@ if ( typeof define === 'function' && define.amd ) {
 })( window );
 
 /*!
- * Draggabilly v1.1.0
+ * Draggabilly v1.1.2
  * Make that shiz draggable
  * http://draggabilly.desandro.com
  * MIT license
@@ -990,26 +990,56 @@ Draggabilly.prototype.setHandles = function() {
   this.handles = this.options.handle ?
     this.element.querySelectorAll( this.options.handle ) : [ this.element ];
 
+  this.bindHandles( true );
+};
+
+// -------------------------- bind -------------------------- //
+
+/**
+ * @param {Boolean} isBind - will unbind if falsey
+ */
+Draggabilly.prototype.bindHandles = function( isBind ) {
+  var binder;
+  if ( window.navigator.pointerEnabled ) {
+    binder = this.bindPointer;
+  } else if ( window.navigator.msPointerEnabled ) {
+    binder = this.bindMSPointer;
+  } else {
+    binder = this.bindMouseTouch;
+  }
+  // munge isBind, default to true
+  isBind = isBind === undefined ? true : !!isBind;
   for ( var i=0, len = this.handles.length; i < len; i++ ) {
     var handle = this.handles[i];
-    // bind pointer start event
-    if ( window.navigator.pointerEnabled ) {
-      // W3C Pointer Events, IE11. See https://coderwall.com/p/mfreca
-      eventie.bind( handle, 'pointerdown', this );
-      // disable scrolling on the element
-      handle.style.touchAction = 'none';
-    } else if ( window.navigator.msPointerEnabled ) {
-      // IE10 Pointer Events
-      eventie.bind( handle, 'MSPointerDown', this );
-      // disable scrolling on the element
-      handle.style.msTouchAction = 'none';
-    } else {
-      // listen for both, for devices like Chrome Pixel
-      //   which has touch and mouse events
-      eventie.bind( handle, 'mousedown', this );
-      eventie.bind( handle, 'touchstart', this );
-      disableImgOndragstart( handle );
-    }
+    binder.call( this, handle, isBind );
+  }
+};
+
+Draggabilly.prototype.bindPointer = function( handle, isBind ) {
+  // W3C Pointer Events, IE11. See https://coderwall.com/p/mfreca
+  var bindMethod = isBind ? 'bind' : 'unbind';
+  eventie[ bindMethod ]( handle, 'pointerdown', this );
+  // disable scrolling on the element
+  handle.style.touchAction = isBind ? 'none' : '';
+};
+
+Draggabilly.prototype.bindMSPointer = function( handle, isBind ) {
+  // IE10 Pointer Events
+  var bindMethod = isBind ? 'bind' : 'unbind';
+  eventie[ bindMethod ]( handle, 'MSPointerDown', this );
+  // disable scrolling on the element
+  handle.style.msTouchAction = isBind ? 'none' : '';
+};
+
+Draggabilly.prototype.bindMouseTouch = function( handle, isBind ) {
+  // listen for both, for devices like Chrome Pixel
+  //   which has touch and mouse events
+  var bindMethod = isBind ? 'bind' : 'unbind';
+  eventie[ bindMethod ]( handle, 'mousedown', this );
+  eventie[ bindMethod ]( handle, 'touchstart', this );
+  // TODO re-enable img.ondragstart when unbinding
+  if ( isBind ) {
+    disableImgOndragstart( handle );
   }
 };
 
@@ -1037,6 +1067,7 @@ var disableImgOndragstart = !isIE8 ? noop : function( handle ) {
   }
 };
 
+// -------------------------- position -------------------------- //
 
 // get left/top position from style
 Draggabilly.prototype._getPosition = function() {
@@ -1412,6 +1443,8 @@ Draggabilly.prototype.positionDrag = transformProperty ?
     this.element.style[ transformProperty ] = translate( this.dragPoint.x, this.dragPoint.y );
   } : Draggabilly.prototype.setLeftTop;
 
+// -----  ----- //
+
 Draggabilly.prototype.enable = function() {
   this.isEnabled = true;
 };
@@ -1423,6 +1456,21 @@ Draggabilly.prototype.disable = function() {
   }
 };
 
+Draggabilly.prototype.destroy = function() {
+  this.disable();
+  // reset styles
+  if ( transformProperty ) {
+    this.element.style[ transformProperty ] = '';
+  }
+  this.element.style.left = '';
+  this.element.style.top = '';
+  this.element.style.position = '';
+  // unbind handles
+  this.bindHandles( false );
+};
+
+// -----  ----- //
+
 return Draggabilly;
 
 } // end definition
@@ -1439,6 +1487,15 @@ if ( typeof define === 'function' && define.amd ) {
       'get-size/get-size'
     ],
     draggabillyDefinition );
+} else if ( typeof exports === 'object' ) {
+  // CommonJS
+  module.exports = draggabillyDefinition(
+    require('desandro-classie'),
+    require('wolfy87-eventemitter'),
+    require('eventie'),
+    require('desandro-get-style-property'),
+    require('get-size')
+  );
 } else {
   // browser global
   window.Draggabilly = draggabillyDefinition(

diff --git a/dist/draggabilly.pkgd.min.js b/dist/draggabilly.pkgd.min.js
diff --git a/draggabilly.js b/draggabilly.js
@@ -1,5 +1,5 @@
 /*!
- * Draggabilly v1.1.1
+ * Draggabilly v1.1.2
  * Make that shiz draggable
  * http://draggabilly.desandro.com
  * MIT license
@@ -143,26 +143,56 @@ Draggabilly.prototype.setHandles = function() {
   this.handles = this.options.handle ?
     this.element.querySelectorAll( this.options.handle ) : [ this.element ];
 
+  this.bindHandles( true );
+};
+
+// -------------------------- bind -------------------------- //
+
+/**
+ * @param {Boolean} isBind - will unbind if falsey
+ */
+Draggabilly.prototype.bindHandles = function( isBind ) {
+  var binder;
+  if ( window.navigator.pointerEnabled ) {
+    binder = this.bindPointer;
+  } else if ( window.navigator.msPointerEnabled ) {
+    binder = this.bindMSPointer;
+  } else {
+    binder = this.bindMouseTouch;
+  }
+  // munge isBind, default to true
+  isBind = isBind === undefined ? true : !!isBind;
   for ( var i=0, len = this.handles.length; i < len; i++ ) {
     var handle = this.handles[i];
-    // bind pointer start event
-    if ( window.navigator.pointerEnabled ) {
-      // W3C Pointer Events, IE11. See https://coderwall.com/p/mfreca
-      eventie.bind( handle, 'pointerdown', this );
-      // disable scrolling on the element
-      handle.style.touchAction = 'none';
-    } else if ( window.navigator.msPointerEnabled ) {
-      // IE10 Pointer Events
-      eventie.bind( handle, 'MSPointerDown', this );
-      // disable scrolling on the element
-      handle.style.msTouchAction = 'none';
-    } else {
-      // listen for both, for devices like Chrome Pixel
-      //   which has touch and mouse events
-      eventie.bind( handle, 'mousedown', this );
-      eventie.bind( handle, 'touchstart', this );
-      disableImgOndragstart( handle );
-    }
+    binder.call( this, handle, isBind );
+  }
+};
+
+Draggabilly.prototype.bindPointer = function( handle, isBind ) {
+  // W3C Pointer Events, IE11. See https://coderwall.com/p/mfreca
+  var bindMethod = isBind ? 'bind' : 'unbind';
+  eventie[ bindMethod ]( handle, 'pointerdown', this );
+  // disable scrolling on the element
+  handle.style.touchAction = isBind ? 'none' : '';
+};
+
+Draggabilly.prototype.bindMSPointer = function( handle, isBind ) {
+  // IE10 Pointer Events
+  var bindMethod = isBind ? 'bind' : 'unbind';
+  eventie[ bindMethod ]( handle, 'MSPointerDown', this );
+  // disable scrolling on the element
+  handle.style.msTouchAction = isBind ? 'none' : '';
+};
+
+Draggabilly.prototype.bindMouseTouch = function( handle, isBind ) {
+  // listen for both, for devices like Chrome Pixel
+  //   which has touch and mouse events
+  var bindMethod = isBind ? 'bind' : 'unbind';
+  eventie[ bindMethod ]( handle, 'mousedown', this );
+  eventie[ bindMethod ]( handle, 'touchstart', this );
+  // TODO re-enable img.ondragstart when unbinding
+  if ( isBind ) {
+    disableImgOndragstart( handle );
   }
 };
 
@@ -190,6 +220,7 @@ var disableImgOndragstart = !isIE8 ? noop : function( handle ) {
   }
 };
 
+// -------------------------- position -------------------------- //
 
 // get left/top position from style
 Draggabilly.prototype._getPosition = function() {
@@ -565,6 +596,8 @@ Draggabilly.prototype.positionDrag = transformProperty ?
     this.element.style[ transformProperty ] = translate( this.dragPoint.x, this.dragPoint.y );
   } : Draggabilly.prototype.setLeftTop;
 
+// -----  ----- //
+
 Draggabilly.prototype.enable = function() {
   this.isEnabled = true;
 };
@@ -576,6 +609,21 @@ Draggabilly.prototype.disable = function() {
   }
 };
 
+Draggabilly.prototype.destroy = function() {
+  this.disable();
+  // reset styles
+  if ( transformProperty ) {
+    this.element.style[ transformProperty ] = '';
+  }
+  this.element.style.left = '';
+  this.element.style.top = '';
+  this.element.style.position = '';
+  // unbind handles
+  this.bindHandles( false );
+};
+
+// -----  ----- //
+
 return Draggabilly;
 
 } // end definition

diff --git a/index.html b/index.html
@@ -170,7 +170,7 @@ <h1>Draggabilly</h1>
   var drag1 = new Draggabilly( ex1 );
 
   var ex2 = document.getElementById('ex2');
-  var drag2 = new Draggabilly( ex2 );
+  var drag2 = window.drag2 = new Draggabilly( ex2 );
 
 
   drag2.on( 'dragStart', function( instance, event, pointer ) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "draggabilly",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "make that shiz draggable",
   "main": "draggabilly.js",
   "dependencies": {