Merge pull request #45 from numbersprotocol/feature-apply-modal-color

feat(modal): apply color to modal
numbersprotocol · Dec 23, 2024 · e6e0277 · e6e0277
2 parents 357c4fc + 9ee123f
commit e6e0277
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/src/modal/modal-manager.ts b/src/modal/modal-manager.ts
@@ -32,17 +32,17 @@ export class ModalManager {
   }
 
   async updateModal(options: ModalOptions, delay = 150): Promise<void> {
+    const existed = this.modalElement !== null;
     let modal = this.getModal();
     modal.modalHidden = true;
     await new Promise((resolve) => setTimeout(resolve, delay));
     const nidChanged = modal.nid !== options.nid;
-    if (nidChanged) {
+    if (existed && nidChanged) {
       modal.clearModalOptions();
       this.removeModal();
       modal = this.getModal();
     }
     modal.modalHidden = false;
-    this.registerRootClickListener();
     modal.updateModalOptions(options);
 
     if (nidChanged) {
@@ -78,6 +78,7 @@ export class ModalManager {
         this.removeModal();
       });
       document.body.appendChild(this.modalElement);
+      this.registerRootClickListener();
       return this.modalElement;
     }
     return this.modalElement;

diff --git a/src/modal/modal.ts b/src/modal/modal.ts
@@ -110,7 +110,10 @@ export class CaptureEyeModal extends LitElement {
   updateModalOptions(options: ModalOptions) {
     if (options.nid) this.nid = options.nid;
     if (options.layout) this.layout = options.layout;
-    if (options.color) this._color = options.color;
+    if (options.color !== undefined && options.color !== this._color) {
+      this._color = options.color;
+      this.updateModalColor();
+    }
     if (options.copyrightZoneTitle)
       this._copyrightZoneTitle = options.copyrightZoneTitle;
     if (
@@ -547,6 +550,40 @@ export class CaptureEyeModal extends LitElement {
     );
   }
 
+  private updateModalColor() {
+    // Set primary color
+    this.style.setProperty('--primary-color', this._color);
+
+    // Set hover color
+    this.style.setProperty('--hover-color', '');  // Clear the color
+    if (!this._color) {
+      return;
+    }
+
+    const ctx = document.createElement('canvas').getContext('2d');
+    if (!ctx) {
+      return;
+    }
+
+    ctx.fillStyle = this._color;
+    let hoverColor = ctx.fillStyle;
+    const hexPattern = /^#[0-9a-fA-F]{6}$/;
+    if (!hexPattern.test(hoverColor)) {
+      return;
+    }
+
+    function fadeColor(start: number): number {
+      const n = parseInt(hoverColor.substring(start, start + 2), 16);
+      return Math.round(n + (255 - n) * 0.5);
+    }
+
+    const r = fadeColor(1);
+    const g = fadeColor(3);
+    const b = fadeColor(5);
+    hoverColor = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    this.style.setProperty('--hover-color', hoverColor);
+  }
+
   private updateModelPosition(closeButton: HTMLElement) {
     if (!this._position) {
       return;