mirror of
https://github.com/Ellpeck/ObsidianCustomFrames.git
synced 2024-11-22 09:43:30 +01:00
added a way to refresh and return to the original page
This commit is contained in:
parent
2ceb4bc48e
commit
e2ce193353
1 changed files with 55 additions and 22 deletions
77
main.ts
77
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 = {
|
const defaultSettings: CustomFramesSettings = {
|
||||||
frames: [],
|
frames: [],
|
||||||
|
@ -97,32 +97,35 @@ export default class CustomFramesPlugin extends Plugin {
|
||||||
|
|
||||||
class CustomFrameView extends ItemView {
|
class CustomFrameView extends ItemView {
|
||||||
|
|
||||||
private settings: CustomFramesSettings;
|
private readonly settings: CustomFramesSettings;
|
||||||
private frame: CustomFrame;
|
private readonly data: CustomFrame;
|
||||||
private name: string;
|
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);
|
super(leaf);
|
||||||
this.settings = settings;
|
this.settings = settings;
|
||||||
this.frame = frame;
|
this.data = data;
|
||||||
this.name = name;
|
this.name = name;
|
||||||
|
|
||||||
|
this.addAction("refresh-cw", "Refresh", () => this.refresh());
|
||||||
|
this.addAction("home", "Return to original page", () => this.return());
|
||||||
}
|
}
|
||||||
|
|
||||||
onload(): void {
|
onload(): void {
|
||||||
this.contentEl.empty();
|
this.contentEl.empty();
|
||||||
this.contentEl.addClass("custom-frames-view");
|
this.contentEl.addClass("custom-frames-view");
|
||||||
|
|
||||||
let frame: HTMLIFrameElement | any;
|
|
||||||
if (Platform.isDesktopApp) {
|
if (Platform.isDesktopApp) {
|
||||||
frame = document.createElement("webview");
|
this.frame = document.createElement("webview");
|
||||||
frame.setAttribute("allowpopups", "");
|
this.frame.setAttribute("allowpopups", "");
|
||||||
frame.addEventListener("dom-ready", () => {
|
this.frame.addEventListener("dom-ready", () => {
|
||||||
frame.insertCSS(this.frame.customCss);
|
this.frame.insertCSS(this.data.customCss);
|
||||||
|
|
||||||
if (this.frame.minimumWidth) {
|
if (this.data.minimumWidth) {
|
||||||
let parent = this.contentEl.closest<HTMLElement>(".workspace-split.mod-horizontal");
|
let parent = this.contentEl.closest<HTMLElement>(".workspace-split.mod-horizontal");
|
||||||
if (parent) {
|
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)
|
if (parent.style.width < minWidth)
|
||||||
parent.style.width = minWidth;
|
parent.style.width = minWidth;
|
||||||
}
|
}
|
||||||
|
@ -130,14 +133,28 @@ class CustomFrameView extends ItemView {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
frame = document.createElement("iframe");
|
this.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");
|
this.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.setAttribute("allow", "encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation;");
|
||||||
}
|
}
|
||||||
frame.addClass("custom-frames-frame");
|
this.frame.addClass("custom-frames-frame");
|
||||||
frame.setAttribute("style", `padding: ${this.settings.padding}px`);
|
this.frame.setAttribute("style", `padding: ${this.settings.padding}px`);
|
||||||
frame.setAttribute("src", this.frame.url);
|
this.frame.setAttribute("src", this.data.url);
|
||||||
this.contentEl.appendChild(frame);
|
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 {
|
getViewType(): string {
|
||||||
|
@ -145,11 +162,27 @@ class CustomFrameView extends ItemView {
|
||||||
}
|
}
|
||||||
|
|
||||||
getDisplayText(): string {
|
getDisplayText(): string {
|
||||||
return this.frame.displayName;
|
return this.data.displayName;
|
||||||
}
|
}
|
||||||
|
|
||||||
getIcon(): string {
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue