pulling - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

build/pulling-drawer.js

@@ -258,2 +258,3 @@ (function (global, factory) {
         _this.touch = options.touch !== false;
+        _this.ignoreScrollables = options.ignoreScrollables !== false;
         if (_this.touch) {
@@ -268,2 +269,3 @@ _this.addTouchEvents();
         var _this = this;
+        // tslint:disable-next-line no-this-assignment
         var _a = this, width = _a.width, margin = _a.margin, side = _a.side, slope = _a.slope, sensitivity = _a.sensitivity, menu = _a.menu, panel = _a.panel;
@@ -279,6 +281,23 @@ var sign = (side === 'left' ? 1 : -1);
         var firstMove = false;
+        var scrollable = function (elem) {
+            if (!elem ||
+                elem === document.documentElement ||
+                elem === document.body) {
+                return false;
+            }
+            var _a = getComputedStyle(elem), overflowX = _a.overflowX, overflowY = _a.overflowY;
+            return overflowX === 'auto' ||
+                overflowX === 'scroll' ||
+                (overflowX === 'visible' && overflowY !== 'visible') ||
+                scrollable(elem.parentElement);
+        };
         var onTouchstart = function (e) {
-            if (_this.ignoreSelector && e.target.matches(_this.ignoreSelector)) {
+            var target = e.target;
+            if (_this.ignoreSelector && (target).matches(_this.ignoreSelector)) {
                 return;
             }
+            // ignore when the element is scrollable
+            if (_this.ignoreScrollables && scrollable(target)) {
+                return;
+            }
             _this.emit('touchstart', e);
@@ -285,0 +304,0 @@ if (_this.disabled) {

build/pulling-drawer.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define("pulling",e):t.Pulling=e()}(this,function(){"use strict";function e(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);function s(){this.constructor=t}t.prototype=null===e?Object.create(e):(s.prototype=e.prototype,new s)}function p(t,e){if(!t)throw TypeError("Invalid arguments: "+e)}var m=["linear","ease","ease-in","ease-out","ease-in-out","step-start","step-end"],t=function(n){function t(t){var e=n.call(this,t)||this;return e.touched=!1,e.ignores=[],e.ignoreSelector="",e.touch=!1!==t.touch,e.touch&&e.addTouchEvents(),e}return e(t,n),t.prototype.applyOffset=function(t){},t.prototype.initTouchEvents=function(){var a=this,t=this,c=t.width,r=t.margin,u=t.side,l=t.slope,h=t.sensitivity,d=t.menu,p=t.panel,m="left"===u?1:-1,f=0,y=0,v=0,g=0,b=0,E=0,w=0,T=!1;return{onTouchstart:function(t){if(!(a.ignoreSelector&&t.target.matches(a.ignoreSelector)||(a.emit("touchstart",t),a.disabled||(a.touched=!1,1!==t.touches.length)))){var e=t.touches[0],n=e.clientX,s=e.clientY,i=a.offset(),o=r+i;("left"===u&&n<=o||"right"===u&&window.innerWidth-n<=o)&&(a.touched=!0,y=s,v=f=n,g=i,E=Date.now(),T=!0)}},onTouchmove:function(t){if(a.emit("touchmove",t),!a.disabled&&a.touched){var e=t.touches[0],n=e.clientX,s=e.clientY,i=(n-f)*m;if(!(Math.abs(i)<10)){if(T){var o=s-y,r=Math.abs(o/i);if(l<r)return void(a.touched=!1);a.state.closed&&0<i?a.emit("beforeopen"):a.state.opened&&a.emit("beforeopen"),d.style.transition=null,p.style.transition=null}if(a.state.opened&&0<i||a.state.closed&&i<0)return v=n,void(E=Date.now());a.state.opened=!1,a.state.closed=!1;var u=0<(n-v)*m;a.state.opening=u,a.state.closing=!u;var h=Math.min(Math.max(0,g+i),c);a.applyOffset(h),w=v,v=n,b=E,E=Date.now(),T=!1}}},onTouchend:function(t){if(a.touched&&(a.touched=!1,!T)){a.emit("touchend",t),Object.assign(a.panel.style,a.styles.base.panel),Object.assign(a.menu.style,a.styles.base.menu);var e,n,s=a.offset(),i=t.changedTouches[0].clientX;i===v?(e=w,n=b):(e=v,n=E);var o=(i-e)/(Date.now()-n)*m;c/2<s&&-h<o||h<o?a.open(t):a.close(t)}}}},t.prototype.addTouchEvents=function(){this.touchEvents||(this.touchEvents=this.initTouchEvents()),document.documentElement.addEventListener("touchstart",this.touchEvents.onTouchstart,!1),document.documentElement.addEventListener("touchmove",this.touchEvents.onTouchmove,!1),document.documentElement.addEventListener("touchend",this.touchEvents.onTouchend,!1)},t.prototype.removeTouchEvents=function(){document.documentElement.removeEventListener("touchstart",this.touchEvents.onTouchstart),document.documentElement.removeEventListener("touchmove",this.touchEvents.onTouchmove),document.documentElement.removeEventListener("touchend",this.touchEvents.onTouchend)},t.prototype.ignore=function(t){return this.ignores.push(t),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.unignore=function(e){return this.ignores=this.ignores.filter(function(t){return t!==e}),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.enableTouch=function(){return this.touch||(this.addTouchEvents(),this.touch=!0),this},t.prototype.disableTouch=function(){return this.touch&&(this.removeTouchEvents(),this.touch=!1),this},t}(function(){function d(t){var e=this;if(this.styles={base:{menu:{},panel:{}},open:{menu:{},panel:{}},closed:{menu:{},panel:{}}},this.handlers={beforeclose:[],closed:[],beforeopen:[],opened:[],touchstart:[],touchmove:[],touchend:[]},this.state={opened:!1,opening:!1,closed:!0,closing:!1},this.disabled=!1,!Object.values(d.modes).some(function(t){return e instanceof t}))throw TypeError("Calling this constructor is not allowed. Use `Pulling.create` instead");var n=t.menu,s=t.panel,i=t.side,o=t.mode,r=t.margin,u=t.timing,h=t.timingFunction,a=t.width,c=t.sensitivity,l=t.slope;t.touch;this.menu=n,this.panel=s,this.side=i||"left",this.mode=o||"drawer",this.margin=r||25,this.timing=u||200,this.timingFunction=h||"ease",this.width=a||256,this.sensitivity=c||.25,this.slope=l||.5,p(this.menu instanceof Element,"`menu` must be of type `Element`"),p(this.panel instanceof Element,"`panel` must be of type `Element`"),p("left"===this.side||"right"===this.side,'`side` must be equal to "left" or "right"'),p("number"==typeof this.margin,'`margin` must be of type "number"'),p("number"==typeof this.timing,'`timing` must be of type "number"'),p(m.includes(this.timingFunction),"`timingFunction` must be one of "+m.map(function(t){return'"'+t+'"'}).join(", ")),p("number"==typeof this.width,'`width` must be of type "number"'),p("number"==typeof this.sensitivity,'`sensitivity` must be of type "number"'),p("number"==typeof this.slope,'`slope` must be of type "number"')}return d.create=function(t){var e=t.mode||Object.keys(d.modes)[0]||"drawer";if(!d.modes[e]){var n=Object.keys(d.modes).map(function(t){return'"'+t+'"'}).join(", ");throw TypeError("`mode` must be one of "+n)}return new d.modes[e](t)},d.prototype.emit=function(t,e){var n=this;this.handlers[t].forEach(function(t){return t.call(n,e)})},d.prototype.on=function(t,e){return this.handlers[t].push(e),this},d.prototype.off=function(t,e){return this.handlers[t]=e?this.handlers[t].filter(function(t){return t!==e}):[],this},d.prototype.open=function(t){var e=this;if(this.emit("beforeopen",t),this.disabled)return this;if(this.state.opened)return this;this.state.closed=!1,this.state.closing=!1,this.state.opening=!0,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*(1-n/this.width)+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.open.menu),Object.assign(this.panel.style,this.styles.open.panel);var i=function(){e.state.opening=!1,e.state.opened=!0,Object.assign(e.menu.style,e.styles.open.menu),Object.assign(e.panel.style,e.styles.open.panel),e.emit("opened")};return n===this.width?i():this.afterTransitionend(i),this},d.prototype.close=function(t){var e=this;if(this.emit("beforeclose",t),this.disabled)return this;if(this.state.closed)return this.state.closing=!1,this;this.state.closed=!1,this.state.closing=!0,this.state.opening=!1,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*n/this.width+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.closed.menu),Object.assign(this.panel.style,this.styles.closed.panel);var i=function(){e.state.closing=!1,e.state.closed=!0,Object.assign(e.menu.style,e.styles.closed.menu),Object.assign(e.panel.style,e.styles.closed.panel),e.emit("closed")};return 0===n?i():this.afterTransitionend(i),this},d.prototype.toggle=function(t){return!0===t?this.open():!1===t?this.close():this.toggle(this.state.closed||this.state.closing),this},d.prototype.disable=function(){return this.disabled=!0,this},d.prototype.enable=function(){return this.disabled=!1,this},d.prototype.afterTransitionend=function(t){},d.prototype.offset=function(){return 0},d.modes={},d}()),n=function(s){function t(t){var e,n=s.call(this,t)||this;return n.styles.base.menu=((e={transition:"transform "+n.timing+"ms "+n.timingFunction,overflowX:"hidden",overflowY:"auto",position:"fixed"})[n.side]="-"+n.width+"px",e.top="0",e.bottom="0",e.width=n.width+"px",e.zIndex="1",e),n.styles.open.menu={transform:"translateX("+("right"===n.side?"-":"")+n.width+"px)"},n.styles.closed.menu={transform:"translateX(0)"},Object.assign(n.menu.style,n.styles.base.menu,n.styles.closed.menu),Object.assign(n.panel.style,n.styles.base.panel,n.styles.closed.panel),n.initTransitionend(),n}return e(t,s),t.prototype.offset=function(){var t=this.menu.getBoundingClientRect();return"left"===this.side?t.left+this.width:window.innerWidth-t.left},t.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.menu.style.transform="translateX("+t*e+"px)"},t.prototype.afterTransitionend=function(t){this.onTransitionend=t},t.prototype.initTransitionend=function(){var t=this;this.menu.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},t}(t);return t.modes.drawer=n,Element.prototype.matches=Element.prototype.matches||Element.prototype.matchesSelector||Element.prototype.webkitMatchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector,Object.entries=function(e){return Object.keys(e).map(function(t){return[t,e[t]]})},Object.values=function(e){return Object.keys(e).map(function(t){return e[t]})},Object.assign=Object.assign||function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];for(var s=0,i=e;s<i.length;s++)for(var o=i[s],r=0,u=Object.entries(o);r<u.length;r++){var h=u[r],a=h[0],c=h[1];t[a]=c}return t},Array.prototype.includes=function(t){return-1!==this.indexOf(t)},t});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define("pulling",e):t.Pulling=e()}(this,function(){"use strict";function e(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);function s(){this.constructor=t}t.prototype=null===e?Object.create(e):(s.prototype=e.prototype,new s)}function p(t,e){if(!t)throw TypeError("Invalid arguments: "+e)}var m=["linear","ease","ease-in","ease-out","ease-in-out","step-start","step-end"],t=function(n){function t(t){var e=n.call(this,t)||this;return e.touched=!1,e.ignores=[],e.ignoreSelector="",e.touch=!1!==t.touch,e.ignoreScrollables=!1!==t.ignoreScrollables,e.touch&&e.addTouchEvents(),e}return e(t,n),t.prototype.applyOffset=function(t){},t.prototype.initTouchEvents=function(){var h=this,t=this,c=t.width,u=t.margin,a=t.side,l=t.slope,r=t.sensitivity,d=t.menu,p=t.panel,m="left"===a?1:-1,f=0,y=0,v=0,g=0,b=0,E=0,w=0,T=!1,j=function(t){if(!t||t===document.documentElement||t===document.body)return!1;var e=getComputedStyle(t),n=e.overflowX,s=e.overflowY;return"auto"===n||"scroll"===n||"visible"===n&&"visible"!==s||j(t.parentElement)};return{onTouchstart:function(t){var e=t.target;if(!(h.ignoreSelector&&e.matches(h.ignoreSelector)||h.ignoreScrollables&&j(e)||(h.emit("touchstart",t),h.disabled||(h.touched=!1,1!==t.touches.length)))){var n=t.touches[0],s=n.clientX,o=n.clientY,i=h.offset(),r=u+i;("left"===a&&s<=r||"right"===a&&window.innerWidth-s<=r)&&(h.touched=!0,y=o,v=f=s,g=i,E=Date.now(),T=!0)}},onTouchmove:function(t){if(h.emit("touchmove",t),!h.disabled&&h.touched){var e=t.touches[0],n=e.clientX,s=e.clientY,o=(n-f)*m;if(!(Math.abs(o)<10)){if(T){var i=s-y,r=Math.abs(i/o);if(l<r)return void(h.touched=!1);h.state.closed&&0<o?h.emit("beforeopen"):h.state.opened&&h.emit("beforeopen"),d.style.transition=null,p.style.transition=null}if(h.state.opened&&0<o||h.state.closed&&o<0)return v=n,void(E=Date.now());h.state.opened=!1,h.state.closed=!1;var u=0<(n-v)*m;h.state.opening=u,h.state.closing=!u;var a=Math.min(Math.max(0,g+o),c);h.applyOffset(a),w=v,v=n,b=E,E=Date.now(),T=!1}}},onTouchend:function(t){if(h.touched&&(h.touched=!1,!T)){h.emit("touchend",t),Object.assign(h.panel.style,h.styles.base.panel),Object.assign(h.menu.style,h.styles.base.menu);var e,n,s=h.offset(),o=t.changedTouches[0].clientX;o===v?(e=w,n=b):(e=v,n=E);var i=(o-e)/(Date.now()-n)*m;c/2<s&&-r<i||r<i?h.open(t):h.close(t)}}}},t.prototype.addTouchEvents=function(){this.touchEvents||(this.touchEvents=this.initTouchEvents()),document.documentElement.addEventListener("touchstart",this.touchEvents.onTouchstart,!1),document.documentElement.addEventListener("touchmove",this.touchEvents.onTouchmove,!1),document.documentElement.addEventListener("touchend",this.touchEvents.onTouchend,!1)},t.prototype.removeTouchEvents=function(){document.documentElement.removeEventListener("touchstart",this.touchEvents.onTouchstart),document.documentElement.removeEventListener("touchmove",this.touchEvents.onTouchmove),document.documentElement.removeEventListener("touchend",this.touchEvents.onTouchend)},t.prototype.ignore=function(t){return this.ignores.push(t),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.unignore=function(e){return this.ignores=this.ignores.filter(function(t){return t!==e}),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.enableTouch=function(){return this.touch||(this.addTouchEvents(),this.touch=!0),this},t.prototype.disableTouch=function(){return this.touch&&(this.removeTouchEvents(),this.touch=!1),this},t}(function(){function d(t){var e=this;if(this.styles={base:{menu:{},panel:{}},open:{menu:{},panel:{}},closed:{menu:{},panel:{}}},this.handlers={beforeclose:[],closed:[],beforeopen:[],opened:[],touchstart:[],touchmove:[],touchend:[]},this.state={opened:!1,opening:!1,closed:!0,closing:!1},this.disabled=!1,!Object.values(d.modes).some(function(t){return e instanceof t}))throw TypeError("Calling this constructor is not allowed. Use `Pulling.create` instead");var n=t.menu,s=t.panel,o=t.side,i=t.mode,r=t.margin,u=t.timing,a=t.timingFunction,h=t.width,c=t.sensitivity,l=t.slope;t.touch;this.menu=n,this.panel=s,this.side=o||"left",this.mode=i||"drawer",this.margin=r||25,this.timing=u||200,this.timingFunction=a||"ease",this.width=h||256,this.sensitivity=c||.25,this.slope=l||.5,p(this.menu instanceof Element,"`menu` must be of type `Element`"),p(this.panel instanceof Element,"`panel` must be of type `Element`"),p("left"===this.side||"right"===this.side,'`side` must be equal to "left" or "right"'),p("number"==typeof this.margin,'`margin` must be of type "number"'),p("number"==typeof this.timing,'`timing` must be of type "number"'),p(m.includes(this.timingFunction),"`timingFunction` must be one of "+m.map(function(t){return'"'+t+'"'}).join(", ")),p("number"==typeof this.width,'`width` must be of type "number"'),p("number"==typeof this.sensitivity,'`sensitivity` must be of type "number"'),p("number"==typeof this.slope,'`slope` must be of type "number"')}return d.create=function(t){var e=t.mode||Object.keys(d.modes)[0]||"drawer";if(!d.modes[e]){var n=Object.keys(d.modes).map(function(t){return'"'+t+'"'}).join(", ");throw TypeError("`mode` must be one of "+n)}return new d.modes[e](t)},d.prototype.emit=function(t,e){var n=this;this.handlers[t].forEach(function(t){return t.call(n,e)})},d.prototype.on=function(t,e){return this.handlers[t].push(e),this},d.prototype.off=function(t,e){return this.handlers[t]=e?this.handlers[t].filter(function(t){return t!==e}):[],this},d.prototype.open=function(t){var e=this;if(this.emit("beforeopen",t),this.disabled)return this;if(this.state.opened)return this;this.state.closed=!1,this.state.closing=!1,this.state.opening=!0,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*(1-n/this.width)+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.open.menu),Object.assign(this.panel.style,this.styles.open.panel);var o=function(){e.state.opening=!1,e.state.opened=!0,Object.assign(e.menu.style,e.styles.open.menu),Object.assign(e.panel.style,e.styles.open.panel),e.emit("opened")};return n===this.width?o():this.afterTransitionend(o),this},d.prototype.close=function(t){var e=this;if(this.emit("beforeclose",t),this.disabled)return this;if(this.state.closed)return this.state.closing=!1,this;this.state.closed=!1,this.state.closing=!0,this.state.opening=!1,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*n/this.width+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.closed.menu),Object.assign(this.panel.style,this.styles.closed.panel);var o=function(){e.state.closing=!1,e.state.closed=!0,Object.assign(e.menu.style,e.styles.closed.menu),Object.assign(e.panel.style,e.styles.closed.panel),e.emit("closed")};return 0===n?o():this.afterTransitionend(o),this},d.prototype.toggle=function(t){return!0===t?this.open():!1===t?this.close():this.toggle(this.state.closed||this.state.closing),this},d.prototype.disable=function(){return this.disabled=!0,this},d.prototype.enable=function(){return this.disabled=!1,this},d.prototype.afterTransitionend=function(t){},d.prototype.offset=function(){return 0},d.modes={},d}()),n=function(s){function t(t){var e,n=s.call(this,t)||this;return n.styles.base.menu=((e={transition:"transform "+n.timing+"ms "+n.timingFunction,overflowX:"hidden",overflowY:"auto",position:"fixed"})[n.side]="-"+n.width+"px",e.top="0",e.bottom="0",e.width=n.width+"px",e.zIndex="1",e),n.styles.open.menu={transform:"translateX("+("right"===n.side?"-":"")+n.width+"px)"},n.styles.closed.menu={transform:"translateX(0)"},Object.assign(n.menu.style,n.styles.base.menu,n.styles.closed.menu),Object.assign(n.panel.style,n.styles.base.panel,n.styles.closed.panel),n.initTransitionend(),n}return e(t,s),t.prototype.offset=function(){var t=this.menu.getBoundingClientRect();return"left"===this.side?t.left+this.width:window.innerWidth-t.left},t.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.menu.style.transform="translateX("+t*e+"px)"},t.prototype.afterTransitionend=function(t){this.onTransitionend=t},t.prototype.initTransitionend=function(){var t=this;this.menu.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},t}(t);return t.modes.drawer=n,Element.prototype.matches=Element.prototype.matches||Element.prototype.matchesSelector||Element.prototype.webkitMatchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector,Object.entries=function(e){return Object.keys(e).map(function(t){return[t,e[t]]})},Object.values=function(e){return Object.keys(e).map(function(t){return e[t]})},Object.assign=Object.assign||function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];for(var s=0,o=e;s<o.length;s++)for(var i=o[s],r=0,u=Object.entries(i);r<u.length;r++){var a=u[r],h=a[0],c=a[1];t[h]=c}return t},Array.prototype.includes=function(t){return-1!==this.indexOf(t)},t});
 //# sourceMappingURL=pulling-drawer.min.js.map

build/pulling-reveal.js

@@ -258,2 +258,3 @@ (function (global, factory) {
         _this.touch = options.touch !== false;
+        _this.ignoreScrollables = options.ignoreScrollables !== false;
         if (_this.touch) {
@@ -268,2 +269,3 @@ _this.addTouchEvents();
         var _this = this;
+        // tslint:disable-next-line no-this-assignment
         var _a = this, width = _a.width, margin = _a.margin, side = _a.side, slope = _a.slope, sensitivity = _a.sensitivity, menu = _a.menu, panel = _a.panel;
@@ -279,6 +281,23 @@ var sign = (side === 'left' ? 1 : -1);
         var firstMove = false;
+        var scrollable = function (elem) {
+            if (!elem ||
+                elem === document.documentElement ||
+                elem === document.body) {
+                return false;
+            }
+            var _a = getComputedStyle(elem), overflowX = _a.overflowX, overflowY = _a.overflowY;
+            return overflowX === 'auto' ||
+                overflowX === 'scroll' ||
+                (overflowX === 'visible' && overflowY !== 'visible') ||
+                scrollable(elem.parentElement);
+        };
         var onTouchstart = function (e) {
-            if (_this.ignoreSelector && e.target.matches(_this.ignoreSelector)) {
+            var target = e.target;
+            if (_this.ignoreSelector && (target).matches(_this.ignoreSelector)) {
                 return;
             }
+            // ignore when the element is scrollable
+            if (_this.ignoreScrollables && scrollable(target)) {
+                return;
+            }
             _this.emit('touchstart', e);
@@ -285,0 +304,0 @@ if (_this.disabled) {

build/pulling-reveal.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define("pulling",e):t.Pulling=e()}(this,function(){"use strict";function e(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);function s(){this.constructor=t}t.prototype=null===e?Object.create(e):(s.prototype=e.prototype,new s)}function d(t,e){if(!t)throw TypeError("Invalid arguments: "+e)}var m=["linear","ease","ease-in","ease-out","ease-in-out","step-start","step-end"],t=function(n){function t(t){var e=n.call(this,t)||this;return e.touched=!1,e.ignores=[],e.ignoreSelector="",e.touch=!1!==t.touch,e.touch&&e.addTouchEvents(),e}return e(t,n),t.prototype.applyOffset=function(t){},t.prototype.initTouchEvents=function(){var h=this,t=this,c=t.width,r=t.margin,a=t.side,l=t.slope,u=t.sensitivity,p=t.menu,d=t.panel,m="left"===a?1:-1,f=0,y=0,v=0,g=0,b=0,E=0,T=0,w=!1;return{onTouchstart:function(t){if(!(h.ignoreSelector&&t.target.matches(h.ignoreSelector)||(h.emit("touchstart",t),h.disabled||(h.touched=!1,1!==t.touches.length)))){var e=t.touches[0],n=e.clientX,s=e.clientY,o=h.offset(),i=r+o;("left"===a&&n<=i||"right"===a&&window.innerWidth-n<=i)&&(h.touched=!0,y=s,v=f=n,g=o,E=Date.now(),w=!0)}},onTouchmove:function(t){if(h.emit("touchmove",t),!h.disabled&&h.touched){var e=t.touches[0],n=e.clientX,s=e.clientY,o=(n-f)*m;if(!(Math.abs(o)<10)){if(w){var i=s-y,r=Math.abs(i/o);if(l<r)return void(h.touched=!1);h.state.closed&&0<o?h.emit("beforeopen"):h.state.opened&&h.emit("beforeopen"),p.style.transition=null,d.style.transition=null}if(h.state.opened&&0<o||h.state.closed&&o<0)return v=n,void(E=Date.now());h.state.opened=!1,h.state.closed=!1;var a=0<(n-v)*m;h.state.opening=a,h.state.closing=!a;var u=Math.min(Math.max(0,g+o),c);h.applyOffset(u),T=v,v=n,b=E,E=Date.now(),w=!1}}},onTouchend:function(t){if(h.touched&&(h.touched=!1,!w)){h.emit("touchend",t),Object.assign(h.panel.style,h.styles.base.panel),Object.assign(h.menu.style,h.styles.base.menu);var e,n,s=h.offset(),o=t.changedTouches[0].clientX;o===v?(e=T,n=b):(e=v,n=E);var i=(o-e)/(Date.now()-n)*m;c/2<s&&-u<i||u<i?h.open(t):h.close(t)}}}},t.prototype.addTouchEvents=function(){this.touchEvents||(this.touchEvents=this.initTouchEvents()),document.documentElement.addEventListener("touchstart",this.touchEvents.onTouchstart,!1),document.documentElement.addEventListener("touchmove",this.touchEvents.onTouchmove,!1),document.documentElement.addEventListener("touchend",this.touchEvents.onTouchend,!1)},t.prototype.removeTouchEvents=function(){document.documentElement.removeEventListener("touchstart",this.touchEvents.onTouchstart),document.documentElement.removeEventListener("touchmove",this.touchEvents.onTouchmove),document.documentElement.removeEventListener("touchend",this.touchEvents.onTouchend)},t.prototype.ignore=function(t){return this.ignores.push(t),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.unignore=function(e){return this.ignores=this.ignores.filter(function(t){return t!==e}),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.enableTouch=function(){return this.touch||(this.addTouchEvents(),this.touch=!0),this},t.prototype.disableTouch=function(){return this.touch&&(this.removeTouchEvents(),this.touch=!1),this},t}(function(){function p(t){var e=this;if(this.styles={base:{menu:{},panel:{}},open:{menu:{},panel:{}},closed:{menu:{},panel:{}}},this.handlers={beforeclose:[],closed:[],beforeopen:[],opened:[],touchstart:[],touchmove:[],touchend:[]},this.state={opened:!1,opening:!1,closed:!0,closing:!1},this.disabled=!1,!Object.values(p.modes).some(function(t){return e instanceof t}))throw TypeError("Calling this constructor is not allowed. Use `Pulling.create` instead");var n=t.menu,s=t.panel,o=t.side,i=t.mode,r=t.margin,a=t.timing,u=t.timingFunction,h=t.width,c=t.sensitivity,l=t.slope;t.touch;this.menu=n,this.panel=s,this.side=o||"left",this.mode=i||"drawer",this.margin=r||25,this.timing=a||200,this.timingFunction=u||"ease",this.width=h||256,this.sensitivity=c||.25,this.slope=l||.5,d(this.menu instanceof Element,"`menu` must be of type `Element`"),d(this.panel instanceof Element,"`panel` must be of type `Element`"),d("left"===this.side||"right"===this.side,'`side` must be equal to "left" or "right"'),d("number"==typeof this.margin,'`margin` must be of type "number"'),d("number"==typeof this.timing,'`timing` must be of type "number"'),d(m.includes(this.timingFunction),"`timingFunction` must be one of "+m.map(function(t){return'"'+t+'"'}).join(", ")),d("number"==typeof this.width,'`width` must be of type "number"'),d("number"==typeof this.sensitivity,'`sensitivity` must be of type "number"'),d("number"==typeof this.slope,'`slope` must be of type "number"')}return p.create=function(t){var e=t.mode||Object.keys(p.modes)[0]||"drawer";if(!p.modes[e]){var n=Object.keys(p.modes).map(function(t){return'"'+t+'"'}).join(", ");throw TypeError("`mode` must be one of "+n)}return new p.modes[e](t)},p.prototype.emit=function(t,e){var n=this;this.handlers[t].forEach(function(t){return t.call(n,e)})},p.prototype.on=function(t,e){return this.handlers[t].push(e),this},p.prototype.off=function(t,e){return this.handlers[t]=e?this.handlers[t].filter(function(t){return t!==e}):[],this},p.prototype.open=function(t){var e=this;if(this.emit("beforeopen",t),this.disabled)return this;if(this.state.opened)return this;this.state.closed=!1,this.state.closing=!1,this.state.opening=!0,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*(1-n/this.width)+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.open.menu),Object.assign(this.panel.style,this.styles.open.panel);var o=function(){e.state.opening=!1,e.state.opened=!0,Object.assign(e.menu.style,e.styles.open.menu),Object.assign(e.panel.style,e.styles.open.panel),e.emit("opened")};return n===this.width?o():this.afterTransitionend(o),this},p.prototype.close=function(t){var e=this;if(this.emit("beforeclose",t),this.disabled)return this;if(this.state.closed)return this.state.closing=!1,this;this.state.closed=!1,this.state.closing=!0,this.state.opening=!1,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*n/this.width+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.closed.menu),Object.assign(this.panel.style,this.styles.closed.panel);var o=function(){e.state.closing=!1,e.state.closed=!0,Object.assign(e.menu.style,e.styles.closed.menu),Object.assign(e.panel.style,e.styles.closed.panel),e.emit("closed")};return 0===n?o():this.afterTransitionend(o),this},p.prototype.toggle=function(t){return!0===t?this.open():!1===t?this.close():this.toggle(this.state.closed||this.state.closing),this},p.prototype.disable=function(){return this.disabled=!0,this},p.prototype.enable=function(){return this.disabled=!1,this},p.prototype.afterTransitionend=function(t){},p.prototype.offset=function(){return 0},p.modes={},p}()),n=function(s){function t(t){var e,n=s.call(this,t)||this;return n.styles.base.menu=((e={overflowX:"hidden",overflowY:"auto",position:"fixed"})[n.side]="0",e.top="0",e.bottom="0",e.width=n.width+"px",e.zIndex="-1",e),n.styles.base.panel={transition:"transform "+n.timing+"ms "+n.timingFunction},n.styles.open.panel={transform:"translateX("+("right"===n.side?"-":"")+n.width+"px)"},n.styles.closed.panel={transform:"translateX(0)"},Object.assign(n.menu.style,n.styles.base.menu,n.styles.closed.menu),Object.assign(n.panel.style,n.styles.base.panel,n.styles.closed.panel),n.initTransitionend(),n}return e(t,s),t.prototype.offset=function(){var t=this.panel.getBoundingClientRect();return Math.abs(t.left)},t.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.panel.style.transform="translateX("+t*e+"px)"},t.prototype.afterTransitionend=function(t){this.onTransitionend=t},t.prototype.initTransitionend=function(){var t=this;this.panel.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},t}(t);return t.modes.reveal=n,Element.prototype.matches=Element.prototype.matches||Element.prototype.matchesSelector||Element.prototype.webkitMatchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector,Object.entries=function(e){return Object.keys(e).map(function(t){return[t,e[t]]})},Object.values=function(e){return Object.keys(e).map(function(t){return e[t]})},Object.assign=Object.assign||function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];for(var s=0,o=e;s<o.length;s++)for(var i=o[s],r=0,a=Object.entries(i);r<a.length;r++){var u=a[r],h=u[0],c=u[1];t[h]=c}return t},Array.prototype.includes=function(t){return-1!==this.indexOf(t)},t});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define("pulling",e):t.Pulling=e()}(this,function(){"use strict";function e(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);function s(){this.constructor=t}t.prototype=null===e?Object.create(e):(s.prototype=e.prototype,new s)}function d(t,e){if(!t)throw TypeError("Invalid arguments: "+e)}var m=["linear","ease","ease-in","ease-out","ease-in-out","step-start","step-end"],t=function(n){function t(t){var e=n.call(this,t)||this;return e.touched=!1,e.ignores=[],e.ignoreSelector="",e.touch=!1!==t.touch,e.ignoreScrollables=!1!==t.ignoreScrollables,e.touch&&e.addTouchEvents(),e}return e(t,n),t.prototype.applyOffset=function(t){},t.prototype.initTouchEvents=function(){var c=this,t=this,h=t.width,a=t.margin,u=t.side,l=t.slope,r=t.sensitivity,p=t.menu,d=t.panel,m="left"===u?1:-1,f=0,y=0,v=0,g=0,b=0,E=0,T=0,w=!1,j=function(t){if(!t||t===document.documentElement||t===document.body)return!1;var e=getComputedStyle(t),n=e.overflowX,s=e.overflowY;return"auto"===n||"scroll"===n||"visible"===n&&"visible"!==s||j(t.parentElement)};return{onTouchstart:function(t){var e=t.target;if(!(c.ignoreSelector&&e.matches(c.ignoreSelector)||c.ignoreScrollables&&j(e)||(c.emit("touchstart",t),c.disabled||(c.touched=!1,1!==t.touches.length)))){var n=t.touches[0],s=n.clientX,o=n.clientY,i=c.offset(),r=a+i;("left"===u&&s<=r||"right"===u&&window.innerWidth-s<=r)&&(c.touched=!0,y=o,v=f=s,g=i,E=Date.now(),w=!0)}},onTouchmove:function(t){if(c.emit("touchmove",t),!c.disabled&&c.touched){var e=t.touches[0],n=e.clientX,s=e.clientY,o=(n-f)*m;if(!(Math.abs(o)<10)){if(w){var i=s-y,r=Math.abs(i/o);if(l<r)return void(c.touched=!1);c.state.closed&&0<o?c.emit("beforeopen"):c.state.opened&&c.emit("beforeopen"),p.style.transition=null,d.style.transition=null}if(c.state.opened&&0<o||c.state.closed&&o<0)return v=n,void(E=Date.now());c.state.opened=!1,c.state.closed=!1;var a=0<(n-v)*m;c.state.opening=a,c.state.closing=!a;var u=Math.min(Math.max(0,g+o),h);c.applyOffset(u),T=v,v=n,b=E,E=Date.now(),w=!1}}},onTouchend:function(t){if(c.touched&&(c.touched=!1,!w)){c.emit("touchend",t),Object.assign(c.panel.style,c.styles.base.panel),Object.assign(c.menu.style,c.styles.base.menu);var e,n,s=c.offset(),o=t.changedTouches[0].clientX;o===v?(e=T,n=b):(e=v,n=E);var i=(o-e)/(Date.now()-n)*m;h/2<s&&-r<i||r<i?c.open(t):c.close(t)}}}},t.prototype.addTouchEvents=function(){this.touchEvents||(this.touchEvents=this.initTouchEvents()),document.documentElement.addEventListener("touchstart",this.touchEvents.onTouchstart,!1),document.documentElement.addEventListener("touchmove",this.touchEvents.onTouchmove,!1),document.documentElement.addEventListener("touchend",this.touchEvents.onTouchend,!1)},t.prototype.removeTouchEvents=function(){document.documentElement.removeEventListener("touchstart",this.touchEvents.onTouchstart),document.documentElement.removeEventListener("touchmove",this.touchEvents.onTouchmove),document.documentElement.removeEventListener("touchend",this.touchEvents.onTouchend)},t.prototype.ignore=function(t){return this.ignores.push(t),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.unignore=function(e){return this.ignores=this.ignores.filter(function(t){return t!==e}),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.enableTouch=function(){return this.touch||(this.addTouchEvents(),this.touch=!0),this},t.prototype.disableTouch=function(){return this.touch&&(this.removeTouchEvents(),this.touch=!1),this},t}(function(){function p(t){var e=this;if(this.styles={base:{menu:{},panel:{}},open:{menu:{},panel:{}},closed:{menu:{},panel:{}}},this.handlers={beforeclose:[],closed:[],beforeopen:[],opened:[],touchstart:[],touchmove:[],touchend:[]},this.state={opened:!1,opening:!1,closed:!0,closing:!1},this.disabled=!1,!Object.values(p.modes).some(function(t){return e instanceof t}))throw TypeError("Calling this constructor is not allowed. Use `Pulling.create` instead");var n=t.menu,s=t.panel,o=t.side,i=t.mode,r=t.margin,a=t.timing,u=t.timingFunction,c=t.width,h=t.sensitivity,l=t.slope;t.touch;this.menu=n,this.panel=s,this.side=o||"left",this.mode=i||"drawer",this.margin=r||25,this.timing=a||200,this.timingFunction=u||"ease",this.width=c||256,this.sensitivity=h||.25,this.slope=l||.5,d(this.menu instanceof Element,"`menu` must be of type `Element`"),d(this.panel instanceof Element,"`panel` must be of type `Element`"),d("left"===this.side||"right"===this.side,'`side` must be equal to "left" or "right"'),d("number"==typeof this.margin,'`margin` must be of type "number"'),d("number"==typeof this.timing,'`timing` must be of type "number"'),d(m.includes(this.timingFunction),"`timingFunction` must be one of "+m.map(function(t){return'"'+t+'"'}).join(", ")),d("number"==typeof this.width,'`width` must be of type "number"'),d("number"==typeof this.sensitivity,'`sensitivity` must be of type "number"'),d("number"==typeof this.slope,'`slope` must be of type "number"')}return p.create=function(t){var e=t.mode||Object.keys(p.modes)[0]||"drawer";if(!p.modes[e]){var n=Object.keys(p.modes).map(function(t){return'"'+t+'"'}).join(", ");throw TypeError("`mode` must be one of "+n)}return new p.modes[e](t)},p.prototype.emit=function(t,e){var n=this;this.handlers[t].forEach(function(t){return t.call(n,e)})},p.prototype.on=function(t,e){return this.handlers[t].push(e),this},p.prototype.off=function(t,e){return this.handlers[t]=e?this.handlers[t].filter(function(t){return t!==e}):[],this},p.prototype.open=function(t){var e=this;if(this.emit("beforeopen",t),this.disabled)return this;if(this.state.opened)return this;this.state.closed=!1,this.state.closing=!1,this.state.opening=!0,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*(1-n/this.width)+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.open.menu),Object.assign(this.panel.style,this.styles.open.panel);var o=function(){e.state.opening=!1,e.state.opened=!0,Object.assign(e.menu.style,e.styles.open.menu),Object.assign(e.panel.style,e.styles.open.panel),e.emit("opened")};return n===this.width?o():this.afterTransitionend(o),this},p.prototype.close=function(t){var e=this;if(this.emit("beforeclose",t),this.disabled)return this;if(this.state.closed)return this.state.closing=!1,this;this.state.closed=!1,this.state.closing=!0,this.state.opening=!1,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*n/this.width+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.closed.menu),Object.assign(this.panel.style,this.styles.closed.panel);var o=function(){e.state.closing=!1,e.state.closed=!0,Object.assign(e.menu.style,e.styles.closed.menu),Object.assign(e.panel.style,e.styles.closed.panel),e.emit("closed")};return 0===n?o():this.afterTransitionend(o),this},p.prototype.toggle=function(t){return!0===t?this.open():!1===t?this.close():this.toggle(this.state.closed||this.state.closing),this},p.prototype.disable=function(){return this.disabled=!0,this},p.prototype.enable=function(){return this.disabled=!1,this},p.prototype.afterTransitionend=function(t){},p.prototype.offset=function(){return 0},p.modes={},p}()),n=function(s){function t(t){var e,n=s.call(this,t)||this;return n.styles.base.menu=((e={overflowX:"hidden",overflowY:"auto",position:"fixed"})[n.side]="0",e.top="0",e.bottom="0",e.width=n.width+"px",e.zIndex="-1",e),n.styles.base.panel={transition:"transform "+n.timing+"ms "+n.timingFunction},n.styles.open.panel={transform:"translateX("+("right"===n.side?"-":"")+n.width+"px)"},n.styles.closed.panel={transform:"translateX(0)"},Object.assign(n.menu.style,n.styles.base.menu,n.styles.closed.menu),Object.assign(n.panel.style,n.styles.base.panel,n.styles.closed.panel),n.initTransitionend(),n}return e(t,s),t.prototype.offset=function(){var t=this.panel.getBoundingClientRect();return Math.abs(t.left)},t.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.panel.style.transform="translateX("+t*e+"px)"},t.prototype.afterTransitionend=function(t){this.onTransitionend=t},t.prototype.initTransitionend=function(){var t=this;this.panel.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},t}(t);return t.modes.reveal=n,Element.prototype.matches=Element.prototype.matches||Element.prototype.matchesSelector||Element.prototype.webkitMatchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector,Object.entries=function(e){return Object.keys(e).map(function(t){return[t,e[t]]})},Object.values=function(e){return Object.keys(e).map(function(t){return e[t]})},Object.assign=Object.assign||function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];for(var s=0,o=e;s<o.length;s++)for(var i=o[s],r=0,a=Object.entries(i);r<a.length;r++){var u=a[r],c=u[0],h=u[1];t[c]=h}return t},Array.prototype.includes=function(t){return-1!==this.indexOf(t)},t});
 //# sourceMappingURL=pulling-reveal.min.js.map

build/pulling.js

@@ -258,2 +258,3 @@ (function (global, factory) {
         _this.touch = options.touch !== false;
+        _this.ignoreScrollables = options.ignoreScrollables !== false;
         if (_this.touch) {
@@ -268,2 +269,3 @@ _this.addTouchEvents();
         var _this = this;
+        // tslint:disable-next-line no-this-assignment
         var _a = this, width = _a.width, margin = _a.margin, side = _a.side, slope = _a.slope, sensitivity = _a.sensitivity, menu = _a.menu, panel = _a.panel;
@@ -279,6 +281,23 @@ var sign = (side === 'left' ? 1 : -1);
         var firstMove = false;
+        var scrollable = function (elem) {
+            if (!elem ||
+                elem === document.documentElement ||
+                elem === document.body) {
+                return false;
+            }
+            var _a = getComputedStyle(elem), overflowX = _a.overflowX, overflowY = _a.overflowY;
+            return overflowX === 'auto' ||
+                overflowX === 'scroll' ||
+                (overflowX === 'visible' && overflowY !== 'visible') ||
+                scrollable(elem.parentElement);
+        };
         var onTouchstart = function (e) {
-            if (_this.ignoreSelector && e.target.matches(_this.ignoreSelector)) {
+            var target = e.target;
+            if (_this.ignoreSelector && (target).matches(_this.ignoreSelector)) {
                 return;
             }
+            // ignore when the element is scrollable
+            if (_this.ignoreScrollables && scrollable(target)) {
+                return;
+            }
             _this.emit('touchstart', e);
@@ -285,0 +304,0 @@ if (_this.disabled) {

build/pulling.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define("pulling",e):t.Pulling=e()}(this,function(){"use strict";function e(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);function s(){this.constructor=t}t.prototype=null===e?Object.create(e):(s.prototype=e.prototype,new s)}function p(t,e){if(!t)throw TypeError("Invalid arguments: "+e)}var f=["linear","ease","ease-in","ease-out","ease-in-out","step-start","step-end"],t=function(n){function t(t){var e=n.call(this,t)||this;return e.touched=!1,e.ignores=[],e.ignoreSelector="",e.touch=!1!==t.touch,e.touch&&e.addTouchEvents(),e}return e(t,n),t.prototype.applyOffset=function(t){},t.prototype.initTouchEvents=function(){var h=this,t=this,l=t.width,r=t.margin,a=t.side,c=t.slope,u=t.sensitivity,d=t.menu,p=t.panel,f="left"===a?1:-1,m=0,y=0,v=0,g=0,b=0,E=0,w=0,T=!1;return{onTouchstart:function(t){if(!(h.ignoreSelector&&t.target.matches(h.ignoreSelector)||(h.emit("touchstart",t),h.disabled||(h.touched=!1,1!==t.touches.length)))){var e=t.touches[0],n=e.clientX,s=e.clientY,i=h.offset(),o=r+i;("left"===a&&n<=o||"right"===a&&window.innerWidth-n<=o)&&(h.touched=!0,y=s,v=m=n,g=i,E=Date.now(),T=!0)}},onTouchmove:function(t){if(h.emit("touchmove",t),!h.disabled&&h.touched){var e=t.touches[0],n=e.clientX,s=e.clientY,i=(n-m)*f;if(!(Math.abs(i)<10)){if(T){var o=s-y,r=Math.abs(o/i);if(c<r)return void(h.touched=!1);h.state.closed&&0<i?h.emit("beforeopen"):h.state.opened&&h.emit("beforeopen"),d.style.transition=null,p.style.transition=null}if(h.state.opened&&0<i||h.state.closed&&i<0)return v=n,void(E=Date.now());h.state.opened=!1,h.state.closed=!1;var a=0<(n-v)*f;h.state.opening=a,h.state.closing=!a;var u=Math.min(Math.max(0,g+i),l);h.applyOffset(u),w=v,v=n,b=E,E=Date.now(),T=!1}}},onTouchend:function(t){if(h.touched&&(h.touched=!1,!T)){h.emit("touchend",t),Object.assign(h.panel.style,h.styles.base.panel),Object.assign(h.menu.style,h.styles.base.menu);var e,n,s=h.offset(),i=t.changedTouches[0].clientX;i===v?(e=w,n=b):(e=v,n=E);var o=(i-e)/(Date.now()-n)*f;l/2<s&&-u<o||u<o?h.open(t):h.close(t)}}}},t.prototype.addTouchEvents=function(){this.touchEvents||(this.touchEvents=this.initTouchEvents()),document.documentElement.addEventListener("touchstart",this.touchEvents.onTouchstart,!1),document.documentElement.addEventListener("touchmove",this.touchEvents.onTouchmove,!1),document.documentElement.addEventListener("touchend",this.touchEvents.onTouchend,!1)},t.prototype.removeTouchEvents=function(){document.documentElement.removeEventListener("touchstart",this.touchEvents.onTouchstart),document.documentElement.removeEventListener("touchmove",this.touchEvents.onTouchmove),document.documentElement.removeEventListener("touchend",this.touchEvents.onTouchend)},t.prototype.ignore=function(t){return this.ignores.push(t),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.unignore=function(e){return this.ignores=this.ignores.filter(function(t){return t!==e}),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.enableTouch=function(){return this.touch||(this.addTouchEvents(),this.touch=!0),this},t.prototype.disableTouch=function(){return this.touch&&(this.removeTouchEvents(),this.touch=!1),this},t}(function(){function d(t){var e=this;if(this.styles={base:{menu:{},panel:{}},open:{menu:{},panel:{}},closed:{menu:{},panel:{}}},this.handlers={beforeclose:[],closed:[],beforeopen:[],opened:[],touchstart:[],touchmove:[],touchend:[]},this.state={opened:!1,opening:!1,closed:!0,closing:!1},this.disabled=!1,!Object.values(d.modes).some(function(t){return e instanceof t}))throw TypeError("Calling this constructor is not allowed. Use `Pulling.create` instead");var n=t.menu,s=t.panel,i=t.side,o=t.mode,r=t.margin,a=t.timing,u=t.timingFunction,h=t.width,l=t.sensitivity,c=t.slope;t.touch;this.menu=n,this.panel=s,this.side=i||"left",this.mode=o||"drawer",this.margin=r||25,this.timing=a||200,this.timingFunction=u||"ease",this.width=h||256,this.sensitivity=l||.25,this.slope=c||.5,p(this.menu instanceof Element,"`menu` must be of type `Element`"),p(this.panel instanceof Element,"`panel` must be of type `Element`"),p("left"===this.side||"right"===this.side,'`side` must be equal to "left" or "right"'),p("number"==typeof this.margin,'`margin` must be of type "number"'),p("number"==typeof this.timing,'`timing` must be of type "number"'),p(f.includes(this.timingFunction),"`timingFunction` must be one of "+f.map(function(t){return'"'+t+'"'}).join(", ")),p("number"==typeof this.width,'`width` must be of type "number"'),p("number"==typeof this.sensitivity,'`sensitivity` must be of type "number"'),p("number"==typeof this.slope,'`slope` must be of type "number"')}return d.create=function(t){var e=t.mode||Object.keys(d.modes)[0]||"drawer";if(!d.modes[e]){var n=Object.keys(d.modes).map(function(t){return'"'+t+'"'}).join(", ");throw TypeError("`mode` must be one of "+n)}return new d.modes[e](t)},d.prototype.emit=function(t,e){var n=this;this.handlers[t].forEach(function(t){return t.call(n,e)})},d.prototype.on=function(t,e){return this.handlers[t].push(e),this},d.prototype.off=function(t,e){return this.handlers[t]=e?this.handlers[t].filter(function(t){return t!==e}):[],this},d.prototype.open=function(t){var e=this;if(this.emit("beforeopen",t),this.disabled)return this;if(this.state.opened)return this;this.state.closed=!1,this.state.closing=!1,this.state.opening=!0,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*(1-n/this.width)+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.open.menu),Object.assign(this.panel.style,this.styles.open.panel);var i=function(){e.state.opening=!1,e.state.opened=!0,Object.assign(e.menu.style,e.styles.open.menu),Object.assign(e.panel.style,e.styles.open.panel),e.emit("opened")};return n===this.width?i():this.afterTransitionend(i),this},d.prototype.close=function(t){var e=this;if(this.emit("beforeclose",t),this.disabled)return this;if(this.state.closed)return this.state.closing=!1,this;this.state.closed=!1,this.state.closing=!0,this.state.opening=!1,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*n/this.width+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.closed.menu),Object.assign(this.panel.style,this.styles.closed.panel);var i=function(){e.state.closing=!1,e.state.closed=!0,Object.assign(e.menu.style,e.styles.closed.menu),Object.assign(e.panel.style,e.styles.closed.panel),e.emit("closed")};return 0===n?i():this.afterTransitionend(i),this},d.prototype.toggle=function(t){return!0===t?this.open():!1===t?this.close():this.toggle(this.state.closed||this.state.closing),this},d.prototype.disable=function(){return this.disabled=!0,this},d.prototype.enable=function(){return this.disabled=!1,this},d.prototype.afterTransitionend=function(t){},d.prototype.offset=function(){return 0},d.modes={},d}()),n=function(s){function t(t){var e,n=s.call(this,t)||this;return n.styles.base.menu=((e={overflowX:"hidden",overflowY:"auto",position:"fixed"})[n.side]="0",e.top="0",e.bottom="0",e.width=n.width+"px",e.zIndex="-1",e),n.styles.base.panel={transition:"transform "+n.timing+"ms "+n.timingFunction},n.styles.open.panel={transform:"translateX("+("right"===n.side?"-":"")+n.width+"px)"},n.styles.closed.panel={transform:"translateX(0)"},Object.assign(n.menu.style,n.styles.base.menu,n.styles.closed.menu),Object.assign(n.panel.style,n.styles.base.panel,n.styles.closed.panel),n.initTransitionend(),n}return e(t,s),t.prototype.offset=function(){var t=this.panel.getBoundingClientRect();return Math.abs(t.left)},t.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.panel.style.transform="translateX("+t*e+"px)"},t.prototype.afterTransitionend=function(t){this.onTransitionend=t},t.prototype.initTransitionend=function(){var t=this;this.panel.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},t}(t);t.modes.reveal=n;var s=function(s){function t(t){var e,n=s.call(this,t)||this;return n.styles.base.menu=((e={transition:"transform "+n.timing+"ms "+n.timingFunction,overflowX:"hidden",overflowY:"auto",position:"fixed"})[n.side]="-"+n.width+"px",e.top="0",e.bottom="0",e.width=n.width+"px",e.zIndex="1",e),n.styles.open.menu={transform:"translateX("+("right"===n.side?"-":"")+n.width+"px)"},n.styles.closed.menu={transform:"translateX(0)"},Object.assign(n.menu.style,n.styles.base.menu,n.styles.closed.menu),Object.assign(n.panel.style,n.styles.base.panel,n.styles.closed.panel),n.initTransitionend(),n}return e(t,s),t.prototype.offset=function(){var t=this.menu.getBoundingClientRect();return"left"===this.side?t.left+this.width:window.innerWidth-t.left},t.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.menu.style.transform="translateX("+t*e+"px)"},t.prototype.afterTransitionend=function(t){this.onTransitionend=t},t.prototype.initTransitionend=function(){var t=this;this.menu.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},t}(t);return t.modes.drawer=s,Element.prototype.matches=Element.prototype.matches||Element.prototype.matchesSelector||Element.prototype.webkitMatchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector,Object.entries=function(e){return Object.keys(e).map(function(t){return[t,e[t]]})},Object.values=function(e){return Object.keys(e).map(function(t){return e[t]})},Object.assign=Object.assign||function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];for(var s=0,i=e;s<i.length;s++)for(var o=i[s],r=0,a=Object.entries(o);r<a.length;r++){var u=a[r],h=u[0],l=u[1];t[h]=l}return t},Array.prototype.includes=function(t){return-1!==this.indexOf(t)},t});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define("pulling",e):t.Pulling=e()}(this,function(){"use strict";function e(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);function s(){this.constructor=t}t.prototype=null===e?Object.create(e):(s.prototype=e.prototype,new s)}function p(t,e){if(!t)throw TypeError("Invalid arguments: "+e)}var f=["linear","ease","ease-in","ease-out","ease-in-out","step-start","step-end"],t=function(n){function t(t){var e=n.call(this,t)||this;return e.touched=!1,e.ignores=[],e.ignoreSelector="",e.touch=!1!==t.touch,e.ignoreScrollables=!1!==t.ignoreScrollables,e.touch&&e.addTouchEvents(),e}return e(t,n),t.prototype.applyOffset=function(t){},t.prototype.initTouchEvents=function(){var l=this,t=this,h=t.width,a=t.margin,u=t.side,c=t.slope,r=t.sensitivity,d=t.menu,p=t.panel,f="left"===u?1:-1,m=0,y=0,v=0,g=0,b=0,E=0,w=0,T=!1,O=function(t){if(!t||t===document.documentElement||t===document.body)return!1;var e=getComputedStyle(t),n=e.overflowX,s=e.overflowY;return"auto"===n||"scroll"===n||"visible"===n&&"visible"!==s||O(t.parentElement)};return{onTouchstart:function(t){var e=t.target;if(!(l.ignoreSelector&&e.matches(l.ignoreSelector)||l.ignoreScrollables&&O(e)||(l.emit("touchstart",t),l.disabled||(l.touched=!1,1!==t.touches.length)))){var n=t.touches[0],s=n.clientX,i=n.clientY,o=l.offset(),r=a+o;("left"===u&&s<=r||"right"===u&&window.innerWidth-s<=r)&&(l.touched=!0,y=i,v=m=s,g=o,E=Date.now(),T=!0)}},onTouchmove:function(t){if(l.emit("touchmove",t),!l.disabled&&l.touched){var e=t.touches[0],n=e.clientX,s=e.clientY,i=(n-m)*f;if(!(Math.abs(i)<10)){if(T){var o=s-y,r=Math.abs(o/i);if(c<r)return void(l.touched=!1);l.state.closed&&0<i?l.emit("beforeopen"):l.state.opened&&l.emit("beforeopen"),d.style.transition=null,p.style.transition=null}if(l.state.opened&&0<i||l.state.closed&&i<0)return v=n,void(E=Date.now());l.state.opened=!1,l.state.closed=!1;var a=0<(n-v)*f;l.state.opening=a,l.state.closing=!a;var u=Math.min(Math.max(0,g+i),h);l.applyOffset(u),w=v,v=n,b=E,E=Date.now(),T=!1}}},onTouchend:function(t){if(l.touched&&(l.touched=!1,!T)){l.emit("touchend",t),Object.assign(l.panel.style,l.styles.base.panel),Object.assign(l.menu.style,l.styles.base.menu);var e,n,s=l.offset(),i=t.changedTouches[0].clientX;i===v?(e=w,n=b):(e=v,n=E);var o=(i-e)/(Date.now()-n)*f;h/2<s&&-r<o||r<o?l.open(t):l.close(t)}}}},t.prototype.addTouchEvents=function(){this.touchEvents||(this.touchEvents=this.initTouchEvents()),document.documentElement.addEventListener("touchstart",this.touchEvents.onTouchstart,!1),document.documentElement.addEventListener("touchmove",this.touchEvents.onTouchmove,!1),document.documentElement.addEventListener("touchend",this.touchEvents.onTouchend,!1)},t.prototype.removeTouchEvents=function(){document.documentElement.removeEventListener("touchstart",this.touchEvents.onTouchstart),document.documentElement.removeEventListener("touchmove",this.touchEvents.onTouchmove),document.documentElement.removeEventListener("touchend",this.touchEvents.onTouchend)},t.prototype.ignore=function(t){return this.ignores.push(t),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.unignore=function(e){return this.ignores=this.ignores.filter(function(t){return t!==e}),this.ignoreSelector=this.ignores.join(", "),this},t.prototype.enableTouch=function(){return this.touch||(this.addTouchEvents(),this.touch=!0),this},t.prototype.disableTouch=function(){return this.touch&&(this.removeTouchEvents(),this.touch=!1),this},t}(function(){function d(t){var e=this;if(this.styles={base:{menu:{},panel:{}},open:{menu:{},panel:{}},closed:{menu:{},panel:{}}},this.handlers={beforeclose:[],closed:[],beforeopen:[],opened:[],touchstart:[],touchmove:[],touchend:[]},this.state={opened:!1,opening:!1,closed:!0,closing:!1},this.disabled=!1,!Object.values(d.modes).some(function(t){return e instanceof t}))throw TypeError("Calling this constructor is not allowed. Use `Pulling.create` instead");var n=t.menu,s=t.panel,i=t.side,o=t.mode,r=t.margin,a=t.timing,u=t.timingFunction,l=t.width,h=t.sensitivity,c=t.slope;t.touch;this.menu=n,this.panel=s,this.side=i||"left",this.mode=o||"drawer",this.margin=r||25,this.timing=a||200,this.timingFunction=u||"ease",this.width=l||256,this.sensitivity=h||.25,this.slope=c||.5,p(this.menu instanceof Element,"`menu` must be of type `Element`"),p(this.panel instanceof Element,"`panel` must be of type `Element`"),p("left"===this.side||"right"===this.side,'`side` must be equal to "left" or "right"'),p("number"==typeof this.margin,'`margin` must be of type "number"'),p("number"==typeof this.timing,'`timing` must be of type "number"'),p(f.includes(this.timingFunction),"`timingFunction` must be one of "+f.map(function(t){return'"'+t+'"'}).join(", ")),p("number"==typeof this.width,'`width` must be of type "number"'),p("number"==typeof this.sensitivity,'`sensitivity` must be of type "number"'),p("number"==typeof this.slope,'`slope` must be of type "number"')}return d.create=function(t){var e=t.mode||Object.keys(d.modes)[0]||"drawer";if(!d.modes[e]){var n=Object.keys(d.modes).map(function(t){return'"'+t+'"'}).join(", ");throw TypeError("`mode` must be one of "+n)}return new d.modes[e](t)},d.prototype.emit=function(t,e){var n=this;this.handlers[t].forEach(function(t){return t.call(n,e)})},d.prototype.on=function(t,e){return this.handlers[t].push(e),this},d.prototype.off=function(t,e){return this.handlers[t]=e?this.handlers[t].filter(function(t){return t!==e}):[],this},d.prototype.open=function(t){var e=this;if(this.emit("beforeopen",t),this.disabled)return this;if(this.state.opened)return this;this.state.closed=!1,this.state.closing=!1,this.state.opening=!0,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*(1-n/this.width)+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.open.menu),Object.assign(this.panel.style,this.styles.open.panel);var i=function(){e.state.opening=!1,e.state.opened=!0,Object.assign(e.menu.style,e.styles.open.menu),Object.assign(e.panel.style,e.styles.open.panel),e.emit("opened")};return n===this.width?i():this.afterTransitionend(i),this},d.prototype.close=function(t){var e=this;if(this.emit("beforeclose",t),this.disabled)return this;if(this.state.closed)return this.state.closing=!1,this;this.state.closed=!1,this.state.closing=!0,this.state.opening=!1,this.state.opened=!1;var n=this.offset();if(0<n){var s=this.timing*n/this.width+"ms";this.menu.style.transitionDuration=s,this.panel.style.transitionDuration=s}Object.assign(this.menu.style,this.styles.closed.menu),Object.assign(this.panel.style,this.styles.closed.panel);var i=function(){e.state.closing=!1,e.state.closed=!0,Object.assign(e.menu.style,e.styles.closed.menu),Object.assign(e.panel.style,e.styles.closed.panel),e.emit("closed")};return 0===n?i():this.afterTransitionend(i),this},d.prototype.toggle=function(t){return!0===t?this.open():!1===t?this.close():this.toggle(this.state.closed||this.state.closing),this},d.prototype.disable=function(){return this.disabled=!0,this},d.prototype.enable=function(){return this.disabled=!1,this},d.prototype.afterTransitionend=function(t){},d.prototype.offset=function(){return 0},d.modes={},d}()),n=function(s){function t(t){var e,n=s.call(this,t)||this;return n.styles.base.menu=((e={overflowX:"hidden",overflowY:"auto",position:"fixed"})[n.side]="0",e.top="0",e.bottom="0",e.width=n.width+"px",e.zIndex="-1",e),n.styles.base.panel={transition:"transform "+n.timing+"ms "+n.timingFunction},n.styles.open.panel={transform:"translateX("+("right"===n.side?"-":"")+n.width+"px)"},n.styles.closed.panel={transform:"translateX(0)"},Object.assign(n.menu.style,n.styles.base.menu,n.styles.closed.menu),Object.assign(n.panel.style,n.styles.base.panel,n.styles.closed.panel),n.initTransitionend(),n}return e(t,s),t.prototype.offset=function(){var t=this.panel.getBoundingClientRect();return Math.abs(t.left)},t.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.panel.style.transform="translateX("+t*e+"px)"},t.prototype.afterTransitionend=function(t){this.onTransitionend=t},t.prototype.initTransitionend=function(){var t=this;this.panel.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},t}(t);t.modes.reveal=n;var s=function(s){function t(t){var e,n=s.call(this,t)||this;return n.styles.base.menu=((e={transition:"transform "+n.timing+"ms "+n.timingFunction,overflowX:"hidden",overflowY:"auto",position:"fixed"})[n.side]="-"+n.width+"px",e.top="0",e.bottom="0",e.width=n.width+"px",e.zIndex="1",e),n.styles.open.menu={transform:"translateX("+("right"===n.side?"-":"")+n.width+"px)"},n.styles.closed.menu={transform:"translateX(0)"},Object.assign(n.menu.style,n.styles.base.menu,n.styles.closed.menu),Object.assign(n.panel.style,n.styles.base.panel,n.styles.closed.panel),n.initTransitionend(),n}return e(t,s),t.prototype.offset=function(){var t=this.menu.getBoundingClientRect();return"left"===this.side?t.left+this.width:window.innerWidth-t.left},t.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.menu.style.transform="translateX("+t*e+"px)"},t.prototype.afterTransitionend=function(t){this.onTransitionend=t},t.prototype.initTransitionend=function(){var t=this;this.menu.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},t}(t);return t.modes.drawer=s,Element.prototype.matches=Element.prototype.matches||Element.prototype.matchesSelector||Element.prototype.webkitMatchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector,Object.entries=function(e){return Object.keys(e).map(function(t){return[t,e[t]]})},Object.values=function(e){return Object.keys(e).map(function(t){return e[t]})},Object.assign=Object.assign||function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];for(var s=0,i=e;s<i.length;s++)for(var o=i[s],r=0,a=Object.entries(o);r<a.length;r++){var u=a[r],l=u[0],h=u[1];t[l]=h}return t},Array.prototype.includes=function(t){return-1!==this.indexOf(t)},t});
 //# sourceMappingURL=pulling.min.js.map

package.json

 {
   "name": "pulling",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "Flexible slideout menu for mobile webapps",
@@ -5,0 +5,0 @@ "main": "build/pulling.js",

readme.md

@@ -134,2 +134,6 @@ # Pulling
 
++ **ignoreScrollables** - `boolean` (default: `true`)
+
+  Ignore horizontally scrollable elements
+
 ## Instance Methods
@@ -136,0 +140,0 @@

src/touch.ts

@@ -8,2 +8,3 @@ import Pulling from './pulling';
     this.touch = options.touch !== false;
+    this.ignoreScrollables = options.ignoreScrollables !== false;
     
@@ -15,2 +16,3 @@ if (this.touch) {
   protected touch: boolean;
+  protected ignoreScrollables: boolean;
   
@@ -23,2 +25,3 @@ protected touched = false;
   protected initTouchEvents() {
+    // tslint:disable-next-line no-this-assignment
     const { width, margin, side, slope, sensitivity, menu, panel } = this;
@@ -42,7 +45,31 @@
 
+    const scrollable = (elem: HTMLElement | null): boolean => {
+      if (
+        !elem ||
+        elem === document.documentElement || 
+        elem === document.body
+      ) {
+        return false;
+      }
+
+      const { overflowX, overflowY } = getComputedStyle(elem);
+      
+      return overflowX === 'auto' || 
+        overflowX === 'scroll' || 
+        (overflowX === 'visible' && overflowY !== 'visible') ||
+        scrollable(elem.parentElement);
+    };
+
     const onTouchstart = (e: TouchEvent) => {
-      if (this.ignoreSelector && (e.target as HTMLElement).matches(this.ignoreSelector)) {
+      const target = e.target as HTMLElement;
+
+      if (this.ignoreSelector && (target).matches(this.ignoreSelector)) {
         return;
       }
 
+      // ignore when the element is scrollable
+      if (this.ignoreScrollables && scrollable(target)) {
+        return;
+      }
+
       this.emit('touchstart', e);
@@ -49,0 +76,0 @@ if (this.disabled) {

src/types.d.ts

@@ -96,2 +96,8 @@ interface Styles {
   touch?: boolean;
+
+  /**
+   * Ignore horizontally scrollable elements
+   * (default: `true`)
+   */
+  ignoreScrollables?: boolean;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

320114

increased by3.84%

Lines of code

2531

increased by3.56%

Number of lines in readme file

251

increased by1.62%

No dependency changes