Ellpeck/ObsidianCustomFrames
1
0
Fork 0
mirror of https://github.com/Ellpeck/ObsidianCustomFrames.git synced 2024-12-22 13:19:24 +01:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/Ellpeck/ObsidianCustomFrames

Browse source
This commit is contained in:
Ell 2022-04-13 21:21:49 +02:00
commit 4131f0a51c
9 changed files with 1299 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CONTRIBUTING.md Normal file
View file

@ -0,0 +1,5 @@
Hi, thanks for contributing to Custom Frames!
Before reporting an issue or suggesting a new feature, please check the [README](README.md)'s [Roadmap](README.md#%EF%B8%8F-roadmap) and [Known Issues](https://github.com/Ellpeck/ObsidianCustomFrames/blob/master/README.md#%EF%B8%8F-known-issues) sections. If your issue or suggestion is already listed there, you don't need to report it here.
Thanks! ❤️

15
README.md
View file

@ -7,13 +7,13 @@ An Obsidian plugin that turns web apps into panes using iframes with custom styl
![A screenshot of the plugin's settings](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/settings.png)
## Usage
## 🤔 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 pane can be opened using the "Custom Frames: Open" command.
### On Obsidian Mobile
### 📱 On Obsidian Mobile
Unfortunately, Obsidian Mobile does not run on [Electron](https://www.electronjs.org/), which is what allows iframes and [webviews](https://www.electronjs.org/docs/latest/api/webview-tag) to be displayed with very few restrictions related to cookies, cross-origin resource sharing, and so on. This means that a lot of sites won't work there, especially ones that you have to log in to. However, when you create a frame, you can toggle the "Disable on Mobile" option to hide a Desktop-only frame in Obsidian mobile.
## Presets
## 📦 Presets
By default, Custom Frames comes with a few presets that allow you to get new panes for popular sites up and running quickly.
- [Obsidian Forum](https://forum.obsidian.md/)
- [Google Keep](https://keep.google.com), optimized for a narrow pane on the side
@ -24,14 +24,19 @@ By default, Custom Frames comes with a few presets that allow you to get new pan
If you create a frame that you think other people would like, don't hesitate to create a pull request with [a new preset](https://github.com/Ellpeck/ObsidianCustomFrames/blob/master/src/settings.ts#L5).
## Roadmap
## 🛣️ Roadmap
- ~~Allow setting a custom icon for each pane~~
- Allow displaying custom frames in Markdown code blocks
- Allow creating links that open in a custom frame rather than the browser
- Possibly allow executing custom JavaScript in iframes (though security implications still need to be explored)
- Add a global setting that causes popups to be opened in a new Obsidian window rather than the default browser
## Acknowledgements
## ⚠️ Known Issues
There are a few known issues with Custom Frames. If you encounter any of these, please **don't** report it on the issue tracker.
- In older versions of Obsidian, specifically **0.14.2 and lower**, a lot of websites don't function properly in custom frames. This is due to these older versions not having features in place that allow for frames to have special, additional functionality related to cookies and headers.
- When dragging or moving a pane, hovering the mouse over a custom frame will cause it to get stuck or behave unexpectedly. This is an issue with Obsidian itself, which is being investigated.
## 🙏 Acknowledgements
Thanks to [lishid](https://github.com/lishid) for their help with making iframes work in Obsidian for a purpose like this. Also thanks to them for *motivating* me to turn Obsidian Keep into a more versatile plugin, which is how Custom Frames was born.
If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!

2
manifest.json
View file

@ -1,7 +1,7 @@
{
"id": "obsidian-custom-frames",
"name": "Custom Frames",
"version": "2.2.1",
"version": "2.2.2",
"minAppVersion": "0.14.3",
"description": "A plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.",
"author": "Ellpeck",

1251
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "obsidian-custom-frames",
"version": "2.2.1",
"version": "2.2.2",
"description": "An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.",
"main": "main.js",
"scripts": {

34
src/settings-tab.ts
View file

@ -18,7 +18,13 @@ export class CustomFramesSettingTab extends PluginSettingTab {
new Setting(this.containerEl)
.setName("Frame Padding")
.setDesc("The padding that should be left around the inside of custom frame panes, in pixels.")
.setDesc(createFragment(f => {
f.createSpan({ text: "The padding that should be left around the inside of custom frame panes, in pixels." });
f.createEl("br");
f.createEl("em", { text: "Note that decreasing this padding too much will increase the likelihood of a " });
f.createEl("a", { text: "known issue", href: "https://github.com/Ellpeck/ObsidianCustomFrames#%EF%B8%8F-known-issues" });
f.createEl("em", { text: "." });
}))
.addText(t => {
t.inputEl.type = "number";
t.setValue(String(this.plugin.settings.padding));
@ -30,8 +36,17 @@ export class CustomFramesSettingTab extends PluginSettingTab {
for (let frame of this.plugin.settings.frames) {
let heading = this.containerEl.createEl("h3", { text: frame.displayName || "Unnamed Frame" });
let toggle = new ButtonComponent(this.containerEl)
.setButtonText("Show Settings")
.setClass("custom-frames-show")
.onClick(async () => {
content.hidden = !content.hidden;
toggle.setButtonText(content.hidden ? "Show Settings" : "Hide Settings");
});
let content = this.containerEl.createDiv();
content.hidden = true;
new Setting(this.containerEl)
new Setting(content)
.setName("Display Name")
.setDesc("The display name that this frame should have.")
.addText(t => {
@ -42,7 +57,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings();
});
});
new Setting(this.containerEl)
new Setting(content)
.setName("Icon")
.setDesc(createFragment(f => {
f.createSpan({ text: "The icon that this frame's pane should have. The names of any " });
@ -56,7 +71,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings();
});
});
new Setting(this.containerEl)
new Setting(content)
.setName("URL")
.setDesc("The URL that should be opened in this frame.")
.addText(t => {
@ -66,7 +81,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings();
});
});
new Setting(this.containerEl)
new Setting(content)
.setName("Disable on Mobile")
.setDesc("Custom Frames is a lot more restricted on mobile devices and doesn't allow for the same types of content to be displayed. If a frame doesn't work as expected on mobile, it can be disabled.")
.addToggle(t => {
@ -76,7 +91,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings();
});
});
new Setting(this.containerEl)
new Setting(content)
.setName("Page Zoom")
.setDesc("The zoom that this frame's page should be displayed with, as a percentage.")
.addText(t => {
@ -87,7 +102,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings();
});
});
new Setting(this.containerEl)
new Setting(content)
.setName("Additional CSS")
.setDesc(createFragment(f => {
f.createSpan({ text: "A snippet of additional CSS that should be applied to this frame." });
@ -103,8 +118,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings();
});
});
new ButtonComponent(this.containerEl)
new ButtonComponent(content)
.setButtonText("Remove Frame")
.onClick(async () => {
this.plugin.settings.frames.remove(frame);
@ -119,13 +133,13 @@ export class CustomFramesSettingTab extends PluginSettingTab {
info.createSpan({ text: "Note that Obsidian has to be restarted or reloaded to activate a newly added frame.", cls: "mod-warning" });
let addDiv = this.containerEl.createDiv();
addDiv.addClass("custom-frames-add");
let dropdown = new DropdownComponent(addDiv);
dropdown.addOption("new", "Custom");
for (let key of Object.keys(presets))
dropdown.addOption(key, presets[key].displayName);
new ButtonComponent(addDiv)
.setButtonText("Add Frame")
.setClass("custom-frames-add")
.onClick(async () => {
let option = dropdown.getValue();
if (option == "new") {

4
src/settings.ts
View file

@ -35,8 +35,8 @@ div.dwlvNd {
hideOnMobile: true,
zoomLevel: 1,
customCss: `/* hide the menu bar and the "Keep" text */
html > body > div > div > div:first-child,
html > body > div > header > div > div > div > div > a > span {
html > body > div:nth-child(2) > div:nth-child(2) > div:first-child,
html > body > div:first-child > header:first-child > div > div:first-child > div > div:first-child > a:first-child > span {
display: none !important;
}`
},

6
styles.css
View file

@ -11,10 +11,14 @@
background-clip: content-box;
}
.custom-frames-add button {
.custom-frames-add {
margin-left: 10px;
}
.custom-frames-show {
margin-bottom: 18px;
}
.custom-frames-support {
max-width: 50%;
width: 400px;

3
versions.json
View file

@ -3,5 +3,6 @@
"2.0.1": "0.13.33",
"2.1.0": "0.13.33",
"2.2.0": "0.14.3",
"2.2.1": "0.14.3"
"2.2.1": "0.14.3",
"2.2.2": "0.14.3"
}