{"version":3,"file":"main.min.js","sources":["../../../Hedeparken.Frontend/js/utils/helpers.js","../../../Hedeparken.Frontend/js/utils/onReady.js","../../../Hedeparken.Frontend/js/utils/scrollPosition.js","../../../Hedeparken.Frontend/js/utils/elementProperties.js","../../../Hedeparken.Frontend/js/utils/scrollLock.js","../../../Hedeparken.Frontend/js/modules/navigation.js","../../../Hedeparken.Frontend/js/utils/windowResize.js","../../../node_modules/sal.js/dist/sal.js","../../../Hedeparken.Frontend/js/utils/scrollTo.js","../../../Hedeparken.Frontend/js/utils/variables.js","../../../node_modules/rellax/rellax.js","../../../Hedeparken.Frontend/js/modules/rellax.js","../../../node_modules/intersection-observer/intersection-observer.js","../../../Hedeparken.Frontend/js/main.js","../../../Hedeparken.Frontend/js/modules/faq.js","../../../Hedeparken.Frontend/js/modules/anchors.js"],"sourcesContent":["export const transitionEndEventName = detectTransitionEndEventName();\r\n\r\nexport function detectTransitionEndEventName() {\r\n\r\n const transitions = {\r\n \"transition\": \"transitionend\",\r\n \"OTransition\": \"oTransitionEnd\",\r\n \"MozTransition\": \"transitionend\",\r\n \"WebkitTransition\": \"webkitTransitionEnd\"\r\n };\r\n\r\n const el = document.createElement(\"div\");\r\n\r\n for (const t in transitions) {\r\n if (el.style[t] !== undefined) {\r\n return transitions[t];\r\n }\r\n }\r\n return \"\";\r\n}\r\n\r\nexport function isVisible (elem) {\r\n return !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);\r\n}\r\n\r\nexport function cssAnimateNewHeight(container, classTarget = container, classOnBoth = false) {\r\n let newHeight;\r\n const prevHeight = container.offsetHeight;\r\n\r\n const delayedClose = () => {\r\n if (classOnBoth) {\r\n container.classList.remove('open');\r\n classTarget.classList.remove('open');\r\n } else {\r\n classTarget.classList.remove('open');\r\n }\r\n\r\n classTarget.blur(); // removes focus if its a button\r\n container.removeEventListener(transitionEndEventName, delayedClose);\r\n };\r\n\r\n container.removeAttribute('style');\r\n\r\n if (classTarget.classList.contains('open')) {\r\n newHeight = 0;\r\n container.addEventListener(transitionEndEventName, delayedClose);\r\n\r\n if (classOnBoth) {\r\n classTarget.classList.remove('open');\r\n }\r\n } else {\r\n classTarget.classList.add('open');\r\n\r\n if (classOnBoth) {\r\n container.classList.add('open');\r\n }\r\n\r\n newHeight = container.offsetHeight;\r\n }\r\n\r\n container.style.height = `${prevHeight}px`;\r\n\r\n setTimeout(() => {\r\n container.style.height = `${newHeight}px`;\r\n }, 10);\r\n}\r\n\r\nexport function setupReadmore(selector = '[data-action*=\"readmore\"]') {\r\n const readMoreBtns = document.body.querySelectorAll(selector);\r\n\r\n for (let i = 0; i < readMoreBtns.length; i++) {\r\n const readMoreBtn = readMoreBtns[i];\r\n const readMoreContainer = readMoreBtn.hasAttribute('data-target') ? document.getElementById(readMoreBtn.getAttribute('data-target').replace('#', '')) : readMoreBtn.nextElementSibling;\r\n\r\n if (readMoreContainer != null) {\r\n readMoreBtn.addEventListener('click', e => {\r\n e.preventDefault();\r\n\r\n cssAnimateNewHeight(readMoreContainer, readMoreBtn, true);\r\n });\r\n }\r\n\r\n }\r\n}\r\n\r\nexport function polyfillClosest() {\r\n Element.prototype.closest = function (selector) {\r\n const theparent = this.parentNode;\r\n const find = document.querySelectorAll(selector);\r\n\r\n if (theparent !== document.body) {\r\n let found = false;\r\n\r\n for (let a = 0; a < find.length; a++) {\r\n if (find[a] === theparent) {\r\n found = true;\r\n }\r\n }\r\n\r\n if (found) {\r\n return theparent;\r\n } else {\r\n return this.parentNode.closest(selector);\r\n }\r\n } else {\r\n return 0;\r\n }\r\n };\r\n}\r\n\r\nexport function scrollTo(element, to, duration) {\r\n const start = element.scrollTop,\r\n change = to - start,\r\n increment = 20;\r\n\r\n const animateScroll = function (elapsedTime) {\r\n elapsedTime += increment;\r\n const position = easeInOut(elapsedTime, start, change, duration);\r\n element.scrollTop = position;\r\n\r\n if (elapsedTime < duration) {\r\n setTimeout(() => {\r\n animateScroll(elapsedTime);\r\n }, increment);\r\n }\r\n };\r\n\r\n animateScroll(0);\r\n}\r\n\r\nfunction easeInOut(currentTime, start, change, duration) {\r\n currentTime /= duration / 2;\r\n if (currentTime < 1) {\r\n return change / 2 * currentTime * currentTime + start;\r\n }\r\n currentTime -= 1;\r\n return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;\r\n}\r\n\r\n/**\r\n * Find out whether or not the given argument is an element that would react somewhat normally to DOM-manipulations.\r\n *\r\n * @param {*} element - The element to check.\r\n * @returns {boolean} `true` if the given argument is an element (or document, or window), and `false` otherwise.\r\n */\r\nexport function isElement(element) {\r\n return element instanceof Element ||\r\n element instanceof Document ||\r\n element instanceof Window;\r\n}\r\n","/**\r\n * Handler to trigger callbacks once the browser is ready for them.\r\n *\r\n * You can keep adding references using onReady() even after the page is loaded. In that case they will be\r\n * run at once.\r\n *\r\n * @example\r\n * import { onReady } from './utils/events/onReady';\r\n *\r\n * onReady(yourFunctionHere);\r\n *\r\n */\r\n\r\nlet functionReferences = [];\r\n\r\n// Set the initial readyState based on the browser's current state. If the script has been loaded\r\n// asynchronously, the DOM might be ready for us already, in which case there's no reason to delay\r\n// any further processing. The following will evaluate as true if the DOM is ready, or the page is\r\n// complete.\r\nlet readyState = document.readyState === \"interactive\" || document.readyState === \"complete\";\r\n\r\n\r\n// Defines whether or not the window.onReady event has been bound, so we won't do it twice. That\r\n// would just be stupid.\r\nlet readyEventBound = false;\r\n\r\n\r\n\r\n/**\r\n * Run the given array of callback functions.\r\n *\r\n * @private\r\n * @param {Array} funcArray\r\n */\r\nfunction runFunctionArray(funcArray) {\r\n funcArray.forEach(funcRef => funcRef());\r\n}\r\n\r\n\r\n/**\r\n * Empty the callback arrays\r\n *\r\n * @private\r\n */\r\nfunction emptyCallbackArrays() {\r\n\r\n // Keep iterating through the function references until there are none left.\r\n while (functionReferences.length) {\r\n\r\n // Set up a temporary array that mirrors the list of callbacks, and empty the real one.\r\n const tempArray = functionReferences.slice(0);\r\n functionReferences = [];\r\n\r\n // Run the callbacks. The callbacks themselves may set up more callbacks, which\r\n // is why we keep looping the array until we're done.\r\n runFunctionArray(tempArray);\r\n\r\n }\r\n\r\n // At this point we'll assume we're ready for anything!\r\n readyState = true;\r\n}\r\n\r\n\r\n/**\r\n * Make sure the \"ready\"-event is set.\r\n *\r\n * @private\r\n */\r\nfunction bindReadyEvent() {\r\n\r\n if (!readyEventBound) {\r\n if (document.readyState === 'loading') {\r\n // loading yet, wait for the event\r\n document.addEventListener('DOMContentLoaded', emptyCallbackArrays);\r\n } else {\r\n // DOM is ready!\r\n emptyCallbackArrays();\r\n }\r\n\r\n readyEventBound = true;\r\n }\r\n}\r\n\r\n\r\n/**\r\n * Register a function to run when the page is ready.\r\n *\r\n * @param {Function} functionReference - The function you want to run.\r\n */\r\nexport function onReady(functionReference) {\r\n\r\n if (typeof functionReference === \"function\") {\r\n if (readyState) {\r\n functionReference();\r\n } else {\r\n\r\n bindReadyEvent();\r\n\r\n functionReferences.push(functionReference);\r\n }\r\n }\r\n}\r\n","import { activityThrottler } from \"../utils/trottle\";\r\n\r\n//use window.scrollY\r\nlet scrollpos = window.scrollY;\r\nconst header = document.getElementById(\"header\");\r\n\r\n// eslint-disable-next-line camelcase\r\nfunction addClassOnScroll() {\r\n header.classList.add(\"scroll\");\r\n}\r\n\r\n// eslint-disable-next-line camelcase\r\nfunction removeClassOnScroll() {\r\n header.classList.remove(\"scroll\");\r\n}\r\n\r\n\r\nfunction scrollEvent() {\r\n //Here you forgot to update the value\r\n scrollpos = window.scrollY;\r\n\r\n if (scrollpos > 10) {\r\n addClassOnScroll();\r\n }\r\n else {\r\n removeClassOnScroll();\r\n }\r\n}\r\n\r\nexport function initScrollHeader() {\r\n window.addEventListener('scroll', () => {\r\n scrollEvent();\r\n });\r\n\r\n}\r\n","/**\r\n * Utilities for checking properties and states of elements.\r\n */\r\n\r\n\r\nimport { isElement } from \"./helpers\";\r\n\r\n\r\n/**\r\n * Check if an element is empty.\r\n *\r\n * @param {Node} element - Check if this element is empty.\r\n * @param {boolean} [strict=true] - Set this to **false** to ignore nodes with whitespace.\r\n * @returns {boolean} **True** if the element is empty.\r\n */\r\nexport function elementIsEmpty(element, strict = true) {\r\n return strict ? !element.childNodes.length : !element.innerHTML.trim().length;\r\n}\r\n\r\n\r\n/**\r\n * Check if an element is hidden in the DOM with `display: none;`\r\n *\r\n * @param {HTMLElement} element - The element to check.\r\n * @returns {boolean} **True** if element is hidden, otherwise **false**.\r\n */\r\nexport function elementIsHidden(element) {\r\n return element.offsetParent === null;\r\n}\r\n\r\n\r\n/**\r\n * Return the position of an element\r\n *\r\n * @param {Element|String} element - The HTML element to work with or its ID\r\n * @param {Element|String|Window} [relativeTo=window] - The HTML element to return the position relative to or its ID\r\n * @returns {{top: Number, left: Number}} An object with top and left positions in pixels\r\n *\r\n *\r\n * @example
Basic usage:
\r\n * import { getElementPosition } from './utils/dom/elementProperties';\r\n *\r\n * const element = document.querySelector('.anElement');\r\n * getElementPosition(element);\r\n *\r\n *\r\n * @example
Perform a search for an element with an ID equal to the string, i.e. 'elementId', and get the position of that:
\r\n * import { getElementPosition } from './utils/dom/elementProperties';\r\n *\r\n * getElementPosition('elementId');\r\n */\r\nexport function getElementPosition(element, relativeTo = window) {\r\n\r\n const useElement = typeof element === \"string\" ? document.getElementById(element) : element;\r\n\r\n // Throw error if element wasn't found\r\n if (!useElement) {\r\n throw \"getElementPosition did not find an element.\";\r\n }\r\n\r\n\r\n const useRelativeTo = typeof relativeTo === \"string\" ? document.getElementById(relativeTo) : relativeTo;\r\n\r\n // Throw error if relative element wasn't found\r\n if (!useRelativeTo) {\r\n throw \"getElementPosition did not find an element to show the position relative to.\";\r\n }\r\n\r\n if (relativeTo === window) {\r\n // Return position relative to window\r\n const rect = useElement.getBoundingClientRect();\r\n return {\r\n top: rect.top + (window.pageYOffset || document.documentElement.scrollTop),\r\n left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft)\r\n };\r\n } else {\r\n // Return position relative to declared element\r\n return {\r\n top: useElement.offsetTop - relativeTo.offsetTop,\r\n left: useElement.offsetLeft - relativeTo.offsetLeft\r\n };\r\n }\r\n}\r\n\r\n\r\n\r\n/**\r\n * Get the current scroll values of the given element (or window). Will return an object containing\r\n * \"left\" and \"top\" properties, which are set to the scroll values, or false if no compatible element\r\n * was given.\r\n *\r\n * @param {Element|Window} [element=window]\r\n * @returns {{ left: number, top: number } | boolean}\r\n */\r\nexport function getElementScroll(element = window) {\r\n\r\n if (isElement(element)) {\r\n if (element instanceof Window) {\r\n return {\r\n left: element.pageXOffset || document.documentElement.scrollLeft,\r\n top: element.pageYOffset || document.documentElement.scrollTop\r\n };\r\n } else {\r\n return {\r\n left: element.scrollX || element.scrollLeft,\r\n top: element.scrollY || element.scrollTop\r\n };\r\n }\r\n } else {\r\n return false;\r\n }\r\n}\r\n\r\n\r\n\r\n/**\r\n * Get both width and height of element\r\n *\r\n * @param {Element} element - The HTML element to work with\r\n * @param {Object} [options={}] - Object of options\r\n * @param {boolean} [options.includePadding=false] - Get size including padding (defaults to true)\r\n * @param {boolean} [options.includeBorder=false] - Get size including border (defaults to true)\r\n * @param {boolean} [options.includeMargin=true] - Get size including margin (defaults to false)\r\n * @param {null|':before'|':after'} [options.pseudoElement=null] - Get size of pseudo element ':before' or ':after'\r\n * @returns {{width: number, height: number}} An object with the width and height as numbers\r\n */\r\nexport function getElementSize(element, options = {}) {\r\n\r\n // Get styles\r\n const elementStyle = window.getComputedStyle(element, options.pseudoElement);\r\n\r\n return {\r\n width: getElementWidth(element, options, elementStyle),\r\n height: getElementHeight(element, options, elementStyle)\r\n };\r\n\r\n}\r\n\r\n\r\n\r\n/**\r\n * Get width of element\r\n *\r\n * @param {Element} element - The HTML element to work with\r\n * @param {Object} [options={}] - Object of options\r\n * @param {boolean} [options.includeMargin=false] - Get width including margin (defaults to false)\r\n * @param {boolean} [options.includeBorder=true] - Get width including border (defaults to true)\r\n * @param {boolean} [options.includePadding=true] - Get width including padding (defaults to true)\r\n * @param {null|':before'|':after'} [options.pseudoElement=null] - Get width of pseudo element ':before' or ':after'\r\n * @param {CSSStyleDeclaration} [elementStyle] - Style declaration of element (in case you already have called .getComputedStyle(), pass its returned value here)\r\n * @returns {number} The width as a number\r\n */\r\nexport function getElementWidth(element, options = {}, elementStyle = null) {\r\n\r\n // Keep supplied values or set to defaults\r\n options.includeMargin = options.includeMargin === true;\r\n options.includeBorder = options.includeBorder !== false;\r\n options.includePadding = options.includePadding !== false;\r\n\r\n // Get styles\r\n const style = elementStyle || window.getComputedStyle(element, options.pseudoElement);\r\n\r\n // Get width including border and padding\r\n let width = element.offsetWidth;\r\n\r\n // Calculate width with margin\r\n if (options.includeMargin) {\r\n width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);\r\n }\r\n\r\n // Calculate width without border\r\n if (!options.includeBorder) {\r\n width -= parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);\r\n }\r\n\r\n // Calculate width without padding\r\n if (!options.includePadding) {\r\n width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);\r\n }\r\n\r\n return width;\r\n\r\n}\r\n\r\n\r\n\r\n/**\r\n * Get height of element\r\n *\r\n * @param {Element} element - The HTML element to work with\r\n * @param {Object} [options={}] - Object of options\r\n * @param {boolean} [options.includeMargin=false] - Get height including margin (defaults to false)\r\n * @param {boolean} [options.includeBorder=true] - Get height including border (defaults to true)\r\n * @param {boolean} [options.includePadding=true] - Get height including padding (defaults to true)\r\n * @param {null|':before'|':after'} [options.pseudoElement=null] - Get height of pseudo element ':before' or ':after'\r\n * @param {CSSStyleDeclaration} [elementStyle] - Style declaration of element (in case you already have called .getComputedStyle(), pass its returned value here)\r\n * @returns {number} The height as a number\r\n */\r\nexport function getElementHeight(element, options = {}, elementStyle = null) {\r\n\r\n // Keep supplied values or set to defaults\r\n options.includeMargin = options.includeMargin === true;\r\n options.includeBorder = options.includeBorder !== false;\r\n options.includePadding = options.includePadding !== false;\r\n\r\n // Get styles\r\n const style = elementStyle || window.getComputedStyle(element, options.pseudoElement);\r\n\r\n // Get height including border and padding\r\n let height = element.offsetHeight;\r\n\r\n // Calculate height with margin\r\n if (options.includeMargin) {\r\n height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);\r\n }\r\n\r\n // Calculate height without border\r\n if (!options.includeBorder) {\r\n height -= parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);\r\n }\r\n\r\n // Calculate height without padding\r\n if (!options.includePadding) {\r\n height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);\r\n }\r\n\r\n return height;\r\n\r\n}\r\n","/**\r\n * A utility to **lock the viewport** at the current position in order to **stop scrolling**.\r\n *\r\n * @example
Basic usage
\r\n * import { enableScrollLock, disableScrollLock } from './utils/dom/scrollLock';\r\n *\r\n * enableScrollLock();\r\n * window.setTimeout(disableScrollLock, 3000);\r\n */\r\n\r\nimport {getElementScroll} from \"./elementProperties\";\r\n\r\n\r\nconst className = \"scroll-lock\";\r\nlet scrollTop = 0;\r\n\r\n\r\n/**\r\n * Get the current state of the scroll lock. `true` if the scroll lock is enabled, otherwise `false`.\r\n *\r\n * @type {boolean}\r\n */\r\nexport let currentState = false;\r\n\r\n\r\n/**\r\n * Enable the scroll lock.\r\n */\r\nexport function enableScrollLock() {\r\n if (!currentState) {\r\n // Get scroll position\r\n const scrollPosition = getElementScroll();\r\n\r\n // Reset scroll position\r\n window.scrollTo(scrollPosition.left, 0);\r\n\r\n const htmlTag = document.documentElement;\r\n htmlTag.classList.add(className);\r\n htmlTag.style.marginTop = `${-scrollPosition.top}px`;\r\n htmlTag.style.position = \"fixed\";\r\n htmlTag.style.overflow = \"hidden\";\r\n htmlTag.style.width = \"100%\";\r\n\r\n // Remember state\r\n currentState = true;\r\n scrollTop = scrollPosition.top;\r\n }\r\n}\r\n\r\n\r\n/**\r\n * @type {function}\r\n * @ignore\r\n */\r\nexport const enable = enableScrollLock;\r\n\r\n\r\n\r\n/**\r\n * Disable the scroll lock\r\n */\r\nexport function disableScrollLock() {\r\n if (currentState) {\r\n const scrollPosition = getElementScroll();\r\n\r\n const htmlTag = document.documentElement;\r\n htmlTag.classList.remove(className);\r\n htmlTag.style.marginTop = \"\";\r\n htmlTag.style.position = \"\";\r\n htmlTag.style.overflow = \"\";\r\n htmlTag.style.width = \"\";\r\n\r\n // Set the scroll position to what it was before\r\n window.scrollTo(scrollPosition.left, scrollTop);\r\n\r\n // Remember state\r\n currentState = false;\r\n }\r\n}\r\n\r\n\r\n/**\r\n * @type {function}\r\n * @ignore\r\n */\r\nexport const disable = disableScrollLock;\r\n\r\n\r\n\r\n/**\r\n * Toggle the scroll lock between on and off\r\n */\r\nexport function toggleScrollLock() {\r\n if (currentState) {\r\n disableScrollLock();\r\n } else {\r\n enableScrollLock();\r\n }\r\n}\r\n\r\n\r\n/**\r\n * @type {function}\r\n * @ignore\r\n */\r\nexport const toggle = toggleScrollLock;\r\n\r\n\r\nexport default {\r\n enable,\r\n disable,\r\n toggle\r\n};\r\n","import {disableScrollLock, enableScrollLock} from \"../utils/scrollLock\";\r\n\r\nexport function init() {\r\n //mandrill forms\r\n const navigationTakeoverToggles = document.querySelectorAll('[data-action*=\"navigation-takeover-toggle\"]');\r\n\r\n function navigationToggle (e) {\r\n e.preventDefault();\r\n\r\n if (!document.body.classList.contains('nav-open')) {\r\n enableScrollLock();\r\n document.body.classList.add('nav-open');\r\n } else {\r\n setTimeout(disableScrollLock, 400);\r\n document.body.classList.remove('nav-open');\r\n }\r\n }\r\n\r\n for (let i = 0; i < navigationTakeoverToggles.length; i++) {\r\n navigationTakeoverToggles[i].addEventListener('click', navigationToggle);\r\n }\r\n}\r\n","export const breakpoints = {\r\n \"xxs\": 1,\r\n \"xs\": 480,\r\n \"sm\": 768,\r\n \"md\": 1024,\r\n \"lg\": 1280,\r\n \"xl\": 1540,\r\n \"xxl\": 1840\r\n};\r\n\r\nexport const breakpointKeys = Object.keys(breakpoints);\r\nexport let currentWindowWidth = window.innerWidth;\r\nexport let currentWindowHeight = window.innerHeight;\r\nexport let currentBreakpoint = 0;\r\nlet resizeTimer;\r\n\r\nconst resizeFunctions = [];\r\n\r\n/**\r\n * Get various window sizes - width, height etc.\r\n * This function is fired automatically upon page load. and run each time the window changes size.\r\n *\r\n */\r\nfunction getWindowSizes() {\r\n\r\n currentWindowWidth = window.innerWidth;\r\n currentWindowHeight = window.innerHeight;\r\n\r\n // Calculate which breakpoint is currently active, based on the screen width compared to the breakpoint definitions.\r\n\r\n let lastFoundWidth = 0;\r\n\r\n breakpointKeys.forEach((key, index) => {\r\n const width = breakpoints[key];\r\n if (currentWindowWidth >= width && width > lastFoundWidth) {\r\n lastFoundWidth = width;\r\n currentBreakpoint = index;\r\n }\r\n });\r\n}\r\n\r\nfunction resizeHandler() {\r\n clearTimeout(resizeTimer);\r\n resizeTimer = setTimeout(() => {\r\n getWindowSizes();\r\n resizeFunctions.forEach(funcRef => funcRef());\r\n }, 100);\r\n}\r\n\r\nexport function onWindowResize(handler) {\r\n resizeFunctions.push(handler);\r\n}\r\n\r\nexport function initWindowResize() {\r\n getWindowSizes();\r\n window.addEventListener('resize', resizeHandler);\r\n window.addEventListener('orientationchange', resizeHandler);\r\n}\r\n","!function(e,t){\"object\"==typeof exports&&\"object\"==typeof module?module.exports=t():\"function\"==typeof define&&define.amd?define([],t):\"object\"==typeof exports?exports.sal=t():e.sal=t()}(this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(e,\"__esModule\",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&\"object\"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,\"default\",{enumerable:!0,value:e}),2&t&&\"string\"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,\"a\",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p=\"dist/\",n(n.s=0)}([function(e,t,n){\"use strict\";n.r(t);n(1);function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=l.threshold?(!function(e){e.target.classList.add(l.animateClassName),f(l.enterEventName,e)}(e),l.once&&t.unobserve(e.target)):l.once||function(e){e.target.classList.remove(l.animateClassName),f(l.exitEventName,e)}(e)}))},m=function(){d(),c.disconnect(),c=null},y=function(){document.body.classList.remove(l.disabledClassName),c=new IntersectionObserver(p,{rootMargin:l.rootMargin,threshold:l.threshold}),(u=[].filter.call(document.querySelectorAll(l.selector),(function(e){return!function(e){return e.classList.contains(l.animateClassName)}(e,l.animateClassName)}))).forEach((function(e){return c.observe(e)}))};t.default=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l;if(e!==l&&(l=o({},l,{},e)),\"undefined\"==typeof window)return console.warn(a),{elements:u,disable:m,enable:y};if(!window.IntersectionObserver)throw d(),Error(s);return b()?d():y(),{elements:u,disable:m,enable:y}}},function(e,t,n){}]).default}));\n//# sourceMappingURL=sal.js.map","import { getElementPosition } from './elementProperties';\r\n\r\nconst easeInOutQuad = function(currentTime, start, change, duration) {\r\n let time = currentTime;\r\n time /= duration / 2;\r\n if (time < 1) {\r\n return (change / 2) * time * time + start;\r\n }\r\n time--;\r\n return (-change / 2) * (time * (time - 2) - 1) + start;\r\n};\r\n\r\nconst easeInOutQuintic = function(currentTime, start, change, duration) {\r\n let time = currentTime;\r\n const ts = (time /= duration) * time,\r\n tc = ts * time;\r\n return start + change * (6 * tc * ts + -15 * ts * ts + 10 * tc);\r\n};\r\n\r\nexport function scrollTo(to, duration = 750, callback) {\r\n function move(amount) {\r\n if (document.scrollingElement) {\r\n document.scrollingElement.scrollTop = amount;\r\n } else {\r\n document.documentElement.scrollTop = amount;\r\n document.body.parentNode.scrollTop = amount;\r\n document.body.scrollTop = amount;\r\n }\r\n }\r\n function position() {\r\n return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop;\r\n }\r\n\r\n const start = position(),\r\n change = to instanceof Element ? getElementPosition(to).top - start : to - start,\r\n increment = 20;\r\n\r\n\r\n let currentTime = 0;\r\n\r\n const animate = function() {\r\n // increment the time\r\n currentTime += increment;\r\n // find the value with the quadratic in-out easing function\r\n const val = easeInOutQuintic(currentTime, start, change, duration);\r\n // move the document.body\r\n move(val);\r\n // do the animation unless its over\r\n if (currentTime < duration) {\r\n requestAnimationFrame(animate);\r\n } else {\r\n if (callback && typeof callback === 'function') {\r\n // the animation is done so lets callback\r\n if (typeof callback === 'function') {\r\n callback();\r\n }\r\n }\r\n }\r\n };\r\n animate();\r\n}\r\n","export const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;\r\nexport const windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\r\nexport const windowHeight = window.innerHeight;\r\nexport const header = document.querySelector('.header');\r\n","\n// ------------------------------------------\n// Rellax.js\n// Buttery smooth parallax library\n// Copyright (c) 2016 Moe Amaya (@moeamaya)\n// MIT license\n//\n// Thanks to Paraxify.js and Jaime Cabllero\n// for parallax concepts\n// ------------------------------------------\n\n(function (root, factory) {\n if (typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define([], factory);\n } else if (typeof module === 'object' && module.exports) {\n // Node. Does not work with strict CommonJS, but\n // only CommonJS-like environments that support module.exports,\n // like Node.\n module.exports = factory();\n } else {\n // Browser globals (root is window)\n root.Rellax = factory();\n }\n}(typeof window !== \"undefined\" ? window : global, function () {\n var Rellax = function(el, options){\n \"use strict\";\n\n var self = Object.create(Rellax.prototype);\n\n var posY = 0;\n var screenY = 0;\n var posX = 0;\n var screenX = 0;\n var blocks = [];\n var pause = true;\n\n // check what requestAnimationFrame to use, and if\n // it's not supported, use the onscroll event\n var loop = window.requestAnimationFrame ||\n window.webkitRequestAnimationFrame ||\n window.mozRequestAnimationFrame ||\n window.msRequestAnimationFrame ||\n window.oRequestAnimationFrame ||\n function(callback){ return setTimeout(callback, 1000 / 60); };\n\n // store the id for later use\n var loopId = null;\n\n // Test via a getter in the options object to see if the passive property is accessed\n var supportsPassive = false;\n try {\n var opts = Object.defineProperty({}, 'passive', {\n get: function() {\n supportsPassive = true;\n }\n });\n window.addEventListener(\"testPassive\", null, opts);\n window.removeEventListener(\"testPassive\", null, opts);\n } catch (e) {}\n\n // check what cancelAnimation method to use\n var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout;\n\n // check which transform property to use\n var transformProp = window.transformProp || (function(){\n var testEl = document.createElement('div');\n if (testEl.style.transform === null) {\n var vendors = ['Webkit', 'Moz', 'ms'];\n for (var vendor in vendors) {\n if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {\n return vendors[vendor] + 'Transform';\n }\n }\n }\n return 'transform';\n })();\n\n // Default Settings\n self.options = {\n speed: -2,\n\t verticalSpeed: null,\n\t horizontalSpeed: null,\n breakpoints: [576, 768, 1201],\n center: false,\n wrapper: null,\n relativeToWrapper: false,\n round: true,\n vertical: true,\n horizontal: false,\n verticalScrollAxis: \"y\",\n horizontalScrollAxis: \"x\",\n callback: function() {},\n };\n\n // User defined options (might have more in the future)\n if (options){\n Object.keys(options).forEach(function(key){\n self.options[key] = options[key];\n });\n }\n\n function validateCustomBreakpoints () {\n if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) {\n var isAscending = true;\n var isNumerical = true;\n var lastVal;\n self.options.breakpoints.forEach(function (i) {\n if (typeof i !== 'number') isNumerical = false;\n if (lastVal !== null) {\n if (i < lastVal) isAscending = false;\n }\n lastVal = i;\n });\n if (isAscending && isNumerical) return;\n }\n // revert defaults if set incorrectly\n self.options.breakpoints = [576, 768, 1201];\n console.warn(\"Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted\");\n }\n\n if (options && options.breakpoints) {\n validateCustomBreakpoints();\n }\n\n // By default, rellax class\n if (!el) {\n el = '.rellax';\n }\n\n // check if el is a className or a node\n var elements = typeof el === 'string' ? document.querySelectorAll(el) : [el];\n\n // Now query selector\n if (elements.length > 0) {\n self.elems = elements;\n }\n\n // The elements don't exist\n else {\n console.warn(\"Rellax: The elements you're trying to select don't exist.\");\n return;\n }\n\n // Has a wrapper and it exists\n if (self.options.wrapper) {\n if (!self.options.wrapper.nodeType) {\n var wrapper = document.querySelector(self.options.wrapper);\n\n if (wrapper) {\n self.options.wrapper = wrapper;\n } else {\n console.warn(\"Rellax: The wrapper you're trying to use doesn't exist.\");\n return;\n }\n }\n }\n\n // set a placeholder for the current breakpoint\n var currentBreakpoint;\n\n // helper to determine current breakpoint\n var getCurrentBreakpoint = function (w) {\n var bp = self.options.breakpoints;\n if (w < bp[0]) return 'xs';\n if (w >= bp[0] && w < bp[1]) return 'sm';\n if (w >= bp[1] && w < bp[2]) return 'md';\n return 'lg';\n };\n\n // Get and cache initial position of all elements\n var cacheBlocks = function() {\n for (var i = 0; i < self.elems.length; i++){\n var block = createBlock(self.elems[i]);\n blocks.push(block);\n }\n };\n\n\n // Let's kick this script off\n // Build array for cached element values\n var init = function() {\n for (var i = 0; i < blocks.length; i++){\n self.elems[i].style.cssText = blocks[i].style;\n }\n\n blocks = [];\n\n screenY = window.innerHeight;\n screenX = window.innerWidth;\n currentBreakpoint = getCurrentBreakpoint(screenX);\n\n setPosition();\n\n cacheBlocks();\n\n animate();\n\n // If paused, unpause and set listener for window resizing events\n if (pause) {\n window.addEventListener('resize', init);\n pause = false;\n // Start the loop\n update();\n }\n };\n\n // We want to cache the parallax blocks'\n // values: base, top, height, speed\n // el: is dom object, return: el cache values\n var createBlock = function(el) {\n var dataPercentage = el.getAttribute( 'data-rellax-percentage' );\n var dataSpeed = el.getAttribute( 'data-rellax-speed' );\n var dataXsSpeed = el.getAttribute( 'data-rellax-xs-speed' );\n var dataMobileSpeed = el.getAttribute( 'data-rellax-mobile-speed' );\n var dataTabletSpeed = el.getAttribute( 'data-rellax-tablet-speed' );\n var dataDesktopSpeed = el.getAttribute( 'data-rellax-desktop-speed' );\n var dataVerticalSpeed = el.getAttribute('data-rellax-vertical-speed');\n var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed');\n var dataVericalScrollAxis = el.getAttribute('data-rellax-vertical-scroll-axis');\n var dataHorizontalScrollAxis = el.getAttribute('data-rellax-horizontal-scroll-axis');\n var dataZindex = el.getAttribute( 'data-rellax-zindex' ) || 0;\n var dataMin = el.getAttribute( 'data-rellax-min' );\n var dataMax = el.getAttribute( 'data-rellax-max' );\n var dataMinX = el.getAttribute('data-rellax-min-x');\n var dataMaxX = el.getAttribute('data-rellax-max-x');\n var dataMinY = el.getAttribute('data-rellax-min-y');\n var dataMaxY = el.getAttribute('data-rellax-max-y');\n var mapBreakpoints;\n var breakpoints = true;\n\n if (!dataXsSpeed && !dataMobileSpeed && !dataTabletSpeed && !dataDesktopSpeed) {\n breakpoints = false;\n } else {\n mapBreakpoints = {\n 'xs': dataXsSpeed,\n 'sm': dataMobileSpeed,\n 'md': dataTabletSpeed,\n 'lg': dataDesktopSpeed\n };\n }\n\n // initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)\n // ensures elements are positioned based on HTML layout.\n //\n // If the element has the percentage attribute, the posY and posX needs to be\n // the current scroll position's value, so that the elements are still positioned based on HTML layout\n var wrapperPosY = self.options.wrapper ? self.options.wrapper.scrollTop : (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);\n // If the option relativeToWrapper is true, use the wrappers offset to top, subtracted from the current page scroll.\n if (self.options.relativeToWrapper) {\n var scrollPosY = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);\n wrapperPosY = scrollPosY - self.options.wrapper.offsetTop;\n }\n var posY = self.options.vertical ? ( dataPercentage || self.options.center ? wrapperPosY : 0 ) : 0;\n var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;\n\n var blockTop = posY + el.getBoundingClientRect().top;\n var blockHeight = el.clientHeight || el.offsetHeight || el.scrollHeight;\n\n var blockLeft = posX + el.getBoundingClientRect().left;\n var blockWidth = el.clientWidth || el.offsetWidth || el.scrollWidth;\n\n // apparently parallax equation everyone uses\n var percentageY = dataPercentage ? dataPercentage : (posY - blockTop + screenY) / (blockHeight + screenY);\n var percentageX = dataPercentage ? dataPercentage : (posX - blockLeft + screenX) / (blockWidth + screenX);\n if(self.options.center){ percentageX = 0.5; percentageY = 0.5; }\n\n // Optional individual block speed as data attr, otherwise global speed\n var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed);\n var verticalSpeed = dataVerticalSpeed ? dataVerticalSpeed : self.options.verticalSpeed;\n var horizontalSpeed = dataHorizontalSpeed ? dataHorizontalSpeed : self.options.horizontalSpeed;\n\n // Optional individual block movement axis direction as data attr, otherwise gobal movement direction\n var verticalScrollAxis = dataVericalScrollAxis ? dataVericalScrollAxis : self.options.verticalScrollAxis;\n var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;\n\n var bases = updatePosition(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed);\n\n // ~~Store non-translate3d transforms~~\n // Store inline styles and extract transforms\n var style = el.style.cssText;\n var transform = '';\n\n // Check if there's an inline styled transform\n var searchResult = /transform\\s*:/i.exec(style);\n if (searchResult) {\n // Get the index of the transform\n var index = searchResult.index;\n\n // Trim the style to the transform point and get the following semi-colon index\n var trimmedStyle = style.slice(index);\n var delimiter = trimmedStyle.indexOf(';');\n\n // Remove \"transform\" string and save the attribute\n if (delimiter) {\n transform = \" \" + trimmedStyle.slice(11, delimiter).replace(/\\s/g,'');\n } else {\n transform = \" \" + trimmedStyle.slice(11).replace(/\\s/g,'');\n }\n }\n\n return {\n baseX: bases.x,\n baseY: bases.y,\n top: blockTop,\n left: blockLeft,\n height: blockHeight,\n width: blockWidth,\n speed: speed,\n verticalSpeed: verticalSpeed,\n horizontalSpeed: horizontalSpeed,\n verticalScrollAxis: verticalScrollAxis,\n horizontalScrollAxis: horizontalScrollAxis,\n style: style,\n transform: transform,\n zindex: dataZindex,\n min: dataMin,\n max: dataMax,\n minX: dataMinX,\n maxX: dataMaxX,\n minY: dataMinY,\n maxY: dataMaxY\n };\n };\n\n // set scroll position (posY, posX)\n // side effect method is not ideal, but okay for now\n // returns true if the scroll changed, false if nothing happened\n var setPosition = function() {\n var oldY = posY;\n var oldX = posX;\n\n posY = self.options.wrapper ? self.options.wrapper.scrollTop : (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset;\n posX = self.options.wrapper ? self.options.wrapper.scrollLeft : (document.documentElement || document.body.parentNode || document.body).scrollLeft || window.pageXOffset;\n // If option relativeToWrapper is true, use relative wrapper value instead.\n if (self.options.relativeToWrapper) {\n var scrollPosY = (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset;\n posY = scrollPosY - self.options.wrapper.offsetTop;\n }\n\n\n if (oldY != posY && self.options.vertical) {\n // scroll changed, return true\n return true;\n }\n\n if (oldX != posX && self.options.horizontal) {\n // scroll changed, return true\n return true;\n }\n\n // scroll did not change\n return false;\n };\n\n // Ahh a pure function, gets new transform value\n // based on scrollPosition and speed\n // Allow for decimal pixel values\n var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) {\n var result = {};\n var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX)));\n var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY)));\n\n result.x = self.options.round ? Math.round(valueX) : Math.round(valueX * 100) / 100;\n result.y = self.options.round ? Math.round(valueY) : Math.round(valueY * 100) / 100;\n\n return result;\n };\n\n // Remove event listeners and loop again\n var deferredUpdate = function() {\n window.removeEventListener('resize', deferredUpdate);\n window.removeEventListener('orientationchange', deferredUpdate);\n (self.options.wrapper ? self.options.wrapper : window).removeEventListener('scroll', deferredUpdate);\n (self.options.wrapper ? self.options.wrapper : document).removeEventListener('touchmove', deferredUpdate);\n\n // loop again\n loopId = loop(update);\n };\n\n // Loop\n var update = function() {\n if (setPosition() && pause === false) {\n animate();\n\n // loop again\n loopId = loop(update);\n } else {\n loopId = null;\n\n // Don't animate until we get a position updating event\n window.addEventListener('resize', deferredUpdate);\n window.addEventListener('orientationchange', deferredUpdate);\n (self.options.wrapper ? self.options.wrapper : window).addEventListener('scroll', deferredUpdate, supportsPassive ? { passive: true } : false);\n (self.options.wrapper ? self.options.wrapper : document).addEventListener('touchmove', deferredUpdate, supportsPassive ? { passive: true } : false);\n }\n };\n\n // Transform3d on parallax element\n var animate = function() {\n var positions;\n for (var i = 0; i < self.elems.length; i++){\n // Determine relevant movement directions\n var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase();\n var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase();\n var verticalScrollX = verticalScrollAxis.indexOf(\"x\") != -1 ? posY : 0;\n var verticalScrollY = verticalScrollAxis.indexOf(\"y\") != -1 ? posY : 0;\n var horizontalScrollX = horizontalScrollAxis.indexOf(\"x\") != -1 ? posX : 0;\n var horizontalScrollY = horizontalScrollAxis.indexOf(\"y\") != -1 ? posX : 0;\n\n var percentageY = ((verticalScrollY + horizontalScrollY - blocks[i].top + screenY) / (blocks[i].height + screenY));\n var percentageX = ((verticalScrollX + horizontalScrollX - blocks[i].left + screenX) / (blocks[i].width + screenX));\n\n // Subtracting initialize value, so element stays in same spot as HTML\n positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed);\n var positionY = positions.y - blocks[i].baseY;\n var positionX = positions.x - blocks[i].baseX;\n\n // The next two \"if\" blocks go like this:\n // Check if a limit is defined (first \"min\", then \"max\");\n // Check if we need to change the Y or the X\n // (Currently working only if just one of the axes is enabled)\n // Then, check if the new position is inside the allowed limit\n // If so, use new position. If not, set position to limit.\n\n // Check if a min limit is defined\n if (blocks[i].min !== null) {\n if (self.options.vertical && !self.options.horizontal) {\n positionY = positionY <= blocks[i].min ? blocks[i].min : positionY;\n }\n if (self.options.horizontal && !self.options.vertical) {\n positionX = positionX <= blocks[i].min ? blocks[i].min : positionX;\n }\n }\n\n // Check if directional min limits are defined\n if (blocks[i].minY != null) {\n positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY;\n }\n if (blocks[i].minX != null) {\n positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX;\n }\n\n // Check if a max limit is defined\n if (blocks[i].max !== null) {\n if (self.options.vertical && !self.options.horizontal) {\n positionY = positionY >= blocks[i].max ? blocks[i].max : positionY;\n }\n if (self.options.horizontal && !self.options.vertical) {\n positionX = positionX >= blocks[i].max ? blocks[i].max : positionX;\n }\n }\n\n // Check if directional max limits are defined\n if (blocks[i].maxY != null) {\n positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY;\n }\n if (blocks[i].maxX != null) {\n positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX;\n }\n\n var zindex = blocks[i].zindex;\n\n // Move that element\n // (Set the new translation and append initial inline transforms.)\n var translate = 'translate3d(' + (self.options.horizontal ? positionX : '0') + 'px,' + (self.options.vertical ? positionY : '0') + 'px,' + zindex + 'px) ' + blocks[i].transform;\n self.elems[i].style[transformProp] = translate;\n }\n self.options.callback(positions);\n };\n\n self.destroy = function() {\n for (var i = 0; i < self.elems.length; i++){\n self.elems[i].style.cssText = blocks[i].style;\n }\n\n // Remove resize event listener if not pause, and pause\n if (!pause) {\n window.removeEventListener('resize', init);\n pause = true;\n }\n\n // Clear the animation loop to prevent possible memory leak\n clearLoop(loopId);\n loopId = null;\n };\n\n // Init\n init();\n\n // Allow to recalculate the initial values whenever we want\n self.refresh = init;\n\n return self;\n };\n return Rellax;\n}));\n","import * as variables from '../utils/variables';\r\nimport Rellax from \"rellax\";\r\nimport { onWindowResize, currentWindowWidth } from '../utils/windowResize';\r\n\r\nexport function initRellaxJs () {\r\n let rellaxSelector = '.rellax';\r\n if (variables.header && variables.header.offsetHeight > variables.windowHeight) {\r\n rellaxSelector = '.rellax:not(.header)';\r\n }\r\n\r\n var rellax = new Rellax(rellaxSelector);\r\n onWindowResize((() => {\r\n if (currentWindowWidth > 480 && currentWindowWidth < 768) {\r\n rellax.destroy();\r\n } else {\r\n rellax.refresh();\r\n }\r\n }));\r\n}\r\n\r\n","/**\n * Copyright 2016 Google Inc. All Rights Reserved.\n *\n * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.\n *\n * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document\n *\n */\n(function() {\n'use strict';\n\n// Exit early if we're not running in a browser.\nif (typeof window !== 'object') {\n return;\n}\n\n// Exit early if all IntersectionObserver and IntersectionObserverEntry\n// features are natively supported.\nif ('IntersectionObserver' in window &&\n 'IntersectionObserverEntry' in window &&\n 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {\n\n // Minimal polyfill for Edge 15's lack of `isIntersecting`\n // See: https://github.com/w3c/IntersectionObserver/issues/211\n if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {\n Object.defineProperty(window.IntersectionObserverEntry.prototype,\n 'isIntersecting', {\n get: function () {\n return this.intersectionRatio > 0;\n }\n });\n }\n return;\n}\n\n\n/**\n * A local reference to the document.\n */\nvar document = window.document;\n\n\n/**\n * An IntersectionObserver registry. This registry exists to hold a strong\n * reference to IntersectionObserver instances currently observing a target\n * element. Without this registry, instances without another reference may be\n * garbage collected.\n */\nvar registry = [];\n\n\n/**\n * Creates the global IntersectionObserverEntry constructor.\n * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry\n * @param {Object} entry A dictionary of instance properties.\n * @constructor\n */\nfunction IntersectionObserverEntry(entry) {\n this.time = entry.time;\n this.target = entry.target;\n this.rootBounds = entry.rootBounds;\n this.boundingClientRect = entry.boundingClientRect;\n this.intersectionRect = entry.intersectionRect || getEmptyRect();\n this.isIntersecting = !!entry.intersectionRect;\n\n // Calculates the intersection ratio.\n var targetRect = this.boundingClientRect;\n var targetArea = targetRect.width * targetRect.height;\n var intersectionRect = this.intersectionRect;\n var intersectionArea = intersectionRect.width * intersectionRect.height;\n\n // Sets intersection ratio.\n if (targetArea) {\n // Round the intersection ratio to avoid floating point math issues:\n // https://github.com/w3c/IntersectionObserver/issues/324\n this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));\n } else {\n // If area is zero and is intersecting, sets to 1, otherwise to 0\n this.intersectionRatio = this.isIntersecting ? 1 : 0;\n }\n}\n\n\n/**\n * Creates the global IntersectionObserver constructor.\n * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface\n * @param {Function} callback The function to be invoked after intersection\n * changes have queued. The function is not invoked if the queue has\n * been emptied by calling the `takeRecords` method.\n * @param {Object=} opt_options Optional configuration options.\n * @constructor\n */\nfunction IntersectionObserver(callback, opt_options) {\n\n var options = opt_options || {};\n\n if (typeof callback != 'function') {\n throw new Error('callback must be a function');\n }\n\n if (options.root && options.root.nodeType != 1) {\n throw new Error('root must be an Element');\n }\n\n // Binds and throttles `this._checkForIntersections`.\n this._checkForIntersections = throttle(\n this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);\n\n // Private properties.\n this._callback = callback;\n this._observationTargets = [];\n this._queuedEntries = [];\n this._rootMarginValues = this._parseRootMargin(options.rootMargin);\n\n // Public properties.\n this.thresholds = this._initThresholds(options.threshold);\n this.root = options.root || null;\n this.rootMargin = this._rootMarginValues.map(function(margin) {\n return margin.value + margin.unit;\n }).join(' ');\n}\n\n\n/**\n * The minimum interval within which the document will be checked for\n * intersection changes.\n */\nIntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;\n\n\n/**\n * The frequency in which the polyfill polls for intersection changes.\n * this can be updated on a per instance basis and must be set prior to\n * calling `observe` on the first target.\n */\nIntersectionObserver.prototype.POLL_INTERVAL = null;\n\n/**\n * Use a mutation observer on the root element\n * to detect intersection changes.\n */\nIntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;\n\n\n/**\n * Starts observing a target element for intersection changes based on\n * the thresholds values.\n * @param {Element} target The DOM element to observe.\n */\nIntersectionObserver.prototype.observe = function(target) {\n var isTargetAlreadyObserved = this._observationTargets.some(function(item) {\n return item.element == target;\n });\n\n if (isTargetAlreadyObserved) {\n return;\n }\n\n if (!(target && target.nodeType == 1)) {\n throw new Error('target must be an Element');\n }\n\n this._registerInstance();\n this._observationTargets.push({element: target, entry: null});\n this._monitorIntersections();\n this._checkForIntersections();\n};\n\n\n/**\n * Stops observing a target element for intersection changes.\n * @param {Element} target The DOM element to observe.\n */\nIntersectionObserver.prototype.unobserve = function(target) {\n this._observationTargets =\n this._observationTargets.filter(function(item) {\n\n return item.element != target;\n });\n if (!this._observationTargets.length) {\n this._unmonitorIntersections();\n this._unregisterInstance();\n }\n};\n\n\n/**\n * Stops observing all target elements for intersection changes.\n */\nIntersectionObserver.prototype.disconnect = function() {\n this._observationTargets = [];\n this._unmonitorIntersections();\n this._unregisterInstance();\n};\n\n\n/**\n * Returns any queue entries that have not yet been reported to the\n * callback and clears the queue. This can be used in conjunction with the\n * callback to obtain the absolute most up-to-date intersection information.\n * @return {Array} The currently queued entries.\n */\nIntersectionObserver.prototype.takeRecords = function() {\n var records = this._queuedEntries.slice();\n this._queuedEntries = [];\n return records;\n};\n\n\n/**\n * Accepts the threshold value from the user configuration object and\n * returns a sorted array of unique threshold values. If a value is not\n * between 0 and 1 and error is thrown.\n * @private\n * @param {Array|number=} opt_threshold An optional threshold value or\n * a list of threshold values, defaulting to [0].\n * @return {Array} A sorted list of unique and valid threshold values.\n */\nIntersectionObserver.prototype._initThresholds = function(opt_threshold) {\n var threshold = opt_threshold || [0];\n if (!Array.isArray(threshold)) threshold = [threshold];\n\n return threshold.sort().filter(function(t, i, a) {\n if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {\n throw new Error('threshold must be a number between 0 and 1 inclusively');\n }\n return t !== a[i - 1];\n });\n};\n\n\n/**\n * Accepts the rootMargin value from the user configuration object\n * and returns an array of the four margin values as an object containing\n * the value and unit properties. If any of the values are not properly\n * formatted or use a unit other than px or %, and error is thrown.\n * @private\n * @param {string=} opt_rootMargin An optional rootMargin value,\n * defaulting to '0px'.\n * @return {Array