triggle/dist/triggle.min.umd.cjs.map

A lightweight CSS animation trigger library that animates elements on click, hover, enter and more.

{"version":3,"file":"triggle.min.umd.cjs","sources":["../src/triggle.js"],"sourcesContent":["(function () {\r\n  const PASSIVE_EVENTS = [\"touchstart\", \"touchend\", \"scroll\"];\r\n  const targetCache = new WeakMap();\r\n\r\n  function applyAnimation(\r\n    el,\r\n    animationClass,\r\n    reset = false,\r\n    delay,\r\n    duration,\r\n    toggle = false,\r\n    onComplete\r\n  ) {\r\n    if (window.__trg_TRIGGER_DISABLED) return;\r\n\r\n    if (delay) el.style.animationDelay = delay;\r\n    if (duration) el.style.animationDuration = duration;\r\n\r\n    const classList = animationClass.split(\" \").filter(Boolean);\r\n\r\n    if (toggle) {\r\n      classList.forEach((cls) => el.classList.toggle(cls));\r\n    } else {\r\n      classList.forEach((cls) => el.classList.add(cls));\r\n    }\r\n\r\n    const clearStyles = () => {\r\n      el.style.animationDelay = \"\";\r\n      el.style.animationDuration = \"\";\r\n    };\r\n\r\n    if (reset && !toggle) {\r\n      const onAnimationEnd = () => {\r\n        classList.forEach((cls) => el.classList.remove(cls));\r\n        clearStyles();\r\n        el.removeEventListener(\"animationend\", onAnimationEnd);\r\n\r\n        el.dispatchEvent(\r\n          new CustomEvent(\"triggle:animationEnd\", {\r\n            detail: { class: animationClass },\r\n          })\r\n        );\r\n\r\n        if (typeof onComplete === \"function\") onComplete();\r\n      };\r\n      el.addEventListener(\"animationend\", onAnimationEnd);\r\n    } else {\r\n      clearStyles();\r\n      if (typeof onComplete === \"function\") onComplete();\r\n    }\r\n  }\r\n\r\n  function matchesKeyFilter(keyFilter, event) {\r\n    const rules = keyFilter.split(\",\").map((k) => k.trim().toLowerCase());\r\n    return rules.some((rule) => {\r\n      const parts = rule.split(\"+\");\r\n      const requiredKey = parts.pop();\r\n      const requiredMods = parts;\r\n\r\n      const matchesKey = requiredKey === event.key.toLowerCase();\r\n      const matchesMods = requiredMods.every((mod) => {\r\n        return (\r\n          (mod === \"ctrl\" && event.ctrlKey) ||\r\n          (mod === \"shift\" && event.shiftKey) ||\r\n          (mod === \"alt\" && event.altKey)\r\n        );\r\n      });\r\n\r\n      return matchesKey && (requiredMods.length === 0 || matchesMods);\r\n    });\r\n  }\r\n\r\n  function getTargetElement(triggerEl, selector) {\r\n    if (!selector) return triggerEl;\r\n\r\n    if (targetCache.has(triggerEl)) return targetCache.get(triggerEl);\r\n\r\n    const target =\r\n      selector.startsWith(\".\") || selector.startsWith(\"#\")\r\n        ? document.querySelector(selector)\r\n        : triggerEl.closest(selector);\r\n\r\n    if (target) targetCache.set(triggerEl, target);\r\n    return target;\r\n  }\r\n\r\n  function triggerAnimation(el, originEl = null) {\r\n    const animationClass = el.getAttribute(\"data-triggle-class\");\r\n    const reset = el.getAttribute(\"data-triggle-reset\") === \"true\";\r\n    const delay = el.getAttribute(\"data-triggle-delay\");\r\n    const duration = el.getAttribute(\"data-triggle-duration\");\r\n    const toggle = el.getAttribute(\"data-triggle-toggle\") === \"true\";\r\n    const targetSelector = el.getAttribute(\"data-triggle-target\");\r\n    const nextSelector = el.getAttribute(\"data-triggle-next\");\r\n    const chainDelay =\r\n      parseInt(el.getAttribute(\"data-triggle-chain-delay\"), 10) || 0;\r\n    const chainLoop = el.getAttribute(\"data-triggle-chain-loop\") === \"true\";\r\n    const groupName = el.getAttribute(\"data-triggle-group\");\r\n    const staggerValue =\r\n      parseInt(el.getAttribute(\"data-triggle-stagger\"), 10) || 0;\r\n\r\n    const targetElement = getTargetElement(el, targetSelector);\r\n    if (!targetElement) return;\r\n\r\n    const animateNext = () => {\r\n      if (nextSelector) {\r\n        const nextEl = document.querySelector(nextSelector);\r\n        if (nextEl) {\r\n          const nextClass = nextEl.getAttribute(\"data-triggle-class\");\r\n          const nextReset =\r\n            nextEl.getAttribute(\"data-triggle-reset\") === \"true\";\r\n          const nextDelay = nextEl.getAttribute(\"data-triggle-delay\");\r\n          const nextDuration = nextEl.getAttribute(\"data-triggle-duration\");\r\n          const nextToggle =\r\n            nextEl.getAttribute(\"data-triggle-toggle\") === \"true\";\r\n\r\n          setTimeout(() => {\r\n            applyAnimation(\r\n              nextEl,\r\n              nextClass,\r\n              nextReset,\r\n              nextDelay,\r\n              nextDuration,\r\n              nextToggle,\r\n              () => {\r\n                if (chainLoop && originEl) {\r\n                  setTimeout(() => {\r\n                    triggerAnimation(originEl, originEl);\r\n                  }, chainDelay);\r\n                } else if (chainLoop && !originEl) {\r\n                  triggerAnimation(el, el);\r\n                }\r\n              }\r\n            );\r\n          }, chainDelay);\r\n        }\r\n      }\r\n\r\n      if (groupName) {\r\n        const groupEls = document.querySelectorAll(\r\n          `[data-triggle-group=\"${groupName}\"]`\r\n        );\r\n        groupEls.forEach((groupEl, i) => {\r\n          const gClass = groupEl.getAttribute(\"data-triggle-class\");\r\n          const gReset = groupEl.getAttribute(\"data-triggle-reset\") === \"true\";\r\n          const gDelay = groupEl.getAttribute(\"data-triggle-delay\");\r\n          const gDuration = groupEl.getAttribute(\"data-triggle-duration\");\r\n          const gToggle =\r\n            groupEl.getAttribute(\"data-triggle-toggle\") === \"true\";\r\n          const totalDelay =\r\n            staggerValue > 0 ? `${i * staggerValue}ms` : gDelay;\r\n\r\n          applyAnimation(\r\n            groupEl,\r\n            gClass,\r\n            gReset,\r\n            totalDelay,\r\n            gDuration,\r\n            gToggle\r\n          );\r\n        });\r\n      }\r\n    };\r\n\r\n    applyAnimation(\r\n      targetElement,\r\n      animationClass,\r\n      reset,\r\n      delay,\r\n      duration,\r\n      toggle,\r\n      animateNext\r\n    );\r\n  }\r\n\r\n  function initTriggerAnimations() {\r\n    const elements = document.querySelectorAll(\"[data-triggle]\");\r\n\r\n    elements.forEach((el) => {\r\n      const triggers = el\r\n        .getAttribute(\"data-triggle\")\r\n        .split(\",\")\r\n        .map((t) => t.trim());\r\n      const keyFilter = el.getAttribute(\"data-triggle-key\");\r\n      const once = el.getAttribute(\"data-triggle-once\") === \"true\";\r\n      const scrollTrigger = el.getAttribute(\"data-triggle-scroll\") === \"true\";\r\n      const groupName = el.getAttribute(\"data-triggle-group\");\r\n      const staggerValue =\r\n        parseInt(el.getAttribute(\"data-triggle-stagger\"), 10) || 0;\r\n\r\n      const handler = (event) => {\r\n        if ((event.type === \"keydown\" || event.type === \"keyup\") && keyFilter) {\r\n          if (!matchesKeyFilter(keyFilter, event)) return;\r\n        }\r\n        triggerAnimation(el);\r\n        if (once) el.removeEventListener(event.type, handler);\r\n      };\r\n\r\n      triggers.forEach((trigger) => {\r\n        if (scrollTrigger && trigger === \"scroll\") {\r\n          const observer = new IntersectionObserver(\r\n            (entries, obs) => {\r\n              entries.forEach((entry) => {\r\n                if (entry.isIntersecting) {\r\n                  if (groupName) {\r\n                    // Scroll-based group with stagger\r\n                    const groupEls = document.querySelectorAll(\r\n                      `[data-triggle-group=\"${groupName}\"]`\r\n                    );\r\n                    groupEls.forEach((groupEl, i) => {\r\n                      const gClass = groupEl.getAttribute(\"data-triggle-class\");\r\n                      const gReset =\r\n                        groupEl.getAttribute(\"data-triggle-reset\") === \"true\";\r\n                      const gDelay = groupEl.getAttribute(\"data-triggle-delay\");\r\n                      const gDuration = groupEl.getAttribute(\r\n                        \"data-triggle-duration\"\r\n                      );\r\n                      const gToggle =\r\n                        groupEl.getAttribute(\"data-triggle-toggle\") === \"true\";\r\n                      const totalDelay =\r\n                        staggerValue > 0 ? `${i * staggerValue}ms` : gDelay;\r\n\r\n                      applyAnimation(\r\n                        groupEl,\r\n                        gClass,\r\n                        gReset,\r\n                        totalDelay,\r\n                        gDuration,\r\n                        gToggle\r\n                      );\r\n                    });\r\n                  } else {\r\n                    triggerAnimation(el);\r\n                  }\r\n\r\n                  if (once) obs.unobserve(entry.target);\r\n                }\r\n              });\r\n            },\r\n            { threshold: 0.5 }\r\n          );\r\n          observer.observe(el);\r\n        } else {\r\n          el.addEventListener(\r\n            trigger,\r\n            handler,\r\n            PASSIVE_EVENTS.includes(trigger) ? { passive: true } : false\r\n          );\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  function destroyTriggerAnimations() {\r\n    document.querySelectorAll(\"[data-triggle]\").forEach((el) => {\r\n      el.replaceWith(el.cloneNode(true));\r\n    });\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\"DOMContentLoaded\", initTriggerAnimations);\r\n  } else {\r\n    initTriggerAnimations();\r\n  }\r\n\r\n  window.triggle = {\r\n    init: initTriggerAnimations,\r\n    destroy: destroyTriggerAnimations,\r\n    apply: applyAnimation,\r\n  };\r\n})();\r\n"],"names":["PASSIVE_EVENTS","targetCache","WeakMap","applyAnimation","el","animationClass","reset","delay","duration","toggle","onComplete","window","__trg_TRIGGER_DISABLED","style","animationDelay","animationDuration","classList","split","filter","Boolean","forEach","cls","add","clearStyles","onAnimationEnd","remove","removeEventListener","dispatchEvent","CustomEvent","detail","class","addEventListener","triggerAnimation","originEl","getAttribute","targetSelector","nextSelector","chainDelay","parseInt","chainLoop","groupName","staggerValue","targetElement","triggerEl","selector","has","get","target","startsWith","document","querySelector","closest","set","nextEl","nextClass","nextReset","nextDelay","nextDuration","nextToggle","setTimeout","querySelectorAll","groupEl","i","gClass","gReset","gDelay","gDuration","gToggle","initTriggerAnimations","triggers","map","t","trim","keyFilter","once","scrollTrigger","handler","event","type","k","toLowerCase","some","rule","parts","requiredKey","pop","requiredMods","matchesKey","key","matchesMods","every","mod","ctrlKey","shiftKey","altKey","length","trigger","IntersectionObserver","entries","obs","entry","isIntersecting","unobserve","threshold","observe","includes","passive","readyState","triggle","init","destroy","replaceWith","cloneNode","apply"],"mappings":"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"}