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

@@ -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, "-");
+}