New features: Button type copy for "copy text to clipboard", and cust…

…om 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 <rafaelcarmo143@gmail.com>
shabegom · Jan 31, 2024 · 6ceced5 · 6ceced5
1 parent 44d11cf
commit 6ceced5
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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