From a105ff0c80d320f9f93027480a1be265352d60db Mon Sep 17 00:00:00 2001 From: GnoxNahte Date: Wed, 6 Mar 2024 15:36:06 +0800 Subject: [PATCH] Add settings tab --- embeds/codepen.ts | 8 ++++-- embeds/embedBase.ts | 8 ++++-- embeds/steam.ts | 5 +--- embeds/twitter.ts | 7 ++--- embeds/youtube.ts | 5 ++-- main.ts | 27 +++++++---------- settings-tab.ts | 70 +++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 97 insertions(+), 33 deletions(-) create mode 100644 settings-tab.ts diff --git a/embeds/codepen.ts b/embeds/codepen.ts index be81b06..a3a8226 100644 --- a/embeds/codepen.ts +++ b/embeds/codepen.ts @@ -1,11 +1,10 @@ -import { PluginSettings } from "main"; import { EmbedBase } from "./embedBase"; export class CodepenEmbed extends EmbedBase { name = "CodePen"; regex = new RegExp(/https:\/\/codepen\.io\/(\w+)\/pen\/(\w+)(\?.*)?/); - createEmbed(url: string, settings: Readonly): HTMLElement { + createEmbed(url: string): HTMLElement { const regexMatch = url.match(this.regex); // Shouldn't happen since got test before. But in case if (regexMatch === null) @@ -15,8 +14,11 @@ export class CodepenEmbed extends EmbedBase { const iframe = createEl("iframe"); iframe.src = `https://codepen.io/${regexMatch[1]}/embed/${regexMatch[2]}?default-tab=result&editable=true`; + iframe.setAttribute("loading", "lazy"); + iframe.setAttribute("allowfullscreen", "true"); + iframe.setAttribute("allowtransparency", "true"); - iframe.classList.add("auto-embed", "codepen-embed"); + iframe.classList.add(this.autoEmbedCssClass, "codepen-embed"); return iframe; } diff --git a/embeds/embedBase.ts b/embeds/embedBase.ts index af682a7..93ecd51 100644 --- a/embeds/embedBase.ts +++ b/embeds/embedBase.ts @@ -1,14 +1,18 @@ -import { PluginSettings } from "main"; +import AutoEmbedPlugin from "main"; export abstract class EmbedBase { readonly autoEmbedCssClass: string = "auto-embed"; readonly name: string; // To identify if the anchor link matches the embed type readonly regex: RegExp; + readonly plugin: AutoEmbedPlugin; + constructor(plugin: AutoEmbedPlugin) { + this.plugin = plugin; + } + abstract createEmbed( link: string, - settings: Readonly, ): HTMLElement; onload?(): void; diff --git a/embeds/steam.ts b/embeds/steam.ts index 056d3f9..3b210fe 100644 --- a/embeds/steam.ts +++ b/embeds/steam.ts @@ -1,11 +1,10 @@ -import { PluginSettings } from "main"; import { EmbedBase } from "./embedBase"; export class SteamEmbed extends EmbedBase { name = "Steam"; regex = new RegExp(/https:\/\/store\.steampowered\.com\/app\/(\d+)/); - createEmbed(url: string, settings: Readonly): HTMLElement { + createEmbed(url: string): HTMLElement { const regexMatch = url.match(this.regex); // Shouldn't happen since got test before. But in case if (regexMatch === null) @@ -16,8 +15,6 @@ export class SteamEmbed extends EmbedBase { iframe.src = `https://store.steampowered.com/widget/${regexMatch[1]}/`; - console.log("Class: " + this.autoEmbedCssClass); - iframe.classList.add(this.autoEmbedCssClass, "steam-embed"); return iframe; diff --git a/embeds/twitter.ts b/embeds/twitter.ts index a2f4b61..a5aecad 100644 --- a/embeds/twitter.ts +++ b/embeds/twitter.ts @@ -1,4 +1,3 @@ -import { PluginSettings } from "main"; import { EmbedBase } from "./embedBase"; export class TwitterEmbed extends EmbedBase { @@ -9,7 +8,7 @@ export class TwitterEmbed extends EmbedBase { window.addEventListener("message", this.listenForTwitterResize); } - createEmbed(url: string, settings: Readonly): HTMLElement { + createEmbed(url: string): HTMLElement { const regexMatch = url.match(this.regex); // Shouldn't happen since got test before. But in case if (regexMatch === null) @@ -19,11 +18,11 @@ export class TwitterEmbed extends EmbedBase { const iframe = createEl("iframe"); const postId = regexMatch[1]; - url = "https://platform.twitter.com/embed/Tweet.html?dnt=true&theme=dark&id=" + postId; + url = `https://platform.twitter.com/embed/Tweet.html?dnt=true&theme=${this.plugin.settings.darkMode ? "dark" : "light"}&id=${postId}`; iframe.src = url; iframe.id += "twitter-" + postId; - iframe.classList.add("auto-embed", "twitter-embed"); + iframe.classList.add(this.autoEmbedCssClass, "twitter-embed"); iframe.sandbox.add("allow-forms", "allow-presentation", "allow-same-origin", "allow-scripts", "allow-modals", "allow-popups"); iframe.setAttribute("scrolling", "no"); diff --git a/embeds/youtube.ts b/embeds/youtube.ts index a784ca9..20d8b98 100644 --- a/embeds/youtube.ts +++ b/embeds/youtube.ts @@ -1,4 +1,3 @@ -import { PluginSettings } from "main"; import { EmbedBase } from "./embedBase"; export class YouTubeEmbed extends EmbedBase { @@ -10,7 +9,7 @@ export class YouTubeEmbed extends EmbedBase { // TODO: // - Add support for ignoring si=___id____. Think its for session id, is shown when user clicks the share button and copy the link. regex = new RegExp(/(?:https?:\/\/)?(?:www\.)?youtu(?:\.be\/|be.com\/\S*\b(watch|embed|shorts|v|e|live)\b(?:(?:(?=\/[-a-zA-Z0-9_]{11,}(?!\S))\/)|(?:\S*v=|v\/)))([-a-zA-Z0-9_]{11,})(?:(?:\?|&)t=(\d+)s?)?/); - createEmbed(url: string, settings: Readonly): HTMLElement { + createEmbed(url: string): HTMLElement { const regexMatch = url.match(this.regex); // Shouldn't happen since got test before. But in case if (regexMatch === null) @@ -21,7 +20,7 @@ export class YouTubeEmbed extends EmbedBase { const videoType = regexMatch[1]; // check if its a shorts const videoId = regexMatch[2]; - console.log(regexMatch); + // console.log(regexMatch); if (videoId === undefined) { return this.onErrorCreatingEmbed(); diff --git a/main.ts b/main.ts index 7af5881..dd1b4df 100644 --- a/main.ts +++ b/main.ts @@ -5,27 +5,18 @@ import { Plugin } from 'obsidian'; import { YouTubeEmbed } from 'embeds/youtube'; import { SteamEmbed } from 'embeds/steam'; import { RedditEmbed } from 'embeds/reddit'; +import { AutoEmbedSettingTab, DEFAULT_SETTINGS, PluginSettings } from 'settings-tab'; // Remember to rename these classes and interfaces! -export interface PluginSettings { - mySetting: string; - darkMode: boolean; -} - -const DEFAULT_SETTINGS: PluginSettings = { - mySetting: 'default', - darkMode: true, -} - -export default class MyPlugin extends Plugin { +export default class AutoEmbedPlugin extends Plugin { settings: PluginSettings; embedSources: EmbedBase[] = [ - new TwitterEmbed(), - new YouTubeEmbed(), - new RedditEmbed(), - new SteamEmbed(), - new CodepenEmbed(), + new TwitterEmbed(this), + new RedditEmbed(this), + new YouTubeEmbed(this), + new SteamEmbed(this), + new CodepenEmbed(this), ] async onload() { @@ -35,6 +26,8 @@ export default class MyPlugin extends Plugin { this.embedSources.forEach(source => { source.onload?.(); }); + + this.addSettingTab(new AutoEmbedSettingTab(this.app, this)); this.registerMarkdownPostProcessor((el, ctx) => { console.log("Registering markdown") @@ -86,7 +79,7 @@ export default class MyPlugin extends Plugin { } private createEmbed(embedSource: EmbedBase, link: string) { - const embed = embedSource.createEmbed(link, this.settings); + const embed = embedSource.createEmbed(link); return embed; } diff --git a/settings-tab.ts b/settings-tab.ts new file mode 100644 index 0000000..d19581a --- /dev/null +++ b/settings-tab.ts @@ -0,0 +1,70 @@ +import AutoEmbedPlugin from "main"; +import { App, PluginSettingTab, Setting } from "obsidian"; + +export interface PluginSettings { + // General + mySetting: string; + darkMode: boolean; + + // Twitter + + // Reddit + redditAutoSize: boolean; // Has some problems resizing when there are multiple reddit embeds + + // YouTube + + // Steam + + // Codepen + +} + +export const DEFAULT_SETTINGS: PluginSettings = { + mySetting: 'default', + darkMode: true, + + redditAutoSize: true, +} + +export class AutoEmbedSettingTab extends PluginSettingTab { + plugin: AutoEmbedPlugin; + + constructor(app: App, plugin: AutoEmbedPlugin) { + super(app, plugin); + this.plugin = plugin; + } + + display(): void { + const {containerEl} = this; + + containerEl.empty(); + + new Setting(containerEl) + .setName("Dark Mode") + .setDesc("Sets theme for embeds if the website allows") + .addToggle(toggle => toggle + .setValue(this.plugin.settings.darkMode) + .onChange(async (value) => { + this.plugin.settings.darkMode = value; + await this.plugin.saveSettings(); + })) + + new Setting(containerEl) + .setName("Reddit Auto Size") + .setDesc("There's a bug where it incorreclty assigns the wrong height if there's multiple reddit embeds. This toggles if it should auto resize or set a fixed size instead.") + .setTooltip("If anyone know how to fix it, please help. \nSee GitHub for the source code.") + .addToggle(toggle => toggle + .setValue(this.plugin.settings.darkMode) + .onChange(async (value) => { + this.plugin.settings.darkMode = value; + await this.plugin.saveSettings(); + })) + + } + + // TODO: Reload markdown after closing settings + // hide() { + // console.log("Hiding settings"); + // this.plugin.app.workspace.updateOptions(); + // } +} \ No newline at end of file