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

moved frame impl to a different class

Browse source
This commit is contained in:
Ell 2022-04-13 21:21:48 +02:00
parent 1c54de4688
commit 055e3f2042
3 changed files with 103 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/frame.ts Normal file
View file

@ -0,0 +1,88 @@
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): any {
let style = `padding: ${this.settings.padding}px;`;
if (additionalStyle)
style += additionalStyle;
if (Platform.isDesktopApp) {
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);
this.frame.setAttribute("src", this.data.url);
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 copyLink(): void {
let link = this.frame instanceof HTMLIFrameElement ? this.frame.contentWindow.location.href : this.frame.getURL();
navigator.clipboard.writeText(link);
}
}

6
src/settings.ts
View file

@ -2,7 +2,7 @@ export const defaultSettings: CustomFramesSettings = {
frames: [], frames: [],
padding: 5 padding: 5
}; };
export const presets: Record<string, CustomFrame> = { export const presets: Record<string, CustomFrameSettings> = {
"obsidian": { "obsidian": {
url: "https://forum.obsidian.md/", url: "https://forum.obsidian.md/",
displayName: "Obsidian Forum", displayName: "Obsidian Forum",
@ -83,11 +83,11 @@ html > body > div > header > div > div > div > div > a > span {
}; };
export interface CustomFramesSettings { export interface CustomFramesSettings {
frames: CustomFrame[]; frames: CustomFrameSettings[];
padding: number; padding: number;
} }
export interface CustomFrame { export interface CustomFrameSettings {
url: string; url: string;
displayName: string; displayName: string;
icon: string; icon: string;

92
src/view.ts
View file

@ -1,5 +1,6 @@
import { ItemView, WorkspaceLeaf, Platform, Menu } from "obsidian"; import { ItemView, WorkspaceLeaf, Platform, Menu } from "obsidian";
import { CustomFrame, CustomFramesSettings } from "./settings"; import { CustomFrame } from "./frame";
import { CustomFrameSettings, CustomFramesSettings } from "./settings";
export class CustomFrameView extends ItemView { export class CustomFrameView extends ItemView {
@ -7,36 +8,36 @@ export class CustomFrameView extends ItemView {
{ {
name: "Return to original page", name: "Return to original page",
icon: "home", icon: "home",
action: v => v.return() action: v => v.frame.return()
}, { }, {
name: "Open dev tools", name: "Open dev tools",
icon: "binary", icon: "binary",
action: v => v.toggleDevTools() action: v => v.frame.toggleDevTools()
}, { }, {
name: "Copy link", name: "Copy link",
icon: "link", icon: "link",
action: v => v.copyLink() action: v => v.frame.copyLink()
}, { }, {
name: "Refresh", name: "Refresh",
icon: "refresh-cw", icon: "refresh-cw",
action: v => v.refresh() action: v => v.frame.refresh()
}, { }, {
name: "Go back", name: "Go back",
icon: "arrow-left", icon: "arrow-left",
action: v => v.goBack() action: v => v.frame.goBack()
}, { }, {
name: "Go forward", name: "Go forward",
icon: "arrow-right", icon: "arrow-right",
action: v => v.goForward() action: v => v.frame.goForward()
} }
]; ];
private readonly settings: CustomFramesSettings; private readonly settings: CustomFramesSettings;
private readonly data: CustomFrame; private readonly data: CustomFrameSettings;
private readonly name: string; private readonly name: string;
private frame: HTMLIFrameElement | any; private frame: CustomFrame;
constructor(leaf: WorkspaceLeaf, settings: CustomFramesSettings, data: CustomFrame, name: string) { constructor(leaf: WorkspaceLeaf, settings: CustomFramesSettings, data: CustomFrameSettings, name: string) {
super(leaf); super(leaf);
this.settings = settings; this.settings = settings;
this.data = data; this.data = data;
@ -49,26 +50,7 @@ export class CustomFrameView extends ItemView {
onload(): void { onload(): void {
this.contentEl.empty(); this.contentEl.empty();
this.contentEl.addClass("custom-frames-view"); this.contentEl.addClass("custom-frames-view");
this.contentEl.appendChild(this.frame.create());
let style = `padding: ${this.settings.padding}px;`;
if (Platform.isDesktopApp) {
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);
this.frame.setAttribute("src", this.data.url);
this.contentEl.appendChild(this.frame);
} }
onHeaderMenu(menu: Menu): void { onHeaderMenu(menu: Menu): void {
@ -93,56 +75,6 @@ export class CustomFrameView extends ItemView {
getIcon(): string { getIcon(): string {
return this.data.icon ? `lucide-${this.data.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);
}
}
private goBack(): void {
if (this.frame instanceof HTMLIFrameElement) {
this.frame.contentWindow.history.back();
}
else {
this.frame.goBack();
}
}
private goForward(): void {
if (this.frame instanceof HTMLIFrameElement) {
this.frame.contentWindow.history.forward();
}
else {
this.frame.goForward();
}
}
private toggleDevTools(): void {
if (!(this.frame instanceof HTMLIFrameElement)) {
if (!this.frame.isDevToolsOpened()) {
this.frame.openDevTools();
}
else {
this.frame.closeDevTools();
}
}
}
private copyLink(): void {
let link = this.frame instanceof HTMLIFrameElement ? this.frame.contentWindow.location.href : this.frame.getURL();
navigator.clipboard.writeText(link);
}
} }
interface Action { interface Action {