@inizioevoke/astro-core 1.7.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/astro-core",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -11,13 +11,11 @@
     "./integrations": "./src/integrations/index.ts",
     "./lib": "./src/lib/index.ts",
     "./lib/FlipCard": "./src/components/FlipCard/index.ts",
+    "./lib/ISI": "./src/components/ISI/index.ts",
     "./lib/Modal": "./src/components/Modal/index.ts",
     "./lib/PdfViewer": "./src/components/PdfViewer/index.ts",
     "./lib/ScrollContainer": "./src/components/ScrollContainer/index.ts",
-    "./lib/gestures": "./src/lib/gestures/index.ts",
-    "./v2": "./src/components/v2.ts",
-    "./v2/lib": "./src/lib/v2.ts",
-    "./v2/lib/Modal": "./src/components/Modal/v2/index.ts"
+    "./lib/gestures": "./src/lib/gestures/index.ts"
   },
   "files": [
     "src",

package/src/components/FlipCard/FlipCard.ts

@@ -1,6 +1,12 @@
 const TAG_NAME = 'evo-flip-card';
 
-export class EvoFlipCardElement extends HTMLElement {
+export interface IEvoFlipCardElement {
+  isFlipped: boolean;
+  toggle: () => void;
+  flipFront: () => void;
+  flipBack: () => void;
+}
+export class EvoFlipCardElement extends HTMLElement implements IEvoFlipCardElement {
 
   static get observedAttributes(): string[] {
     return ['flipped'];
@@ -34,26 +40,26 @@ export class EvoFlipCardElement extends HTMLElement {
     }
   }
 
-  get flipped() {
+  get isFlipped() {
     return this.#flipped;
   }
-  set flipped(value: boolean | string) {
-    this.#flipped = typeof value == 'string' ? value.toLowerCase() === 'true' : value === true;
+  set isFlipped(value: boolean) {
+    this.#flipped = value === true;
     this.setAttribute('flipped', this.#flipped.toString());
   }
 
-  toggleFlipped() {
-    this.flipped = !this.flipped;
+  toggle() {
+    this.isFlipped = !this.isFlipped;
   }
   flipFront() {
-    this.flipped = false;
+    this.isFlipped = false;
   }
   flipBack() {
-    this.flipped = true;
+    this.isFlipped = true;
   }
 
   #handleTriggerClick() {
-    this.toggleFlipped();
+    this.toggle();
   }
 }
 if (!customElements.get(TAG_NAME)) {

package/src/components/ISI/{RightISI.astro → Right/RightISI.astro}

@@ -1,31 +1,38 @@
 ---
-import type { HTMLTag } from 'astro/types';
+import type { HTMLAttributes } from 'astro/types';
 import ScrollContainer, { type Props as ScrollContainerProps } from '../ScrollContainer/ScrollContainer.astro';
 import './RightISI.css';
 
-interface Props {
-  tag?: HTMLTag;
+interface Props extends HTMLAttributes<'div'> {
   scrollContainer?: ScrollContainerProps;
   headerButton?: boolean;
+  transitionDuration?: number
 }
 
 const {
-  tag: TagName = 'aside',
   scrollContainer,
-  headerButton = false
+  headerButton = false,
+  transitionDuration = 500,
+  ...rest
 } = Astro.props;
 
+const attrs = {
+  ...rest,
+  'data-transition-duration': transitionDuration.toString()
+};
+
+attrs.style = `--evo-isi-transition-duration:${transitionDuration}ms;${attrs.style ?? ''}`;
+
 const renderHeaderButton  = Astro.slots.has('header-button') || headerButton;
 const renderHeader = Astro.slots.has('header') || renderHeaderButton;
 ---
-<TagName class="evo-isi">
+<evo-isi {...attrs}>
   <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>
+        <slot name="header-button"><button class="evo-isi-toggle">Expand</button></slot>
       </div>}
     </div>}
     <div class="evo-isi-text">
@@ -37,7 +44,7 @@ const renderHeader = Astro.slots.has('header') || renderHeaderButton;
       <slot name="footer" />
     </div>}
   </div>
-</TagName>
+</evo-isi>
 <script>
   import './RightISI';
 </script>

package/src/components/ISI/Right/RightISI.css

@@ -0,0 +1,61 @@
+@layer inizioevoke-astro-components {
+  :root {
+    --evo-isi-width: 25vw;
+    --evo-isi-width-expanded: 100vw;
+    --evo-isi-height: 100vh;
+    --evo-isi-header-height: 0px;
+    --evo-isi-header-padding-top: 0px;
+    --evo-isi-header-padding-bottom: 0px;
+    --evo-isi-text-padding-top: 0px;
+    --evo-isi-text-padding-bottom: 0px;
+    --evo-isi-footer-height: 0px;
+    --evo-isi-footer-padding-top: 0px;
+    --evo-isi-footer-padding-bottom: 0px;
+    --evo-isi-transition-duration: 500ms;
+  }
+  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: var(--evo-isi-transition-duration);
+    transition-timing-function: ease-in-out;
+
+    .evo-isi-wrapper {
+      .evo-isi-header {
+        height: var(--evo-isi-header-height);
+      }
+      .evo-isi-text {
+        height: calc(
+          var(--evo-isi-height) - 
+          var(--evo-isi-header-height) - 
+          var(--evo-isi-header-padding-top) - 
+          var(--evo-isi-header-padding-bottom) - 
+          var(--evo-isi-text-padding-top) - 
+          var(--evo-isi-text-padding-bottom) - 
+          var(--evo-isi-footer-height) -
+          var(--evo-isi-footer-padding-top) - 
+          var(--evo-isi-footer-padding-bottom)
+        );
+        evo-scroll-container {
+          
+        }
+      }
+      .evo-isi-footer {
+        height: var(--evo-isi-footer-height);
+      }
+    }
+
+    &.evo-isi-expand {
+      width: var(--evo-isi-width-expanded);
+    }
+  }
+}

package/src/components/ISI/{RightISI.md → Right/RightISI.md}

@@ -2,7 +2,6 @@
 
 ```jsx
 <RightISI
-  tag="aside" // optional
   scrollContainer={{  // optional
     /* ScrollContainer props */
   }}

package/src/components/ISI/Right/RightISI.ts

@@ -0,0 +1,78 @@
+import { EvoScrollContainerElement } from '../../ScrollContainer/ScrollContainer';
+import type { IEvoIsiElement } from '../index';
+
+const TAG_NAME = 'evo-isi';
+
+export class EvoIsiElement extends HTMLElement implements IEvoIsiElement {
+  #scrollContainer!: EvoScrollContainerElement;
+  #transitionDuration = 500;
+  
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.#transitionDuration = parseInt(this.dataset.transitionDuration ?? '500', 10);
+    this.#scrollContainer = this.querySelector('evo-scroll-container') as EvoScrollContainerElement;
+    this.querySelector<HTMLButtonElement>('.evo-isi-toggle')?.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.toggle();
+    });
+  }
+
+  toggle() {
+    if (!this.classList.contains('evo-isi-expand')) {
+      return this.expand();
+    } else {
+      return this.collapse();
+    }
+  }
+
+  expand() {
+    return new Promise<void>((resolve) => {
+      if (!this.classList.contains('evo-isi-expand')) {
+        this.classList.add('evo-isi-expand');
+        let animating = true;
+        const refresh = () => {
+          if (animating) {
+            this.#scrollContainer.refresh();
+            requestAnimationFrame(refresh);
+          }
+        }
+        refresh();
+        setTimeout(() => {
+          animating = false;
+          resolve();
+        }, this.#transitionDuration);
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  collapse() {
+    return new Promise<void>((resolve) => {
+      if (this.classList.contains('evo-isi-expand')) {
+        this.classList.remove('evo-isi-expand');
+        this.#scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+        let animating = true;
+        const refresh = () => {
+          if (animating) {
+            this.#scrollContainer.refresh();
+            requestAnimationFrame(refresh);
+          }
+        }
+        refresh();
+        setTimeout(() => {
+          animating = false;
+          resolve();
+        }, this.#transitionDuration);
+      } else {
+        resolve();
+      }
+    });
+  }
+}
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, EvoIsiElement);
+}

package/src/components/ISI/Right/index.ts

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

package/src/components/ISI/index.ts

@@ -0,0 +1,5 @@
+export interface IEvoIsiElement {
+  toggle: () => void;
+  expand: () => void;
+  collapse: () => void;
+}

package/src/components/Modal/Modal.astro

@@ -4,13 +4,13 @@ import './Modal.css';
 
 interface Props extends HTMLAttributes<'div'> {
   id: string;
-  closeButton?: boolean;
+  closeButton?: 'default' | 'minimal' | 'none' | 'false' | false;
   closeButtonAtts?: Record<string, string>;
 }
 
 const {
   id,
-  closeButton = true,
+  closeButton = 'default',
   closeButtonAtts,
   ...rest
 } = Astro.props;
@@ -22,14 +22,20 @@ const cssClass = attrs['class'] ?? '';
   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}`)
+}
+
 ---
-<div id={id} class:list={['evo-modal', cssClass]} {...attrs}>
-  {closeButton && <button class="evo-modal-close evo-modal-action-hide" {...closeButtonAtts}><span class="evo-modal-x"><slot name="close">X</slot></span></button>}
+<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>
-</div>
+</evo-modal>
 
 <script>
   import './Modal';

package/src/components/Modal/Modal.css

@@ -8,6 +8,7 @@
     --evo-modal-height: 450px;
     --evo-modal-animation-duration: 300ms;
     --evo-modal-z-index: 99;
+    --evo-modal-overlay-blur: 2px;
   }
 
   .evo-modal-overlay {
@@ -18,11 +19,16 @@
     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 {
+  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);
@@ -36,6 +42,10 @@
     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 */
@@ -50,37 +60,39 @@
       z-index: var(--evo-modal-z-index);
       box-sizing: border-box;
 
-      .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: "";
+      &.evo-modal-theme-default {
+        .evo-modal-x {
           position: absolute;
-          background-color: #ffffff;
-        }
-        &::before {
-          left: 5px;
-          top: 11px;
-          width: 14px;
-          height: 2px;
-        }
-        &::after {
-          left: 11px;
-          top: 5px;
-          width: 2px;
-          height: 14px;
+          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;
+          }
         }
       }
     }
@@ -101,29 +113,27 @@
     }
   }
 
+  .evo-modal-visible {
+    display: block;
+  }
+
   .evo-modal-hide-none {
     display: none;
     opacity: 0;
   }
   .evo-modal-hide-fade {
-    display: block;
+    /* display: block; */
     opacity: 0;
     animation-name: evo_modal_hide;
-    animation-duration: var(--evo-modal-animation-duration);
-    animation-iteration-count: 1;
-    animation-timing-function: linear;
   }
   .evo-modal-show-none {
     display: block;
     opacity: 1;
   }
   .evo-modal-show-fade {
-    display: block;
+    /* display: block; */
     opacity: 1;
     animation-name: evo_modal_show;
-    animation-duration: var(--evo-modal-animation-duration);
-    animation-iteration-count: 1;
-    animation-timing-function: linear;
   }
 
   @keyframes evo_modal_show {