added the ability to display the frame in the center

Author: Ellpeck

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:
 ~~~

screenshot-big.png

@@ -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> {
-		if (!this.app.workspace.getLeavesOfType(name).length)
-			await this.app.workspace.getRightLeaf(false).setViewState({ type: name });
+	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]);
 	}
 }

src/main.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: ""
                     });

src/settings-tab.ts

@@ -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;
 }