triggle
Version:
A lightweight CSS animation trigger library that animates elements on click, hover, enter and more.
3 lines (2 loc) • 4.67 kB
JavaScript
(function(y){typeof define=="function"&&define.amd?define(y):y()})(function(){"use strict";var y;y=function(){(function(){const q=["touchstart","touchend","scroll"],I=new WeakMap,E=new WeakMap,v=new WeakMap,D={fadeIn:"ca__fx-fadeIn",fadeInUp:"ca__fx-fadeInUp",fadeInDown:"ca__fx-fadeInDown",zoomIn:"ca__fx-zoomIn",zoomOut:"ca__fx-zoomOut",bounceIn:"ca__fx-bounceIn",bounceOut:"ca__fx-bounceOut",slideInLeft:"ca__fx-slideInLeft",slideInRight:"ca__fx-slideInRight",flipInX:"ca__fx-flipInX",flipInY:"ca__fx-flipInY"};function A(t,n,r=!1,a,g,c=!1,u){if(window.__trg_TRIGGER_DISABLED||!n)return;a&&(t.style.animationDelay=a),g&&(t.style.animationDuration=g);const p=n.split(" ").filter(Boolean);c?p.forEach(s=>t.classList.toggle(s)):p.forEach(s=>t.classList.add(s));const b=()=>{t.style.animationDelay="",t.style.animationDuration=""};if(r&&!c){const s=()=>{p.forEach(i=>t.classList.remove(i)),b(),t.removeEventListener("animationend",s),t.dispatchEvent(new CustomEvent("triggle:animationEnd",{detail:{class:n}})),typeof u=="function"&&u()};t.addEventListener("animationend",s)}else b(),typeof u=="function"&&u()}function S(t,n=0){document.querySelectorAll(`[data-triggle-group="${t}"]`).forEach((r,a)=>{const g=r.getAttribute("data-triggle-class"),c=r.getAttribute("data-triggle-reset")==="true",u=r.getAttribute("data-triggle-delay"),p=r.getAttribute("data-triggle-duration"),b=r.getAttribute("data-triggle-toggle")==="true";A(r,g,c,n>0?a*n+"ms":u,p,b)})}function _(t,n=null){const r=t.getAttribute("data-triggle-target"),a=function(e,l){if(!l)return[e];if(I.has(e))return I.get(e);const o=l.split(",").map(f=>f.trim()).flatMap(f=>{try{return[...e.querySelectorAll(f),e.closest(f),...document.querySelectorAll(f)].filter(Boolean)}catch{return[]}});return o.length>0&&I.set(e,o),o}(t,r),g=t.getAttribute("data-triggle-next"),c=parseInt(t.getAttribute("data-triggle-chain-delay"),10)||0,u=t.getAttribute("data-triggle-chain-loop")==="true",p=t.getAttribute("data-triggle-group"),b=parseInt(t.getAttribute("data-triggle-stagger"),10)||0,s=()=>{if(g){const e=document.querySelector(g);if(e){const l=e.getAttribute("data-triggle-class"),o=e.getAttribute("data-triggle-reset")==="true",f=e.getAttribute("data-triggle-delay"),m=e.getAttribute("data-triggle-duration"),h=e.getAttribute("data-triggle-toggle")==="true";setTimeout(()=>{A(e,l,o,f,m,h,()=>{u&&n?setTimeout(()=>{_(n,n)},c):u&&!n&&_(t,t)})},c)}}p&&S(p,b)},i=a&&a.length>0?a:[t];let d=i.length;i.forEach(e=>{const l=e.getAttribute("data-triggle-preset");let o=e.getAttribute("data-triggle-class");if(!o&&l&&D[l]&&(o=D[l]),!o)return d--,void(d===0&&s());const f=e.getAttribute("data-triggle-reset")==="true",m=e.getAttribute("data-triggle-delay"),h=e.getAttribute("data-triggle-duration"),w=e.getAttribute("data-triggle-toggle")==="true";A(e,o,f,m,h,w,()=>{d--,d===0&&s()})})}function L(){document.querySelectorAll("[data-triggle]").forEach(t=>{const n=t.getAttribute("data-triggle").split(",").map(i=>i.trim()),r=t.getAttribute("data-triggle-key"),a=t.getAttribute("data-triggle-once")==="true",g=t.getAttribute("data-triggle-scroll")==="true",c=parseFloat(t.getAttribute("data-triggle-threshold"))||.5,u=t.getAttribute("data-triggle-group"),p=parseInt(t.getAttribute("data-triggle-stagger"),10)||0,b=i=>{(i.type!=="keydown"&&i.type!=="keyup"||!r||function(d,e){return d.split(",").map(l=>l.trim().toLowerCase()).some(l=>{const o=l.split("+"),f=o.pop(),m=o,h=f===e.key.toLowerCase(),w=m.every(x=>x==="ctrl"&&e.ctrlKey||x==="shift"&&e.shiftKey||x==="alt"&&e.altKey);return h&&(m.length===0||w)})}(r,i))&&(_(t),a&&t.removeEventListener(i.type,b))},s=[];n.forEach(i=>{if(g&&i==="scroll"){const d=new IntersectionObserver((e,l)=>{e.forEach(o=>{o.isIntersecting&&(u?S(u,p):_(t),a&&l.unobserve(o.target))})},{threshold:c});d.observe(t),E.set(t,d)}else{const d=!!q.includes(i)&&{passive:!0};t.addEventListener(i,b,d),s.push({type:i,handler:b,options:d})}}),s.length>0&&v.set(t,s)})}function k(){new MutationObserver(t=>{for(const n of t)n.addedNodes.forEach(r=>{var a,g;r.nodeType===1&&((a=r.matches)!=null&&a.call(r,"[data-triggle]")||(g=r.querySelector)!=null&&g.call(r,"[data-triggle]"))&&triggle.init()})}).observe(document.body,{childList:!0,subtree:!0})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{L(),k()}):(L(),k()),window.triggle={init:L,destroy:function(){document.querySelectorAll("[data-triggle]").forEach(t=>{const n=E.get(t);n&&(n.disconnect(),E.delete(t));const r=v.get(t);r&&(r.forEach(({type:a,handler:g,options:c})=>{t.removeEventListener(a,g,c)}),v.delete(t))})},apply:A}})()},typeof define=="function"&&define.amd?define(y):y()});
//# sourceMappingURL=triggle.min.js.map