import { defaultHeight } from "src/constant" ; import { AspectRatioType } from "src/types/aspect-ratio" ; import { addAspectRatio , swapRatio } from "src/utils/ratio.utils" ; export interface IResizableIframeContainerOutput { iframeContainer : HTMLElement ; outputHtml : ( ) => string ; updateAspectRatio : ( aspectRatio : AspectRatioType ) => void ; resetToDefaultWidth : ( ) => void ; } export function createIframeContainerEl ( contentEl , iframeHtml ) { const iframeContainer = contentEl . createEl ( 'div' ) ; iframeContainer . className = "iframe__container space-y" ; const fragment = document . createElement ( 'template' ) ; fragment . innerHTML = iframeHtml ; const iframe = fragment . content . firstChild as HTMLIFrameElement ; iframeContainer . appendChild ( iframe ) ; console . log ( iframe . outerHTML ) ; addAspectRatio ( iframe ) ; const resetToDefaultWidth = ( ) => { iframe . style . width = '100%' ; iframe . style . height = '100%' ; } ; resetToDefaultWidth ( ) ; console . log ( iframeHtml , iframe ) ; return { iframeContainer , updateAspectRatio : ( value ) => { if ( value === 'none' ) { iframe . style . removeProperty ( 'aspect-ratio' ) ; } else { iframe . style . setProperty ( 'aspect-ratio' , value ) ; resetToDefaultWidth ( ) ; } } , outputHtml : ( ) => { return iframe . outerHTML ; } , resetToDefaultWidth , } ; } export function createIframeContainerElLegacy ( contentEl , url ) { const iframeContainer = contentEl . createEl ( 'div' ) ; iframeContainer . className = "iframe__container__legacy space-y" ; iframeContainer . style . overflow = 'auto' ; iframeContainer . style . resize = 'both' ; iframeContainer . style . height = defaultHeight ; const ratioContainer = iframeContainer . createEl ( 'div' ) ; ratioContainer . style . display = 'block' ; ratioContainer . style . position = 'relative' ; ratioContainer . style . width = '100%' ; ratioContainer . style . height = "0px" ; ratioContainer . style . setProperty ( '--aspect-ratio' , '9/16' ) ; ratioContainer . style . paddingBottom = 'calc(var(--aspect-ratio) * 100%)' ; const iframe = ratioContainer . createEl ( 'iframe' ) ; iframe . src = url ; iframe . allow = "fullscreen" ; iframe . style . position = 'absolute' ; iframe . style . top = '0px' ; iframe . style . left = '0px' ; iframe . style . height = '100%' ; iframe . style . width = '100%' ; iframeContainer . style . height = ratioContainer . offsetHeight + 'px' ; return { iframeContainer , updateAspectRatio : ( value ) => { if ( value === 'none' ) { ratioContainer . style . paddingBottom = '0px' ; ratioContainer . style . height = '100%' ; } else { ratioContainer . style . paddingBottom = 'calc(var(--aspect-ratio) * 100%)' ; ratioContainer . style . height = '0px' ; } ratioContainer . style . setProperty ( '--aspect-ratio' , swapRatio ( value ) ) ; } , outputHtml : ( ) => { iframeContainer . className = "" ; iframeContainer . style . height = ratioContainer . offsetHeight + 'px' ; return ratioContainer . outerHTML ; } , resetToDefaultWidth : ( ) => { iframeContainer . style . width = '100%' ; iframeContainer . style . height = ratioContainer . offsetHeight + 'px' ; } , } ; }