Add new option ignore for disable dragging on some elements

README.md

@@ -212,6 +212,7 @@ Create a new instance of `Slideout`.
 - `[options.tolerance]` (Number) - The number of `px` needed for the menu can be opened completely, otherwise it closes. Default: `70`.
 - `[options.touch]` (Boolean) - Set this option to false to disable Slideout touch events. Default: `true`.
 - `[options.side]` (String) - The side to open the slideout (`left` or `right`). Default: `left`.
+- `[options.ignore]` (String) - Selector that prevents dragging on matching elements. Default: ``.
 
 ```js
 var slideout = new Slideout({

index.js

@@ -45,6 +45,19 @@ function extend(destination, from) {
 function inherits(child, uber) {
   child.prototype = extend(child.prototype || {}, uber.prototype);
 }
+var matches = function (element, selector) {
+  var matches = element.matches ||
+         element.mozMatchesSelector ||
+         element.msMatchesSelector ||
+         element.oMatchesSelector ||
+         element.webkitMatchesSelector;
+
+  if (!matches) {
+    return false
+  }
+
+  return matches.call(element, selector)
+};
 
 /**
  * Slideout constructor
@@ -60,6 +73,7 @@ function Slideout(options) {
   this._opened = false;
   this._preventOpen = false;
   this._touch = options.touch === undefined ? true : options.touch && true;
+  this._ignore = options.ignore;
 
   // Sets panel
   this.panel = options.panel;
@@ -231,7 +245,7 @@ Slideout.prototype._initTouchEvents = function() {
    */
   this._onTouchMoveFn = function(eve) {
 
-    if (scrolling || self._preventOpen || typeof eve.touches === 'undefined') {
+    if (scrolling || self._preventOpen || typeof eve.touches === 'undefined' || self._elementIsIgnored(eve.target)) {
       return;
     }
 
@@ -272,6 +286,19 @@ Slideout.prototype._initTouchEvents = function() {
 
   };
 
+  this._elementIsIgnored = function (el) {
+    if (self._ignore) {
+      while (el) {
+        if (matches(el, self._ignore)) {
+          return true;
+        }
+        el = el.parentNode;
+      }
+    }
+
+    return false;
+  };
+
   this.panel.addEventListener(touch.move, this._onTouchMoveFn);
 
   return this;

test/test.js

@@ -54,6 +54,7 @@ describe('Slideout', function () {
       '_initTouchEvents',
       '_translateXTo',
       '_setTransition',
+      '_elementIsIgnored',
       'on',
       'once',
       'off',
@@ -191,4 +192,35 @@ describe('Slideout', function () {
       setTimeout(function(){ slideout.close(); }, 750);
     });
   });
+
+  describe('._elementIsIgnored()', function() {
+    it('should return false when no ignore option.', function(){
+      slideout.destroy();
+      slideout = new Slideout({
+        'panel': doc.getElementById('panel'),
+        'menu': doc.getElementById('menu')
+      });
+      assert(slideout._elementIsIgnored(doc.getElementById('menu')) === false);
+    });
+
+    it('should return false when the provided element is not a children of a ignored path.', function(){
+      slideout.destroy();
+      slideout = new Slideout({
+        'panel': doc.getElementById('panel'),
+        'menu': doc.getElementById('menu'),
+        'ignore': '.menu-section-list'
+      });
+      assert(slideout._elementIsIgnored(doc.getElementById('menu')) === false);
+    });
+
+    it('should return true when the provided element is children of a ignored path.', function(){
+      slideout.destroy();
+      slideout = new Slideout({
+        'panel': doc.getElementById('panel'),
+        'menu': doc.getElementById('menu'),
+        'ignore': '.menu-section-list'
+      });
+      assert(slideout._elementIsIgnored(doc.querySelector('.menu-section-list a')) === true);
+    });
+  });
 });