diff --git a/README.md b/README.md index 8680d34..36fd8db 100644 --- a/README.md +++ b/README.md @@ -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: ~~~ diff --git a/screenshot-big.png b/screenshot-big.png new file mode 100644 index 0000000..08e065c Binary files /dev/null and b/screenshot-big.png differ diff --git a/src/main.ts b/src/main.ts index 3830b3f..4636d07 100644 --- a/src/main.ts +++ b/src/main.ts @@ -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 { - if (!this.app.workspace.getLeavesOfType(name).length) - await this.app.workspace.getRightLeaf(false).setViewState({ type: name }); + private async openLeaf(name: string, center: boolean): Promise { + 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]); } } \ No newline at end of file diff --git a/src/settings-tab.ts b/src/settings-tab.ts index 84fe84a..f260375 100644 --- a/src/settings-tab.ts +++ b/src/settings-tab.ts @@ -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: "" }); diff --git a/src/settings.ts b/src/settings.ts index 28e752d..9976f2e 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -9,6 +9,7 @@ export const presets: Record = { icon: "edit", hideOnMobile: true, addRibbonIcon: true, + openInCenter: true, zoomLevel: 1, customCss: "" }, @@ -18,6 +19,7 @@ export const presets: Record = { 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; }