From e2ce1933539eee03de9d44f2c31caa5470c9df5c Mon Sep 17 00:00:00 2001 From: Ellpeck Date: Sat, 26 Mar 2022 15:57:09 +0100 Subject: [PATCH] added a way to refresh and return to the original page --- main.ts | 77 ++++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 55 insertions(+), 22 deletions(-) diff --git a/main.ts b/main.ts index 46d21ae..b3e102c 100644 --- a/main.ts +++ b/main.ts @@ -1,4 +1,4 @@ -import { App, ButtonComponent, DropdownComponent, ItemView, Plugin, PluginSettingTab, Setting, WorkspaceLeaf, Platform } from "obsidian"; +import { App, ButtonComponent, DropdownComponent, ItemView, Plugin, PluginSettingTab, Setting, WorkspaceLeaf, Platform, Menu } from "obsidian"; const defaultSettings: CustomFramesSettings = { frames: [], @@ -97,32 +97,35 @@ export default class CustomFramesPlugin extends Plugin { class CustomFrameView extends ItemView { - private settings: CustomFramesSettings; - private frame: CustomFrame; - private name: string; + private readonly settings: CustomFramesSettings; + private readonly data: CustomFrame; + private readonly name: string; + private frame: HTMLIFrameElement | any; - constructor(leaf: WorkspaceLeaf, settings: CustomFramesSettings, frame: CustomFrame, name: string) { + constructor(leaf: WorkspaceLeaf, settings: CustomFramesSettings, data: CustomFrame, name: string) { super(leaf); this.settings = settings; - this.frame = frame; + this.data = data; this.name = name; + + this.addAction("refresh-cw", "Refresh", () => this.refresh()); + this.addAction("home", "Return to original page", () => this.return()); } onload(): void { this.contentEl.empty(); this.contentEl.addClass("custom-frames-view"); - let frame: HTMLIFrameElement | any; if (Platform.isDesktopApp) { - frame = document.createElement("webview"); - frame.setAttribute("allowpopups", ""); - frame.addEventListener("dom-ready", () => { - frame.insertCSS(this.frame.customCss); + this.frame = document.createElement("webview"); + this.frame.setAttribute("allowpopups", ""); + this.frame.addEventListener("dom-ready", () => { + this.frame.insertCSS(this.data.customCss); - if (this.frame.minimumWidth) { + if (this.data.minimumWidth) { let parent = this.contentEl.closest(".workspace-split.mod-horizontal"); if (parent) { - let minWidth = `${this.frame.minimumWidth + 2 * this.settings.padding}px`; + let minWidth = `${this.data.minimumWidth + 2 * this.settings.padding}px`; if (parent.style.width < minWidth) parent.style.width = minWidth; } @@ -130,14 +133,28 @@ class CustomFrameView extends ItemView { }); } else { - frame = document.createElement("iframe"); - frame.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"); - frame.setAttribute("allow", "encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation;"); + 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;"); } - frame.addClass("custom-frames-frame"); - frame.setAttribute("style", `padding: ${this.settings.padding}px`); - frame.setAttribute("src", this.frame.url); - this.contentEl.appendChild(frame); + this.frame.addClass("custom-frames-frame"); + this.frame.setAttribute("style", `padding: ${this.settings.padding}px`); + this.frame.setAttribute("src", this.data.url); + this.contentEl.appendChild(this.frame); + } + + onHeaderMenu(menu: Menu): void { + super.onHeaderMenu(menu); + menu.addItem(i => { + i.setTitle("Refresh"); + i.setIcon("refresh-cw"); + i.onClick(() => this.refresh()); + }); + menu.addItem(i => { + i.setTitle("Return to original page"); + i.setIcon("home"); + i.onClick(() => this.return()); + }); } getViewType(): string { @@ -145,11 +162,27 @@ class CustomFrameView extends ItemView { } getDisplayText(): string { - return this.frame.displayName; + return this.data.displayName; } getIcon(): string { - return this.frame.icon ? `lucide-${this.frame.icon}` : "documents"; + return this.data.icon ? `lucide-${this.data.icon}` : "documents"; + } + + private refresh(): void { + if (this.frame instanceof HTMLIFrameElement) { + this.frame.contentWindow.location.reload(); + } else { + this.frame.reload(); + } + } + + private return(): void { + if (this.frame instanceof HTMLIFrameElement) { + this.frame.contentWindow.open(this.data.url); + } else { + this.frame.loadURL(this.data.url); + } } }