Ellpeck/ObsidianCustomFrames
1
0
Fork 0
mirror of https://github.com/Ellpeck/ObsidianCustomFrames.git synced 2024-05-28 12:33:36 +02:00
Code Issues Projects Releases Wiki Activity

experiment with webviews

Browse source
This commit is contained in:
Ell 2022-03-26 11:23:11 +01:00
parent 76ad8e0f20
commit f7c6d93b90
3 changed files with 12 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,7 +1,7 @@
# Obsidian Custom Frames # Obsidian Custom Frames
An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more. An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.
⚠️⚠️⚠️ **For header-heavy sites like Google Keep to work, this plugin requires Obsidian 0.14.3 or newer due to changes in the way iframes are handled.** ⚠️⚠️⚠️ ⚠️⚠️⚠️ **For header-heavy sites like Google Keep to work, this plugin requires Obsidian 0.14.3.** ⚠️⚠️⚠️
![A screenshot of the plugin in action](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/screenshot.png) ![A screenshot of the plugin in action](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/screenshot.png)

40
main.ts
View file

@ -90,27 +90,15 @@ class CustomFrameView extends ItemView {
this.contentEl.empty(); this.contentEl.empty();
this.contentEl.addClass("custom-frames-view"); this.contentEl.addClass("custom-frames-view");
let frame = this.contentEl.createEl("iframe"); let frame: any = document.createElement("webview");
frame.addClass("custom-frames-frame"); frame.addClass("custom-frames-frame");
frame.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"); frame.setAttribute("allowpopups", "");
frame.setAttribute("allow", "encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation;");
frame.setAttribute("style", `padding: ${this.settings.padding}px`); frame.setAttribute("style", `padding: ${this.settings.padding}px`);
frame.onload = () => { frame.setAttribute("src", this.frame.url);
if (Platform.isDesktopApp) { frame.addEventListener("dom-ready", () => {
for (let other of require("electron").remote.getCurrentWebContents().mainFrame.frames) { frame.insertCSS(this.frame.customCss);
if (frame.src.contains(new URL(other.url).host)) {
other.executeJavaScript(`
(() => {
let customFramesStyle = document.createElement("style");
customFramesStyle.textContent = \`${this.frame.customCss}\`;
document.head.appendChild(customFramesStyle);
})();
`);
}
}
}
if (Platform.isDesktop && this.frame.minimumWidth) { if (this.frame.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.frame.minimumWidth + 2 * this.settings.padding}px`;
@ -118,8 +106,8 @@ class CustomFrameView extends ItemView {
parent.style.width = minWidth; parent.style.width = minWidth;
} }
} }
}; });
frame.src = this.frame.url; this.contentEl.appendChild(frame);
} }
getViewType(): string { getViewType(): string {
@ -203,11 +191,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
}); });
new Setting(this.containerEl) new Setting(this.containerEl)
.setName("Minimum Width") .setName("Minimum Width")
.setDesc(createFragment(f => { .setDesc("The width that this frame's pane should be adjusted to automatically if it is lower. Set to 0 to disable.")
f.createSpan({ text: "The width that this frame's pane should be adjusted to automatically if it is lower. Set to 0 to disable." });
f.createEl("br");
f.createEl("em", { text: "Note that this is only applied on Desktop devices." });
}))
.addText(t => { .addText(t => {
t.inputEl.type = "number"; t.inputEl.type = "number";
t.setValue(String(frame.minimumWidth)); t.setValue(String(frame.minimumWidth));
@ -218,11 +202,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
}); });
new Setting(this.containerEl) new Setting(this.containerEl)
.setName("Additional CSS") .setName("Additional CSS")
.setDesc(createFragment(f => { .setDesc("A snippet of additional CSS that should be applied to this frame.")
f.createSpan({ text: "A snippet of additional CSS that should be applied to this frame." });
f.createEl("br");
f.createEl("em", { text: "Note that this is only applied on Desktop devices." });
}))
.addTextArea(t => { .addTextArea(t => {
t.inputEl.rows = 5; t.inputEl.rows = 5;
t.inputEl.cols = 50; t.inputEl.cols = 50;

2
manifest.json
View file

@ -6,5 +6,5 @@
"description": "A plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.", "description": "A plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.",
"author": "Ellpeck", "author": "Ellpeck",
"authorUrl": "https://ellpeck.de", "authorUrl": "https://ellpeck.de",
"isDesktopOnly": false "isDesktopOnly": true
} }