{"mappings":"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","sources":["source/script/utility/select.ts","source/script/utility/string2number.ts","source/script/utility/px2rem.ts","source/script/pointer/drag.ts","source/script/pointer/navigate.ts","source/script/pointer/resize.ts","source/script/utility/audioPlayer.ts"],"sourcesContent":["export const elementsSelector = \".element\";\nexport const rootSelector = \"#root\";\n\nexport function selectElements() {\n  return selectAll(elementsSelector);\n}\n\nexport function selectRoot() {\n  return select(rootSelector);\n}\n\nexport function select(\n  selector: string,\n  element: ParentNode = document\n): HTMLElement {\n  return element.querySelector(selector) as HTMLElement;\n}\n\nexport function selectAll(\n  selector: string,\n  element: ParentNode = document\n): HTMLElement[] {\n  return Array.from(element.querySelectorAll(selector));\n}\n","export function string2number(maybeString: string | null | undefined) {\n  return parseFloat(maybeString ?? \"\");\n}\n","import { string2number } from \"./string2number\";\n\nexport const pxProRem = string2number(getComputedStyle(document.body).fontSize);\n\nexport function px2rem(px: number) {\n  return px / pxProRem;\n}\n","import { selectElements } from \"../utility/select\";\nimport { string2number } from \"../utility/string2number\";\nimport { px2rem } from \"../utility/px2rem\";\n\n//// entry\n\nexport function drag(element: HTMLElement) {\n  element.style.transform = `translate(\n    ${element.dataset.positionX}rem,\n    ${element.dataset.positionY}rem)`;\n}\n\nexport function dragElements(): void {\n  selectElements().forEach(drag);\n}\n\nexport function dragable(element: HTMLElement) {\n  element.addEventListener(\"pointerdown\", handleDragBegin);\n}\n\nexport function dragableElements() {\n  selectElements().forEach(dragable);\n}\n\n//// event listeners\n\n// global state referring to currently dragged element\nlet dragElement: HTMLElement = document.body;\n\nexport function handleDragBegin(this: HTMLElement, event: PointerEvent) {\n  if (\n    ![\n      // alt + left\n      event.button === 0 && event.altKey && !event.ctrlKey && !event.shiftKey,\n      // middle\n      event.button === 1 && !event.altKey && !event.ctrlKey && !event.shiftKey,\n    ].some((b) => b)\n  ) {\n    return;\n  }\n\n  const element = event.currentTarget as HTMLElement;\n  const dataset = element.dataset;\n\n  // prevent text selection\n  event.preventDefault();\n\n  dragElement = element;\n\n  dataset.dragBeginElementX = `${dataset.positionX}`;\n  dataset.dragBeginElementY = `${dataset.positionY}`;\n  dataset.dragBeginPointerX = `${px2rem(event.clientX)}`;\n  dataset.dragBeginPointerY = `${px2rem(event.clientY)}`;\n\n  element.removeEventListener(\"pointerdown\", handleDragBegin);\n  document.addEventListener(\"pointermove\", handleDragContinue);\n  document.addEventListener(\"pointerup\", handleDragEnd);\n}\n\nexport function handleDragContinue(this: Document, event: PointerEvent): void {\n  const dataset = dragElement.dataset;\n\n  // prevent text selection\n  event.preventDefault();\n\n  dataset.positionX = `${\n    string2number(dataset.dragBeginElementX) -\n    string2number(dataset.dragBeginPointerX) +\n    px2rem(event.clientX)\n  }`;\n\n  dataset.positionY = `${\n    string2number(dataset.dragBeginElementY) -\n    string2number(dataset.dragBeginPointerY) +\n    px2rem(event.clientY)\n  }`;\n\n  drag(dragElement);\n}\n\nexport function handleDragEnd(this: Document, _event: PointerEvent) {\n  document.removeEventListener(\"pointermove\", handleDragContinue);\n  document.removeEventListener(\"pointerup\", handleDragEnd);\n  dragElement.addEventListener(\"pointerdown\", handleDragBegin);\n}\n","import { selectRoot } from \"../utility/select\";\nimport { drag } from \"./drag\";\nimport { px2rem } from \"../utility/px2rem\";\nimport { string2number } from \"../utility/string2number\";\n\n//// state\n\n// save navigated element globally because some handlers listen on document\nlet navigateElement: HTMLElement;\n\n//// entry\n\nexport function navigateRoot() {\n  drag(selectRoot());\n}\n\nexport function navigatableRoot() {\n  navigateElement = selectRoot();\n\n  document.body.addEventListener(\"pointerdown\", handleNavigateBegin);\n}\n\n//// event listeners\n\nexport function handleNavigateBegin(this: Element, event: PointerEvent) {\n  if (\n    ![\n      // left\n      event.button === 0 && !event.altKey && !event.ctrlKey && !event.shiftKey,\n    ].some((b) => b)\n  ) {\n    return;\n  }\n\n  // prevent text selection\n  event.preventDefault();\n\n  // this is needed for chromium-based mobile-browsers. it marks all subsequent\n  // pointer-events with the pointer-id.\n  document.body.setPointerCapture(event.pointerId);\n\n  const { dataset } = navigateElement;\n\n  dataset.navigateBeginElementX = `${dataset.positionX}`;\n  dataset.navigateBeginElementY = `${dataset.positionY}`;\n  dataset.navigateBeginPointerX = `${px2rem(event.clientX)}`;\n  dataset.navigateBeginPointerY = `${px2rem(event.clientY)}`;\n\n  document.body.removeEventListener(\"pointerdown\", handleNavigateBegin);\n  document.body.addEventListener(\"pointermove\", handleNavigateContinue);\n  document.body.addEventListener(\"pointerup\", handleNavigateEnd);\n}\n\nexport function handleNavigateContinue(\n  this: Element,\n  event: PointerEvent\n): void {\n  const { dataset } = navigateElement;\n\n  // prevent text selection\n  event.preventDefault();\n\n  dataset.positionX = `${\n    string2number(dataset.navigateBeginElementX) -\n    string2number(dataset.navigateBeginPointerX) +\n    px2rem(event.clientX)\n  }`;\n\n  dataset.positionY = `${\n    string2number(dataset.navigateBeginElementY) -\n    string2number(dataset.navigateBeginPointerY) +\n    px2rem(event.clientY)\n  }`;\n\n  drag(navigateElement);\n}\n\nexport function handleNavigateEnd(this: Element, event: PointerEvent) {\n  document.body.releasePointerCapture(event.pointerId);\n\n  document.body.removeEventListener(\"pointermove\", handleNavigateContinue);\n  document.body.removeEventListener(\"pointerup\", handleNavigateEnd);\n  document.body.addEventListener(\"pointerdown\", handleNavigateBegin);\n}\n","import { selectElements, selectRoot } from \"../utility/select\";\nimport { string2number } from \"../utility/string2number\";\nimport { px2rem } from \"../utility/px2rem\";\n\n//// state\n\nlet resizeElement: HTMLElement;\nlet navigateElement: HTMLElement;\n\n//// entry\n\nexport function resize(element: HTMLElement) {\n  element.style.width = `${element.dataset.sizeX}rem`;\n  element.style.height = `${element.dataset.sizeY}rem`;\n}\n\nexport function resizeElements(): void {\n  const elements = selectElements();\n  elements.forEach(resize);\n}\n\nexport function resizeable(element: HTMLElement) {\n  navigateElement = selectRoot();\n  element.addEventListener(\"pointerdown\", handleResizeBegin);\n}\n\nexport function resizeableElements() {\n  navigateElement = selectRoot();\n  selectElements().forEach(resizeable);\n}\n\n//// event listeners\n\nexport function handleResizeBegin(this: HTMLElement, event: PointerEvent) {\n  if (\n    ![\n      // shift + left\n      event.button === 0 && !event.altKey && !event.ctrlKey && event.shiftKey,\n      // right\n      event.button === 2 && !event.altKey && !event.ctrlKey && !event.shiftKey,\n    ].some((b) => b)\n  ) {\n    return;\n  }\n\n  const element = event.currentTarget as HTMLElement;\n\n  // prevent text selection\n  event.preventDefault();\n\n  resizeElement = element;\n\n  element.removeEventListener(\"pointerdown\", handleResizeBegin);\n  document.addEventListener(\"pointermove\", handleResizeContinue);\n  document.addEventListener(\"pointerup\", handleResizeEnd);\n}\n\nexport function handleResizeContinue(\n  this: Document,\n  event: PointerEvent\n): void {\n  const dataset = resizeElement.dataset;\n\n  // prevent text selection\n  event.preventDefault();\n\n  resizeElement.dataset.sizeX = `${\n    px2rem(event.clientX) -\n    string2number(navigateElement.dataset.positionX) -\n    string2number(dataset.positionX) -\n    px2rem(window.innerWidth / 2)\n  }`;\n  resizeElement.dataset.sizeY = `${\n    px2rem(event.clientY) -\n    string2number(navigateElement.dataset.positionY) -\n    string2number(dataset.positionY)\n  }`;\n\n  resize(resizeElement);\n}\n\nexport function handleResizeEnd(this: Document, _event: PointerEvent) {\n  document.removeEventListener(\"pointermove\", handleResizeContinue);\n  document.removeEventListener(\"pointerup\", handleResizeEnd);\n  resizeElement.addEventListener(\"pointerdown\", handleResizeBegin);\n}\n","import { select, selectAll } from \"./select\";\n\nexport function customizeAudios() {\n  selectAll(\".element.audio\").forEach(customizeAudio);\n}\n\nexport function customizeAudio(element: HTMLElement) {\n  const audio = select(\"audio\", element) as HTMLAudioElement;\n  audio.style.display = \"none\";\n\n  function addButton(name: string, handleClick: (event: MouseEvent) => void) {\n    const button = document.createElement(\"div\");\n    button.onclick = handleClick;\n    button.classList.toggle(name, true);\n    element.appendChild(button);\n  }\n\n  addButton(\n    \"rewind\",\n    () => (audio.currentTime = Math.min(audio.duration, audio.currentTime - 10))\n  );\n  addButton(\"play\", (event: MouseEvent) => {\n    const { classList } = event.currentTarget as HTMLElement;\n\n    if (classList.contains(\"play\")) {\n      audio.play();\n    } else {\n      audio.pause();\n    }\n\n    classList.toggle(\"play\");\n    classList.toggle(\"pause\");\n  });\n  addButton(\n    \"forward\",\n    () => (audio.currentTime = Math.max(0, audio.currentTime + 10))\n  );\n}\n"],"names":["$ee3701e65c5f9c1a$export$f2909722c7f0f932","$ee3701e65c5f9c1a$export$90aca4adda6ff0f5","$ee3701e65c5f9c1a$export$496307dcaa6031c4","$ee3701e65c5f9c1a$export$2e6c959c16ff56b8","selector","element","document","querySelector","Array","from","querySelectorAll","$ea06f3f2f9c6f3b2$export$119f5f85217b3b88","maybeString","parseFloat","$fa6e24523a24c4cd$export$1c76c9de29ecaf22","getComputedStyle","body","fontSize","$fa6e24523a24c4cd$export$6948af7b7c8403c5","px","$16c7d490396447f2$export$d7d5d435647ed5a0","style","transform","dataset","positionX","positionY","$0435bf32b41b5c6b$var$navigateElement","$dfcfb4832e195b1a$export$4380c87abf28fdf","width","sizeX","height","sizeY","$0435bf32b41b5c6b$export$c35bea38adea67e1","event","button","altKey","ctrlKey","shiftKey","some","b","preventDefault","setPointerCapture","pointerId","navigateBeginElementX","navigateBeginElementY","navigateBeginPointerX","clientX","navigateBeginPointerY","clientY","removeEventListener","addEventListener","$0435bf32b41b5c6b$export$da0333fc40876018","$0435bf32b41b5c6b$export$538eb1211a9cfdae","releasePointerCapture","$f8a89789cc329332$export$28e7a639d8647c75","audio","addButton","name","handleClick","createElement","onclick","classList","toggle","appendChild","display","currentTime","Math","min","duration","currentTarget","contains","play","pause","max","forEach"],"version":3,"file":"index.js.map"}