@inizioevoke/astro-core 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.1.0",
+  "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.astro

@@ -12,6 +12,10 @@ interface Props {
   pages?: string;
   bookmarks?: Record<string, number>;
   bookmarkText?: string;
+  toolbar?: {
+    page?: boolean;
+    zoom?: boolean;
+  }
 }
 const { 
   id, 
@@ -22,6 +26,7 @@ const {
   page = 1,
   bookmarks,
   bookmarkText = 'Jump to',
+  toolbar,
   ...rest 
 } = Astro.props;
 
@@ -35,7 +40,6 @@ if (height) {
   class:list={['evo-pdf-viewer', cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null]} 
   data-pdf={pdf} 
   data-page={page}
-  data-bookmarks={btoa(JSON.stringify(bookmarks ?? {}))}
   {...attrs} 
 >
   <div class="evo-pdf-viewer-toolbar">
@@ -43,48 +47,57 @@ if (height) {
       <slot name="toolbar-start" />
     </div>
     <div class="evo-pdf-viewer-toolbar-controls">
-      <button class="evo-pdf-viewer-toolbar-prev">
-        <slot name="toolbar-prev">
-          <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6 15L12 9L18 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </slot>
-      </button>
-      <button class="evo-pdf-viewer-toolbar-next">
-        <slot name="toolbar-next">
-          <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </slot>
-      </button>
-      <div class="evo-pdf-viewer-nav-page">
-        <select></select> of <span class="evo-pdf-viewer-nav-page-count">0</span>
+      <div class="evo-pdf-viewer-toolbar-arrows">
+        <button class="evo-pdf-viewer-toolbar-prev" title="Previous">
+          <slot name="toolbar-prev">
+            <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 15L12 9L18 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </slot>
+        </button>
+        <button class="evo-pdf-viewer-toolbar-next" title="Next">
+          <slot name="toolbar-next">
+            <svg class="evo-pdf-viewer-toolbar-icon" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </slot>
+        </button>
       </div>
-      <button class="evo-pdf-viewer-toolbar-zoom-out">
-        <slot name="toolbar-zoom-out">
-          <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M6 12L18 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </slot>
-      </button>
-      <button class="evo-pdf-viewer-toolbar-zoom-in">
-        <slot name="toolbar-zoom-in">
-          <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M4 12H20M12 4V20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </slot>
-      </button>
-      <button class="evo-pdf-viewer-toolbar-zoom-reset">
-        <slot name="toolbar-zoom-reset">
-          <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M3 3V8M3 8H8M3 8L6 5.29168C7.59227 3.86656 9.69494 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.71683 21 4.13247 18.008 3.22302 14" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </slot>
-      </button>
-      <div class="evo-pdf-viewer-toolbar-bookmarks hidden">
+      <div class:list={['evo-pdf-viewer-nav-page', toolbar?.page === false ? 'evo-hidden' : null]}>
+        <select><option value="1">1</option></select> of <span class="evo-pdf-viewer-nav-page-count">1</span>
+      </div>
+      {toolbar?.zoom !== false &&
+      <div class="evo-pdf-viewer-toolbar-zoom">
+        <button class="evo-pdf-viewer-toolbar-zoom-out" title="Zoom out">
+          <slot name="toolbar-zoom-out">
+            <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 12L18 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </slot>
+        </button>
+        <button class="evo-pdf-viewer-toolbar-zoom-in" title="Zoom in">
+          <slot name="toolbar-zoom-in">
+            <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 12H20M12 4V20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </slot>
+        </button>
+        <button class="evo-pdf-viewer-toolbar-zoom-reset" title="Reset zoom">
+          <slot name="toolbar-zoom-reset">
+            <svg class="evo-pdf-viewer-toolbar-icon" width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 3V8M3 8H8M3 8L6 5.29168C7.59227 3.86656 9.69494 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.71683 21 4.13247 18.008 3.22302 14" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </slot>
+        </button>
+      </div>}
+      {bookmarks && Object.keys(bookmarks).length > 0 && 
+      <div class="evo-pdf-viewer-toolbar-bookmarks">
         <select>
           <option value="" disabled selected hidden>{bookmarkText}</option>
+          {Object.entries(bookmarks).map((b) => (
+            <option value={b[1]}>{b[0]}</option>
+          ))}
         </select>
-      </div>
+      </div>}
     </div>
     <div class="evo-pdf-viewer-toolbar-end">
       <slot name="toolbar-end" />

package/src/components/PdfViewer/PdfViewer.css

@@ -9,6 +9,10 @@
   background-color: #f0f0f0;
   box-sizing: border-box;
 
+  .evo-hidden {
+    display: none !important;
+  }
+
   .evo-pdf-viewer-toolbar {
     display: flex;
     justify-content: var(--evo-pdf-viewer-toolbar-align);
@@ -23,77 +27,71 @@
       align-items: center;
       gap: 8px;
       box-sizing: border-box;
-    }
-    
-    button {
-      &.evo-pdf-viewer-toolbar-prev,
-      &.evo-pdf-viewer-toolbar-next,
-      &.evo-pdf-viewer-toolbar-zoom-out,
-      &.evo-pdf-viewer-toolbar-zoom-in,
-      &.evo-pdf-viewer-toolbar-zoom-reset {
-        all: unset;
+      
+      .evo-pdf-viewer-toolbar-arrows,
+      .evo-pdf-viewer-toolbar-zoom {
         display: flex;
         justify-content: center;
         align-items: center;
-        cursor: pointer;
-        width: 22px;
-        height: 22px;
-        background-color: #ffffff;
-        border: 1px solid #888888;
-        border-radius: 6px;
+        gap: 8px;
+      }
+    }
+    
+    button {
+      all: unset;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      background-color: transparent;
+      /* border: 1px solid #888888;
+      border-radius: 6px; */
+      &:hover {
+        background-color: rgba(0,0,0,0.1);
+      }
 
-        .evo-pdf-viewer-toolbar-icon {
-          path {
-            stroke: #000000;
-          }
+      .evo-pdf-viewer-toolbar-icon {
+        path {
+          stroke: #000000;
         }
       }
     }
-    .evo-pdf-viewer-nav-page {
-      margin: 0 8px;
-      padding: 0 16px;
-      border-left: 1px solid black;
-      border-right: 1px solid black;
+    
+    select {
+      display: inline-block;
+      height: 24px;
+      padding: 0;
+      cursor: pointer;
+      color: #000000;
       font-family: sans-serif;
       font-size: 16px;
       line-height: 24px;
-      select {
-        /*all: unset;*/
-        display: inline-block;
-        height: 24px;
-        padding: 0;
-        cursor: pointer;
-        color: #000000;
-        font-family: sans-serif;
-        font-size: 16px;
-        line-height: 24px;
-        text-align: center;
-        background-color: #ffffff;
-        border: 1px solid #888888;
-        border-radius: 6px;
-      }
+      text-align: center;
+      background-color: rgba(255,255,255,0.5);
+      border: 1px solid rgba(0,0,0,0.1);
+      border-radius: 0;
     }
+    .evo-pdf-viewer-nav-page,
+    .evo-pdf-viewer-toolbar-zoom,
     .evo-pdf-viewer-toolbar-bookmarks {
-      margin: 0 8px;
-      padding: 0 16px;
+      height: 30px;
+      margin: 0;
+      padding: 0 0 0 8px;
       border-left: 1px solid black;
+      font-family: sans-serif;
+      font-size: 16px;
+      line-height: 30px;
+    }
+    .evo-pdf-viewer-nav-page,
+    .evo-pdf-viewer-toolbar-bookmarks {
+      padding: 0 8px 0 16px;
+    }
+
+    .evo-pdf-viewer-toolbar-bookmarks {
       select {
-        /*all: unset;*/
-        display: inline-block;
-        height: 24px;
-        padding: 0 0.25em;
-        cursor: pointer;
-        color: #000000;
-        font-family: sans-serif;
-        font-size: 16px;
-        line-height: 24px;
         text-align: left;
-        background-color: #ffffff;
-        border: 1px solid #888888;
-        border-radius: 6px;
-      }
-      &.hidden {
-        display: none;
       }
     }
   }
@@ -151,15 +149,35 @@
     }
   }
 
+  &.evo-pdf-viewer-theme-modern {
+    .evo-pdf-viewer-toolbar {
+      button {
+        background-color: transparent;
+        border: none;
+        border-radius: 0;
+        &:hover {
+          background-color: rgba(0,0,0,0.05);
+        }
+      }
+    }
+  }
   &.evo-pdf-viewer-theme-dark {
-    background-color: #444444;
+    background-color: #555555;
     .evo-pdf-viewer-toolbar {
-
       button {
-        background-color: #cccccc;
+        &:hover {
+          background-color: #333333;
+        }
+        .evo-pdf-viewer-toolbar-icon {
+          path {
+            stroke: #ffffff;
+          }
+        }
       }
       select {
-        background-color: #cccccc;
+        color: white;
+        border: 1px solid rgba(255,255,255,0.25);
+        background-color: #333333;
       }
       .evo-pdf-viewer-nav-page,
       .evo-pdf-viewer-toolbar-bookmarks {
@@ -167,13 +185,20 @@
         border-color: #cccccc;
       }
     }
+    .evo-pdf-viewer-container {
+      .evo-scroll-container {
+        --evo-scroll-container-track-color: #cccccc;
+        --evo-scroll-container-thumb-color: #333333;
+      }
+    }
   }
   &.evo-pdf-viewer-theme-black {
     background-color: #000000;
     .evo-pdf-viewer-toolbar {
-
       button {
-        background-color: #666666;
+        &:hover {
+          background-color: #333333;
+        }
         .evo-pdf-viewer-toolbar-icon {
           path {
             stroke: #ffffff;
@@ -181,19 +206,20 @@
         }
       }
       select {
-        color: #ffffff;
-        background-color: #666666;
+        color: white;
+        border: 1px solid rgba(255,255,255,0.15);
+        background-color: #333333;
       }
       .evo-pdf-viewer-nav-page,
       .evo-pdf-viewer-toolbar-bookmarks {
         color: #ffffff;
-        border-color: #999999;
+        border-color: #cccccc;
       }
     }
     .evo-pdf-viewer-container {
       .evo-scroll-container {
         --evo-scroll-container-track-color: #666666;
-        --evo-scroll-container-thumb-color: #dddddd;
+        --evo-scroll-container-thumb-color: #cccccc;
       }
     }
   }