@inizioevoke/astro-core 1.5.2 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.5.2",
+  "version": "1.6.1",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -12,7 +12,10 @@
     "./lib": "./src/lib/index.ts",
     "./lib/FlipCard": "./src/components/FlipCard/index.ts",
     "./lib/Modal": "./src/components/Modal/index.ts",
-    "./lib/ScrollContainer": "./src/components/ScrollContainer/index.ts"
+    "./lib/ScrollContainer": "./src/components/ScrollContainer/index.ts",
+    "./v2": "./src/components/v2.ts",
+    "./v2/lib": "./src/lib/v2.ts",
+    "./v2/lib/Modal": "./src/components/Modal/v2/index.ts"
   },
   "files": [
     "src",
@@ -27,7 +30,7 @@
     "@astrojs/ts-plugin": "^1.10.7",
     "@types/node": "^25.5.0",
     "astro": "^6.0.5",
-    "pdfjs-dist": "^5.6.205",
+    "pdfjs-dist": "^5.7.284",
     "typescript": "^5.9.3"
   }
 }

package/src/components/FlipCard/FlipCard.css

@@ -1,50 +1,52 @@
-evo-flip-card {
-  --evo-flip-card-width: 640px;
-  --evo-flip-card-height: 360px;
-  --evo-flip-card-duration: 0.6s;
+@layer inizioevoke-astro-components {
+  evo-flip-card {
+    --evo-flip-card-width: 640px;
+    --evo-flip-card-height: 360px;
+    --evo-flip-card-duration: 0.6s;
 
-  display: block;
-  width: var(--evo-flip-card-width);
-  height: var(--evo-flip-card-height);
-  perspective: 1000px;
-
-  .evo-flip-card-wrapper {
-    position: relative;
-    width: 100%;
+    display: block;
+    width: var(--evo-flip-card-width);
     height: var(--evo-flip-card-height);
-    transition: transform var(--evo-flip-card-duration);
-    transform-style: preserve-3d;
-    transform-origin: center center;
+    perspective: 1000px;
 
-    .evo-flip-card-front,
-    .evo-flip-card-back {
-      position: absolute;
-      left: 0;
-      top: 0;
+    .evo-flip-card-wrapper {
+      position: relative;
       width: 100%;
       height: var(--evo-flip-card-height);
-      -webkit-backface-visibility: hidden;
-      backface-visibility: hidden;
+      transition: transform var(--evo-flip-card-duration);
       transform-style: preserve-3d;
-      transform: rotateY(0deg);
       transform-origin: center center;
 
-      .evo-flip-card-trigger {
+      .evo-flip-card-front,
+      .evo-flip-card-back {
         position: absolute;
-        top: 8px;
-        right: 8px;
-        cursor: pointer;
-        z-index: 99;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: var(--evo-flip-card-height);
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform-style: preserve-3d;
+        transform: rotateY(0deg);
+        transform-origin: center center;
+
+        .evo-flip-card-trigger {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          cursor: pointer;
+          z-index: 99;
+        }
+      }
+      .evo-flip-card-back {
+        transform: rotateY(180deg);
       }
     }
-    .evo-flip-card-back {
-      transform: rotateY(180deg);
-    }
-  }
 
-  &[flipped="true"] {
-    .evo-flip-card-wrapper {
-      transform: rotateY(180deg);
+    &[flipped="true"] {
+      .evo-flip-card-wrapper {
+        transform: rotateY(180deg);
+      }
     }
   }
 }

package/src/components/FlipCard/FlipCard.ts

@@ -7,17 +7,33 @@ export class EvoFlipCardElement extends HTMLElement {
   }
 
   #flipped: boolean = false;
+  #boundHandleTriggerClick: (e: MouseEvent) => void;
 
   constructor() {
     super();
+    this.#boundHandleTriggerClick = this.#handleTriggerClick.bind(this);
   }
 
   connectedCallback() {
     [...this.querySelectorAll<HTMLButtonElement>('button.evo-flip-card-trigger')].forEach((btn) => {
-      btn.addEventListener('click', this.#handleTriggerClick.bind(this));
+      btn.addEventListener('click', this.#boundHandleTriggerClick);
     });
   }
 
+  disconnectedCallback() {
+    [...this.querySelectorAll<HTMLButtonElement>('button.evo-flip-card-trigger')].forEach((btn) => {
+      btn.removeEventListener('click', this.#boundHandleTriggerClick);
+    });
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+    if (oldValue === newValue) return;
+    
+    if (name === 'flipped') {
+      this.#flipped = newValue?.toLowerCase() === 'true';
+    }
+  }
+
   get flipped() {
     return this.#flipped;
   }

package/src/components/Modal/Modal.ts

@@ -43,7 +43,7 @@ export function show(selector: string | HTMLElement, { animation = 'fade', on }:
           }
         }
         resolve();
-      }, animation !== 'none' ? animationDuration : 0);
+      }, animation !== 'none' ? getAnimationDuration(modal) : 0);
     }
   });
 }
@@ -105,7 +105,7 @@ function __hide(modal: HTMLElement, animation: ModalAnimation) {
       modal.classList.remove('evo-modal-visible', `evo-modal-hide-${animation}`);
       triggerEventCallbacks(modal, 'hide');
       resolve();
-    }, animation !== 'none' ? animationDuration : 0);
+    }, animation !== 'none' ? getAnimationDuration(modal) : 0);
   });
 }
 export function onHide(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
@@ -173,10 +173,20 @@ overlay.addEventListener('click', () => {
   triggerEventCallbacks(overlay, 'overlay');
 });
 
-const animationDuration = (() => {
-  const duration = getComputedStyle(document.body).getPropertyValue('--evo-modal-animation-duration');
-  return duration ? /^\d+m?s$/.test(duration) ? parseInt(duration, 10) : parseFloat(duration) * 1000 : 0;
-})();
+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;
+    }
+  }
+  return duration;
+};
 
 document.querySelectorAll<HTMLElement>('.evo-modal').forEach((modal) => {
   modal.querySelectorAll<HTMLElement>('.evo-modal-action-hide').forEach((btn) => {

package/src/components/Modal/v2/Modal.astro

@@ -0,0 +1,42 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import './Modal.css';
+
+interface Props extends HTMLAttributes<'div'> {
+  id: string;
+  closeButton?: 'default' | 'minimal' | 'none' | 'false' | false;
+  closeButtonAtts?: Record<string, string>;
+}
+
+const {
+  id,
+  closeButton = 'default',
+  closeButtonAtts,
+  ...rest
+} = Astro.props;
+
+const attrs = {...rest};
+const cssClass = attrs['class'] ?? '';
+
+['class'].forEach((a) => {
+  delete attrs[a as keyof typeof attrs];
+});
+
+const showCloseButton = closeButton !== false && closeButton !== 'false' && closeButton !== 'none';
+const closeButtonCssClassList = ['evo-modal-close', 'evo-modal-action-hide'];
+if (showCloseButton) {
+  closeButtonCssClassList.push(`evo-modal-theme-${closeButton}`)
+}
+
+---
+<evo-modal id={id} class:list={['evo-modal', cssClass]} {...attrs}>
+  {showCloseButton && <button class:list={closeButtonCssClassList} {...closeButtonAtts}><span class="evo-modal-x"><slot name="close">X</slot></span></button>}
+  <slot name="outer" />
+  <div class="evo-modal-wrapper">
+    <slot />
+  </div>
+</evo-modal>
+
+<script>
+  import './Modal';
+</script>

package/src/components/Modal/v2/Modal.css

@@ -0,0 +1,155 @@
+
+@layer inizioevoke-astro-components {
+  :root {
+    --evo-modal-viewport-width: 100vw;
+    --evo-modal-viewport-height: 100vh;
+    --evo-modal-position: absolute;
+    --evo-modal-width: 800px;
+    --evo-modal-height: 450px;
+    --evo-modal-animation-duration: 300ms;
+    --evo-modal-z-index: 99;
+    --evo-modal-overlay-blur: 2px;
+  }
+
+  .evo-modal-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: none;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(var(--evo-modal-overlay-blur));
+    background-color: rgba(0,0,0,0.66);
+    z-index: calc(var(--evo-modal-z-index) - 1);
+    animation-duration: var(--evo-modal-animation-duration);
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
+
+  evo-modal {
+    position: var(--evo-modal-position);
+    left: calc((var(--evo-modal-viewport-width) - var(--evo-modal-width)) / 2);
+    top: calc((var(--evo-modal-viewport-height) - var(--evo-modal-height)) / 2);
+    width: var(--evo-modal-width);
+    height: var(--evo-modal-height);
+    display: none;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    color: #000000;
+    background-color: #ffffff;
+    z-index: var(--evo-modal-z-index);
+    box-sizing: border-box;
+    animation-duration: var(--evo-modal-animation-duration);
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+
+    .evo-modal-close {
+      /* the button click area is larger than the visible button */
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: 40px;
+      height: 40px;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      z-index: var(--evo-modal-z-index);
+      box-sizing: border-box;
+
+      &.evo-modal-theme-default {
+        .evo-modal-x {
+          position: absolute;
+          right: 8px;
+          top: 8px;
+          display: block;
+          width: 24px;
+          height: 24px;
+          background-color: #990000;
+          border: none;
+          border-radius: 50%;
+          text-align: left;
+          text-indent: -9999px;
+          transform: rotate(45deg);
+
+          &::before,
+          &::after {
+            content: "";
+            position: absolute;
+            background-color: #ffffff;
+          }
+          &::before {
+            left: 5px;
+            top: 11px;
+            width: 14px;
+            height: 2px;
+          }
+          &::after {
+            left: 11px;
+            top: 5px;
+            width: 2px;
+            height: 14px;
+          }
+        }
+      }
+    }
+
+    .evo-modal-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      padding: 1rem;
+      overflow: hidden;
+      box-sizing: border-box;
+
+      h1,h2,h3 {
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  .evo-modal-visible {
+    display: block;
+  }
+
+  .evo-modal-hide-none {
+    display: none;
+    opacity: 0;
+  }
+  .evo-modal-hide-fade {
+    /* display: block; */
+    opacity: 0;
+    animation-name: evo_modal_hide;
+  }
+  .evo-modal-show-none {
+    display: block;
+    opacity: 1;
+  }
+  .evo-modal-show-fade {
+    /* display: block; */
+    opacity: 1;
+    animation-name: evo_modal_show;
+  }
+
+  @keyframes evo_modal_show {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes evo_modal_hide {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/src/components/Modal/v2/Modal.ts

@@ -0,0 +1,219 @@
+
+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 interface ModalEventDetail {
+  modal: EvoModalElement;
+  replacedBy?: EvoModalElement;
+}
+export type ModalEventCallback = (e: CustomEvent<ModalEventDetail>) => void;
+
+declare global {
+  interface ElementEventMap {
+    'evomodalvisible': CustomEvent<ModalEventDetail>,
+    'evomodalhidden': CustomEvent<ModalEventDetail>
+  }
+}
+type ModalEventType = 'evomodalvisible' | 'evomodalhidden';
+
+export class EvoModalElement extends HTMLElement {
+  #animation: ModalAnimation = 'fade';
+
+  constructor() {
+    super();
+  }
+
+  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('evomodalvisible', this));
+          resolve();
+        }, animation !== 'none' ? getAnimationDuration(this) : 0)
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  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('evomodalhidden', this, { replacedBy }));
+          resolve();
+        }, animation !== 'none' ? duration : 0);
+      } else {
+        resolve();
+      }
+    });
+  }
+}
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, EvoModalElement);
+}
+
+function createModalEvent(type: ModalEventType, modal: EvoModalElement, { replacedBy }: { replacedBy?: EvoModalElement } = {}) {
+  return new CustomEvent(type, {
+    detail: { modal, replacedBy },
+    bubbles: true,
+    composed: true
+  });
+}
+
+interface ShowModalOpts {
+  animation?: ModalAnimation;
+  onShow?: ModalEventCallback;
+  onHide?: ModalEventCallback;
+}
+
+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('evomodalvisible', onShow, { once: true });
+    }
+    if (typeof onHide == 'function') {
+      modal.addEventListener('evomodalhidden', onHide, { once: true });
+    }
+    await modal.showModal({ animation });
+    return modal;
+  } else {
+    return undefined;
+  }
+}
+
+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 async function hideModals(animation?: ModalAnimation) {
+  const modals = [...document.querySelectorAll<EvoModalElement>(`${TAG_NAME}.${CSS_VISIBLE}`)];
+  await Promise.all(modals.map((m) => { return m.hideModal({ animation })}));
+}
+
+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);
+      });
+
+    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));
+    }
+
+  }
+}
+
+/**
+ * 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 = 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;
+  }
+
+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/Modal/v2/ModalOverlay.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string;
+}
+
+const {
+  class: cssClass,
+  ...rest
+} = Astro.props;
+
+---
+<div class:list={['evo-modal-overlay', cssClass]} {...rest}><slot /></div>

package/src/components/Modal/v2/ModalTrigger.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import type { ModalAnimation } from './Modal';
+
+interface Props extends HTMLAttributes<'button'> {
+  modal: string;
+  animation?: ModalAnimation;
+}
+
+const {
+  modal,
+  animation,
+  ...rest
+} = Astro.props;
+
+interface ButtonAttrs extends HTMLAttributes<'button'> {
+  'data-evo-modal-show': string;
+  'data-evo-modal-animation'?: ModalAnimation
+};
+
+const attrs: ButtonAttrs = {...rest, 'data-evo-modal-show': modal};
+if (animation) {
+  attrs['data-evo-modal-animation'] = animation;
+}
+
+const cssClass = attrs['class'];
+delete attrs['class'];
+---
+<button class:list={['evo-modal-trigger', cssClass]} {...attrs}><slot /></button>

package/src/components/Modal/v2/index.ts

@@ -0,0 +1 @@
+export * from './Modal';

package/src/components/PdfViewer/PdfViewer.astro

@@ -6,8 +6,9 @@ interface Props {
   id: string;
   class?: string;
   height?: number | string;
-  theme?: 'black' | 'dark';
+  theme?: 'light' | 'dark' | 'black';
   pdf: string;
+  zoom?: 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150;
   page?: number;
   pages?: string;
   bookmarks?: Record<string, number>;
@@ -23,6 +24,7 @@ const {
   height,
   theme,
   pdf,
+  zoom,
   page = 1,
   bookmarks,
   bookmarkText = 'Jump to',
@@ -40,6 +42,7 @@ if (height) {
   class:list={['evo-pdf-viewer', cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null]} 
   data-pdf={pdf} 
   data-page={page}
+  data-zoom={zoom}
   {...attrs} 
 >
   <div class="evo-pdf-viewer-toolbar">