import { Platform } from "obsidian"; import { CustomFrameSettings, CustomFramesSettings } from "./settings"; export class CustomFrame { private readonly settings: CustomFramesSettings; private readonly data: CustomFrameSettings; private frame: HTMLIFrameElement | any; constructor(settings: CustomFramesSettings, data: CustomFrameSettings) { this.settings = settings; this.data = data; } public create(additionalStyle: string = undefined, urlSuffix: string = undefined): any { let style = `padding: ${this.settings.padding}px;`; if (additionalStyle) style += additionalStyle; if (Platform.isDesktopApp && !this.data.forceIframe) { this.frame = document.createElement("webview"); this.frame.setAttribute("allowpopups", ""); this.frame.addEventListener("dom-ready", () => { this.frame.setZoomFactor(this.data.zoomLevel); this.frame.insertCSS(this.data.customCss); }); } else { this.frame = document.createElement("iframe"); this.frame.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"); this.frame.setAttribute("allow", "encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation;"); style += `transform: scale(${this.data.zoomLevel}); transform-origin: 0 0;`; } this.frame.addClass("custom-frames-frame"); this.frame.setAttribute("style", style); let src = this.data.url; if (urlSuffix) { if (!urlSuffix.startsWith("/")) src += "/"; src += urlSuffix; } this.frame.setAttribute("src", src); return this.frame; } public refresh(): void { if (this.frame instanceof HTMLIFrameElement) { this.frame.contentWindow.location.reload(); } else { this.frame.reload(); } } public return(): void { if (this.frame instanceof HTMLIFrameElement) { this.frame.contentWindow.open(this.data.url); } else { this.frame.loadURL(this.data.url); } } public goBack(): void { if (this.frame instanceof HTMLIFrameElement) { this.frame.contentWindow.history.back(); } else { this.frame.goBack(); } } public goForward(): void { if (this.frame instanceof HTMLIFrameElement) { this.frame.contentWindow.history.forward(); } else { this.frame.goForward(); } } public toggleDevTools(): void { if (!(this.frame instanceof HTMLIFrameElement)) { if (!this.frame.isDevToolsOpened()) { this.frame.openDevTools(); } else { this.frame.closeDevTools(); } } } public getCurrentUrl(): string { return this.frame instanceof HTMLIFrameElement ? this.frame.contentWindow.location.href : this.frame.getURL(); } }