@3id/connect-display
Version:
## Installation
100 lines (99 loc) • 3.63 kB
JavaScript
/* eslint-disable @typescript-eslint/ban-ts-comment */ import { createClient, createServer } from '@ceramicnetwork/rpc-window';
import { createMessageObservable } from '@ceramicnetwork/transport-postmessage';
import { first } from 'rxjs/operators';
const IFRAME_NAMESPACE = '3id-connect-iframedisplay';
const MANAGE_NAMESPACE = '3id-connect-managedisplay';
const TORUS_CONSENT_ZINDEX = 99999;
const HIDE_IFRAME_STYLE = 'position: fixed; width:0; height:0; border:0; border:none !important';
const DISPLAY_IFRAME_STYLE = `border:none; border:0; z-index: ${TORUS_CONSENT_ZINDEX - 2}; position: fixed; max-width: 100%;`;
const DISPLAY_MANAGE_STYLE = `border:none; border:0; z-index: ${TORUS_CONSENT_ZINDEX - 1}; position: fixed; width: 100%; height: 100%; top: 0; left: 0;`;
const IFRAME_TOP = `top: 0px; right: 0px`;
const IFRAME_BOTTOM = `bottom: 0px; left: 0px;`;
// @ts-ignore
const hide = (iframe)=>()=>iframe.style = HIDE_IFRAME_STYLE
;
const display = (iframe)=>(mobile = false, height = '245px', width = '440px')=>{
// @ts-ignore
iframe.style = `${DISPLAY_IFRAME_STYLE} width: ${width}; height: ${height}; ${mobile ? IFRAME_BOTTOM : IFRAME_TOP}`;
}
;
export class DisplayConnectClientRPC {
async hide() {
await this.client.request('hide');
}
async display(mobile, height, width) {
await this.client.request('display', {
mobile,
height,
width
});
}
constructor(target = window.parent){
this.client = createClient(IFRAME_NAMESPACE, target);
}
}
export function createDisplayConnectServerRPC(iframe) {
const callDisplay = display(iframe);
const callHide = hide(iframe);
return createServer(IFRAME_NAMESPACE, {
hide: ()=>{
callHide();
},
display: (_event, { mobile , height , width })=>{
callDisplay(mobile, height, width);
}
});
}
export const createConnectIframe = (iframeUrl)=>{
const iframe = document.createElement('iframe');
iframe.name = 'threeid-connect';
iframe.className = 'threeid-connect';
iframe.src = iframeUrl;
// @ts-ignore
iframe.style = HIDE_IFRAME_STYLE;
// @ts-ignore
iframe.allowTransparency = true;
// @ts-ignore
iframe.frameBorder = 0;
return iframe;
};
export class DisplayManageClientRPC {
async display(accountId) {
await this.client.request('display', {
accountId
});
}
constructor(target = window.parent){
this.client = createClient(MANAGE_NAMESPACE, target);
}
}
export function createDisplayManageServerRPC(manageAppUrl) {
let app;
return createServer(MANAGE_NAMESPACE, {
// todo change name
display: async (_event, { accountId })=>{
app = createManageIframe(`${manageAppUrl}?accountId=${accountId}`);
document.body.appendChild(app);
await new Promise((res)=>{
app.onload = res;
});
// @ts-ignore
const observer = createMessageObservable(window);
const filterEvent = (x)=>x.data.ns === '3id-connect-management'
;
await observer.pipe(first(filterEvent)).toPromise();
app.remove();
}
});
}
export const createManageIframe = (iframeUrl)=>{
const iframe = document.createElement('iframe');
iframe.name = 'threeid-connect-manage';
iframe.className = 'threeid-connect-manage';
iframe.src = iframeUrl;
// @ts-ignore
iframe.allowtransparency = false;
// @ts-ignore
iframe.style = DISPLAY_MANAGE_STYLE;
return iframe;
};