{"version":3,"file":"SurfacePanelPostExpandedAttachmentEmbed-0374e305.js","sources":["../../../app/javascript/vuecomponents/SurfacePanelPostExpandedAttachmentEmbed.vue"],"sourcesContent":["<template>\n  <div :class=\"['w-full', 'h-full', 'flex', 'items-center', 'justify-center', 'flex-col']\">\n    <div\n      ref=\"embedWrapper\"\n      :class=\"{\n        'overflow-auto': !isDocument && !isArticle,\n        'overflow-hidden': isDocument || isArticle,\n        'desktop:w-[768px]': isArticle && !disableArticleFixedWidth,\n        'w-full': true,\n        'h-full': !isTweet,\n        'h-fit': isTweet,\n        'flex justify-center': isHtml,\n      }\"\n      v-html=\"embedHtml\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport { observeSizeChange } from '@@/bits/resize_observer'\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    embedCode: string\n    isDocument: boolean\n    isArticle: boolean\n    isHtml: boolean\n    isFacebookPost?: boolean\n    isInstagramPost?: boolean\n    isTweet?: boolean\n    disableArticleFixedWidth?: boolean\n  }>(),\n  {\n    isFacebookPost: false,\n    isInstagramPost: false,\n    isTweet: false,\n    disableArticleFixedWidth: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'load'): void\n}>()\n\nconst embedWrapper = ref()\nconst embedHtml = ref('')\n\nconst isSocialPost = computed(() => props.isFacebookPost || props.isInstagramPost || props.isTweet)\n\nconst setEmbedBackgroundColorToWhite = (embedTagIframe: HTMLIFrameElement) => {\n  if (!props.isFacebookPost) return\n  // Facebook embeds don't set background-color. In dark mode,\n  // the background becomes black, hiding the text. We fix this\n  // ourselves.\n  embedTagIframe.style.setProperty('background-color', 'white')\n}\n\nconst setDocumentEmbedSize = (embedTagIframe: HTMLIFrameElement): void => {\n  if (!props.isDocument && !props.isArticle && !props.isHtml) return\n  if (!isSocialPost.value) embedTagIframe.setAttribute('width', '100%')\n  if (!props.isFacebookPost && !props.isTweet) embedTagIframe.setAttribute('height', '100%')\n  if (props.isTweet) embedTagIframe.setAttribute('height', '0%') // Prevent flicker while waiting for setHeightForTweet to be called\n}\n\nconst processEmbedCode = () => {\n  const embedTag = embedWrapper.value.firstChild as Element\n  if (embedTag.tagName.toLowerCase() === 'iframe') {\n    const embedTagIframe = embedTag as HTMLIFrameElement\n    setEmbedBackgroundColorToWhite(embedTagIframe)\n    setDocumentEmbedSize(embedTagIframe)\n    embedHtml.value = embedTagIframe.outerHTML\n  }\n}\n\nconst observeEmbedMutationForTweet = (embedTagIframe: HTMLIFrameElement) => {\n  const observer = new MutationObserver((mutationList: MutationRecord[]) => {\n    for (const mutation of mutationList) {\n      mutation.addedNodes.forEach((node) => {\n        // Need to check classList because other nodes can be added\n        const isTwitterIframeAdded = (node as Element).classList.contains('twitter-tweet')\n        if (isTwitterIframeAdded) {\n          setHeightForTweet(embedTagIframe)\n        }\n      })\n    }\n  })\n  observer.observe(embedTagIframe.contentDocument!, { childList: true, subtree: true })\n}\n\nconst setHeightForTweet = (embedTagIframe: HTMLIFrameElement) => {\n  const twitterIframe = embedTagIframe.contentDocument?.querySelector('iframe')\n  observeSizeChange(twitterIframe!, (_: HTMLElement, contentRect: DOMRectReadOnly) => {\n    if (contentRect.height === 0) {\n      return\n    }\n    const IFRAME_VERTICAL_MARGIN = 20\n    embedTagIframe.setAttribute('height', `${twitterIframe?.offsetHeight! + IFRAME_VERTICAL_MARGIN}px`)\n    emit('load')\n  })\n}\n\nconst executeScriptElements = (containerElement: HTMLElement): void => {\n  const scriptElements = containerElement.querySelectorAll('script')\n\n  Array.from(scriptElements).forEach((scriptElement) => {\n    const clonedElement = document.createElement('script')\n\n    Array.from(scriptElement.attributes).forEach((attribute) => {\n      clonedElement.setAttribute(attribute.name, attribute.value)\n    })\n\n    clonedElement.text = scriptElement.text\n\n    scriptElement.parentNode?.replaceChild(clonedElement, scriptElement)\n  })\n}\n\nonMounted(() => {\n  embedHtml.value = props.embedCode\n  nextTick(() => {\n    processEmbedCode()\n    executeScriptElements(embedWrapper.value)\n    nextTick(() => {\n      const embedTag = embedWrapper.value.firstChild as Element\n      const isEmbedChildIframe = embedTag.tagName.toLowerCase() === 'iframe'\n      if (!isEmbedChildIframe) {\n        emit('load')\n        return\n      }\n\n      const embedTagIframe = embedTag as HTMLIFrameElement\n      embedTagIframe.addEventListener('load', (): void => {\n        if (!props.isTweet) {\n          emit('load')\n          return\n        }\n\n        // There is no guarantee that `twitterIframe` exists even after `embedTagIframe` has fired `load`.\n        // In the event that `twitterIframe` is null,\n        // we can wait for `twitterIframe` to be added to the childList before we call `setHeightForTweet`.\n        const twitterIframe = embedTagIframe.contentDocument?.querySelector('iframe')\n        if (twitterIframe) {\n          setHeightForTweet(embedTagIframe)\n        } else {\n          observeEmbedMutationForTweet(embedTagIframe)\n        }\n      })\n    })\n  })\n})\n</script>\n\n<style lang=\"scss\" scoped>\n:deep(.embedly-card-hug) {\n  background-color: white;\n}\n</style>\n"],"names":["embedWrapper","ref","embedHtml","isSocialPost","computed","props","isFacebookPost","isInstagramPost","isTweet","setEmbedBackgroundColorToWhite","embedTagIframe","style","setProperty","setDocumentEmbedSize","isDocument","isArticle","isHtml","value","setAttribute","processEmbedCode","embedTag","firstChild","tagName","toLowerCase","outerHTML","observeEmbedMutationForTweet","MutationObserver","mutationList","mutation","addedNodes","forEach","node","classList","contains","setHeightForTweet","observe","contentDocument","childList","subtree","twitterIframe","querySelector","observeSizeChange","_","contentRect","height","IFRAME_VERTICAL_MARGIN","offsetHeight","emit","executeScriptElements","containerElement","scriptElements","querySelectorAll","Array","from","scriptElement","clonedElement","document","createElement","attributes","attribute","name","text","parentNode","replaceChild","onMounted","embedCode","nextTick","addEventListener"],"mappings":"28BA8CMA,EAAeC,IACfC,EAAYD,EAAI,EAAE,EAElBE,EAAeC,EAAS,IAAMC,EAAMC,gBAAkBD,EAAME,iBAAmBF,EAAMG,OAAO,EAE5FC,EAAkCC,GAAsC,CACvEL,EAAMC,gBAIII,EAAAC,MAAMC,YAAY,mBAAoB,OAAO,GAGxDC,EAAwBH,GAA4C,CACpE,CAACL,EAAMS,YAAc,CAACT,EAAMU,WAAa,CAACV,EAAMW,SAC/Cb,EAAac,OAAsBP,EAAAQ,aAAa,QAAS,MAAM,EAChE,CAACb,EAAMC,gBAAkB,CAACD,EAAMG,SAAwBE,EAAAQ,aAAa,SAAU,MAAM,EACrFb,EAAMG,SAAwBE,EAAAQ,aAAa,SAAU,IAAI,IAGzDC,EAAmBA,IAAM,CACvB,MAAAC,EAAWpB,EAAaiB,MAAMI,WACpC,GAAID,EAASE,QAAQC,YAAY,IAAM,SAAU,CAC/C,MAAMb,EAAiBU,EACvBX,EAA+BC,CAAc,EAC7CG,EAAqBH,CAAc,EACnCR,EAAUe,MAAQP,EAAec,SACnC,GAGIC,EAAgCf,GAAsC,CACzD,IAAIgB,iBAAkBC,GAAmC,CACxE,UAAWC,KAAYD,EACZC,EAAAC,WAAWC,QAASC,GAAS,CAENA,EAAiBC,UAAUC,SAAS,eAAe,GAE/EC,EAAkBxB,CAAc,CAEpC,CAAC,CAEL,CAAC,EACQyB,QAAQzB,EAAe0B,gBAAkB,CAAEC,UAAW,GAAMC,QAAS,EAAK,CAAC,GAGhFJ,EAAqBxB,GAAsC,OAC/D,MAAM6B,GAAgB7B,EAAAA,EAAe0B,kBAAf1B,YAAAA,EAAgC8B,cAAc,UAClDC,EAAAF,EAAgB,CAACG,EAAgBC,IAAiC,CAC9E,GAAAA,EAAYC,SAAW,EACzB,OAEF,MAAMC,EAAyB,GAC/BnC,EAAeQ,aAAa,SAAU,IAAGqB,GAAAA,YAAAA,EAAeO,cAAgBD,CAAsB,IAAI,EAClGE,EAAK,MAAM,CACb,CAAC,GAGGC,EAAyBC,GAAwC,CAC/D,MAAAC,EAAiBD,EAAiBE,iBAAiB,QAAQ,EAEjEC,MAAMC,KAAKH,CAAc,EAAEpB,QAASwB,GAAkB,OAC9C,MAAAC,EAAgBC,SAASC,cAAc,QAAQ,EAErDL,MAAMC,KAAKC,EAAcI,UAAU,EAAE5B,QAAS6B,GAAc,CAC1DJ,EAAcrC,aAAayC,EAAUC,KAAMD,EAAU1C,KAAK,CAC5D,CAAC,EAEDsC,EAAcM,KAAOP,EAAcO,MAErBP,EAAAA,EAAAQ,aAAAR,MAAAA,EAAYS,aAAaR,EAAeD,EACxD,CAAC,GAGHU,OAAAA,EAAU,IAAM,CACd9D,EAAUe,MAAQZ,EAAM4D,UACxBC,EAAS,IAAM,CACI/C,IACjB6B,EAAsBhD,EAAaiB,KAAK,EACxCiD,EAAS,IAAM,CACP,MAAA9C,EAAWpB,EAAaiB,MAAMI,WAEpC,GAAI,EADuBD,EAASE,QAAQC,YAAA,IAAkB,UACrC,CACvBwB,EAAK,MAAM,EACX,MACF,CAEA,MAAMrC,EAAiBU,EACRV,EAAAyD,iBAAiB,OAAQ,IAAY,OAC9C,GAAA,CAAC9D,EAAMG,QAAS,CAClBuC,EAAK,MAAM,EACX,MACF,GAKsBrC,EAAAA,EAAe0B,kBAAf1B,YAAAA,EAAgC8B,cAAc,WAElEN,EAAkBxB,CAAc,EAEhCe,EAA6Bf,CAAc,CAE/C,CAAC,CACH,CAAC,CACH,CAAC,CACH,CAAC"}