Ellpeck/ObsidianCustomFrames
1
0
Fork 0
mirror of https://github.com/Ellpeck/ObsidianCustomFrames.git synced 2024-11-14 14:59:08 +01:00
Code Issues Projects Releases Wiki Activity

added a way to refresh and return to the original page

Browse source
This commit is contained in:
Ell 2022-03-26 15:57:09 +01:00
parent 2ceb4bc48e
commit e2ce193353
1 changed files with 55 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
main.ts
View file

@ -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<HTMLElement>(".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);
}
}
}