@inizioevoke/astro-core 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "",
   "license": "ISC",
   "author": "",

package/src/components/Modal/Modal.astro

@@ -1,21 +1,32 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import type { EvoModalElementAttributes } from './Modal.ts';
 import './Modal.css';
 
 export interface Props extends HTMLAttributes<'div'> {
   id: string;
   closeButton?: 'default' | 'minimal' | 'none' | 'false' | false;
   closeButtonAtts?: Record<string, string>;
+  overlayId?: string;
+  overlayCssClass?: string;
 }
 
 const {
   id,
   closeButton = 'default',
   closeButtonAtts,
+  overlayId,
+  overlayCssClass,
   ...rest
 } = Astro.props;
 
-const attrs = {...rest};
+const attrs: EvoModalElementAttributes = {...rest};
+if (overlayId) {
+  attrs['overlay-id'] = overlayId;
+}
+if (overlayCssClass) {
+  attrs['overlay-append-class'] = overlayCssClass;
+}
 const cssClass = attrs['class'] ?? '';
 
 ['class'].forEach((a) => {

package/src/components/Modal/Modal.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "astro/types";
 
 const TAG_NAME = 'evo-modal';
 const CSS_VISIBLE = 'evo-modal-visible';
@@ -21,6 +22,10 @@ declare global {
 }
 type ModalEventType = 'evomodal-visible' | 'evomodal-hidden';
 
+export interface EvoModalElementAttributes extends HTMLAttributes<'div'> {
+  'overlay-id'?: string;
+  'overlay-append-class'?: string;
+}
 export interface IEvoModalElement {
   showModal(opts?: { animation?: ModalAnimation }): Promise<void>;
   hideModal(opts?: { animation?: ModalAnimation }): Promise<void>;
@@ -49,7 +54,11 @@ export class EvoModalElement extends HTMLElement implements IEvoModalElement {
           });
         this.#animation = animation;
         this.classList.add(CSS_VISIBLE, `${CSS_PREFIX_SHOW}-${animation}`);
-        showOverlay(this.#animation);
+        showOverlay({
+          animation: this.#animation,
+          overlayId: this.getAttribute('overlay-id'),
+          overlayAppendCssClass: this.getAttribute('overlay-append-class')
+        });
 
         setTimeout(() => {
           this.dispatchEvent(createModalEvent('evomodal-visible', this));
@@ -62,10 +71,13 @@ export class EvoModalElement extends HTMLElement implements IEvoModalElement {
   }
 
   hideModal({ animation }: { animation?: ModalAnimation } = {}): Promise<void> {
-    return this.#hideModal({ animation });
+    return this.#hideModal({ 
+      animation,
+      overlayId: this.getAttribute('overlay-id')
+    });
   }
 
-  #hideModal({ animation, overlay = true, replacedBy }: { animation?: ModalAnimation, overlay?: boolean, replacedBy?: EvoModalElement } = {}): Promise<void> {
+  #hideModal({ overlayId, animation, overlay = true, replacedBy }: { overlayId?: string | null, animation?: ModalAnimation, overlay?: boolean, replacedBy?: EvoModalElement } = {}): Promise<void> {
     return new Promise<void>((resolve) => {
       if (this.classList.contains(CSS_VISIBLE)) {
         if (!animation) {
@@ -77,7 +89,7 @@ export class EvoModalElement extends HTMLElement implements IEvoModalElement {
         this.classList.add(`${CSS_PREFIX_HIDE}-${animation}`);
         this.classList.remove(`${CSS_PREFIX_SHOW}-${animation}`);
         if (overlay) {
-          hideOverlay({ modal: this, animation: this.#animation, duration });
+          hideOverlay({ overlayId, modal: this, animation: this.#animation, duration });
         }
 
         setTimeout(() => {
@@ -140,17 +152,21 @@ export async function hideModals(animation?: ModalAnimation) {
   await Promise.all(modals.map((m) => { return m.hideModal({ animation })}));
 }
 
-export function showOverlay(animation: ModalAnimation = 'fade') {
-  const overlay = getOverlay();
+export function showOverlay({ overlayId, overlayAppendCssClass, animation = 'fade' }: { overlayId?: string | null, overlayAppendCssClass?: string | null, animation?: ModalAnimation}) {
+  const overlay = getOverlay(overlayId);
   if (overlay && !overlay.classList.contains(CSS_VISIBLE)) {
     overlay.classList.add(CSS_VISIBLE);
+    if (overlayAppendCssClass) {
+      overlay.classList.add(overlayAppendCssClass);
+    }
     requestAnimationFrame(() => {
       overlay.classList.add(`${CSS_PREFIX_SHOW}-${animation}`);
     });
   }
 }
-export function hideOverlay({ modal, animation = 'fade', duration }: { modal?: EvoModalElement, animation?: ModalAnimation, duration?: number } = {}) {
-  const overlay = getOverlay();
+
+export function hideOverlay({ overlayId, modal, animation = 'fade', duration }: { overlayId?: string | null, modal?: EvoModalElement, animation?: ModalAnimation, duration?: number } = {}) {
+  const overlay = getOverlay(overlayId);
   if (overlay && overlay.classList.contains(CSS_VISIBLE)) {
     const cssShow = [...overlay.classList]
       .filter((c) => {
@@ -166,7 +182,13 @@ export function hideOverlay({ modal, animation = 'fade', duration }: { modal?: E
       overlay.classList.add(cssHide[0]);
       overlay.classList.remove(cssShow[0]);
       setTimeout(() => {
-        overlay.classList.remove(CSS_VISIBLE, cssHide[0]);
+        const cssClasses = overlay.getAttribute('data-class')?.split(' ') ?? ['evo-modal-overlay'];
+        const currentClasses = [...overlay.classList];
+        for (const c of currentClasses) {
+          if (!cssClasses.includes(c)) {
+            overlay.classList.remove(c);
+          }
+        }
       }, duration ?? getAnimationDuration(modal));
     }
 
@@ -190,8 +212,16 @@ export function bindTriggers(container: Document | HTMLElement = document) {
   });
 }
 
-function getOverlay() {
-  return document.querySelector<HTMLElement>(`.${CSS_OVERLAY}`);
+function getOverlay(overlayId?: string | null) {
+  let overlay: HTMLElement | null = null;
+  if (overlayId) {
+    overlay = document.querySelector<HTMLElement>(`#${overlayId}`);
+  }
+  if (!overlay) {
+    overlay = document.querySelector<HTMLElement>(`.${CSS_OVERLAY}`);
+  }
+  
+  return overlay;
 }
 
 function getAnimationDuration(element: HTMLElement = document.body) {
@@ -218,7 +248,9 @@ document.addEventListener('DOMContentLoaded', (e) => {
     overlay.classList.add(CSS_OVERLAY);
     document.body.append(overlay);
   }
-  overlay.addEventListener('click', () => {
-    hideModals();
-  }, { passive: true });
+  document.querySelectorAll<HTMLElement>(`.${CSS_OVERLAY}`).forEach((overlay) => {
+    overlay.addEventListener('click', () => {
+      hideModals();
+    }, { passive: true });
+  });
 }, { passive: true });

package/src/components/Modal/ModalOverlay.astro

@@ -1,14 +1,19 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import type { string } from "astro:schema";
 
 export interface Props extends HTMLAttributes<'div'> {
+  id?: string;
   class?: string;
 }
 
 const {
+  id,
   class: cssClass,
   ...rest
 } = Astro.props;
 
+const cssClassList: string[] = ['evo-modal-overlay', cssClass ?? ''];
+
 ---
-<div class:list={['evo-modal-overlay', cssClass]} {...rest}><slot /></div>
+<div id={id} class:list={cssClassList} data-class={cssClassList.filter(c => c.trim() !== '').join(' ')} {...rest}><slot /></div>