{"version":3,"sources":["webpack:///./ui/js/utils/Animations.js"],"names":["Animations","elements","options","observer","IntersectionObserver","entries","handleEntries","Array","forEach","element","observe","event","cssClass","target","getAttribute","reverse","isIntersecting","classList","add","remove","this","defaultOptions","threshold","rootMargin","groupBy","value","key","parseFloat","isNaN","createObserver","$","document","ready","querySelectorAll","length"],"mappings":"wfAEMA,EACJ,WAAYC,GAAU,Y,4FAAA,kCA4BL,SAACA,EAAUC,GAC1B,IAAMC,EAAW,IAAIC,sBAAqB,SAAAC,GAAO,OAAI,EAAKC,cAAcD,KAAUH,GAClFK,MAAMC,QAAQP,GAAU,SAAAQ,GAAO,OAAIN,EAASO,QAAQD,SA9BhC,wBAkCN,SAAAJ,GACdE,MAAMC,QAAQH,GAAS,SAAAM,GACrB,IAAMC,EAAWD,EAAME,OAAOC,aAAa,aACrCC,EAA6D,OAAnDJ,EAAME,OAAOC,aAAa,qBAErCH,EAAMK,eAQXL,EAAME,OAAOI,UAAUC,IAAIN,GAPrBG,GACFJ,EAAME,OAAOI,UAAUE,OAAOP,SAxCpCQ,KAAKC,eAAiB,CACpBC,UAAW,GACXC,WAAY,aAIUC,YAAQvB,GAAU,SAAAQ,GAAO,OAC/CA,EAAQK,aAAa,0BAGPN,SAAQ,SAACiB,EAAOC,GAC9B,IAAMxB,E,+VAAU,CAAH,GAAQ,EAAKmB,gBACpBC,EAAYK,WAAWD,IAExBE,MAAMN,IAAcA,EAAY,IACnCpB,EAAQoB,UAAYA,GAGtB,EAAKO,eAAeJ,EAAOvB,OAiCjC4B,EAAEC,UAAUC,OAAM,WAChB,IAAM/B,EAAW8B,SAASE,iBAAiB,eAEtChC,EAASiC,QAKd,IAAIlC,EAAWC","file":"animation-framework-f20d9a9f84335c84bbe2.js","sourcesContent":["import { groupBy } from 'utils';\r\n\r\nclass Animations {\r\n  constructor(elements) {\r\n    this.defaultOptions = {\r\n      threshold: 0.6,\r\n      rootMargin: '-30px 0px',\r\n    };\r\n\r\n    // Gets a set of grouped elements using the anim-thresholds (threshold for intersection observer)\r\n    const groupedElements = groupBy(elements, element =>\r\n      element.getAttribute('data-anim-threshold'),\r\n    );\r\n\r\n    groupedElements.forEach((value, key) => {\r\n      const options = { ...this.defaultOptions };\r\n      const threshold = parseFloat(key);\r\n\r\n      if (!isNaN(threshold) && threshold < 1.0) {\r\n        options.threshold = threshold;\r\n      }\r\n\r\n      this.createObserver(value, options);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Creates an IntersectionObserver for the given elements using the given options\r\n   * @param {NodeList} elements\r\n   * @param {Object} options\r\n   */\r\n  createObserver = (elements, options) => {\r\n    const observer = new IntersectionObserver(entries => this.handleEntries(entries), options);\r\n    Array.forEach(elements, element => observer.observe(element));\r\n  };\r\n\r\n  /* handle entries run when a new element is observed (comes into view) */\r\n  handleEntries = entries => {\r\n    Array.forEach(entries, event => {\r\n      const cssClass = event.target.getAttribute('data-anim');\r\n      const reverse = event.target.getAttribute('data-anim-reverse') !== null;\r\n\r\n      if (!event.isIntersecting) {\r\n        if (reverse) {\r\n          event.target.classList.remove(cssClass);\r\n        }\r\n\r\n        return;\r\n      }\r\n\r\n      event.target.classList.add(cssClass);\r\n    });\r\n  };\r\n}\r\n\r\n$(document).ready(() => {\r\n  const elements = document.querySelectorAll('[data-anim]');\r\n\r\n  if (!elements.length) {\r\n    return;\r\n  }\r\n\r\n  // eslint-disable-next-line\r\n  new Animations(elements);\r\n});\r\n"],"sourceRoot":""}