atropos/atropos.min.mjs

Touch-friendly 3D parallax hover effects

/**
 * Atropos 2.0.2
 * Touch-friendly 3D parallax hover effects
 * https://atroposjs.com
 *
 * Copyright 2021-2023 
 *
 * Released under the MIT License
 *
 * Released on: July 4, 2023
 */

function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var a in o)Object.prototype.hasOwnProperty.call(o,a)&&(t[a]=o[a])}return t},_extends.apply(this,arguments)}var $=function(t,e){return t.querySelector(e)},$$=function(t,e){return t.querySelectorAll(e)},removeUndefinedProps=function(t){void 0===t&&(t={});var e={};return Object.keys(t).forEach((function(o){void 0!==t[o]&&(e[o]=t[o])})),e},defaults={alwaysActive:!1,activeOffset:50,shadowOffset:50,shadowScale:1,duration:300,rotate:!0,rotateTouch:!0,rotateXMax:15,rotateYMax:15,rotateXInvert:!1,rotateYInvert:!1,stretchX:0,stretchY:0,stretchZ:0,commonOrigin:!0,shadow:!0,highlight:!0};function Atropos(t){void 0===t&&(t={});var e,o,a,n,r,i,s,p,c,u,d,l,f=t,v=f.el,h=f.eventsEl,m=t.isComponent,y={__atropos__:!0,params:_extends({},defaults,{onEnter:null,onLeave:null,onRotate:null},removeUndefinedProps(t||{})),destroyed:!1,isActive:!1},g=y.params,M=[];!function t(){l=requestAnimationFrame((function(){M.forEach((function(t){if("function"==typeof t)t();else{var e=t.element,o=t.prop,a=t.value;e.style[o]=a}})),M.splice(0,M.length),t()}))}();var x,O=function(t,e){M.push({element:t,prop:"transitionDuration",value:e})},w=function(t,e){M.push({element:t,prop:"transitionTimingFunction",value:e})},_=function(t,e){M.push({element:t,prop:"transform",value:e})},b=function(t,e){M.push({element:t,prop:"opacity",value:e})},X=function(t,e,o,a){return t.addEventListener(e,o,a)},Y=function(t,e,o,a){return t.removeEventListener(e,o,a)},A=function(t){var o=t.rotateXPercentage,a=void 0===o?0:o,n=t.rotateYPercentage,r=void 0===n?0:n,i=t.duration,s=t.opacityOnly,p=t.easeOut;$$(e,"[data-atropos-offset], [data-atropos-opacity]").forEach((function(t){O(t,i),w(t,p?"ease-out":"");var e=function(t){if(t.dataset.atroposOpacity&&"string"==typeof t.dataset.atroposOpacity)return t.dataset.atroposOpacity.split(";").map((function(t){return parseFloat(t)}))}(t);if(0===a&&0===r)s||_(t,"translate3d(0, 0, 0)"),e&&b(t,e[0]);else{var o=parseFloat(t.dataset.atroposOffset)/100;if(Number.isNaN(o)||s||_(t,"translate3d("+-r*-o+"%, "+a*-o+"%, 0)"),e){var n=e[0],c=e[1],u=Math.max(Math.abs(a),Math.abs(r));b(t,n+(c-n)*u/100)}}}))},L=function(t,e){var a=v!==h;if(r||(r=v.getBoundingClientRect()),a&&!i&&(i=h.getBoundingClientRect()),void 0===t&&void 0===e){var n=a?i:r;t=n.left+n.width/2,e=n.top+n.height/2}var s,c=0,u=0,d=r,l=d.top,f=d.left,m=d.width,y=d.height;if(a){var x=i,X=x.top,Y=x.left,L=x.width,T=x.height,$=m/2+(f-Y),E=y/2+(l-X),R=t-Y,P=e-X;u=g.rotateYMax*(R-$)/(L-m/2)*-1,c=g.rotateXMax*(P-E)/(T-y/2),s=t-f+"px "+(e-l)+"px"}else{var I=m/2,j=y/2,C=t-f,D=e-l;u=g.rotateYMax*(C-I)/(m/2)*-1,c=g.rotateXMax*(D-j)/(y/2)}c=Math.min(Math.max(-c,-g.rotateXMax),g.rotateXMax),g.rotateXInvert&&(c=-c),u=Math.min(Math.max(-u,-g.rotateYMax),g.rotateYMax),g.rotateYInvert&&(u=-u);var F,N,S=c/g.rotateXMax*100,k=u/g.rotateYMax*100,q=(a?k/100*g.stretchX:0)*(g.rotateYInvert?-1:1),B=(a?S/100*g.stretchY:0)*(g.rotateXInvert?-1:1),U=a?Math.max(Math.abs(S),Math.abs(k))/100*g.stretchZ:0;_(o,"translate3d("+q+"%, "+-B+"%, "+-U+"px) rotateX("+c+"deg) rotateY("+u+"deg)"),s&&g.commonOrigin&&(F=o,N=s,M.push({element:F,prop:"transformOrigin",value:N})),p&&(O(p,g.duration+"ms"),w(p,"ease-out"),_(p,"translate3d("+.25*-k+"%, "+.25*S+"%, 0)"),b(p,Math.max(Math.abs(S),Math.abs(k))/100)),A({rotateXPercentage:S,rotateYPercentage:k,duration:g.duration+"ms",easeOut:!0}),"function"==typeof g.onRotate&&g.onRotate(c,u)},T=function(){M.push((function(){return v.classList.add("atropos-active")})),O(o,g.duration+"ms"),w(o,"ease-out"),_(a,"translate3d(0,0, "+g.activeOffset+"px)"),O(a,g.duration+"ms"),w(a,"ease-out"),s&&(O(s,g.duration+"ms"),w(s,"ease-out")),y.isActive=!0},E=function(t){if(c=void 0,!("pointerdown"===t.type&&"mouse"===t.pointerType||"pointerenter"===t.type&&"mouse"!==t.pointerType)){if("pointerdown"===t.type&&t.preventDefault(),u=t.clientX,d=t.clientY,g.alwaysActive)return r=void 0,void(i=void 0);T(),"function"==typeof g.onEnter&&g.onEnter()}},R=function(t){!1===c&&t.cancelable&&t.preventDefault()},P=function(t){if(g.rotate&&y.isActive){if("mouse"!==t.pointerType){if(!g.rotateTouch)return;t.preventDefault()}var e=t.clientX,o=t.clientY,a=e-u,n=o-d;if("string"==typeof g.rotateTouch&&(0!==a||0!==n)&&void 0===c){if(a*a+n*n>=25){var r=180*Math.atan2(Math.abs(n),Math.abs(a))/Math.PI;c="scroll-y"===g.rotateTouch?r>45:90-r>45}!1===c&&(v.classList.add("atropos-rotate-touch"),t.cancelable&&t.preventDefault())}"mouse"!==t.pointerType&&c||L(e,o)}},I=function(t){if(r=void 0,i=void 0,y.isActive&&!(t&&"pointerup"===t.type&&"mouse"===t.pointerType||t&&"pointerleave"===t.type&&"mouse"!==t.pointerType)){if("string"==typeof g.rotateTouch&&c&&v.classList.remove("atropos-rotate-touch"),g.alwaysActive)return L(),"function"==typeof g.onRotate&&g.onRotate(0,0),void("function"==typeof g.onLeave&&g.onLeave());M.push((function(){return v.classList.remove("atropos-active")})),O(a,g.duration+"ms"),w(a,""),_(a,"translate3d(0,0, 0px)"),s&&(O(s,g.duration+"ms"),w(s,"")),p&&(O(p,g.duration+"ms"),w(p,""),_(p,"translate3d(0, 0, 0)"),b(p,0)),O(o,g.duration+"ms"),w(o,""),_(o,"translate3d(0,0,0) rotateX(0deg) rotateY(0deg)"),A({duration:g.duration+"ms"}),y.isActive=!1,"function"==typeof g.onRotate&&g.onRotate(0,0),"function"==typeof g.onLeave&&g.onLeave()}},j=function(t){var e=t.target;!h.contains(e)&&e!==h&&y.isActive&&I()};return y.destroy=function(){y.destroyed=!0,cancelAnimationFrame(l),Y(document,"click",j),Y(h,"pointerdown",E),Y(h,"pointerenter",E),Y(h,"pointermove",P),Y(h,"touchmove",R),Y(h,"pointerleave",I),Y(h,"pointerup",I),Y(h,"lostpointercapture",I),delete v.__atropos__},"string"==typeof v&&(v=$(document,v)),v&&(v.__atropos__||(void 0!==h?"string"==typeof h&&(h=$(document,h)):h=v,e=m?v.parentNode.host:v,Object.assign(y,{el:v}),o=$(v,".atropos-rotate"),a=$(v,".atropos-scale"),n=$(v,".atropos-inner"),v.__atropos__=y)),v&&h&&(g.shadow&&((s=$(v,".atropos-shadow"))||((s=document.createElement("span")).classList.add("atropos-shadow"),x=!0),_(s,"translate3d(0,0,-"+g.shadowOffset+"px) scale("+g.shadowScale+")"),x&&o.appendChild(s)),g.highlight&&function(){var t;(p=$(v,".atropos-highlight"))||((p=document.createElement("span")).classList.add("atropos-highlight"),t=!0),_(p,"translate3d(0,0,0)"),t&&n.appendChild(p)}(),g.rotateTouch&&("string"==typeof g.rotateTouch?v.classList.add("atropos-rotate-touch-"+g.rotateTouch):v.classList.add("atropos-rotate-touch")),$(e,"[data-atropos-opacity]")&&A({opacityOnly:!0}),X(document,"click",j),X(h,"pointerdown",E),X(h,"pointerenter",E),X(h,"pointermove",P),X(h,"touchmove",R),X(h,"pointerleave",I),X(h,"pointerup",I),X(h,"lostpointercapture",I),g.alwaysActive&&(T(),L())),y}export{Atropos,Atropos as default,defaults};
//# sourceMappingURL=atropos.min.mjs.map