Ellpeck/ObsidianCustomFrames
1
0
Fork 0
mirror of https://github.com/Ellpeck/ObsidianCustomFrames.git synced 2024-05-17 16:18:43 +02:00
Code Issues Projects Releases Wiki Activity

allow using the plugin on mobile (with limitations)

Browse source
This commit is contained in:
Ell 2022-03-23 11:42:05 +01:00
parent 822672ed2b
commit 5a6bf176e7
3 changed files with 16 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -8,8 +8,6 @@ An Obsidian plugin that turns web apps into panes using iframes with custom styl
## Usage
To use this plugin, simply go into its settings and add a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's tab can be opened using the 'Custom Frames: Open' command.
Note that this plugin only works on Desktop right now.
## Presets
By default, Custom Frames comes with a few presets that allow you to get new tabs for popular sites up and running quickly.
- Google Keep, optimized for a narrow side tab

29
main.ts
View file

@ -1,5 +1,4 @@
import { App, ButtonComponent, DropdownComponent, ItemView, Plugin, PluginSettingTab, Setting, WorkspaceLeaf } from "obsidian";
import { remote } from "electron";
import { App, ButtonComponent, DropdownComponent, ItemView, Plugin, PluginSettingTab, Setting, WorkspaceLeaf, Platform } from "obsidian";
const defaultSettings: CustomFramesSettings = {
frames: [],
@ -93,22 +92,24 @@ class CustomFrameView extends ItemView {
frame.addClass("custom-frames-frame");
frame.setAttribute("style", `padding: ${this.settings.padding}px`);
frame.onload = () => {
for (let other of remote.getCurrentWebContents().mainFrame.frames) {
if (frame.src.contains(new URL(other.url).host)) {
other.executeJavaScript(`
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 style = document.createElement("style");
style.textContent = \`${this.frame.customCss}\`;
document.head.appendChild(style);
`);
}
}
}
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`;
if (parent.style.width < minWidth)
parent.style.width = minWidth;
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`;
if (parent.style.width < minWidth)
parent.style.width = minWidth;
}
}
}
};
@ -180,7 +181,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
});
new Setting(this.containerEl)
.setName("Minimum Width")
.setDesc("The width that this frame's tab should be adjusted to automatically if it is lower. Set to 0 to disable.")
.setDesc("The width that this frame's tab should be adjusted to automatically if it is lower. Set to 0 to disable. Note that this is only applied on Desktop devices.")
.addText(t => {
t.inputEl.type = "number";
t.setValue(String(frame.minimumWidth));
@ -191,7 +192,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
});
new Setting(this.containerEl)
.setName("Additional CSS")
.setDesc("A snippet of additional CSS that should be applied to this frame.")
.setDesc("A snippet of additional CSS that should be applied to this frame. Note that this is only applied on Desktop devices.")
.addTextArea(t => {
t.inputEl.rows = 5;
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.",
"author": "Ellpeck",
"authorUrl": "https://ellpeck.de",
"isDesktopOnly": true
"isDesktopOnly": false
}