@inizioevoke/astro-core 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -8,6 +8,8 @@
   "main": "./index.ts",
   "exports": {
     "./components": "./src/components/index.ts",
+    "./components/Modal": "./src/components/Modal/index.ts",
+    "./components/ScrollContainer": "./src/components/ScrollContainer/index.ts",
     "./integrations": "./src/integrations/index.ts"
   },
   "files": [
@@ -23,9 +25,7 @@
     "@astrojs/ts-plugin": "^1.10.7",
     "@types/node": "^25.5.0",
     "astro": "^6.0.5",
+    "pdfjs-dist": "^5.6.205",
     "typescript": "^5.9.3"
-  },
-  "dependencies": {
-    "pdfjs-dist": "^5.5.207"
   }
 }

package/src/components/ISI/RightISI.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLTag } from 'astro/types';
+import ScrollContainer, { type Props as ScrollContainerProps } from '../ScrollContainer/ScrollContainer.astro';
+import './RightISI.css';
+
+interface Props {
+  tag?: HTMLTag;
+  scrollContainer?: ScrollContainerProps;
+  headerButton?: boolean;
+}
+
+const {
+  tag: TagName = 'aside',
+  scrollContainer,
+  headerButton = false
+} = Astro.props;
+
+const renderHeaderButton  = Astro.slots.has('header-button') || headerButton;
+const renderHeader = Astro.slots.has('header') || renderHeaderButton;
+---
+<TagName class="evo-isi">
+  <div class="evo-isi-wrapper">
+    
+    {renderHeader && <div class="evo-isi-header">
+      <slot name="header" />
+      {renderHeaderButton && 
+      <div class="evo-isi-header-button">
+        <slot name="header-button"><button>Expand</button></slot>
+      </div>}
+    </div>}
+    <div class="evo-isi-text">
+      <ScrollContainer {...scrollContainer}>
+        <slot />
+      </ScrollContainer>
+    </div>
+    {Astro.slots.has('footer') && <div class="evo-isi-footer">
+      <slot name="footer" />
+    </div>}
+  </div>
+</TagName>
+<script>
+  import './RightISI';
+</script>

package/src/components/ISI/RightISI.css

@@ -0,0 +1,31 @@
+:root {
+  --evo-isi-width: 25vw;
+  --evo-isi-width-expanded: 100vw;
+  --evo-isi-height: 100vh;
+  --evo-isi-header-height: 0px;
+  --evo-isi-footer-height: 0px;
+}
+.evo-isi {
+  position: fixed;
+  right: 0;
+  top: 0;
+  display: block;
+  width: var(--evo-isi-width);
+  height: var(--evo-isi-height);
+  overflow: hidden;
+  z-index: 99;
+  background-color: #ffffff;
+
+  transform-origin: right top;
+  transition-property: width;
+  transition-duration: 500ms;
+  transition-timing-function: ease-in-out;
+
+  .evo-isi-wrapper {
+    .evo-isi-text {
+      .evo-scroll-container {
+        /* height: calc(var(--evo-isi-height) - var(--evo-isi-header-height) - var(--evo-isi-footer-height)) */
+      }
+    }
+  }
+}

package/src/components/ISI/RightISI.md

@@ -0,0 +1,23 @@
+# RightISI
+
+```jsx
+<RightISI
+  tag="aside" // optional
+  scrollContainer={{  // optional
+    /* ScrollContainer props */
+  }}
+  headerButton={true} // optional
+>
+  <!-- optional -->
+  <div slot="header">Header Content</div>
+  
+  <!-- optional -->
+  <Fragment slot="header-button"><button>My Button</button></Fragment>
+
+  <!-- ISI content -->
+  <h2>Important Safety Information</h2>
+  <p>Content</p>
+
+  <div slot="footer">Footer Content</div>
+</RightISI>
+```

package/src/components/ISI/RightISI.ts

@@ -0,0 +1,27 @@
+import * as ScrollContainer from '../ScrollContainer/ScrollContainer';
+
+const isi = document.querySelector('.evo-isi') as HTMLElement;
+const isiHeader = isi.querySelector<HTMLElement>('.evo-isi-header');
+const isiFooter = isi.querySelector<HTMLElement>('.evo-isi-footer');
+const isiText = isi.querySelector('.evo-isi-text') as HTMLElement;
+
+export function resize() {
+  if (isi) {
+    const isiStyle = getComputedStyle(isi);
+    const isiHeight = parseInt(isiStyle.height);
+    const headerHeight = isiHeader ? parseInt(getComputedStyle(isiHeader).height) : 0;
+    const footerHeight = isiFooter ? parseInt(getComputedStyle(isiFooter).height) : 0;
+
+    const isiTextStyle = getComputedStyle(isiText);
+    const textPadTop = parseInt(isiTextStyle.paddingTop);
+    const textPadBot = parseInt(isiTextStyle.paddingBottom);
+
+    const scrollContainer = ScrollContainer.getScrollContainer(isi.querySelector('.evo-isi-text .evo-scroll-container') as HTMLElement);
+    if (scrollContainer) {
+      const height = isiHeight - headerHeight - footerHeight - textPadTop - textPadBot;
+      ScrollContainer.resize(scrollContainer, { height });
+    }
+  }
+}
+addEventListener('load', resize, { passive: true });
+window.addEventListener('resize', resize, { passive: true });

package/src/components/Modal/Modal.ts

@@ -1,18 +1,46 @@
 
 export type ModalAnimation = 'none' | 'fade';
+export type ModalEventCallback = (modal: HTMLElement | HTMLElement[]) => void;
+interface ModalEventCallbackItem {
+  once?: boolean;
+  callback: ModalEventCallback;
+}
+
+type ModalEventType = 'show' | 'hide';
+type ModalEventTypeCallbacks = Record<ModalEventType, Set<ModalEventCallbackItem>>;
+const callbacks = new Map<HTMLElement, ModalEventTypeCallbacks>();
 
 interface ModalOptions {
-  animation?: ModalAnimation;
+  animation?: ModalAnimation; 
 }
-export function show(selector: string | HTMLElement, { animation = 'fade' }: ModalOptions = {}) {
+interface ModalShowOptions extends ModalOptions {
+  on?: {
+    show?: ModalEventCallback,
+    hide?: ModalEventCallback
+  }
+}
+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 });
+      }
       await hide(null, { animation, hideOverlay: false });
       __showOverlay(animation);
 
       modal.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
-      setTimeout(resolve, animation !== 'none' ? animationDuration : 0);
+      setTimeout(() => {
+        triggerEventCallbacks(modal, 'show');
+        if (on?.show) {
+          try {
+            on.show(modal);
+          } catch (err) {
+            console.log(err);
+          }
+        }
+        resolve();
+      }, animation !== 'none' ? animationDuration : 0);
     }
   });
 }
@@ -22,11 +50,17 @@ 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 } = {}) {
+  onEvent('show', selector, { once, callback });
+}
 
 interface HideModalOptions extends ModalOptions {
   hideOverlay?: boolean;
+  on?: {
+    hide?: ModalEventCallback
+  }
 }
-export function hide(selector?: string | HTMLElement | (string | HTMLElement)[] | null, { animation, hideOverlay = true }: HideModalOptions = {}) {
+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) => {
@@ -49,6 +83,13 @@ export function hide(selector?: string | HTMLElement | (string | HTMLElement)[]
       hides.push(__hide(overlay, animation));
     }
     await Promise.all(hides);
+    if (on?.hide) {
+      try {
+        on.hide(modals);
+      } catch (err) {
+        console.log(err);
+      }
+    }
     resolve();
   });
 }
@@ -59,10 +100,14 @@ function __hide(modal: HTMLElement, animation: ModalAnimation) {
     modal.classList.remove(showClass);
     setTimeout(() => {
       modal.classList.remove('evo-modal-visible', `evo-modal-hide-${animation}`);
+      triggerEventCallbacks(modal, 'hide');
       resolve();
     }, animation !== 'none' ? animationDuration : 0);
   });
 }
+export function onHide(selector: string | HTMLElement, callback: ModalEventCallback, { once }: { once?: boolean } = {}) {
+  onEvent('hide', selector, { once, callback });
+}
 
 /**
  * Moves the overlay element by appending it to an element
@@ -75,6 +120,40 @@ export function appendOverlay(selector: string | HTMLElement) {
   }
 }
 
+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);
+  }
+}
+
+function triggerEventCallbacks(modal: HTMLElement, eventType: 'show' | 'hide') {
+  if (modal) {
+    const modalCallbacks = callbacks.get(modal);
+    if (modalCallbacks && modalCallbacks[eventType]) {
+      const items = [...modalCallbacks[eventType]];
+      const keep: ModalEventCallbackItem[] = [];
+      for (const item of items) {
+        try {
+          item.callback(modal);
+        } catch (err) {
+          console.log(err);
+        } finally {
+          if (!item.once) {
+            keep.push(item);
+          }
+        }
+      }
+      callbacks.set(modal, {...modalCallbacks, [eventType]: new Set(keep)});
+    }
+  }
+}
+
 const overlay: HTMLElement = document.querySelector<HTMLElement>('.evo-modal-overlay') ?? (() => {
   // create the overlay
   const div = document.createElement('div');

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal.astro';
+export * from './Modal';

package/src/components/PdfViewer/PdfViewer.ts

@@ -1,4 +1,4 @@
-import * as pdfjs from './pdf.mjs';
+import * as pdfjs from './pdf.min.mjs';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 import * as ScrollContainer from '../ScrollContainer/ScrollContainer';