@inizioevoke/astro-core 1.7.0 → 2.0.1

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

@@ -1,155 +0,0 @@
-
-@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

@@ -1,219 +0,0 @@
-
-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

@@ -1,14 +0,0 @@
----
-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

@@ -1,29 +0,0 @@
----
-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

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

package/src/components/ScrollContainer/archive-20260417.ts

@@ -1,150 +0,0 @@
-
-export interface IScrollContainer {
-  container: HTMLElement;
-  content: HTMLElement;
-  track: HTMLElement;
-  thumb: HTMLElement;
-  isDragging: boolean;
-  startY: number;
-  startScrollTop: number;
-}
-
-export function resize(scrollContainer: IScrollContainer, { height }: { height?: number }) {
-  if (typeof height == 'number') {
-    scrollContainer.container.style.height = `${height}px`;
-    refresh(scrollContainer);
-  }
-}
-
-export function refresh(scrollContainer?: IScrollContainer) {
-  if (scrollContainer) {
-    updateThumbSize(scrollContainer);
-  } else {
-    [...scrollContainers.values()].forEach((scrollContainer) => {
-      updateThumbSize(scrollContainer);
-    });
-  }
-}
-
-export function getScroll(scrollContainer: IScrollContainer): { left: number, top: number } {
-  return {
-    left: scrollContainer.content.scrollLeft,
-    top: scrollContainer.content.scrollTop
-  };
-}
-export function scroll(scrollContainer: IScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
-  const current = getScroll(scrollContainer);
-  scrollContainer.content.scroll({ left: left ?? current.left, top: top ?? current.top, behavior });
-}
-
-export function getScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
-  const key = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
-  return key ? scrollContainers.get(key) : undefined;
-}
-
-function thumbMouseDown(scrollContainer: IScrollContainer, e: MouseEvent) {
-  scrollContainer.isDragging = true;
-  scrollContainer.startY = e.clientY;
-  scrollContainer.startScrollTop = scrollContainer.content.scrollTop;
-  scrollContainer.thumb.style.cursor = 'grabbing';
-}
-
-function updateThumbSize(scrollContainer: IScrollContainer) {
-  const { container, content, thumb, track } = scrollContainer;
-  const scrollHeight = content.scrollHeight - getPaddingY(content);
-  const containerHeight = container.clientHeight - getPaddingY(container);
-  const visibleRatio = containerHeight / scrollHeight;
-  const thumbHeight = visibleRatio * containerHeight;
-  thumb.style.height = `${thumbHeight > 20 ? thumbHeight : 20}px`;
-  track.style.display = visibleRatio < 1 ? 'block' : 'none';
-}
-
-function scrollContent(scrollContainer: IScrollContainer) {
-  const { container, content, thumb, track } = scrollContainer;
-  const scrollHeight = content.scrollHeight - getPaddingY(content);
-  const containerHeight = container.clientHeight - getPaddingY(container);
-  const scrollRatio = content.scrollTop / (scrollHeight - containerHeight);
-  const top = scrollRatio * (track.clientHeight - thumb.clientHeight);
-  thumb.style.top = `${top}px`;
-}
-
-function getPaddingY(content: HTMLElement): number {
-  const style = getComputedStyle(content);
-  return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
-}
-
-function getScrollContainerElement(element: HTMLElement) {
-  let container = element;
-  while (container && !container.classList.contains('scroll-container')) {
-    container = container.parentElement as HTMLElement;
-  }
-  return container;
-}
-
-function createScrollContainer(container: HTMLElement): IScrollContainer {
-  return {
-    container: container,
-    content: container.querySelector('.evo-scroll-content') as HTMLElement,
-    track: container.querySelector('.evo-scroll-track') as HTMLElement,
-    thumb: container.querySelector('.evo-scroll-thumb') as HTMLElement,
-    isDragging: false,
-    startY: 0,
-    startScrollTop: 0
-  };
-}
-
-const scrollContainers = new Map<HTMLElement, IScrollContainer>();
-
-const intersectionObserver = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        updateThumbSize(scrollContainers.get(entry.target as HTMLElement) as IScrollContainer);
-      }
-    });
-  },
-  { threshold: 0.1 }
-);
-
-const mutationObserver = new MutationObserver((mutations) => {
-  const containers: IScrollContainer[] = [];
-  mutations.forEach((mutation) => {
-    const sc = scrollContainers.get(getScrollContainerElement(mutation.target as HTMLElement));
-    if (sc && !containers.includes(sc)) {
-      containers.push(sc);
-    }
-  });
-  containers.forEach((container) => {
-    updateThumbSize(container);
-  });
-});
-
-document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
-  const scrollContainer = createScrollContainer(container);
-  scrollContainers.set(container, scrollContainer);
-  scrollContainer.thumb.addEventListener('mousedown', (e) => { thumbMouseDown(scrollContainer, e); }, { passive: true });
-  scrollContainer.content.addEventListener('scroll', (e) => { scrollContent(scrollContainer); }, { passive: true });
-  intersectionObserver.observe(container);
-  mutationObserver.observe(container, { childList: true, subtree: true });
-});
-document.addEventListener('mousemove', (e) => {
-  [...scrollContainers.values()].forEach((scrollContainer) => {
-    if (!scrollContainer.isDragging) return;
-    const { container, content, thumb } = scrollContainer;
-    const deltaY = e.clientY - scrollContainer.startY;
-    const scrollRatio =
-      (content.scrollHeight - container.clientHeight) /
-      (container.clientHeight - thumb.clientHeight);
-    scrollContainer.content.scrollTop = scrollContainer.startScrollTop + deltaY * scrollRatio;
-  });
-});
-document.addEventListener('mouseup', () => {
-  [...scrollContainers.values()].forEach((scrollContainer) => {
-    scrollContainer.isDragging = false;
-    scrollContainer.thumb.style.cursor = 'grab';
-  });
-});
-window.addEventListener('resize', () => {
-  [...scrollContainers.values()].forEach((scrollContainer) => {
-    updateThumbSize(scrollContainer);
-  });
-});

package/src/components/v2.ts

@@ -1,3 +0,0 @@
-export { default as Modal } from './Modal/v2/Modal.astro';
-export { default as ModalOverlay } from './Modal/v2/ModalOverlay.astro';
-export { default as ModalTrigger } from './Modal/v2/ModalTrigger.astro';

package/src/lib/v2.ts

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