pulling - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

build/pulling-drawer.js

@@ -22,5 +22,7 @@ (function (global, factory) {
         Element.prototype.matchesSelector ||
+        // @ts-ignore: Property does not exist
         Element.prototype.webkitMatchesSelector ||
         // @ts-ignore: Property does not exist
         Element.prototype.mozMatchesSelector ||
+        // @ts-ignore: Property does not exist
         Element.prototype.msMatchesSelector ||
@@ -95,3 +97,3 @@ // @ts-ignore: Property does not exist
         }
-        var menu = options.menu, panel = options.panel, side = options.side, mode = options.mode, margin = options.margin, timing = options.timing, timingFunction = options.timingFunction, width = options.width, sensitivity = options.sensitivity, slope = options.slope, touch = options.touch;
+        var menu = options.menu, panel = options.panel, side = options.side, mode = options.mode, margin = options.margin, timing = options.timing, timingFunction = options.timingFunction, width = options.width, sensitivity = options.sensitivity, slope = options.slope, touch = options.touch, openPanelClass = options.openPanelClass;
         this.menu = menu;
@@ -106,4 +108,5 @@ this.panel = panel;
         this.slope = slope || 0.5;
-        assertArg(this.menu instanceof Element, '`menu` must be of type `Element`');
-        assertArg(this.panel instanceof Element, '`panel` must be of type `Element`');
+        this.openPanelClass = openPanelClass || null;
+        assertArg(menu instanceof Element, '`menu` must be of type `Element`');
+        assertArg(panel instanceof Element, '`panel` must be of type `Element`');
         assertArg(this.side === 'left' || this.side === 'right', '`side` must be equal to "left" or "right"');
@@ -161,2 +164,5 @@ assertArg(typeof this.margin === 'number', '`margin` must be of type "number"');
         this.state.opened = false;
+        if (this.openPanelClass) {
+            document.documentElement.classList.add(this.openPanelClass);
+        }
         var offset = this.offset();
@@ -213,2 +219,5 @@ if (offset > 0) {
             Object.assign(_this.panel.style, _this.styles.closed.panel);
+            if (_this.openPanelClass) {
+                document.documentElement.classList.remove(_this.openPanelClass);
+            }
             _this.emit('closed');
@@ -350,4 +359,4 @@ };
                 }
-                menu.style.transition = null;
-                panel.style.transition = null;
+                menu.style.transition = '';
+                panel.style.transition = '';
             }
@@ -464,2 +473,3 @@ if (_this.state.opened && diffX > 0 || _this.state.closed && diffX < 0) {
     function Drawer(options) {
+        var _a;
         var _this = _super.call(this, options) || this;
@@ -482,3 +492,2 @@ _this.styles.base.menu = (_a = {
         return _this;
-        var _a;
     }
@@ -485,0 +494,0 @@ Drawer.prototype.offset = function () {

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.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});
+!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 t(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 p=["linear","ease","ease-in","ease-out","ease-in-out","step-start","step-end"],e=(m.create=function(t){var e=t.mode||Object.keys(m.modes)[0]||"drawer";if(m.modes[e])return new m.modes[e](t);t=Object.keys(m.modes).map(function(t){return'"'+t+'"'}).join(", ");throw TypeError("`mode` must be one of "+t)},m.prototype.emit=function(t,e){var n=this;this.handlers[t].forEach(function(t){return t.call(n,e)})},m.prototype.on=function(t,e){return this.handlers[t].push(e),this},m.prototype.off=function(t,e){return this.handlers[t]=e?this.handlers[t].filter(function(t){return t!==e}):[],this},m.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,this.openPanelClass&&document.documentElement.classList.add(this.openPanelClass);t=this.offset();0<t&&(n=this.timing*(1-t/this.width)+"ms",this.menu.style.transitionDuration=n,this.panel.style.transitionDuration=n),Object.assign(this.menu.style,this.styles.open.menu),Object.assign(this.panel.style,this.styles.open.panel);var n=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 t===this.width?n():this.afterTransitionend(n),this},m.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;t=this.offset();0<t&&(n=this.timing*t/this.width+"ms",this.menu.style.transitionDuration=n,this.panel.style.transitionDuration=n),Object.assign(this.menu.style,this.styles.closed.menu),Object.assign(this.panel.style,this.styles.closed.panel);var n=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.openPanelClass&&document.documentElement.classList.remove(e.openPanelClass),e.emit("closed")};return 0===t?n():this.afterTransitionend(n),this},m.prototype.toggle=function(t){return!0===t?this.open():!1===t?this.close():this.toggle(this.state.closed||this.state.closing),this},m.prototype.disable=function(){return this.disabled=!0,this},m.prototype.enable=function(){return this.disabled=!1,this},m.prototype.afterTransitionend=function(t){},m.prototype.offset=function(){return 0},m.modes={},m);function m(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(m.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=(t.touch,t.openPanelClass);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,this.openPanelClass=t||null,d(n instanceof Element,"`menu` must be of type `Element`"),d(s 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(p.includes(this.timingFunction),"`timingFunction` must be one of "+p.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"')}var n,s=(t(o,n=e),o.prototype.applyOffset=function(t){},o.prototype.initTouchEvents=function(){var i=this,t=this,r=t.width,o=t.margin,u=t.side,a=t.slope,h=t.sensitivity,c=t.menu,l=t.panel,d="left"===u?1:-1,p=0,m=0,f=0,y=0,g=0,v=0,b=0,E=!1,w=function(t){if(!t||t===document.documentElement||t===document.body)return!1;var e=getComputedStyle(t),n=e.overflowX,e=e.overflowY;return"auto"===n||"scroll"===n||"visible"===n&&"visible"!==e||w(t.parentElement)};return{onTouchstart:function(t){var e,n,s=t.target;i.ignoreSelector&&s.matches(i.ignoreSelector)||i.ignoreScrollables&&w(s)||(i.emit("touchstart",t),i.disabled||(i.touched=!1,1===t.touches.length&&(e=(n=t.touches[0]).clientX,s=n.clientY,t=i.offset(),n=o+t,("left"===u&&e<=n||"right"===u&&window.innerWidth-e<=n)&&(i.touched=!0,m=s,f=p=e,y=t,v=Date.now(),E=!0))))},onTouchmove:function(t){if(i.emit("touchmove",t),!i.disabled&&i.touched){var e=t.touches[0],n=e.clientX,t=e.clientY,e=(n-p)*d;if(!(Math.abs(e)<10)){if(E){var s=Math.abs((t-m)/e);if(a<s)return void(i.touched=!1);(i.state.closed&&0<e||i.state.opened)&&i.emit("beforeopen"),c.style.transition="",l.style.transition=""}if(i.state.opened&&0<e||i.state.closed&&e<0)return f=n,void(v=Date.now());i.state.opened=!1,i.state.closed=!1;s=0<(n-f)*d;i.state.opening=s,i.state.closing=!s;e=Math.min(Math.max(0,y+e),r);i.applyOffset(e),b=f,f=n,g=v,v=Date.now(),E=!1}}},onTouchend:function(t){var e,n,s,o;i.touched&&(i.touched=!1,E||(i.emit("touchend",t),Object.assign(i.panel.style,i.styles.base.panel),Object.assign(i.menu.style,i.styles.base.menu),e=i.offset(),o=(n=t.changedTouches[0].clientX)===f?(s=b,g):(s=f,v),o=(n-s)/(Date.now()-o)*d,r/2<e&&-h<o||h<o?i.open(t):i.close(t)))}}},o.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)},o.prototype.removeTouchEvents=function(){document.documentElement.removeEventListener("touchstart",this.touchEvents.onTouchstart),document.documentElement.removeEventListener("touchmove",this.touchEvents.onTouchmove),document.documentElement.removeEventListener("touchend",this.touchEvents.onTouchend)},o.prototype.ignore=function(t){return this.ignores.push(t),this.ignoreSelector=this.ignores.join(", "),this},o.prototype.unignore=function(e){return this.ignores=this.ignores.filter(function(t){return t!==e}),this.ignoreSelector=this.ignores.join(", "),this},o.prototype.enableTouch=function(){return this.touch||(this.addTouchEvents(),this.touch=!0),this},o.prototype.disableTouch=function(){return this.touch&&(this.removeTouchEvents(),this.touch=!1),this},o);function o(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}var i,e=(t(r,i=s),r.prototype.offset=function(){var t=this.menu.getBoundingClientRect();return"left"===this.side?t.left+this.width:window.innerWidth-t.left},r.prototype.applyOffset=function(t){var e="left"===this.side?1:-1;this.menu.style.transform="translateX("+t*e+"px)"},r.prototype.afterTransitionend=function(t){this.onTransitionend=t},r.prototype.initTransitionend=function(){var t=this;this.menu.addEventListener("transitionend",function(){t.onTransitionend&&t.onTransitionend(),t.onTransitionend=null},!1)},r);function r(t){var e=i.call(this,t)||this;return e.styles.base.menu=((t={transition:"transform "+e.timing+"ms "+e.timingFunction,overflowX:"hidden",overflowY:"auto",position:"fixed"})[e.side]="-"+e.width+"px",t.top="0",t.bottom="0",t.width=e.width+"px",t.zIndex="1",t),e.styles.open.menu={transform:"translateX("+("right"===e.side?"-":"")+e.width+"px)"},e.styles.closed.menu={transform:"translateX(0)"},Object.assign(e.menu.style,e.styles.base.menu,e.styles.closed.menu),Object.assign(e.panel.style,e.styles.base.panel,e.styles.closed.panel),e.initTransitionend(),e}return s.modes.drawer=e,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],a=a[1];t[h]=a}return t},Array.prototype.includes=function(t){return-1!==this.indexOf(t)},s});
 //# sourceMappingURL=pulling-drawer.min.js.map

build/pulling-reveal.js

@@ -22,5 +22,7 @@ (function (global, factory) {
         Element.prototype.matchesSelector ||
+        // @ts-ignore: Property does not exist
         Element.prototype.webkitMatchesSelector ||
         // @ts-ignore: Property does not exist
         Element.prototype.mozMatchesSelector ||
+        // @ts-ignore: Property does not exist
         Element.prototype.msMatchesSelector ||
@@ -95,3 +97,3 @@ // @ts-ignore: Property does not exist
         }
-        var menu = options.menu, panel = options.panel, side = options.side, mode = options.mode, margin = options.margin, timing = options.timing, timingFunction = options.timingFunction, width = options.width, sensitivity = options.sensitivity, slope = options.slope, touch = options.touch;
+        var menu = options.menu, panel = options.panel, side = options.side, mode = options.mode, margin = options.margin, timing = options.timing, timingFunction = options.timingFunction, width = options.width, sensitivity = options.sensitivity, slope = options.slope, touch = options.touch, openPanelClass = options.openPanelClass;
         this.menu = menu;
@@ -106,4 +108,5 @@ this.panel = panel;
         this.slope = slope || 0.5;
-        assertArg(this.menu instanceof Element, '`menu` must be of type `Element`');
-        assertArg(this.panel instanceof Element, '`panel` must be of type `Element`');
+        this.openPanelClass = openPanelClass || null;
+        assertArg(menu instanceof Element, '`menu` must be of type `Element`');
+        assertArg(panel instanceof Element, '`panel` must be of type `Element`');
         assertArg(this.side === 'left' || this.side === 'right', '`side` must be equal to "left" or "right"');
@@ -161,2 +164,5 @@ assertArg(typeof this.margin === 'number', '`margin` must be of type "number"');
         this.state.opened = false;
+        if (this.openPanelClass) {
+            document.documentElement.classList.add(this.openPanelClass);
+        }
         var offset = this.offset();
@@ -213,2 +219,5 @@ if (offset > 0) {
             Object.assign(_this.panel.style, _this.styles.closed.panel);
+            if (_this.openPanelClass) {
+                document.documentElement.classList.remove(_this.openPanelClass);
+            }
             _this.emit('closed');
@@ -350,4 +359,4 @@ };
                 }
-                menu.style.transition = null;
-                panel.style.transition = null;
+                menu.style.transition = '';
+                panel.style.transition = '';
             }
@@ -464,2 +473,3 @@ if (_this.state.opened && diffX > 0 || _this.state.closed && diffX < 0) {
     function Reveal(options) {
+        var _a;
         var _this = _super.call(this, options) || this;
@@ -470,3 +480,3 @@ _this.styles.base.menu = (_a = {
                 position: 'fixed'
-            }, _a[_this.side] = '0', _a.top = '0', _a.bottom = '0', _a.width = _this.width + "px", _a.zIndex = '-1', _a);
+            }, _a[_this.side] = '0', _a.top = '0', _a.bottom = '0', _a.width = _this.width + "px", _a);
         _this.styles.base.panel = {
@@ -485,3 +495,2 @@ transition: "transform " + _this.timing + "ms " + _this.timingFunction,
         return _this;
-        var _a;
     }
@@ -488,0 +497,0 @@ Reveal.prototype.offset = function () {

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

build/pulling.js

@@ -22,5 +22,7 @@ (function (global, factory) {
         Element.prototype.matchesSelector ||
+        // @ts-ignore: Property does not exist
         Element.prototype.webkitMatchesSelector ||
         // @ts-ignore: Property does not exist
         Element.prototype.mozMatchesSelector ||
+        // @ts-ignore: Property does not exist
         Element.prototype.msMatchesSelector ||
@@ -95,3 +97,3 @@ // @ts-ignore: Property does not exist
         }
-        var menu = options.menu, panel = options.panel, side = options.side, mode = options.mode, margin = options.margin, timing = options.timing, timingFunction = options.timingFunction, width = options.width, sensitivity = options.sensitivity, slope = options.slope, touch = options.touch;
+        var menu = options.menu, panel = options.panel, side = options.side, mode = options.mode, margin = options.margin, timing = options.timing, timingFunction = options.timingFunction, width = options.width, sensitivity = options.sensitivity, slope = options.slope, touch = options.touch, openPanelClass = options.openPanelClass;
         this.menu = menu;
@@ -106,4 +108,5 @@ this.panel = panel;
         this.slope = slope || 0.5;
-        assertArg(this.menu instanceof Element, '`menu` must be of type `Element`');
-        assertArg(this.panel instanceof Element, '`panel` must be of type `Element`');
+        this.openPanelClass = openPanelClass || null;
+        assertArg(menu instanceof Element, '`menu` must be of type `Element`');
+        assertArg(panel instanceof Element, '`panel` must be of type `Element`');
         assertArg(this.side === 'left' || this.side === 'right', '`side` must be equal to "left" or "right"');
@@ -161,2 +164,5 @@ assertArg(typeof this.margin === 'number', '`margin` must be of type "number"');
         this.state.opened = false;
+        if (this.openPanelClass) {
+            document.documentElement.classList.add(this.openPanelClass);
+        }
         var offset = this.offset();
@@ -213,2 +219,5 @@ if (offset > 0) {
             Object.assign(_this.panel.style, _this.styles.closed.panel);
+            if (_this.openPanelClass) {
+                document.documentElement.classList.remove(_this.openPanelClass);
+            }
             _this.emit('closed');
@@ -350,4 +359,4 @@ };
                 }
-                menu.style.transition = null;
-                panel.style.transition = null;
+                menu.style.transition = '';
+                panel.style.transition = '';
             }
@@ -464,2 +473,3 @@ if (_this.state.opened && diffX > 0 || _this.state.closed && diffX < 0) {
     function Reveal(options) {
+        var _a;
         var _this = _super.call(this, options) || this;
@@ -470,3 +480,3 @@ _this.styles.base.menu = (_a = {
                 position: 'fixed'
-            }, _a[_this.side] = '0', _a.top = '0', _a.bottom = '0', _a.width = _this.width + "px", _a.zIndex = '-1', _a);
+            }, _a[_this.side] = '0', _a.top = '0', _a.bottom = '0', _a.width = _this.width + "px", _a);
         _this.styles.base.panel = {
@@ -485,3 +495,2 @@ transition: "transform " + _this.timing + "ms " + _this.timingFunction,
         return _this;
-        var _a;
     }
@@ -515,2 +524,3 @@ Reveal.prototype.offset = function () {
     function Drawer(options) {
+        var _a;
         var _this = _super.call(this, options) || this;
@@ -533,3 +543,2 @@ _this.styles.base.menu = (_a = {
         return _this;
-        var _a;
     }
@@ -536,0 +545,0 @@ Drawer.prototype.offset = function () {

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

package.json

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

src/drawer.ts

@@ -9,3 +9,3 @@ import TouchPulling from './touch';
       transition: `transform ${this.timing}ms ${this.timingFunction}`,
-      
+
       overflowX: 'hidden',
@@ -12,0 +12,0 @@ overflowY: 'auto',

src/pulling.ts

@@ -33,3 +33,4 @@ import { assertArg } from './util';
   protected slope: number;
-  
+  protected openPanelClass: string | null;
+
   protected styles: Styles = {
@@ -70,2 +71,3 @@ base: {
       touch,
+      openPanelClass,
     } = options;
@@ -83,13 +85,14 @@
     this.slope = slope || 0.5;
+    this.openPanelClass = openPanelClass || null;
 
     assertArg(
-      this.menu instanceof Element, 
+      menu instanceof Element,
       '`menu` must be of type `Element`',
     );
     assertArg(
-      this.panel instanceof Element, 
+      panel instanceof Element,
       '`panel` must be of type `Element`',
     );
     assertArg(
-      this.side === 'left' || this.side === 'right', 
+      this.side === 'left' || this.side === 'right',
       '`side` must be equal to "left" or "right"',
@@ -187,6 +190,10 @@ );
 
+    if (this.openPanelClass) {
+      document.documentElement.classList.add(this.openPanelClass);
+    }
+
     const offset = this.offset();
     if (offset > 0) {
       const duration = `${this.timing * (1 - offset / this.width)}ms`;
-      
+
       this.menu.style.transitionDuration = duration;
@@ -205,3 +212,3 @@ this.panel.style.transitionDuration = duration;
       Object.assign(this.panel.style, this.styles.open.panel);
-      
+
       this.emit('opened');
@@ -238,7 +245,7 @@ };
       const duration = `${this.timing * offset / this.width}ms`;
-      
+
       this.menu.style.transitionDuration = duration;
       this.panel.style.transitionDuration = duration;
     }
-    
+
     Object.assign(this.menu.style, this.styles.closed.menu);
@@ -253,3 +260,7 @@ Object.assign(this.panel.style, this.styles.closed.panel);
       Object.assign(this.panel.style, this.styles.closed.panel);
-      
+
+      if (this.openPanelClass) {
+        document.documentElement.classList.remove(this.openPanelClass);
+      }
+
       this.emit('closed');
@@ -265,3 +276,3 @@ };
   }
-  
+
   toggle(condition: boolean) {
@@ -268,0 +279,0 @@ if (condition === true) {

src/reveal.ts

@@ -16,4 +16,2 @@ import TouchPulling from './touch';
       width: `${this.width}px`,
-
-      zIndex: '-1',
     };
@@ -20,0 +18,0 @@ this.styles.base.panel = {

src/touch.ts

@@ -9,3 +9,3 @@ import Pulling from './pulling';
     this.ignoreScrollables = options.ignoreScrollables !== false;
-    
+
     if (this.touch) {
@@ -17,5 +17,5 @@ this.addTouchEvents();
   protected ignoreScrollables: boolean;
-  
+
   protected touched = false;
-  
+
   /** set offset */
@@ -47,3 +47,3 @@ protected applyOffset(offset: number) {}
         !elem ||
-        elem === document.documentElement || 
+        elem === document.documentElement ||
         elem === document.body
@@ -55,5 +55,5 @@ ) {
       const { overflowX, overflowY } = getComputedStyle(elem);
-      
-      return overflowX === 'auto' || 
-        overflowX === 'scroll' || 
+
+      return overflowX === 'auto' ||
+        overflowX === 'scroll' ||
         (overflowX === 'visible' && overflowY !== 'visible') ||
@@ -84,7 +84,7 @@ scrollable(elem.parentElement);
       }
-      
+
       const { clientX, clientY } = e.touches[0];
       const offset = this.offset();
       const region = margin + offset;
-      
+
       if (side === 'left' && clientX <= region ||
@@ -98,7 +98,7 @@ side === 'right' && window.innerWidth - clientX <= region) {
         lastClientX = clientX;
-        
+
         startOffset = offset;
 
         lastTime = Date.now();
-        
+
         firstMove = true;
@@ -117,7 +117,7 @@ }
       const diffX = (clientX - startClientX) * sign;
-      
+
       if (Math.abs(diffX) < 10) {
         return;
       }
-      
+
       if (firstMove) {
@@ -130,3 +130,3 @@ const diffY = clientY - startClientY;
         }
-        
+
         if (this.state.closed && diffX > 0) {
@@ -138,4 +138,4 @@ this.emit('beforeopen');
 
-        menu.style.transition = null;
-        panel.style.transition = null;
+        menu.style.transition = '';
+        panel.style.transition = '';
       }
@@ -154,3 +154,3 @@
       const dx = (clientX - lastClientX) * sign;
-      
+
       const opening = dx > 0;
@@ -182,3 +182,3 @@ this.state.opening = opening;
       this.emit('touchend', e);
-      
+
       Object.assign(this.panel.style, this.styles.base.panel);
@@ -189,3 +189,3 @@ Object.assign(this.menu.style, this.styles.base.menu);
       const { clientX } = e.changedTouches[0];
-      
+
       let x1;
@@ -208,4 +208,4 @@ let t1;
       if (
-        offset > width / 2 && 
-        speed > -sensitivity || 
+        offset > width / 2 &&
+        speed > -sensitivity ||
         speed > sensitivity
@@ -251,5 +251,5 @@ ) {
     this.ignoreSelector = this.ignores.join(', ');
-    return this; 
+    return this;
   }
-  /** 
+  /**
    * Remove selector from ignore list
@@ -256,0 +256,0 @@ * _Does not_ override `ignore`

src/types.d.ts

@@ -28,5 +28,5 @@ interface Styles {
 type modes = 'drawer' | 'reveal';
-type timingFunctions = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 
+type timingFunctions = 'linear' | 'ease' | 'ease-in' | 'ease-out' |
   'ease-in-out' | 'step-start' | 'step-end';
-type eventNames = 'beforeclose' | 'closed' |'beforeopen' | 'opened' | 
+type eventNames = 'beforeclose' | 'closed' |'beforeopen' | 'opened' |
   'touchstart' | 'touchmove' | 'touchend';
@@ -53,4 +53,4 @@
 
-  /** 
-   * the number of pixels from the edge of the viewport 
+  /**
+   * the number of pixels from the edge of the viewport
    * in which a touch event will be accepted
@@ -104,2 +104,8 @@ * (default: `25`)
   ignoreScrollables?: boolean;
+
+  /**
+   * Class to add to the `<html>` element when the panel is open or opening
+   * (default: `null`)
+   */
+   openPanelClass?: string;
 }

src/util.ts

@@ -11,5 +11,7 @@ export function assertArg(condition: any, message: string) {
     Element.prototype.matchesSelector ||
+    // @ts-ignore: Property does not exist
     Element.prototype.webkitMatchesSelector ||
     // @ts-ignore: Property does not exist
     Element.prototype.mozMatchesSelector ||
+    // @ts-ignore: Property does not exist
     Element.prototype.msMatchesSelector ||
@@ -16,0 +18,0 @@ // @ts-ignore: Property does not exist

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

Worsened metrics

Total package byte prevSize

310898

decreased by-2.88%

Number of package files

27

decreased by-15.62%

Lines of code

2495

decreased by-1.42%

No dependency changes