added a unique class to each custom frame

Closes #53

src/frame.ts

@@ -1,5 +1,5 @@
 import { Platform } from "obsidian";
-import { CustomFrameSettings, CustomFramesSettings } from "./settings";
+import { CustomFrameSettings, CustomFramesSettings, getId } from "./settings";
 
 export class CustomFrame {
 
@@ -30,6 +30,7 @@ export class CustomFrame {
             style += `transform: scale(${this.data.zoomLevel}); transform-origin: 0 0;`;
         }
         this.frame.addClass("custom-frames-frame");
+        this.frame.addClass(`custom-frames-${getId(this.data)}`);
         this.frame.setAttribute("style", style);
 
         let src = this.data.url;

src/main.ts

@@ -1,6 +1,6 @@
 import { Plugin, Platform } from "obsidian";
 import { CustomFrame } from "./frame";
-import { CustomFramesSettings, defaultSettings, getIcon } from "./settings";
+import { CustomFramesSettings, defaultSettings, getIcon, getId } from "./settings";
 import { CustomFramesSettingTab } from "./settings-tab";
 import { CustomFrameView } from "./view";
 
@@ -14,7 +14,7 @@ export default class CustomFramesPlugin extends Plugin {
 		for (let frame of this.settings.frames) {
 			if (!frame.url || !frame.displayName)
 				continue;
-			let name = `custom-frames-${frame.displayName.toLowerCase().replace(/\s/g, "-")}`;
+			let name = `custom-frames-${getId(frame)}`;
 			if (Platform.isMobileApp && frame.hideOnMobile) {
 				console.log(`Skipping frame ${name} which is hidden on mobile`);
 				continue;

src/settings.ts

@@ -14,21 +14,21 @@ export const presets: Record<string, CustomFrameSettings> = {
         forceIframe: false,
         customCss: ""
     },
-	"detexify": {
-		url: "https://detexify.kirelabs.org/classify.html",
-		displayName: "Detexify",
-		icon: "type",
-		hideOnMobile: true,
-		addRibbonIcon: true,
-		openInCenter: false,
-		zoomLevel: .95,
-		forceIframe: false,
-		customCss: `/* hide info clutter and ad banner */
+    "detexify": {
+        url: "https://detexify.kirelabs.org/classify.html",
+        displayName: "Detexify",
+        icon: "type",
+        hideOnMobile: true,
+        addRibbonIcon: true,
+        openInCenter: false,
+        zoomLevel: .95,
+        forceIframe: false,
+        customCss: `/* hide info clutter and ad banner */
 #classify--info-area,
 .adsbygoogle {
 	display: none !important
 }`
-	},
+    },
     "calendar": {
         url: "https://calendar.google.com/calendar/u/0/r/day",
         displayName: "Google Calendar",
@@ -135,3 +135,7 @@ export interface CustomFrameSettings {
 export function getIcon(settings: CustomFrameSettings) {
     return settings.icon ? `lucide-${settings.icon}` : "documents";
 }
+
+export function getId(settings: CustomFrameSettings) {
+    return settings.displayName.toLowerCase().replace(/\s/g, "-");
+}