Ellpeck/ObsidianCustomFrames
1
0
Fork 0
mirror of https://github.com/Ellpeck/ObsidianCustomFrames.git synced 2024-10-31 17:40:51 +01:00
Code Issues Projects Releases Wiki Activity

added the ability to display the frame in the center

Browse source
This commit is contained in:
Ell 2022-04-15 13:34:24 +02:00
parent 5d3254e7bb
commit 75d6d9f91a
5 changed files with 34 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -3,13 +3,17 @@ An Obsidian plugin that turns web apps into panes using iframes with custom styl
⚠️⚠️⚠️ **For header-heavy sites like Google Keep and Todoist 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, where you can see Google Keep attached as a narrow side pane on the right](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/screenshot.png)
![A screenshot of the plugin in action, where you can see Google Calendar opened in the center, and the mouse hovering over the corresponding ribbon button](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/screenshot-big.png)
![A screenshot of the plugin's settings](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/settings.png)
## 🤔 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.
There are also plenty of settings to customize your frame further, including adding custom CSS to the site, adding a ribbon icon, displaying the frame in the center of the editor, and more.
### 🗒️ Markdown Mode
You can also display your custom frames in your Markdown documents. Custom Frames adds a special code block syntax that transforms the code block into a custom frame in Live Preview and Reading mode. Your code block should look like this:
~~~

BIN
screenshot-big.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 123 KiB

12
src/main.ts
View file

@ -26,11 +26,11 @@ export default class CustomFramesPlugin extends Plugin {
this.addCommand({
id: `open-${name}`,
name: `Open ${frame.displayName}`,
callback: () => this.openLeaf(name),
callback: () => this.openLeaf(name, frame.openInCenter),
});
if (frame.addRibbonIcon)
this.addRibbonIcon(getIcon(frame), `Open ${frame.displayName}`, () => this.openLeaf(name));
this.addRibbonIcon(getIcon(frame), `Open ${frame.displayName}`, () => this.openLeaf(name, frame.openInCenter));
} catch {
console.error(`Couldn't register frame ${name}, is there already one with the same name?`);
}
@ -75,9 +75,15 @@ export default class CustomFramesPlugin extends Plugin {
await this.saveData(this.settings);
}
private async openLeaf(name: string): Promise<void> {
private async openLeaf(name: string, center: boolean): Promise<void> {
if (center) {
this.app.workspace.detachLeavesOfType(name);
await this.app.workspace.getUnpinnedLeaf().setViewState({ type: name });
}
else {
if (!this.app.workspace.getLeavesOfType(name).length)
await this.app.workspace.getRightLeaf(false).setViewState({ type: name });
}
this.app.workspace.revealLeaf(this.app.workspace.getLeavesOfType(name)[0]);
}
}

11
src/settings-tab.ts
View file

@ -101,6 +101,16 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings();
});
});
new Setting(content)
.setName("Open in Center")
.setDesc("Whether this frame should be opened in the unpinned center editor rather than one of the panes on the side. This is useful for sites that don't work well in a narrow view, or sites that don't require a note to be open when viewed.")
.addToggle(t => {
t.setValue(frame.openInCenter);
t.onChange(async v => {
frame.openInCenter = v;
await this.plugin.saveSettings();
});
});
new Setting(content)
.setName("Page Zoom")
.setDesc("The zoom that this frame's page should be displayed with, as a percentage.")
@ -159,6 +169,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
icon: "",
hideOnMobile: true,
addRibbonIcon: false,
openInCenter: false,
zoomLevel: 1,
customCss: ""
});

7
src/settings.ts
View file

@ -9,6 +9,7 @@ export const presets: Record<string, CustomFrameSettings> = {
icon: "edit",
hideOnMobile: true,
addRibbonIcon: true,
openInCenter: true,
zoomLevel: 1,
customCss: ""
},
@ -18,6 +19,7 @@ export const presets: Record<string, CustomFrameSettings> = {
icon: "calendar",
hideOnMobile: true,
addRibbonIcon: true,
openInCenter: true,
zoomLevel: 1,
customCss: `/* hide right-side menu, and some buttons */
div.d6McF,
@ -36,6 +38,7 @@ div.dwlvNd {
icon: "files",
hideOnMobile: true,
addRibbonIcon: false,
openInCenter: false,
zoomLevel: 1,
customCss: `/* hide the menu bar and the "Keep" text */
html > body > div:nth-child(2) > div:nth-child(2) > div:first-child,
@ -49,6 +52,7 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
icon: "list-checks",
hideOnMobile: true,
addRibbonIcon: false,
openInCenter: false,
zoomLevel: 1,
customCss: `/* hide the help, home, search, and productivity overview buttons, create extra space, and prevent toast pop-up from acting weird */
[aria-label="Go to Home view"], #quick_find, [aria-label="Productivity"], [aria-label="Help & Feedback"] {
@ -74,6 +78,7 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
icon: "box",
hideOnMobile: true,
addRibbonIcon: true,
openInCenter: true,
zoomLevel: 1,
customCss: ""
},
@ -83,6 +88,7 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
icon: "twitter",
hideOnMobile: true,
addRibbonIcon: false,
openInCenter: false,
zoomLevel: 1,
customCss: ""
}
@ -99,6 +105,7 @@ export interface CustomFrameSettings {
icon: string;
hideOnMobile: boolean;
addRibbonIcon: boolean;
openInCenter: boolean;
zoomLevel: number;
customCss: string;
}