added the option to add a ribbon icon

Author: Ellpeck

README.md

@@ -50,11 +50,11 @@ If you create a frame that you think other people would like, don't hesitate to
 ## 🛣️ Roadmap
 - ~~Allow setting a custom icon for each pane~~
 - ~~Allow displaying custom frames in Markdown code blocks~~
+- ~~Add the ability to add a ribbon button for a frame that opens it in the main view~~
 - 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
 - Add more options to Markdown mode, like allowing for back and forward buttons
-- Add the ability to add a ribbon button for a frame that opens it in the main view
 
 ## ⚠️ 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.

src/main.ts

@@ -1,6 +1,6 @@
 import { Plugin, Platform } from "obsidian";
 import { CustomFrame } from "./frame";
-import { CustomFramesSettings, defaultSettings } from "./settings";
+import { CustomFramesSettings, defaultSettings, getIcon } from "./settings";
 import { CustomFramesSettingTab } from "./settings-tab";
 import { CustomFrameView } from "./view";
 
@@ -28,6 +28,9 @@ export default class CustomFramesPlugin extends Plugin {
 					name: `Open ${frame.displayName}`,
 					callback: () => this.openLeaf(name),
 				});
+
+				if (frame.addRibbonIcon)
+					this.addRibbonIcon(getIcon(frame), `Open ${frame.displayName}`, () => this.openLeaf(name));
 			} catch {
 				console.error(`Couldn't register frame ${name}, is there already one with the same name?`);
 			}

src/settings-tab.ts

@@ -91,6 +91,16 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
+            new Setting(content)
+                .setName("Add Ribbon Icon")
+                .setDesc("Whether a button to open this frame should be added to the ribbon.")
+                .addToggle(t => {
+                    t.setValue(frame.addRibbonIcon);
+                    t.onChange(async v => {
+                        frame.addRibbonIcon = 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.")
@@ -147,9 +157,10 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         url: "",
                         displayName: "New Frame",
                         icon: "",
+                        hideOnMobile: true,
+                        addRibbonIcon: false,
                         zoomLevel: 1,
-                        customCss: "",
-                        hideOnMobile: true
+                        customCss: ""
                     });
                 }
                 else {

src/settings.ts

@@ -8,6 +8,7 @@ export const presets: Record<string, CustomFrameSettings> = {
         displayName: "Obsidian Forum",
         icon: "edit",
         hideOnMobile: true,
+        addRibbonIcon: true,
         zoomLevel: 1,
         customCss: ""
     },
@@ -16,6 +17,7 @@ export const presets: Record<string, CustomFrameSettings> = {
         displayName: "Google Calendar",
         icon: "calendar",
         hideOnMobile: true,
+        addRibbonIcon: true,
         zoomLevel: 1,
         customCss: `/* hide right-side menu, and some buttons */
 div.d6McF,
@@ -33,6 +35,7 @@ div.dwlvNd {
         displayName: "Google Keep",
         icon: "files",
         hideOnMobile: true,
+        addRibbonIcon: 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, 
@@ -45,6 +48,7 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
         displayName: "Todoist",
         icon: "list-checks",
         hideOnMobile: true,
+        addRibbonIcon: 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"] {
@@ -69,6 +73,7 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
         displayName: "Notion",
         icon: "box",
         hideOnMobile: true,
+        addRibbonIcon: true,
         zoomLevel: 1,
         customCss: ""
     },
@@ -77,6 +82,7 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
         displayName: "Twitter",
         icon: "twitter",
         hideOnMobile: true,
+        addRibbonIcon: false,
         zoomLevel: 1,
         customCss: ""
     }
@@ -92,6 +98,11 @@ export interface CustomFrameSettings {
     displayName: string;
     icon: string;
     hideOnMobile: boolean;
+    addRibbonIcon: boolean;
     zoomLevel: number;
     customCss: string;
 }
+
+export function getIcon(settings: CustomFrameSettings) {
+    return settings.icon ? `lucide-${settings.icon}` : "documents";
+}

src/view.ts

@@ -1,6 +1,6 @@
-import { ItemView, WorkspaceLeaf, Platform, Menu } from "obsidian";
+import { ItemView, WorkspaceLeaf, Menu } from "obsidian";
 import { CustomFrame } from "./frame";
-import { CustomFrameSettings, CustomFramesSettings } from "./settings";
+import { CustomFrameSettings, CustomFramesSettings, getIcon } from "./settings";
 
 export class CustomFrameView extends ItemView {
 
@@ -72,7 +72,7 @@ export class CustomFrameView extends ItemView {
     }
 
     getIcon(): string {
-        return this.data.icon ? `lucide-${this.data.icon}` : "documents";
+        return getIcon(this.data);
     }
 }