ObsidianCustomFrames/src/frame.ts

110 lines
3.8 KiB
TypeScript
Raw Normal View History

2022-04-13 21:21:48 +02:00
import { Platform } from "obsidian";
import { CustomFrameSettings, CustomFramesSettings, getId } from "./settings";
2022-04-13 21:21:48 +02:00
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;
}
create(parent: HTMLElement, additionalStyle: string = undefined, urlSuffix: string = undefined): void {
2022-04-13 21:21:48 +02:00
let style = `padding: ${this.settings.padding}px;`;
if (additionalStyle)
style += additionalStyle;
if (Platform.isDesktopApp && !this.data.forceIframe) {
let frameDoc = parent.doc;
this.frame = frameDoc.createElement("webview");
parent.appendChild(this.frame);
2022-04-13 21:21:48 +02:00
this.frame.setAttribute("allowpopups", "");
this.frame.addEventListener("dom-ready", () => {
this.frame.setZoomFactor(this.data.zoomLevel);
this.frame.insertCSS(this.data.customCss);
this.frame.executeJavaScript(this.data.customJs)
2022-04-13 21:21:48 +02:00
});
this.frame.addEventListener("destroyed", () => {
// recreate the webview if it was moved to a new window
if (frameDoc != parent.doc) {
this.frame.detach();
this.create(parent, additionalStyle, urlSuffix);
}
});
2022-06-19 23:42:29 +02:00
} else {
this.frame = parent.doc.createElement("iframe");
parent.appendChild(this.frame);
this.frame.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads");
2022-04-13 21:21:48 +02:00
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.addClass(`custom-frames-${getId(this.data)}`);
2022-04-13 21:21:48 +02:00
this.frame.setAttribute("style", style);
let src = this.data.url;
if (urlSuffix) {
if (!urlSuffix.startsWith("/"))
src += "/";
src += urlSuffix;
}
this.frame.setAttribute("src", src);
2022-04-13 21:21:48 +02:00
}
refresh(): void {
2022-04-13 21:21:48 +02:00
if (this.frame instanceof HTMLIFrameElement) {
this.frame.contentWindow.location.reload();
} else {
this.frame.reload();
}
}
return(): void {
2022-04-13 21:21:48 +02:00
if (this.frame instanceof HTMLIFrameElement) {
this.frame.contentWindow.open(this.data.url);
} else {
this.frame.loadURL(this.data.url);
}
}
goBack(): void {
2022-04-13 21:21:48 +02:00
if (this.frame instanceof HTMLIFrameElement) {
this.frame.contentWindow.history.back();
2022-06-19 23:42:29 +02:00
} else {
2022-04-13 21:21:48 +02:00
this.frame.goBack();
}
}
goForward(): void {
2022-04-13 21:21:48 +02:00
if (this.frame instanceof HTMLIFrameElement) {
this.frame.contentWindow.history.forward();
2022-06-19 23:42:29 +02:00
} else {
2022-04-13 21:21:48 +02:00
this.frame.goForward();
}
}
toggleDevTools(): void {
2022-04-13 21:21:48 +02:00
if (!(this.frame instanceof HTMLIFrameElement)) {
if (!this.frame.isDevToolsOpened()) {
this.frame.openDevTools();
2022-06-19 23:42:29 +02:00
} else {
2022-04-13 21:21:48 +02:00
this.frame.closeDevTools();
}
}
}
getCurrentUrl(): string {
return this.frame instanceof HTMLIFrameElement ? this.frame.contentWindow.location.href : this.frame.getURL();
2022-04-13 21:21:48 +02:00
}
focus(): void {
if (this.frame instanceof HTMLIFrameElement) {
this.frame.contentWindow.focus();
} else {
this.frame.focus();
}
}
}