@inizioevoke/astro-core 1.6.5 → 2.0.0

package/src/lib/gestures/swipe.ts

@@ -0,0 +1,153 @@
+export type SwipeDirection = 'left' | 'right' | 'left-right' | 'up' | 'down' | 'up-down';
+export type SwipeThreshold = '1/4' | '1/3' | '1/2' | number;
+
+export interface OnSwipeHandlerArgs {
+  direction: SwipeDirection;
+  threshold: number;
+  distance: {
+    x: number;
+    y: number;
+  },
+  duration: number;
+}
+export type OnSwipeHandler = (args: OnSwipeHandlerArgs) => void;
+
+export interface SwipeController {
+  enable: () => void;
+  disable: () => void;
+  dispose: () => void;
+}
+
+export function createSwipeListener(direction: SwipeDirection, threshold: SwipeThreshold, handler: OnSwipeHandler): SwipeController {
+  const swipeThreshold: number = typeof threshold == 'number' ? threshold : (() => {
+    const ratios: Record<string, number> = { '1/4': 0.25, '1/3': 0.333, '1/2': 0.5 };
+    switch (direction) {
+      case 'up':
+      case 'down':
+      case 'up-down':
+        return Math.round(window.innerHeight * (ratios[threshold] ?? ratios['1/3'])); // screen.height
+      default:
+        return Math.round(window.innerWidth * (ratios[threshold] ?? ratios['1/3'])); // screen.width
+    }
+  })();
+
+  let listening = false;
+  let x: number = NaN;
+  let y: number = NaN;
+  let start: number = NaN;
+
+  const isUp = (deltaX: number, deltaY: number) => {
+    return Math.abs(deltaY) >= swipeThreshold && Math.abs(deltaX) < swipeThreshold && deltaY > 0;
+  }
+  const isDown = (deltaX: number, deltaY: number) => {
+    return Math.abs(deltaY) >= swipeThreshold && Math.abs(deltaX) < swipeThreshold && deltaY < 0;
+  }
+  const isLeft = (deltaX: number, deltaY: number) => {
+    return Math.abs(deltaX) >= swipeThreshold && Math.abs(deltaY) < swipeThreshold && deltaX > 0;
+  }
+  const isRight = (deltaX: number, deltaY: number) => {
+    return Math.abs(deltaX) >= swipeThreshold && Math.abs(deltaY) < swipeThreshold && deltaX < 0;
+  }
+
+  const handleSwipe = (deltaX: number, deltaY: number, duration: number) => {
+    let swipeDirection: SwipeDirection | undefined = undefined;
+    switch (direction) {
+      case 'up':
+        if (isUp(deltaX, deltaY)) {
+          swipeDirection = 'up';
+        }
+        break;
+      case 'down':
+        if (isDown(deltaX, deltaY)) {
+          swipeDirection = 'down';
+        }
+        break;
+      case 'up-down':
+        if (isUp(deltaX, deltaY)) {
+          swipeDirection = 'up';
+        } else if (isDown(deltaX, deltaY)) {
+          swipeDirection = 'down';
+        }
+        break;
+      case 'left':
+        if (isLeft(deltaX, deltaY)) {
+          swipeDirection = 'left';
+        }
+        break;
+      case 'right':
+        if (isRight(deltaX, deltaY)) {
+          swipeDirection = 'right';
+        }
+        break;
+      case 'left-right':
+        if (isLeft(deltaX, deltaY)) {
+          swipeDirection = 'left';
+        } else if (isRight(deltaX, deltaY)) {
+          swipeDirection = 'right';
+        }
+        break;
+    }
+    if (swipeDirection) {
+      try {
+        handler({ direction: swipeDirection, threshold: swipeThreshold, distance: { x: deltaX, y: deltaY }, duration});
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  }
+
+  const touchstart = (e: TouchEvent) => {
+    if (!listening) return;
+    if (e.touches.length === 1 && isNaN(x)) {
+      start = performance.now();
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
+    } else {
+      start = NaN;
+      x = NaN;
+      y = NaN;
+    }
+  };
+
+  const touchcancel = () => {
+    x = NaN;
+    y = NaN;
+    start = NaN;
+  };
+
+  const touchend = (e: TouchEvent) => {
+    if (!listening) return;
+    if (e.changedTouches.length === 1 && !isNaN(x) && !isNaN(y)) {
+      const deltaX = x - e.changedTouches[0].clientX;
+      const deltaY = y - e.changedTouches[0].clientY;
+      handleSwipe(deltaX, deltaY, performance.now() - start);
+      x = NaN;
+      y = NaN;
+      start = NaN;
+    }
+  };
+
+  const enable = () => {
+    if (!listening) {
+      listening = true;
+      window.addEventListener('touchstart', touchstart, { passive: true });
+      window.addEventListener('touchend', touchend, { passive: true });
+      window.addEventListener('touchcancel', touchcancel, { passive: true });
+    }
+  };
+
+  const disable = () => {
+    listening = false;
+    window.removeEventListener('touchstart', touchstart);
+    window.removeEventListener('touchend', touchend);
+    window.removeEventListener('touchcancel', touchcancel);
+  };
+
+  enable();
+
+  return {
+    enable,
+    disable,
+    dispose: disable
+  };
+}

package/src/lib/index.ts

@@ -1,4 +1,6 @@
 export * as FlipCard from '../components/FlipCard/FlipCard';
+export * as ISI from '../components/ISI/index';
+export * as gestures from './gestures';
 export * as Modal from '../components/Modal/Modal';
 export * as PdfViewer from '../components/PdfViewer/PdfViewer';
 export * as ScrollContainer from '../components/ScrollContainer/ScrollContainer';

package/src/components/ISI/RightISI.css

@@ -1,31 +0,0 @@
-: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.ts

@@ -1,27 +0,0 @@
-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/v2/Modal.astro

@@ -1,42 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-import './Modal.css';
-
-interface Props extends HTMLAttributes<'div'> {
-  id: string;
-  closeButton?: 'default' | 'minimal' | 'none' | 'false' | false;
-  closeButtonAtts?: Record<string, string>;
-}
-
-const {
-  id,
-  closeButton = 'default',
-  closeButtonAtts,
-  ...rest
-} = Astro.props;
-
-const attrs = {...rest};
-const cssClass = attrs['class'] ?? '';
-
-['class'].forEach((a) => {
-  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}`)
-}
-
----
-<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>
-</evo-modal>
-
-<script>
-  import './Modal';
-</script>

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';