import { BaseController } from "../utilities/base_controller" ; import { useEventListener } from "../mixins/use_event_listener" ; interface ResponsiveIframeMessage { name : string ; height : number ; } export class ResponsiveIframeWrapperController extends BaseController { connect ( ) { useEventListener ( this , window , "message" , this . messageReceived ) ; } messageReceived ( message ) { let data = message . data ; if ( data . hasOwnProperty ( "name" ) && data . name === "iframe-body" && data . hasOwnProperty ( "height" ) ) { this . resize ( data . height ) ; } } resize ( height ) { ( this . el as HTMLIFrameElement ) . style . height = `${ height }px` ; } } export class ResponsiveIframeBodyController extends BaseController { connect ( ) { if ( window . self !== window . top ) { useEventListener ( this , window , "resize" , this . postUpdate , { debounce : 200 } ) ; this . postUpdate ( ) ; } } postUpdate ( ) { let payload = { name : "iframe-body" , height : this . getHeight ( ) } ; window . parent . postMessage ( payload , "*" ) ; } getHeight ( ) { const body = document . body ; const html = document . documentElement ; return Math . max ( body . scrollHeight , body . offsetHeight , html . clientHeight , html . scrollHeight , html . offsetHeight ) ; } }