From 6ceced5b8135a50cf2a4826c144bc62aacc1eb41 Mon Sep 17 00:00:00 2001 From: Rafael do Carmo Date: Wed, 31 Jan 2024 20:55:11 -0300 Subject: [PATCH] New features: Button type copy for "copy text to clipboard", and custom color for button background and text (#202) * add custom color to background and text * add type copy text to clipboard --------- Co-authored-by: rafa-carmo --- src/button.ts | 12 ++++++++++++ src/buttonTypes.ts | 5 +++++ src/modal.ts | 44 ++++++++++++++++++++++++++++++++++++++++++++ src/types.ts | 2 ++ src/utils.ts | 4 ++++ 5 files changed, 67 insertions(+) diff --git a/src/button.ts b/src/button.ts index 379d27b..fcd39e9 100644 --- a/src/button.ts +++ b/src/button.ts @@ -11,6 +11,7 @@ import { swap, templater, text, + copyText } from "./buttonTypes"; import { getButtonPosition, getInlineButtonPosition } from "./parser"; @@ -43,6 +44,13 @@ export const createButton = ({ inline ? "button-inline" : "" ] }); + + if(args.customcolor) { + button.style.backgroundColor = args.customcolor; + } + if(args.customtextcolor) { + button.style.color = args.customtextcolor; + } button.innerHTML = args.name; args.id ? button.setAttribute("id", args.id) : ""; button.on("click", "button", () => { @@ -93,6 +101,10 @@ const clickHandler = async ( if (args.type === "link") { link(args); } + // handle copy text buttons + if(args.type === 'copy') { + copyText(args) + } // handle template buttons if (args.type && args.type.includes("template")) { content = await app.vault.read(activeView.file); diff --git a/src/buttonTypes.ts b/src/buttonTypes.ts index 27f497d..c0907c3 100644 --- a/src/buttonTypes.ts +++ b/src/buttonTypes.ts @@ -265,3 +265,8 @@ export const templater = async ( return args; } }; + +export const copyText = ({ action }: Arguments): void => { + navigator.clipboard.writeText(action); + new Notice('Text Copied!'); +} diff --git a/src/modal.ts b/src/modal.ts index 924d8e4..4709000 100644 --- a/src/modal.ts +++ b/src/modal.ts @@ -74,6 +74,8 @@ export class ButtonModal extends Modal { templater: false, class: "", color: "", + customColor: "", + customTextColor: "", blockId: "", }; @@ -119,6 +121,7 @@ export class ButtonModal extends Modal { "swap", "Swap - Create a multi-purpose Inline Button from other Buttons" ); + drop.addOption("copy", "Text - Copy text to clipboard"); const action = formEl.createEl("div"); drop.onChange((value) => { this.outputObject.type = value; @@ -300,6 +303,16 @@ export class ButtonModal extends Modal { textEl.inputEl.replaceWith(this.swapSuggestEl); }); } + if(value === "copy") { + action.empty(); + new Setting(action) + .setName("Text") + .setDesc("Text to copy for clipboard") + .addText((textEl) => { + textEl.setPlaceholder("Text to copy"); + textEl.onChange((value) => (this.outputObject.action = value)); + }) + } }); }); new Setting(formEl) @@ -417,7 +430,34 @@ export class ButtonModal extends Modal { drop.addOption("green", "Green"); drop.addOption("yellow", "Yellow"); drop.addOption("purple", "Purple"); + drop.addOption("custom", "Custom") drop.onChange((value) => { + customBackgroundColor.empty() + customTextColor.empty() + if(value === 'custom') { + this.outputObject.color = ""; + new Setting(customBackgroundColor) + .setName("Background: ") + .addText((el) => { + el.setPlaceholder("#FFFFFF"); + el.onChange((value: string) => { + this.buttonPreviewEl.className = ""; + this.buttonPreviewEl.style.background = value; + this.outputObject.customColor = value; + }); + }) + new Setting(customTextColor) + .setName("Text Color: ") + .addText((el) => { + el.setPlaceholder("#000000"); + el.onChange((value: string) => { + this.buttonPreviewEl.className = ""; + this.buttonPreviewEl.style.color = value; + this.outputObject.customTextColor = value; + }); + }); + return + } this.outputObject.color = value; const buttonClass = this.buttonPreviewEl .getAttribute("class") @@ -447,6 +487,10 @@ export class ButtonModal extends Modal { } }); }); + + const customBackgroundColor = formEl.createEl("div"); + const customTextColor = formEl.createEl("div"); + formEl.createDiv("modal-button-container", (buttonContainerEl) => { buttonContainerEl .createEl("button", { diff --git a/src/types.ts b/src/types.ts index 4ce7e60..a626f23 100644 --- a/src/types.ts +++ b/src/types.ts @@ -45,6 +45,8 @@ export interface Arguments { action?: string; style?: string; color?: string; + customColor?: string; + customTextColor?: string; class?: string; id?: string; remove?: string; diff --git a/src/utils.ts b/src/utils.ts index 31727f0..e16ccf1 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -23,6 +23,8 @@ interface OutputObject { templater: boolean; class: string; color: string; + customColor: string; + customTextColor: string; blockId: string; } @@ -39,6 +41,8 @@ export const insertButton = (app: App, outputObject: OutputObject): void => { outputObject.templater === true && buttonArr.push(`templater ${outputObject.templater}`); outputObject.color && buttonArr.push(`color ${outputObject.color}`); + outputObject.customColor && buttonArr.push(`customColor ${outputObject.customColor}`); + outputObject.customTextColor && buttonArr.push(`customTextColor ${outputObject.customTextColor}`); outputObject.class && buttonArr.push(`class ${outputObject.class}`); buttonArr.push("```"); outputObject.blockId