@inizioevoke/astro-core 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -17,7 +17,7 @@
     "index.ts"
   ],
   "peerDependencies": {
-    "astro": ">=6.0.0",
+    "astro": ">=5.0.0",
     "typescript": ">=5.0.0"
   },
   "devDependencies": {

package/src/components/Modal/Modal.ts

@@ -5,8 +5,11 @@ interface ModalEventCallbackItem {
   once?: boolean;
   callback: ModalEventCallback;
 }
+interface ModalEventCallbackArgs { 
+  once?: boolean 
+}
 
-type ModalEventType = 'show' | 'hide';
+type ModalEventType = 'show' | 'hide' | 'overlay';
 type ModalEventTypeCallbacks = Record<ModalEventType, Set<ModalEventCallbackItem>>;
 const callbacks = new Map<HTMLElement, ModalEventTypeCallbacks>();
 
@@ -50,7 +53,7 @@ function __showOverlay(animation: ModalAnimation) {
     overlay.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
   }
 }
-export function onShow(selector: string | HTMLElement, callback: ModalEventCallback, { once }: { once?: boolean } = {}) {
+export function onShow(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
   onEvent('show', selector, { once, callback });
 }
 
@@ -105,7 +108,7 @@ function __hide(modal: HTMLElement, animation: ModalAnimation) {
     }, animation !== 'none' ? animationDuration : 0);
   });
 }
-export function onHide(selector: string | HTMLElement, callback: ModalEventCallback, { once }: { once?: boolean } = {}) {
+export function onHide(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
   onEvent('hide', selector, { once, callback });
 }
 
@@ -120,6 +123,10 @@ export function appendOverlay(selector: string | HTMLElement) {
   }
 }
 
+export function onOverlayClick(callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
+  onEvent('overlay', overlay, { once, callback });
+}
+
 function onEvent(type: ModalEventType, selector: string | HTMLElement, callbackItem: ModalEventCallbackItem) {
   let modal = typeof selector == 'string' ? document.querySelector<HTMLElement>(/^[\.#]/.test(selector) ? selector : `#${selector}`) : selector;
   if (modal) {
@@ -132,15 +139,15 @@ function onEvent(type: ModalEventType, selector: string | HTMLElement, callbackI
   }
 }
 
-function triggerEventCallbacks(modal: HTMLElement, eventType: 'show' | 'hide') {
-  if (modal) {
-    const modalCallbacks = callbacks.get(modal);
-    if (modalCallbacks && modalCallbacks[eventType]) {
-      const items = [...modalCallbacks[eventType]];
+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(modal);
+          item.callback(element);
         } catch (err) {
           console.log(err);
         } finally {
@@ -149,7 +156,7 @@ function triggerEventCallbacks(modal: HTMLElement, eventType: 'show' | 'hide') {
           }
         }
       }
-      callbacks.set(modal, {...modalCallbacks, [eventType]: new Set(keep)});
+      callbacks.set(element, {...eventCallbacks, [eventType]: new Set(keep)});
     }
   }
 }
@@ -163,6 +170,7 @@ const overlay: HTMLElement = document.querySelector<HTMLElement>('.evo-modal-ove
 })();
 overlay.addEventListener('click', () => {
   hide();
+  triggerEventCallbacks(overlay, 'overlay');
 });
 
 const animationDuration = (() => {

package/src/components/Modal/ModalOverlay.astro

@@ -1 +1,14 @@
-<div class="evo-modal-overlay"></div>
+---
+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/ScrollContainer/ScrollContainer.ts

@@ -4,7 +4,8 @@ export interface IScrollContainer {
   resize(args: { height?: number }): void;
   refresh(): void;
 }
-export class ScrollContainer implements IScrollContainer {
+
+class ScrollContainer implements IScrollContainer {
   #container: HTMLElement;
   #content: HTMLElement;
   #track: HTMLElement;
@@ -17,7 +18,7 @@ export class ScrollContainer implements IScrollContainer {
   #mousemoveHandler: any = undefined;
 
   constructor(container: HTMLElement) {
-    const _this = this;
+    // const _this = this;
     this.#container = container;
     this.#content = container.querySelector('.evo-scroll-content') as HTMLElement;
     this.#track = container.querySelector('.evo-scroll-track') as HTMLElement;
@@ -25,19 +26,9 @@ export class ScrollContainer implements IScrollContainer {
     this.#isDragging = false;
     this.#startY = 0;
     this.#startScrollTop = 0;
-    // this.#enabled = enabled ?? true;
-
-    this.#thumb.addEventListener('mousedown', (e) => { 
-      _this.#thumbMouseDown(e); 
-    }, { passive: true });
-
-    // this.#thumb.addEventListener('mouseup', (e) => { 
-    //   _this.#thumbMouseUp(e); 
-    // }, { passive: true });
 
-    this.#content.addEventListener('scroll', () => { 
-      _this.#scrollContent(); 
-    }, { passive: true });
+    this.#thumb.addEventListener('mousedown', this.#thumbMouseDown.bind(this), { passive: true });
+    this.#content.addEventListener('scroll', this.#scrollContent.bind(this), { passive: true });
   }
 
   scroll({ left, top, behavior = 'auto' }: { left?: number | string, top?: number | string, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
@@ -113,6 +104,7 @@ export class ScrollContainer implements IScrollContainer {
   }
 
   #thumbMouseMove(e: MouseEvent) {
+    // console.log(performance.now());
     if (this.#isDragging) {
       const deltaY = e.clientY - this.#startY;
       const scrollRatio =
@@ -141,30 +133,30 @@ export class ScrollContainer implements IScrollContainer {
   }
 }
 
-export function resize(scrollContainer: string | HTMLElement | ScrollContainer, { height }: { height?: number }) {
+export function resize(selector: string | HTMLElement | ScrollContainer, { height }: { height?: number }) {
   if (typeof height == 'number') {
-    const sc = getScrollContainer(scrollContainer);
+    const sc = getScrollContainer(selector);
     if (sc) {
       sc.resize({ height })
     }
   }
 }
 
-export function refresh(scrollContainer?: string | HTMLElement | ScrollContainer) {
-  if (scrollContainer) {
-    const sc = getScrollContainer(scrollContainer);
+export function refresh(selector?: string | HTMLElement | ScrollContainer) {
+  if (selector) {
+    const sc = getScrollContainer(selector);
     if (sc) {
       sc.refresh()
     }
   } else {
-    [...scrollContainers.values()].forEach((scrollContainer) => {
-      scrollContainer.refresh();
+    [...scrollContainers.values()].forEach((selector) => {
+      selector.refresh();
     });
   }
 }
 
-export function getScroll(scrollContainer: string | HTMLElement | ScrollContainer): { left: number, top: number } | undefined {
-  const sc = getScrollContainer(scrollContainer);
+export function getScroll(selector: string | HTMLElement | ScrollContainer): { left: number, top: number } | undefined {
+  const sc = getScrollContainer(selector);
   if (sc) {
     return sc.getScroll();
   } else {
@@ -172,8 +164,8 @@ export function getScroll(scrollContainer: string | HTMLElement | ScrollContaine
   }
 }
 
-export function scroll(scrollContainer: string | HTMLElement | ScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
-  const sc = getScrollContainer(scrollContainer);
+export function scroll(selector: string | HTMLElement | ScrollContainer, { left, top, behavior = 'auto' }: { left?: number, top?: number, behavior?: 'auto' | 'instant' | 'smooth' } = {}) {
+  const sc = getScrollContainer(selector);
   if (sc) {
     const current = sc.getScroll();
     sc.scroll({ left: left ?? current.left, top: top ?? current.top, behavior });
@@ -188,6 +180,21 @@ export function getScrollContainer(selector: string | HTMLElement | ScrollContai
   return key ? scrollContainers.get(key) : undefined;
 }
 
+export function createScrollContainer(selector: string | HTMLElement): IScrollContainer | undefined {
+  const container = typeof selector == 'string' ? document.querySelector<HTMLElement>(selector) : selector;
+  if (container) {
+    if (scrollContainers.has(container)) {
+      return scrollContainers.get(container);
+    } else {
+      const scrollContainer = new ScrollContainer(container);
+      initNewScrollContainer(container, scrollContainer);
+      return scrollContainer;
+    }
+  } else {
+    return undefined;
+  }
+}
+
 function getPaddingY(content: HTMLElement): number {
   const style = getComputedStyle(content);
   return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
@@ -221,16 +228,20 @@ const mutationObserver = new MutationObserver((mutations) => {
   });
 });
 
-document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
-  const scrollContainer = new ScrollContainer(container);
+function initNewScrollContainer(container: HTMLElement, scrollContainer: ScrollContainer) {
   scrollContainers.set(container, scrollContainer);
 
   intersectionObserver.observe(container);
   mutationObserver.observe(container, { attributes: true, childList: true, subtree: true });
+}
+
+document.querySelectorAll<HTMLElement>('.evo-scroll-container').forEach((container) => {
+  const scrollContainer = new ScrollContainer(container);
+  initNewScrollContainer(container, scrollContainer);
 });
 
 window.addEventListener('resize', () => {
   [...scrollContainers.values()].forEach((scrollContainer) => {
     scrollContainer.refresh();
   });
-});
+}, { passive: true });