-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdrawerbuild.min.js
14 lines (10 loc) · 5.24 KB
/
drawerbuild.min.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
* DrawerBuild Library 1.5.3 Beta
* 02/04/2022
* Create by Rodny Estrada
* GitHub => https://github.com/RodnyE
*/
"use strict";class Drawer{constructor(t,n){n=n||{},this.id=t;var i,o,e,a=document.getElementById(t),s=document.createElement("div"),r=document.getElementsByTagName("body")[0],c=this;if(n.position=l("string"==typeof n.position&&/^(left|right|top|bottom)$/.test(n.position.toLowerCase())?n.position:void 0,"left").toLowerCase(),n.duration=l(n.duration,200),n.exitDuration=l(n.exitDuration,n.duration),n.size=l(n.size,.7*screen.width),n.background=l(n.background,"#ffffff"),n.opacity=l(n.opacity,.6),n.draggable=l(n.draggable,!0),n.enableEventBg=l(n.enableEventBg,!0),n.animation=l(n.animation,"arc"),i=n.position,e=n.size,"left"!=i&&"right"!=i||(o="top",screen.height),"top"!=i&&"bottom"!=i||(o="left",screen.width),s.setAttribute("style","margin: 0; padding: 0;background-color: rgba(0,0,0,1);width: "+screen.width+"px;height: "+screen.height+"px;filter: opacity(0);position: fixed;top: 0; left: 0;"),a.setAttribute("style","margin: 0; padding: 0;background-color: "+n.background+";position: fixed;height:"+("top"==o?screen.height:e)+"px;width: "+("left"==o?screen.width:e)+"px;"+i+":-"+e+"px;"+o+":0;"),n.enableEventBg&&(s.onclick=function(){c.cfg.enableEventBg&&!c.isMove&&c.close()}),s.style.display="none",a.parentNode&&a.parentNode.removeChild(a),r.appendChild(s),r.appendChild(a),this.defaultEvents(),this.shadow=s,this.drawer=a,this.cfg=n,this.isOpen=!1,this.isMove=!1,this.position=-n.size,n.draggable){let t=0,n="top"==o,s="right"==i||"bottom"==i,r=screen[n?"width":"height"];a.ontouchstart=function(i){c.cfg.draggable&&(a.drag=!0),i=i.changedTouches[0][n?"screenX":"screenY"],t=(s?r-i:i)-c.position},a.ontouchmove=function(o){if(a.drag){o=o.changedTouches[0];var e=c.position,l=o[n?"screenX":"screenY"];s&&(l=r-l),(e=l-t)<=0&&(c.position=e,a.style[i]=e+"px")}},a.ontouchend=function(n){a.drag=!1,t=0;let o=c.position;-c.position<c.cfg.size/2?(c.eventHandler.open(),Drawer.utils.animate(function(t){c.position=o*(1-t),c.drawer.style[i]=c.position+"px"},200).start()):(c.isMove=!0,Drawer.utils.animate(function(t){c.position=-(e*t-o),c.drawer.style[i]=c.position+"px",c.shadow.style.filter="opacity("+c.cfg.opacity*(1-t)+")"},200).finish(function(){c.isOpen=!1,c.isMove=!1,c.shadow.style.display="none"}).start(),c.eventHandler.close())}}function l(t,n){return void 0!==t?t:n}function u(t){return function(n){return 1-t(1-n)}}this.animation="linear"===n.animation?void 0:"elasticIn"===n.animation?function(t){return Math.pow(2,10*(t-1))*Math.cos(20*Math.PI*c.position/3*t)}:"elasticOut"===n.animation?u(function(t){return Math.pow(2,10*(t-1))*Math.cos(20*Math.PI*c.position/3*t)}):"bounceIn"===n.animation?function(t){for(let n=0,i=1;;n+=i,i/=2)if(t>=(7-4*n)/11)return-Math.pow((11-6*n-11*t)/4,2)+Math.pow(i,2)}:"bounceOut"===n.animation||"bounce"===n.animation?u(function(t){for(let n=0,i=1;;n+=i,i/=2)if(t>=(7-4*n)/11)return-Math.pow((11-6*n-11*t)/4,2)+Math.pow(i,2)}):"slip"===n.animation?u(function(t){return Math.pow(t,.5)}):"smooth"===n.animation?u(function(t){return Math.pow(t,2)}):"power"===n.animation?function(t){return Math.pow(t,2)}:"smoothX2"===n.animation?u(function(t){return Math.pow(t,4)}):"powerX2"===n.animation?function(t){return Math.pow(t,4)}:"smoothX3"===n.animation?u(function(t){return Math.pow(t,8)}):"powerX3"===n.animation?function(t){return Math.pow(t,8)}:"arcIn"===n.animation||"arc"===n.animation?function(t){return 1-Math.sin(Math.acos(t))}:(n.animation,u(function(t){return 1-Math.sin(Math.acos(t))})),l=null,u=null,s=null,r=null,n=null}open(){var t=this,n=this.cfg,i=this.drawer,o=this.shadow;o.style.display="block",this.isMove=!0;var e=Drawer.utils.animate(function(e){t.position=-n.size*(1-e),i.style[n.position]=t.position+"px",o.style.filter="opacity("+n.opacity*e+")"},n.duration,this.animation);e.start(),e.finish(function(){t.isOpen=!0,t.isMove=!1,i=null,o=null,n=null,t=null}),e=null,this.eventHandler.open()}close(){var t=this,n=this.cfg,i=this.drawer,o=this.shadow;this.isMove=!0;var e=Drawer.utils.animate(function(e){t.position=-n.size*e,i.style[n.position]=t.position+"px",o.style.filter="opacity("+n.opacity*(1-e)+")"},n.exitDuration);e.start(),e.finish(function(){t.isOpen=!1,t.isMove=!1,o.style.display="none",t=null,o=null,i=null,n=null}),e=null,this.eventHandler.close()}setBackground(t){this.drawer.style.backgroundColor=t}setDuration(t){this.cfg.duration=t}setExitDuration(t){this.cfg.exitDuration=t}setOpacity(t){this.cfg.opacity=t,this.isOpen&&(this.shadow.style.filter="opacity("+t+")")}setShadowBackground(t){this.shadow.style.backgroundColor=t}enableShadowEvent(t){this.cfg.enableEventBg=t}on(t,n){switch(this.eventHandler[t]=n,t){case"click":this.drawer.onclick=n}}lock(){this.cfg.draggable=!1}unlock(){this.cfg.draggable=!0}defaultEvents(){this.eventHandler={},this.eventHandler.open=function(){},this.eventHandler.close=function(){},this.eventHandler.click=function(){}}}Drawer.utils={},Drawer.utils.animate=function(t,n,i){var o,e=!0,a=function(){};function s(r){var c=(r-o)/n;c>1&&(c=1);var l=i(c);t(l),c<1&&e?window.requestAnimationFrame(s):a()}return i||(i=function(t){return t}),{start:function(){return e=!0,o=performance.now(),window.requestAnimationFrame(s),this},stop:function(){return e=!1,this},finish:function(t){return a=t,this}}};
/*
version: 1.5.3b
*/