import { WindowLike } from '../protocol/comms' ; import { RenderMode } from '../protocol/data' ; import { FeatureConfig } from '../protocol/feature_config' ; import { PreloadRequest } from '../protocol/preload_request' ; import { DisplayOptions } from '../protocol/rpc_messages' ; export const HIDDEN_FRAME_CLASS = 'openyolo-hidden' ; export const VISIBLE_FRAME_CLASS = 'openyolo-visible' ; type UpdatableStyle = 'bottom' | 'top' | 'right' | 'left' | 'width' | 'height' ; type StyleDeclaration = { [ key in UpdatableStyle ] ? : string ; } ; const FRAME_RENDER_MODE_STYLE_MAPPING = { 'bottomSheet' : { 'bottom' : '0' , 'left' : '0' , 'width' : '100%' , 'height' : '320px' , } , 'navPopout' : { 'top' : '0' , 'right' : '0' , 'width' : '320px' , 'height' : '320px' , } , 'fullScreen' : { 'top' : '0' , 'left' : '0' , 'width' : '100%' , 'height' : '100%' , } , } ; /**
 * Defines the interface for a valid OpenYolo Relay container that will hold
 * relay-side logic and securely fetch credentials.
 *
 * It is usually an IFrame or a Popup window.
 */ export class ProviderFrameElement { private frameElem : HTMLIFrameElement ; constructor ( private clientDocument , private instanceIdHash , clientOrigin , private renderMode , providerUrlBase , featureConfig ? , preloadRequest ? ) { this . frameElem = this . clientDocument . createElement ( 'iframe' ) ; this . frameElem . src = `${ providerUrlBase }` + `?client=${ encodeURIComponent ( clientOrigin ) }` + `&id=${ this . instanceIdHash }` + `&renderMode=${ renderMode }` ; if ( preloadRequest ) { let encodedRequest = encodeURIComponent ( JSON . stringify ( preloadRequest ) ) ; this . frameElem . src += `&preloadRequest=${ encodedRequest }` ; } if ( featureConfig ) { let encodedFeatures = encodeURIComponent ( JSON . stringify ( featureConfig ) ) ; this . frameElem . src += `&features=${ encodedFeatures }` ; } this . frameElem . style . border = 'none' ; this . frameElem . style . position = 'fixed' ; this . frameElem . style . zIndex = '9999' ; this . hide ( ) ; this . clientDocument . body . appendChild ( this . frameElem ) ; } /**
     * Returns the content window of the container.
     */ getContentWindow ( ) { return this . frameElem . contentWindow ; } /**
     * Displays the container.
     */ display ( options ) { if ( this . frameElem . hidden ) { this . resetStyle ( ) ; this . applyStyle ( FRAME_RENDER_MODE_STYLE_MAPPING [ this . renderMode ] ) ; this . frameElem . hidden = false ; } if ( ( options . height || options . width ) && this . renderMode !== RenderMode . fullScreen ) { if ( options . height ) this . frameElem . style . height = `${ options . height }px` ; if ( options . width ) this . frameElem . style . width = `${ options . width }px` ; } } /**
     * Hides the container.
     */ hide ( ) { this . resetStyle ( ) ; this . frameElem . style . display = 'none' ; this . frameElem . hidden = true ; } /**
     * Disposes of the container.
     */ dispose ( ) { this . clientDocument . body . removeChild ( this . frameElem ) ; } /**
     * Resets the IFrame updatable style.
     */ private resetStyle ( ) { this . frameElem . style . display = '' ; this . frameElem . style . height = '' ; this . frameElem . style . width = '' ; this . frameElem . style . top = '' ; this . frameElem . style . left = '' ; this . frameElem . style . right = '' ; this . frameElem . style . bottom = '' ; } /**
     * Applies the given style on the IFrame element.
     */ private applyStyle ( style ) { if ( style . bottom ) this . frameElem . style . bottom = style . bottom ; if ( style . top ) this . frameElem . style . top = style . top ; if ( style . right ) this . frameElem . style . right = style . right ; if ( style . left ) this . frameElem . style . left = style . left ; if ( style . width ) this . frameElem . style . width = style . width ; if ( style . height ) this . frameElem . style . height = style . height ; } }