@inizioevoke/astro-core 1.7.0 → 2.0.0

package/src/components/Modal/Modal.ts

@@ -1,206 +1,223 @@
 
+const TAG_NAME = 'evo-modal';
+const CSS_VISIBLE = 'evo-modal-visible';
+const CSS_PREFIX_SHOW = 'evo-modal-show';
+const CSS_PREFIX_HIDE = 'evo-modal-hide';
+const CSS_OVERLAY = 'evo-modal-overlay';
+
 export type ModalAnimation = 'none' | 'fade';
-export type ModalEventCallback = (modal: HTMLElement | HTMLElement[]) => void;
-interface ModalEventCallbackItem {
-  once?: boolean;
-  callback: ModalEventCallback;
-}
-interface ModalEventCallbackArgs { 
-  once?: boolean 
+
+export interface ModalEventDetail {
+  modal: EvoModalElement;
+  replacedBy?: EvoModalElement;
 }
+export type ModalEventCallback = (e: CustomEvent<ModalEventDetail>) => void;
 
-type ModalEventType = 'show' | 'hide' | 'overlay';
-type ModalEventTypeCallbacks = Record<ModalEventType, Set<ModalEventCallbackItem>>;
-const callbacks = new Map<HTMLElement, ModalEventTypeCallbacks>();
+declare global {
+  interface ElementEventMap {
+    'evomodal-visible': CustomEvent<ModalEventDetail>,
+    'evomodal-hidden': CustomEvent<ModalEventDetail>
+  }
+}
+type ModalEventType = 'evomodal-visible' | 'evomodal-hidden';
 
-interface ModalOptions {
-  animation?: ModalAnimation; 
+export interface IEvoModalElement {
+  showModal(opts?: { animation?: ModalAnimation }): Promise<void>;
+  hideModal(opts?: { animation?: ModalAnimation }): Promise<void>;
 }
-interface ModalShowOptions extends ModalOptions {
-  on?: {
-    show?: ModalEventCallback,
-    hide?: ModalEventCallback
+export class EvoModalElement extends HTMLElement implements IEvoModalElement {
+  #animation: ModalAnimation = 'fade';
+
+  constructor() {
+    super();
   }
-}
-export function show(selector: string | HTMLElement, { animation = 'fade', on }: ModalShowOptions = {}) {
-  return new Promise<void>(async (resolve) => {
-    let modal = typeof selector == 'string' ? document.querySelector<HTMLElement>(/^[\.#]/.test(selector) ? selector : `#${selector}`) : selector;
-    if (modal) {
-      if (on?.hide) {
-        onEvent('hide', modal, { once: true, callback: on.hide });
+
+  connectedCallback() {
+    this.querySelectorAll<HTMLElement>('.evo-modal-action-hide').forEach((trigger) => {
+      trigger.addEventListener('click', () => {
+        this.hideModal();
+      }, { passive: true });
+    })
+  }
+
+  showModal({ animation = 'fade' }: { animation?: ModalAnimation } = {}): Promise<void> {
+    return new Promise<void>((resolve) => {
+      if (!this.classList.contains(CSS_VISIBLE)) {
+        [...document.querySelectorAll<EvoModalElement>(`${TAG_NAME}.${CSS_VISIBLE}`)]
+          .forEach((modal) => {
+            modal.#hideModal({ overlay: false, replacedBy: this });
+          });
+        this.#animation = animation;
+        this.classList.add(CSS_VISIBLE, `${CSS_PREFIX_SHOW}-${animation}`);
+        showOverlay(this.#animation);
+
+        setTimeout(() => {
+          this.dispatchEvent(createModalEvent('evomodal-visible', this));
+          resolve();
+        }, animation !== 'none' ? getAnimationDuration(this) : 0)
+      } else {
+        resolve();
       }
-      await hide(null, { animation, hideOverlay: false });
-      __showOverlay(animation);
+    });
+  }
 
-      modal.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
-      setTimeout(() => {
-        triggerEventCallbacks(modal, 'show');
-        if (on?.show) {
-          try {
-            on.show(modal);
-          } catch (err) {
-            console.log(err);
-          }
+  hideModal({ animation }: { animation?: ModalAnimation } = {}): Promise<void> {
+    return this.#hideModal({ animation });
+  }
+
+  #hideModal({ animation, overlay = true, replacedBy }: { animation?: ModalAnimation, overlay?: boolean, replacedBy?: EvoModalElement } = {}): Promise<void> {
+    return new Promise<void>((resolve) => {
+      if (this.classList.contains(CSS_VISIBLE)) {
+        if (!animation) {
+          animation = this.#animation;
+        }
+
+        const duration = getAnimationDuration(this);
+
+        this.classList.add(`${CSS_PREFIX_HIDE}-${this.#animation}`);
+        this.classList.remove(`${CSS_PREFIX_SHOW}-${this.#animation}`);
+        if (overlay) {
+          hideOverlay({ modal: this, animation: this.#animation, duration });
         }
+
+        setTimeout(() => {
+          this.classList.remove('evo-modal-visible', `${CSS_PREFIX_HIDE}-${this.#animation}`);
+          this.dispatchEvent(createModalEvent('evomodal-hidden', this, { replacedBy }));
+          resolve();
+        }, animation !== 'none' ? duration : 0);
+      } else {
         resolve();
-      }, animation !== 'none' ? getAnimationDuration(modal) : 0);
-    }
-  });
-}
-function __showOverlay(animation: ModalAnimation) {
-  if (!overlay.classList.contains('evo-modal-visible')) {
-    overlay.setAttribute('data-evo-modal-animation', animation);
-    overlay.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
+      }
+    });
   }
 }
-export function onShow(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
-  onEvent('show', selector, { once, callback });
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, EvoModalElement);
 }
 
-interface HideModalOptions extends ModalOptions {
-  hideOverlay?: boolean;
-  on?: {
-    hide?: ModalEventCallback
-  }
-}
-export function hide(selector?: string | HTMLElement | (string | HTMLElement)[] | null, { animation, hideOverlay = true, on }: HideModalOptions = {}) {
-  return new Promise<void>(async (resolve) => {
-    const modals: HTMLElement[] = (selector ? Array.isArray(selector) ? selector : [selector] : [...document.querySelectorAll<HTMLElement>('.evo-modal.evo-modal-visible')])
-      .map((m) => {
-        return typeof m == 'string' ? document.querySelector<HTMLElement>(/^[\.#]/.test(m) ? m : `#${m}`) : m;
-      })
-      .filter(m => m !== undefined && m !== null);
-
-    const hides = [];
-    if (!animation) {
-      if (modals.length) {
-        animation = ([...modals[0].classList.values()].find((c) => { return c.startsWith('evo-modal-show'); }) ?? 'evo-modal-show-fade').substring(15) as ModalAnimation;
-      } else {
-        animation = 'fade';
-      }
-    }
-    for (let modal of modals) {
-      hides.push(__hide(modal, animation));
-    }
-    if (hideOverlay) {
-      hides.push(__hide(overlay, animation));
-    }
-    await Promise.all(hides);
-    if (on?.hide) {
-      try {
-        on.hide(modals);
-      } catch (err) {
-        console.log(err);
-      }
-    }
-    resolve();
+function createModalEvent(type: ModalEventType, modal: EvoModalElement, { replacedBy }: { replacedBy?: EvoModalElement } = {}) {
+  return new CustomEvent(type, {
+    detail: { modal, replacedBy },
+    bubbles: true,
+    composed: true
   });
 }
-function __hide(modal: HTMLElement, animation: ModalAnimation) {
-  return new Promise<void>((resolve) => {
-    const showClass = [...modal.classList.values()].find((c) => { return c.startsWith('evo-modal-show'); }) ?? 'evo-modal-show-fade';
-    modal.classList.add(`evo-modal-hide-${animation}`);
-    modal.classList.remove(showClass);
-    setTimeout(() => {
-      modal.classList.remove('evo-modal-visible', `evo-modal-hide-${animation}`);
-      triggerEventCallbacks(modal, 'hide');
-      resolve();
-    }, animation !== 'none' ? getAnimationDuration(modal) : 0);
-  });
+
+interface ShowModalOpts {
+  animation?: ModalAnimation;
+  onShow?: ModalEventCallback;
+  onHide?: ModalEventCallback;
 }
-export function onHide(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
-  onEvent('hide', selector, { once, callback });
+
+export async function showModal(selector: string | HTMLElement, { animation, onShow, onHide }: ShowModalOpts = {}): Promise<EvoModalElement | undefined> {
+  if (typeof selector == 'string' && selector !== TAG_NAME && !/[#\.]/.test(selector)) {
+    selector = `#${selector}`; // assume this is an id
+  }
+  const modal = typeof selector == 'string' ? document.querySelector<EvoModalElement>(selector) : selector;
+  if (modal && modal instanceof EvoModalElement) {
+    if (typeof onShow == 'function') {
+      modal.addEventListener('evomodal-visible', onShow, { once: true });
+    }
+    if (typeof onHide == 'function') {
+      modal.addEventListener('evomodal-hidden', onHide, { once: true });
+    }
+    await modal.showModal({ animation });
+    return modal;
+  } else {
+    return undefined;
+  }
 }
 
-/**
- * Moves the overlay element by appending it to an element
- * @param selector 
- */
-export function appendOverlay(selector: string | HTMLElement) {
-  const container = typeof selector == 'string' ? document.querySelector(selector) : selector;
-  if (container) {
-    container.appendChild(overlay);
+export async function hideModal(selector: string | HTMLElement, animation?: ModalAnimation) {
+  const modal = typeof selector == 'string' ? document.querySelector<EvoModalElement>(selector) : selector;
+  if (modal && modal instanceof EvoModalElement) {
+    await modal.hideModal({ animation });
   }
 }
 
-export function onOverlayClick(callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
-  onEvent('overlay', overlay, { once, callback });
+export async function hideModals(animation?: ModalAnimation) {
+  const modals = [...document.querySelectorAll<EvoModalElement>(`${TAG_NAME}.${CSS_VISIBLE}`)];
+  await Promise.all(modals.map((m) => { return m.hideModal({ animation })}));
 }
 
-function onEvent(type: ModalEventType, selector: string | HTMLElement, callbackItem: ModalEventCallbackItem) {
-  let modal = typeof selector == 'string' ? document.querySelector<HTMLElement>(/^[\.#]/.test(selector) ? selector : `#${selector}`) : selector;
-  if (modal) {
-    const modalCallbacks = callbacks.get(modal) ?? {} as ModalEventTypeCallbacks;
-    if (!modalCallbacks[type]) {
-      modalCallbacks[type] = new Set();
-    }
-    modalCallbacks[type].add(callbackItem);
-    callbacks.set(modal, modalCallbacks);
+export function showOverlay(animation: ModalAnimation = 'fade') {
+  const overlay = getOverlay();
+  if (overlay && !overlay.classList.contains(CSS_VISIBLE)) {
+    overlay.classList.add(CSS_VISIBLE);
+    requestAnimationFrame(() => {
+      overlay.classList.add(`${CSS_PREFIX_SHOW}-${animation}`);
+    });
   }
 }
+export function hideOverlay({ modal, animation = 'fade', duration }: { modal?: EvoModalElement, animation?: ModalAnimation, duration?: number } = {}) {
+  const overlay = getOverlay();
+  if (overlay && overlay.classList.contains(CSS_VISIBLE)) {
+    const cssShow = [...overlay.classList]
+      .filter((c) => {
+        return c.startsWith(CSS_PREFIX_SHOW);
+      });
+    const cssHide = [...overlay.classList]
+      .filter((c) => {
+        return c.startsWith(CSS_PREFIX_HIDE);
+      });
 
-function triggerEventCallbacks(element: HTMLElement, eventType: ModalEventType) {
-  if (element) {
-    const eventCallbacks = callbacks.get(element);
-    if (eventCallbacks && eventCallbacks[eventType]) {
-      const items = [...eventCallbacks[eventType]];
-      const keep: ModalEventCallbackItem[] = [];
-      for (const item of items) {
-        try {
-          item.callback(element);
-        } catch (err) {
-          console.log(err);
-        } finally {
-          if (!item.once) {
-            keep.push(item);
-          }
-        }
-      }
-      callbacks.set(element, {...eventCallbacks, [eventType]: new Set(keep)});
+    if (cssShow.length !== 0 && cssHide.length === 0) {
+      cssHide.push(`${CSS_PREFIX_HIDE}-${animation}`)
+      overlay.classList.add(cssHide[0]);
+      overlay.classList.remove(cssShow[0]);
+      setTimeout(() => {
+        overlay.classList.remove(CSS_VISIBLE, cssHide[0]);
+      }, duration ?? getAnimationDuration(modal));
     }
+
   }
 }
 
-const overlay: HTMLElement = document.querySelector<HTMLElement>('.evo-modal-overlay') ?? (() => {
-  // create the overlay
-  const div = document.createElement('div');
-  div.classList.add('evo-modal-overlay');
-  document.body.append(div);
-  return div;
-})();
-overlay.addEventListener('click', () => {
-  hide();
-  triggerEventCallbacks(overlay, 'overlay');
-});
+/**
+ * Call this function when dynamically adding a trigger to the DOM
+ */
+export function bindTriggers(container = document) {
+  container.querySelectorAll<HTMLElement>('[data-evo-modal-show]').forEach((trigger) => {
+    if (!trigger.hasAttribute('data-evo-modal-bound')) {
+      trigger.setAttribute('data-evo-modal-bound','true');
+      trigger.addEventListener('click', async (e) => {
+        e.preventDefault();
+        const target = (e.currentTarget ?? e.target) as HTMLElement;
+        const animation = (target.getAttribute('data-evo-modal-animation') ?? undefined) as ModalAnimation | undefined;
+        await showModal(target.getAttribute('data-evo-modal-show') as string, { animation });
+      });
+    }
+  });
+}
+
+function getOverlay() {
+  return document.querySelector<HTMLElement>(`.${CSS_OVERLAY}`);
+}
 
 function getAnimationDuration(element: HTMLElement = document.body) {
-  let duration = 0;
-  const cssDuration = getComputedStyle(element).getPropertyValue('--evo-modal-animation-duration').trim();
-  if (cssDuration) {
-    // Match ms or s suffixes
-    const match = cssDuration.match(/^(\d+(?:\.\d+)?)(m?s)$/);
-    if (match) {
-      const value = parseFloat(match[1]);
-      const unit = match[2];
-      duration = unit === 'ms' ? value : value * 1000;
+    let duration = 300;
+    const cssDuration = getComputedStyle(element).getPropertyValue('--evo-modal-animation-duration').trim();
+    if (cssDuration) {
+      // Match ms or s suffixes
+      const match = cssDuration.match(/^(\d+(?:\.\d+)?)(m?s)$/);
+      if (match) {
+        const value = parseFloat(match[1]);
+        const unit = match[2];
+        duration = unit === 'ms' ? value : value * 1000;
+      }
     }
+    return duration;
   }
-  return duration;
-};
 
-document.querySelectorAll<HTMLElement>('.evo-modal').forEach((modal) => {
-  modal.querySelectorAll<HTMLElement>('.evo-modal-action-hide').forEach((btn) => {
-    btn.addEventListener('click', async () => {
-      hide(modal);
-    });
-  });
-});
-
-document.querySelectorAll<HTMLElement>('[data-evo-modal-show]').forEach((trigger) => {
-  trigger.addEventListener('click', async (e) => {
-    e.preventDefault();
-    const target = (e.currentTarget ?? e.target) as HTMLElement;
-    const animation = (target.getAttribute('data-evo-modal-animation') ?? undefined) as ModalAnimation | undefined;
-    await show(target.getAttribute('data-evo-modal-show') as string, { animation });
-  });
-});
+document.addEventListener('DOMContentLoaded', (e) => {
+  bindTriggers();
+
+  if (!getOverlay()) {
+    const overlay = document.createElement('div');
+    overlay.classList.add(CSS_OVERLAY);
+    overlay.addEventListener('click', () => {
+      hideModals();
+    }, { passive: true });
+    document.body.append(overlay);
+  }
+}, { passive: true });

package/src/components/PdfViewer/PdfViewer.astro

@@ -40,7 +40,7 @@ if (height) {
   attrs.style = `${attrs.style ? `${attrs.style}${attrs.style.endsWith(';') ? '' : ';'}` : ''}--evo-pdf-viewer-height:${typeof height == 'number' ? `${height}px` : height};`;
 }
 ---
-<div 
+<evo-pdf-viewer 
   id={id} 
   class:list={['evo-pdf-viewer', cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null]} 
   data-pdf={pdf} 
@@ -97,7 +97,7 @@ if (height) {
       {toolbar?.bookmarks && Object.keys(toolbar.bookmarks.items).length > 0 && 
       <div class="evo-pdf-viewer-toolbar-bookmarks">
         <select>
-          <option value="" disabled selected hidden>{toolbar.bookmarks.placeholder ?? 'Jump To'}</option>
+          <option value="" disabled selected hidden>{toolbar.bookmarks.placeholder ?? ''}</option>
           {Object.entries(toolbar.bookmarks.items).map((b) => (
             <option value={b[1]}>{b[0]}</option>
           ))}
@@ -118,4 +118,7 @@ if (height) {
       </div> -->
     </ScrollContainer>
   </div>
-</div>
+</evo-pdf-viewer>
+<script>
+  import './PdfViewer';
+</script>

package/src/components/PdfViewer/PdfViewer.css

@@ -1,10 +1,11 @@
-.evo-pdf-viewer {
-  --evo-pdf-viewer-height: 100%;
+evo-pdf-viewer {
+  --evo-pdf-viewer-height: 100vh;
   --evo-pdf-viewer-toolbar-height: 44px;
   --evo-pdf-viewer-toolbar-align: center;
   --evo-pdf-viewer-scale: 1;
 
   position: relative;
+  display: block;
   height: var(--evo-pdf-viewer-height);
   background-color: #f0f0f0;
   box-sizing: border-box;
@@ -139,8 +140,9 @@
     padding: 0 9px 9px var(--evo-scroll-container-content-padding-right);
     box-sizing: border-box;
 
-    .evo-scroll-container {
+    evo-scroll-container {
       --evo-scroll-container-track-color: #cccccc;
+      height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-toolbar-height));
       .evo-scroll-content {
         overflow-x: hidden;
         .evo-pdf-viewer-page-wrapper {