{"version":3,"file":"PureSlide.0095e8c6.js","sources":["../../../app/javascript/components/PureSlide.vue"],"sourcesContent":["<template>\n  <div ref=\"slideContainer\" class=\"relative aspect-video\">\n    <!-- <div class=\"absolute left-1 top-1 z-10 text-black\">dimensions:{{ dimensions }}</div> -->\n    <div\n      class=\"absolute flex origin-top-left items-center justify-center overflow-hidden\"\n      :class=\"[]\"\n      :style=\"[\n        `width: ${fixedWidth}px; height: ${fixedHeight}px;`,\n        `transform: scale(${zoom});`,\n        `--text-color: ${textColor}; --background-color: ${backgroundColor};\n      color: var(--text-color);\n      background-color: var(--background-color);\n      text-align: ${horizontalAlignment};\n      `,\n        fontFamily ? `font-family: ${fontFamily};` : '',\n      ]\"\n    >\n      <div\n        class=\"flex h-4/5 w-4/5 flex-col gap-12 text-6xl leading-tight\"\n        :class=\"[justifyClass, itemsClass]\"\n      >\n        <img\n          v-if=\"logoUrl\"\n          :src=\"logoUrl\"\n          class=\"block justify-self-start\"\n          :class=\"[!title && !body ? 'h-3/5' : 'h-1/5 max-h-[20%]']\"\n        />\n        <div\n          v-if=\"title || body || callToActionUrl\"\n          class=\"flex flex-col gap-12\"\n          :class=\"[justifyClass, itemsClass, title && body ? 'grow' : '']\"\n        >\n          <h1 v-if=\"title\" class=\"whitespace-pre-line text-8xl font-bold\">{{ title }}</h1>\n          <p v-if=\"body\" class=\"max-h-[60%] whitespace-pre-line\">\n            {{ body }}\n          </p>\n          <div\n            v-if=\"callToActionUrl\"\n            class=\"flex items-center justify-center font-bold leading-snug\"\n          >\n            <a\n              :href=\"callToActionUrlWithProtocol\"\n              class=\"block rounded-full px-14 py-6 transition-transform ease-in-out hover:scale-105\"\n              :class=\"disablePointerEvents ? 'pointers-events-none' : 'pointer-events-auto'\"\n              :style=\"{ color: 'var(--background-color)', backgroundColor: 'var(--text-color)' }\"\n              target=\"_blank\"\n              @click=\"handleCallToActionClick\"\n              >{{ callToAction || callToActionUrl }}</a\n            >\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, onMounted } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport { openExternal } from \"@modules/desktop_interop\";\n\nexport interface PureSlideProps {\n  title?: string;\n  body?: string;\n  logoUrl?: string;\n  textColor?: string;\n  backgroundColor?: string;\n  // backgroundImageUrl: string;\n  fontFamily?: string;\n  horizontalAlignment?: \"left\" | \"center\" | \"right\";\n  verticalAlignment?: \"top\" | \"center\" | \"bottom\";\n  callToAction?: string;\n  callToActionUrl?: string; // or linkURL, or something\n  disablePointerEvents?: boolean;\n}\n\nconst props = defineProps<PureSlideProps>();\n\n// TODO: move to composable `useZoomable` or something:\nconst zoom = ref(1.0);\nconst slideContainer = ref<null | HTMLDivElement>(null);\n\nconst fixedHeight = 1080;\nconst fixedWidth = 1920;\n\nfunction calculateZoomFromDimensions(width, height): number {\n  const horizontalZoom = width / fixedWidth;\n  const verticalZoom = height / fixedHeight;\n  return Math.min(horizontalZoom, verticalZoom);\n}\n\nfunction handleCallToActionClick(event) {\n  event.preventDefault();\n  if (props.disablePointerEvents) {\n    return;\n  }\n  openExternal(event.target.href);\n  event.stopPropagation();\n}\n\nconst dimensions = ref(\"0x0\");\nonMounted(() => {\n  if (slideContainer.value) {\n    const { width, height } = slideContainer.value.getBoundingClientRect();\n    zoom.value = calculateZoomFromDimensions(width, height);\n  }\n  // Some resizes do not result in the canvas being resized, so we observe the parent instead.\n  // Specifically when the parent is quite wide, and is made more narrow, then the canvas does not\n  // resize.\n  useResizeObserver(slideContainer, (entries) => {\n    const entry = entries[0];\n    if (!entry) return;\n    \n    const { width, height } = entry.contentRect;\n    dimensions.value = `${width}x${height}`;\n    zoom.value = calculateZoomFromDimensions(width, height);\n  });\n});\n\n// end of useZoomable\n\nconst justifyClass = computed(() => {\n  switch (props.verticalAlignment) {\n    case \"top\":\n      return \"justify-start\";\n    case \"center\":\n      return \"justify-center\";\n    case \"bottom\":\n      return \"justify-end\";\n    default:\n      return \"justify-center\";\n  }\n});\n\nconst horizontalAlignment = computed(() => {\n  if (props.horizontalAlignment) return props.horizontalAlignment;\n  return \"center\";\n});\n\nconst itemsClass = computed(() => {\n  switch (horizontalAlignment.value) {\n    case \"left\":\n      return \"items-start\";\n    case \"center\":\n      return \"items-center\";\n    case \"right\":\n      return \"items-end\";\n    default:\n      return \"items-center\";\n  }\n});\n\nconst textColor = computed(() => props.textColor || \"black\");\n\nconst backgroundColor = computed(() => props.backgroundColor || \"white\");\n\nconst callToActionUrlWithProtocol = computed(() => {\n  if (!props.callToActionUrl) return \"\";\n  if (props.callToActionUrl.startsWith(\"http\")) return props.callToActionUrl;\n  return `https://${props.callToActionUrl}`;\n});\n</script>\n"],"names":["zoom","ref","slideContainer","fixedHeight","fixedWidth","calculateZoomFromDimensions","width","height","horizontalZoom","verticalZoom","handleCallToActionClick","event","props","openExternal","dimensions","onMounted","useResizeObserver","entries","entry","justifyClass","computed","horizontalAlignment","itemsClass","textColor","backgroundColor","callToActionUrlWithProtocol"],"mappings":"koBA+EMA,EAAOC,EAAI,CAAG,EACdC,EAAiBD,EAA2B,IAAI,EAEhDE,EAAc,KACdC,EAAa,KAEV,SAAAC,EAA4BC,EAAOC,EAAgB,CAC1D,MAAMC,EAAiBF,EAAQF,EACzBK,EAAeF,EAASJ,EACvB,OAAA,KAAK,IAAIK,EAAgBC,CAAY,CAC9C,CAEA,SAASC,EAAwBC,EAAO,CACtCA,EAAM,eAAe,EACjB,CAAAC,EAAM,uBAGGC,EAAAF,EAAM,OAAO,IAAI,EAC9BA,EAAM,gBAAgB,EACxB,CAEM,MAAAG,EAAab,EAAI,KAAK,EAC5Bc,EAAU,IAAM,CACd,GAAIb,EAAe,MAAO,CACxB,KAAM,CAAE,MAAAI,EAAO,OAAAC,CAAA,EAAWL,EAAe,MAAM,wBAC1CF,EAAA,MAAQK,EAA4BC,EAAOC,CAAM,CACxD,CAIkBS,EAAAd,EAAiBe,GAAY,CAC7C,MAAMC,EAAQD,EAAQ,GACtB,GAAI,CAACC,EAAO,OAEZ,KAAM,CAAE,MAAAZ,EAAO,OAAAC,GAAWW,EAAM,YACrBJ,EAAA,MAAQ,GAAGR,KAASC,IAC1BP,EAAA,MAAQK,EAA4BC,EAAOC,CAAM,CAAA,CACvD,CAAA,CACF,EAIK,MAAAY,EAAeC,EAAS,IAAM,CAClC,OAAQR,EAAM,uBACP,MACI,MAAA,oBACJ,SACI,MAAA,qBACJ,SACI,MAAA,sBAEA,MAAA,iBAAA,CAEZ,EAEKS,EAAsBD,EAAS,IAC/BR,EAAM,oBAA4BA,EAAM,oBACrC,QACR,EAEKU,EAAaF,EAAS,IAAM,CAChC,OAAQC,EAAoB,WACrB,OACI,MAAA,kBACJ,SACI,MAAA,mBACJ,QACI,MAAA,oBAEA,MAAA,eAAA,CAEZ,EAEKE,EAAYH,EAAS,IAAMR,EAAM,WAAa,OAAO,EAErDY,EAAkBJ,EAAS,IAAMR,EAAM,iBAAmB,OAAO,EAEjEa,EAA8BL,EAAS,IACtCR,EAAM,gBACPA,EAAM,gBAAgB,WAAW,MAAM,EAAUA,EAAM,gBACpD,WAAWA,EAAM,kBAFW,EAGpC;;;;"}