react-swipeable-drawer/dist/react-swipeable-drawer.preact.umd.min.js

A swipeable drawer for the mobile web

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("preact")):"function"==typeof define&&define.amd?define(["exports","preact"],n):n(t.Drawer={},t.preact)}(this,function(t,n){"use strict";"default"in n&&n.default;var e=function(t){var n=t.position,e=t.size,o=t.swiping,r=t.translation,i=t.toggleDrawer,a=t.handleTouchStart,c=t.handleTouchMove,u=t.handleTouchEnd,p=t.drawerContent,f=t.overlayStyle,d=t.contentStyle;return h("div",{className:"DrawerContainer"},h(s,{position:n,open:r>0,swiping:o,translation:r,toggleDrawer:i,handleTouchStart:a,handleTouchMove:c,handleTouchEnd:u,style:f}),h(l,{position:n,size:e,swiping:o,translation:r,toggleDrawer:i,handleTouchStart:a,handleTouchMove:c,handleTouchEnd:u,drawerContent:p,style:d}))};e.defaultProps={overlayStyle:{},contentStyle:{}};var o=function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")},r=function(){function t(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(n,e,o){return e&&t(n.prototype,e),o&&t(n,o),n}}(),i=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t},a=function(t,n){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?t:n},s=function(t){var n=t.position,e=t.open,o=t.swiping,r=t.translation,a=t.toggleDrawer,s=t.handleTouchStart,l=t.handleTouchMove,c=t.handleTouchEnd,u=t.style;return h("div",{className:"DrawerOverlay",onClick:e?a:null,onTouchStart:s,onTouchMove:l(100),onTouchEnd:c,style:i({position:"fixed",zIndex:1,backgroundColor:"rgba(0,0,0,"+.6*r/100+")",transition:function(t){var n=t.swiping,e=t.open;return n?"":e?"background-color .2s ease-in-out, width 0s 0s, height 0s 0s":"background-color .2s ease-in-out, width 0s .2s, height 0s 0s"}({swiping:o,open:e})},function(t){var n=t.position,e=t.swiping,o=t.open;switch(n){case"top":return{top:0,left:0,right:0,height:e||o?"100%":"20px"};case"right":return{right:0,top:0,bottom:0,width:e||o?"100%":"20px"};case"bottom":return{bottom:0,left:0,right:0,height:e||o?"100%":"20px"};case"left":default:return{left:0,top:0,bottom:0,width:e||o?"100%":"20px"}}}({position:n,swiping:o,open:e}),u)})},l=function(t){var n=t.position,e=t.size,o=t.swiping,r=t.translation,a=t.handleTouchStart,s=t.handleTouchMove,l=t.handleTouchEnd,c=t.drawerContent,u=t.style;return h("div",{className:"DrawerContentContainer",onTouchStart:a,onTouchMove:s(e),onTouchEnd:l,style:i({position:"fixed",zIndex:1,transition:o?"":"transform .2s ease-in-out"},function(t){var n=t.position,e=t.size,o=t.translation;switch(n){case"top":return{left:0,right:0,top:"-"+e+"%",height:e+"%",transform:"translateY("+o+"%)"};case"right":return{top:0,bottom:0,right:"-"+e+"%",width:e+"%",transform:"translateX("+-o+"%)"};case"bottom":return{left:0,right:0,bottom:"-"+e+"%",height:e+"%",transform:"translateY("+-o+"%)"};case"left":default:return{top:0,bottom:0,left:"-"+e+"%",width:e+"%",transform:"translateX("+o+"%)"}}}({position:n,size:e,translation:r}),u)},c)},c=-10,u=100,p=function(t){function e(){var t,n,r;o(this,e);for(var i=arguments.length,s=Array(i),l=0;l<i;l++)s[l]=arguments[l];return n=r=a(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(s))),r.state={swiping:!1,scrolling:!1,translation:c,clientX:0,clientY:0},r.mainContentScroll=0,r.saveScrollPosition=function(){r.state.translation===c&&(r.mainContentScroll=window.pageYOffset)},r.toggleDrawer=function(){r.saveScrollPosition(),r.setState(function(t){return{translation:t.translation>50?c:u}})},r.handleTouchStart=function(t){r.saveScrollPosition();var n=t.targetTouches[0],e=n.clientX,o=n.clientY;r.setState({swiping:!0,clientX:e,clientY:o})},r.handleTouchMove=function(t){return function(n){var e=r.props.position,o=r.state,i=o.clientX,a=o.clientY,s=o.scrolling,l=window.innerWidth,c=n.targetTouches[0],h=c.clientX,p=c.clientY,f=Math.abs(h-i),d=Math.abs(p-a);s||d>f?r.setState({scrolling:!0}):"right"===e?r.setState({translation:Math.min((l-h)/(l*t/100)*100,u)}):r.setState({translation:Math.min(h/(l*t/100)*100,u)})}},r.handleTouchEnd=function(){r.setState(function(t){return{swiping:!1,scrolling:!1,translation:t.translation<50?c:u}})},a(r,n)}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(t,n):t.__proto__=n)}(e,n.Component),r(e,[{key:"componentDidUpdate",value:function(t,n){var e=this.state.translation;e!==n.translation&&e===c&&window.scrollTo(0,this.mainContentScroll)}},{key:"render",value:function(){var t=this.props,n=t.position,e=t.size,o=t.children,r=this.state;return o({position:n,size:e,swiping:r.swiping,translation:r.translation,mainContentScroll:this.mainContentScroll,toggleDrawer:this.toggleDrawer,handleTouchStart:this.handleTouchStart,handleTouchMove:this.handleTouchMove,handleTouchEnd:this.handleTouchEnd})}}]),e}();t.default=p,t.DrawerContainer=e,t.DrawerOverlay=s,t.DrawerContentContainer=l,t.MainContentContainer=function(t){var n=t.translation,e=t.mainContentScroll,o=t.children;return h("div",{className:"MainContentContainer",style:i({},n>0?{position:"fixed",top:-e,left:0,right:0}:{})},o)},Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=react-swipeable-drawer.preact.umd.min.js.map