{"version":3,"file":"historie-element-1bdd7fa82b35df08839d.esm.js","mappings":"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","sources":["webpack://dh-to-virkeligheter/./src/moduler-pa-hver-sin-side-av-grensen/historie-element/components/historie-element.module.css?908e","webpack://dh-to-virkeligheter/./src/moduler-pa-hver-sin-side-av-grensen/historie-element/components/historie-element.ts","webpack://dh-to-virkeligheter/./src/moduler-pa-hver-sin-side-av-grensen/historie-element/client.ts","webpack://dh-to-virkeligheter/./src/lib/get-element-tag.ts","webpack://dh-to-virkeligheter/./src/moduler-pa-hver-sin-side-av-grensen/historie-element/components/hydrate.js"],"sourcesContent":["// extracted by mini-css-extract-plugin\nexport default {\"historie-element\":\"dh-to-virkeligheter-v1-historie-element-ClQV9\",\"historieElement\":\"dh-to-virkeligheter-v1-historie-element-ClQV9\",\"clip-container\":\"dh-to-virkeligheter-v1-clip-container-Y3V8d\",\"clipContainer\":\"dh-to-virkeligheter-v1-clip-container-Y3V8d\",\"clip-left\":\"dh-to-virkeligheter-v1-clip-left-h3G_A\",\"clipLeft\":\"dh-to-virkeligheter-v1-clip-left-h3G_A\",\"clip-right\":\"dh-to-virkeligheter-v1-clip-right-ZovFT\",\"clipRight\":\"dh-to-virkeligheter-v1-clip-right-ZovFT\",\"image-transitions\":\"dh-to-virkeligheter-v1-image-transitions-vfORp\",\"imageTransitions\":\"dh-to-virkeligheter-v1-image-transitions-vfORp\",\"image-left\":\"dh-to-virkeligheter-v1-image-left-h9wPe\",\"imageLeft\":\"dh-to-virkeligheter-v1-image-left-h9wPe\",\"image-right\":\"dh-to-virkeligheter-v1-image-right-PRjCK\",\"imageRight\":\"dh-to-virkeligheter-v1-image-right-PRjCK\",\"skip-transitions\":\"dh-to-virkeligheter-v1-skip-transitions-VZDxk\",\"skipTransitions\":\"dh-to-virkeligheter-v1-skip-transitions-VZDxk\",\"initial\":\"dh-to-virkeligheter-v1-initial-cfRtz\",\"left-active\":\"dh-to-virkeligheter-v1-left-active-PMDX4\",\"leftActive\":\"dh-to-virkeligheter-v1-left-active-PMDX4\",\"right-active\":\"dh-to-virkeligheter-v1-right-active-eSwTy\",\"rightActive\":\"dh-to-virkeligheter-v1-right-active-eSwTy\"};","import style from './historie-element.module.css'\n\ntype State = 'INITIAL' | 'LEFT' | 'RIGHT'\nexport class HistorieElement extends HTMLElement {\n  #isWatching = false\n  #observer\n\n  #state: State = 'INITIAL'\n\n  connectedCallback() {\n    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {\n      this.#setupIntersectionObserver()\n      this.#updateClasses()\n      this.querySelector('button')?.addEventListener('click', () => {\n        this.#scrollToOther()\n      })\n    } else {\n      // Skip directly to state with no animation\n      this.#state = this.side === 'left' ? 'LEFT' : 'RIGHT'\n    }\n  }\n\n  disconnectedCallback() {\n    this.#disconnectIntersectionObserver()\n  }\n\n  /** Intersection Observer */\n\n  #setupIntersectionObserver() {\n    this.#observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            this.#startWatching()\n          } else {\n            this.#stopWatching()\n          }\n        }\n      },\n      {\n        threshold: 0,\n      },\n    )\n    this.#observer.observe(this)\n  }\n\n  #disconnectIntersectionObserver() {\n    this.#observer.disconnect()\n  }\n\n  /** Scroll watcher */\n\n  #startWatching() {\n    if (this.#isWatching) {\n      return\n    }\n    this.#isWatching = true\n\n    const loop = () => {\n      this.#checkTriggers()\n      if (this.#isWatching) {\n        requestAnimationFrame(loop)\n      }\n    }\n    requestAnimationFrame(loop)\n  }\n\n  async #checkTriggers() {\n    const bcr = this.getBoundingClientRect()\n    const boundaryCrossed = bcr.top < 0.5 * window.innerHeight\n\n    let nextState: State\n    if (boundaryCrossed) {\n      nextState = this.side === 'left' ? 'LEFT' : 'RIGHT'\n    } else {\n      nextState = 'INITIAL'\n    }\n\n    if (this.#state !== nextState) {\n      this.#state = nextState\n      this.#updateClasses()\n    }\n  }\n\n  #updateClasses() {\n    this.classList.remove(style.initial, style.leftActive, style.rightActive)\n    switch (this.#state) {\n      case 'INITIAL':\n        this.classList.add(style.initial)\n        break\n      case 'LEFT':\n        this.classList.add(style.leftActive)\n        break\n      case 'RIGHT':\n        this.classList.add(style.rightActive)\n        break\n    }\n  }\n\n  #stopWatching() {\n    this.#isWatching = false\n  }\n\n  #scrollToOther() {\n    const currentElement = this\n    const all = Array.from(document.querySelectorAll(`.${style.historieElement}`))\n    const nextElement = all.find(\n      (historieElement) => historieElement !== currentElement,\n    ) as HistorieElement\n\n    // Toggle state of next element to the current element to create a smooth transition.\n    // It will transition to its own state automatically\n    nextElement.classList.toggle(style.skipTransitions, true)\n    nextElement.#state = this.#state\n    nextElement.#updateClasses()\n    // eslint-disable-next-line no-unused-expressions\n    nextElement.offsetTop\n    nextElement.classList.toggle(style.skipTransitions, false)\n\n    // Scroll so that the next element matches the current element\n    const currentTop = currentElement.getBoundingClientRect().top\n    const otherTop = nextElement.getBoundingClientRect().top\n    document.scrollingElement.scrollTop += otherTop - currentTop\n\n    // Set focus to the first h2 after the next element\n    const nextSection = nextElement.closest('.dh-sa-section')\n    const nextTitle = nextSection.querySelector('h2,h3') as HTMLElement\n    nextTitle.setAttribute('tabindex', '-1')\n    nextTitle.focus()\n  }\n\n  get side(): 'left' | 'right' {\n    let value = this.getAttribute('side')\n    switch (value) {\n      case 'left':\n      case 'right':\n        return value\n      default:\n        throw new Error('unknown side attribute')\n    }\n  }\n}\n","import hydrate from './components/hydrate.js'\nimport { getElementTag } from '../../lib/get-element-tag.ts'\n\nconst tag = getElementTag(__APP_NAME__, 'historie-element', __APP_VERSION__)\n\nclass AppElement extends HTMLElement {\n  connectedCallback() {\n    hydrate(this, this.preloadedState)\n  }\n\n  get preloadedState() {\n    return this.dataset.preloadedState ? JSON.parse(this.dataset.preloadedState) : null\n  }\n}\n\nif (!customElements.get(tag)) {\n  customElements.define(tag, AppElement)\n}\n","export function getElementTag(name: string, entry: string, version: string): string {\n  const formattedVersion = version ? `v${version.split('.')[0]}` : ''\n  return `${name}-${entry}-${formattedVersion}`\n}\n","// import { renderTittel } from './tittel.html'\nimport { HistorieElement } from './historie-element.ts'\nimport './historie-element.module.css'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport default function hydrate(el, props) {\n  if (!customElements.get('historie-element')) {\n    customElements.define('historie-element', HistorieElement)\n  }\n}\n"],"names":["_isWatching","_classPrivateFieldLooseKey","_observer","_state","_setupIntersectionObserver","_disconnectIntersectionObserver","_startWatching","_checkTriggers","_updateClasses","_stopWatching","_scrollToOther","HistorieElement","HTMLElement","constructor","args","Object","defineProperty","value","_scrollToOther2","_stopWatching2","_updateClasses2","_checkTriggers2","_startWatching2","_disconnectIntersectionObserver2","_setupIntersectionObserver2","writable","connectedCallback","_this$querySelector","window","matchMedia","matches","_classPrivateFieldLooseBase","this","querySelector","addEventListener","side","disconnectedCallback","getAttribute","Error","IntersectionObserver","entries","entry","isIntersecting","threshold","observe","disconnect","loop","requestAnimationFrame","nextState","getBoundingClientRect","top","innerHeight","classList","remove","style","add","currentElement","nextElement","Array","from","document","querySelectorAll","find","historieElement","toggle","offsetTop","currentTop","otherTop","scrollingElement","scrollTop","nextTitle","closest","setAttribute","focus","tag","__APP_NAME__","version","__APP_VERSION__","split","AppElement","preloadedState","customElements","get","define","dataset","JSON","parse"],"sourceRoot":""}