mirror of
https://github.com/Ellpeck/ObsidianCustomFrames.git
synced 2024-11-14 14:59:08 +01:00
experiment with webviews
This commit is contained in:
parent
76ad8e0f20
commit
f7c6d93b90
3 changed files with 12 additions and 32 deletions
|
@ -1,7 +1,7 @@
|
|||
# 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.
|
||||
|
||||
⚠️⚠️⚠️ **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)
|
||||
|
||||
|
|
40
main.ts
40
main.ts
|
@ -90,27 +90,15 @@ class CustomFrameView extends ItemView {
|
|||
this.contentEl.empty();
|
||||
this.contentEl.addClass("custom-frames-view");
|
||||
|
||||
let frame = this.contentEl.createEl("iframe");
|
||||
let frame: any = document.createElement("webview");
|
||||
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("allow", "encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation;");
|
||||
frame.setAttribute("allowpopups", "");
|
||||
frame.setAttribute("style", `padding: ${this.settings.padding}px`);
|
||||
frame.onload = () => {
|
||||
if (Platform.isDesktopApp) {
|
||||
for (let other of require("electron").remote.getCurrentWebContents().mainFrame.frames) {
|
||||
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);
|
||||
})();
|
||||
`);
|
||||
}
|
||||
}
|
||||
}
|
||||
frame.setAttribute("src", this.frame.url);
|
||||
frame.addEventListener("dom-ready", () => {
|
||||
frame.insertCSS(this.frame.customCss);
|
||||
|
||||
if (Platform.isDesktop && this.frame.minimumWidth) {
|
||||
if (this.frame.minimumWidth) {
|
||||
let parent = this.contentEl.closest<HTMLElement>(".workspace-split.mod-horizontal");
|
||||
if (parent) {
|
||||
let minWidth = `${this.frame.minimumWidth + 2 * this.settings.padding}px`;
|
||||
|
@ -118,8 +106,8 @@ class CustomFrameView extends ItemView {
|
|||
parent.style.width = minWidth;
|
||||
}
|
||||
}
|
||||
};
|
||||
frame.src = this.frame.url;
|
||||
});
|
||||
this.contentEl.appendChild(frame);
|
||||
}
|
||||
|
||||
getViewType(): string {
|
||||
|
@ -203,11 +191,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
|
|||
});
|
||||
new Setting(this.containerEl)
|
||||
.setName("Minimum Width")
|
||||
.setDesc(createFragment(f => {
|
||||
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." });
|
||||
}))
|
||||
.setDesc("The width that this frame's pane should be adjusted to automatically if it is lower. Set to 0 to disable.")
|
||||
.addText(t => {
|
||||
t.inputEl.type = "number";
|
||||
t.setValue(String(frame.minimumWidth));
|
||||
|
@ -218,11 +202,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
|
|||
});
|
||||
new Setting(this.containerEl)
|
||||
.setName("Additional CSS")
|
||||
.setDesc(createFragment(f => {
|
||||
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." });
|
||||
}))
|
||||
.setDesc("A snippet of additional CSS that should be applied to this frame.")
|
||||
.addTextArea(t => {
|
||||
t.inputEl.rows = 5;
|
||||
t.inputEl.cols = 50;
|
||||
|
|
|
@ -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.",
|
||||
"author": "Ellpeck",
|
||||
"authorUrl": "https://ellpeck.de",
|
||||
"isDesktopOnly": false
|
||||
"isDesktopOnly": true
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue