@inizioevoke/astro-core 1.7.0 → 2.0.1

package/src/components/Modal/Modal.ts

@@ -1,206 +1,223 @@
 
+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 type ModalEventCallback = (modal: HTMLElement | HTMLElement[]) => void;
-interface ModalEventCallbackItem {
-  once?: boolean;
-  callback: ModalEventCallback;
-}
-interface ModalEventCallbackArgs { 
-  once?: boolean 
+
+export interface ModalEventDetail {
+  modal: EvoModalElement;
+  replacedBy?: EvoModalElement;
 }
+export type ModalEventCallback = (e: CustomEvent<ModalEventDetail>) => void;
 
-type ModalEventType = 'show' | 'hide' | 'overlay';
-type ModalEventTypeCallbacks = Record<ModalEventType, Set<ModalEventCallbackItem>>;
-const callbacks = new Map<HTMLElement, ModalEventTypeCallbacks>();
+declare global {
+  interface ElementEventMap {
+    'evomodal-visible': CustomEvent<ModalEventDetail>,
+    'evomodal-hidden': CustomEvent<ModalEventDetail>
+  }
+}
+type ModalEventType = 'evomodal-visible' | 'evomodal-hidden';
 
-interface ModalOptions {
-  animation?: ModalAnimation; 
+export interface IEvoModalElement {
+  showModal(opts?: { animation?: ModalAnimation }): Promise<void>;
+  hideModal(opts?: { animation?: ModalAnimation }): Promise<void>;
 }
-interface ModalShowOptions extends ModalOptions {
-  on?: {
-    show?: ModalEventCallback,
-    hide?: ModalEventCallback
+export class EvoModalElement extends HTMLElement implements IEvoModalElement {
+  #animation: ModalAnimation = 'fade';
+
+  constructor() {
+    super();
   }
-}
-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 });
+
+  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('evomodal-visible', this));
+          resolve();
+        }, animation !== 'none' ? getAnimationDuration(this) : 0)
+      } else {
+        resolve();
       }
-      await hide(null, { animation, hideOverlay: false });
-      __showOverlay(animation);
+    });
+  }
 
-      modal.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
-      setTimeout(() => {
-        triggerEventCallbacks(modal, 'show');
-        if (on?.show) {
-          try {
-            on.show(modal);
-          } catch (err) {
-            console.log(err);
-          }
+  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('evomodal-hidden', this, { replacedBy }));
+          resolve();
+        }, animation !== 'none' ? duration : 0);
+      } else {
         resolve();
-      }, animation !== 'none' ? getAnimationDuration(modal) : 0);
-    }
-  });
-}
-function __showOverlay(animation: ModalAnimation) {
-  if (!overlay.classList.contains('evo-modal-visible')) {
-    overlay.setAttribute('data-evo-modal-animation', animation);
-    overlay.classList.add('evo-modal-visible', `evo-modal-show-${animation}`);
+      }
+    });
   }
 }
-export function onShow(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
-  onEvent('show', selector, { once, callback });
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, EvoModalElement);
 }
 
-interface HideModalOptions extends ModalOptions {
-  hideOverlay?: boolean;
-  on?: {
-    hide?: ModalEventCallback
-  }
-}
-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) => {
-        return typeof m == 'string' ? document.querySelector<HTMLElement>(/^[\.#]/.test(m) ? m : `#${m}`) : m;
-      })
-      .filter(m => m !== undefined && m !== null);
-
-    const hides = [];
-    if (!animation) {
-      if (modals.length) {
-        animation = ([...modals[0].classList.values()].find((c) => { return c.startsWith('evo-modal-show'); }) ?? 'evo-modal-show-fade').substring(15) as ModalAnimation;
-      } else {
-        animation = 'fade';
-      }
-    }
-    for (let modal of modals) {
-      hides.push(__hide(modal, animation));
-    }
-    if (hideOverlay) {
-      hides.push(__hide(overlay, animation));
-    }
-    await Promise.all(hides);
-    if (on?.hide) {
-      try {
-        on.hide(modals);
-      } catch (err) {
-        console.log(err);
-      }
-    }
-    resolve();
+function createModalEvent(type: ModalEventType, modal: EvoModalElement, { replacedBy }: { replacedBy?: EvoModalElement } = {}) {
+  return new CustomEvent(type, {
+    detail: { modal, replacedBy },
+    bubbles: true,
+    composed: true
   });
 }
-function __hide(modal: HTMLElement, animation: ModalAnimation) {
-  return new Promise<void>((resolve) => {
-    const showClass = [...modal.classList.values()].find((c) => { return c.startsWith('evo-modal-show'); }) ?? 'evo-modal-show-fade';
-    modal.classList.add(`evo-modal-hide-${animation}`);
-    modal.classList.remove(showClass);
-    setTimeout(() => {
-      modal.classList.remove('evo-modal-visible', `evo-modal-hide-${animation}`);
-      triggerEventCallbacks(modal, 'hide');
-      resolve();
-    }, animation !== 'none' ? getAnimationDuration(modal) : 0);
-  });
+
+interface ShowModalOpts {
+  animation?: ModalAnimation;
+  onShow?: ModalEventCallback;
+  onHide?: ModalEventCallback;
 }
-export function onHide(selector: string | HTMLElement, callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
-  onEvent('hide', selector, { once, callback });
+
+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('evomodal-visible', onShow, { once: true });
+    }
+    if (typeof onHide == 'function') {
+      modal.addEventListener('evomodal-hidden', onHide, { once: true });
+    }
+    await modal.showModal({ animation });
+    return modal;
+  } else {
+    return undefined;
+  }
 }
 
-/**
- * Moves the overlay element by appending it to an element
- * @param selector 
- */
-export function appendOverlay(selector: string | HTMLElement) {
-  const container = typeof selector == 'string' ? document.querySelector(selector) : selector;
-  if (container) {
-    container.appendChild(overlay);
+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 function onOverlayClick(callback: ModalEventCallback, { once }: ModalEventCallbackArgs = {}) {
-  onEvent('overlay', overlay, { once, callback });
+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 })}));
 }
 
-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);
+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);
+      });
 
-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(element);
-        } catch (err) {
-          console.log(err);
-        } finally {
-          if (!item.once) {
-            keep.push(item);
-          }
-        }
-      }
-      callbacks.set(element, {...eventCallbacks, [eventType]: new Set(keep)});
+    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));
     }
+
   }
 }
 
-const overlay: HTMLElement = document.querySelector<HTMLElement>('.evo-modal-overlay') ?? (() => {
-  // create the overlay
-  const div = document.createElement('div');
-  div.classList.add('evo-modal-overlay');
-  document.body.append(div);
-  return div;
-})();
-overlay.addEventListener('click', () => {
-  hide();
-  triggerEventCallbacks(overlay, 'overlay');
-});
+/**
+ * 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 = 0;
-  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;
+    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;
   }
-  return duration;
-};
 
-document.querySelectorAll<HTMLElement>('.evo-modal').forEach((modal) => {
-  modal.querySelectorAll<HTMLElement>('.evo-modal-action-hide').forEach((btn) => {
-    btn.addEventListener('click', async () => {
-      hide(modal);
-    });
-  });
-});
-
-document.querySelectorAll<HTMLElement>('[data-evo-modal-show]').forEach((trigger) => {
-  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 show(target.getAttribute('data-evo-modal-show') as string, { animation });
-  });
-});
+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/PdfViewer/PdfViewer.astro

@@ -1,5 +1,7 @@
 ---
 import ScrollContainer from '../ScrollContainer/ScrollContainer.astro';
+import type { Layout } from './PdfViewer';
+import type { Scrolling } from '../ScrollContainer/ScrollContainer';
 import './PdfViewer.css';
 
 interface Props {
@@ -11,8 +13,9 @@ interface Props {
   zoom?: 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150;
   page?: number;
   pages?: string;
-  // bookmarks?: Record<string, number>;
-  // bookmarkText?: string;
+  layout?: Layout;
+  fit?: 'width' | 'height' | `${string}%` | number;
+  quality?: number;
   toolbar?: {
     nav?: boolean;
     page?: boolean;
@@ -21,7 +24,7 @@ interface Props {
       placeholder?: string;
       items: Record<string, number>;
     }
-  }
+  } | false;
 }
 const { 
   id, 
@@ -31,6 +34,9 @@ const {
   pdf,
   zoom,
   page = 1,
+  layout = 'vertical',
+  fit = '100%',
+  quality = 2,
   toolbar,
   ...rest 
 } = Astro.props;
@@ -39,13 +45,18 @@ const attrs: Record<string, string> = {...rest};
 if (height) {
   attrs.style = `${attrs.style ? `${attrs.style}${attrs.style.endsWith(';') ? '' : ';'}` : ''}--evo-pdf-viewer-height:${typeof height == 'number' ? `${height}px` : height};`;
 }
+
+const scrollContainerScrolling: Scrolling = toolbar === undefined || (toolbar && toolbar?.zoom !== false) ? 'both' : layout as Scrolling;
 ---
-<div 
+<evo-pdf-viewer 
   id={id} 
-  class:list={['evo-pdf-viewer', cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null]} 
+  class:list={['evo-pdf-viewer', `evo-pdf-viewer-layout-${layout}`, cssClass, theme ? `evo-pdf-viewer-theme-${theme}` : null, toolbar === false ? 'evo-pdf-viewer-toolbar-hidden' : null]} 
   data-pdf={pdf} 
   data-page={page}
   data-zoom={zoom}
+  data-layout={layout}
+  data-fit={fit}
+  data-quality={quality}
   {...attrs} 
 >
   <div class="evo-pdf-viewer-toolbar">
@@ -53,7 +64,7 @@ if (height) {
       <slot name="toolbar-start" />
     </div>
     <div class="evo-pdf-viewer-toolbar-controls">
-      <div class:list={["evo-pdf-viewer-toolbar-arrows", toolbar?.nav === false ? 'evo-hidden' : null]}>
+      <div class:list={["evo-pdf-viewer-toolbar-arrows", toolbar && toolbar.nav === false ? 'evo-hidden' : null]}>
         <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">
@@ -69,10 +80,10 @@ if (height) {
           </slot>
         </button>
       </div>
-      <div class:list={['evo-pdf-viewer-nav-page', toolbar?.page === false ? 'evo-hidden' : null]}>
+      <div class:list={['evo-pdf-viewer-nav-page', toolbar && 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>
-      <div class:list={['evo-pdf-viewer-toolbar-zoom', toolbar?.zoom === false ? 'evo-hidden' : null]}>
+      <div class:list={['evo-pdf-viewer-toolbar-zoom', toolbar && toolbar.zoom === false ? 'evo-hidden' : null]}>
         <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">
@@ -94,10 +105,10 @@ if (height) {
           </slot>
         </button>
       </div>
-      {toolbar?.bookmarks && Object.keys(toolbar.bookmarks.items).length > 0 && 
+      {toolbar && toolbar.bookmarks && Object.keys(toolbar.bookmarks.items).length > 0 && 
       <div class="evo-pdf-viewer-toolbar-bookmarks">
         <select>
-          <option value="" disabled selected hidden>{toolbar.bookmarks.placeholder ?? 'Jump To'}</option>
+          <option value="" disabled selected hidden>{toolbar.bookmarks.placeholder ?? ''}</option>
           {Object.entries(toolbar.bookmarks.items).map((b) => (
             <option value={b[1]}>{b[0]}</option>
           ))}
@@ -109,7 +120,7 @@ if (height) {
     </div>
   </div>
   <div class="evo-pdf-viewer-container">
-    <ScrollContainer>
+    <ScrollContainer scrolling={scrollContainerScrolling}>
       <!-- <div class="evo-pdf-viewer-page">
         
       </div>
@@ -118,4 +129,7 @@ if (height) {
       </div> -->
     </ScrollContainer>
   </div>
-</div>
+</evo-pdf-viewer>
+<script>
+  import './PdfViewer';
+</script>

package/src/components/PdfViewer/PdfViewer.css

@@ -1,11 +1,17 @@
-.evo-pdf-viewer {
-  --evo-pdf-viewer-height: 100%;
+evo-pdf-viewer {
+  --evo-pdf-viewer-height: 100vh;
   --evo-pdf-viewer-toolbar-height: 44px;
   --evo-pdf-viewer-toolbar-align: center;
   --evo-pdf-viewer-scale: 1;
+  --evo-pdf-viewer-padding-top: 0px;
+  --evo-pdf-viewer-padding-right: 8px;
+  --evo-pdf-viewer-padding-bottom: 8px;
+  --evo-pdf-viewer-padding-left: calc(8px + var(--evo-scroll-container-track-width) + var(--evo-scroll-container-width-offset));
 
   position: relative;
+  display: block;
   height: var(--evo-pdf-viewer-height);
+  padding: var(--evo-pdf-viewer-padding-top) var(--evo-pdf-viewer-padding-right) var(--evo-pdf-viewer-padding-bottom) var(--evo-pdf-viewer-padding-left);
   background-color: #f0f0f0;
   box-sizing: border-box;
 
@@ -104,56 +110,27 @@
       }
     }
   }
-  /*.evo-pdf-viewer-nav {
-    position: absolute;
-    left: calc(50% - 80px);
-    top: var(--evo-pdf-viewer-toolbar-height);
-    display: flex;
-    justify-content: space-between;
-    width: 160px;
-    padding: 6px 12px;
-    border-radius: 0 0 12px 12px;
-    background-color: rgba(51, 51, 51, 0.9);
-    backdrop-filter: blur(2px);
-    z-index: 1;
-    box-sizing: border-box;
-
-    button {
-      all: unset;
-      display: block;
-      cursor: pointer;
-      &.evo-pdf-viewer-nav-arrow {
-        width: 24px;
-        height: 24px;
-      }
-      &.evo-pdf-viewer-nav-page {
-        color: white;
-        font-family: sans-serif;
-        font-size: 18px;
-        line-height: 18px;
-      }
-    }
-  }*/
   .evo-pdf-viewer-container {
-    height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-toolbar-height));
-    padding: 0 9px 9px var(--evo-scroll-container-content-padding-right);
+    --evo-pdf-viewer-container-height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-padding-top) - var(--evo-pdf-viewer-toolbar-height) -  var(--evo-pdf-viewer-padding-bottom));
+    height: var(--evo-pdf-viewer-container-height);
     box-sizing: border-box;
 
-    .evo-scroll-container {
+    evo-scroll-container {
       --evo-scroll-container-track-color: #cccccc;
+      /* height: 100%; */
+      height: var(--evo-pdf-viewer-container-height);
       .evo-scroll-content {
-        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        
         .evo-pdf-viewer-page-wrapper {
           display: block;
-          margin: 18px auto;
+          flex-shrink: 0;
+          margin-left: auto;
+          margin-right: auto;
           background-color: white;
-
-          &:first-child {
-            margin-top: 0;
-          }
-          &:last-child {
-            margin-bottom: 0;
-          }
         }
         
         canvas {
@@ -164,7 +141,7 @@
         
         .evo-pdf-viewer-link-overlay {
           pointer-events: auto;
-          z-index: 1;
+          z-index: 0;
           -webkit-tap-highlight-color: transparent;
           user-select: none;
           touch-action: manipulation;
@@ -177,18 +154,50 @@
     }
   }
 
-  /* &.evo-pdf-viewer-theme-modern {
+  &.evo-pdf-viewer-toolbar-hidden {
     .evo-pdf-viewer-toolbar {
-      button {
-        background-color: transparent;
-        border: none;
-        border-radius: 0;
-        &:hover {
-          background-color: rgba(0,0,0,0.05);
+      display: none;
+    }
+    .evo-pdf-viewer-container {
+      --evo-pdf-viewer-container-height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-padding-top) - var(--evo-pdf-viewer-padding-bottom));
+    }
+
+    &.evo-pdf-viewer-layout-horizontal {
+      --evo-pdf-viewer-padding-left: var(--evo-pdf-viewer-padding-right);
+    }
+    &.evo-pdf-viewer-layout-vertical {
+      --evo-pdf-viewer-padding-top: 8px
+    }
+  }
+
+  &.evo-pdf-viewer-layout-horizontal {
+    .evo-pdf-viewer-toolbar {
+      .evo-pdf-viewer-toolbar-arrows {
+        .evo-pdf-viewer-toolbar-prev {
+          transform: rotate(-90deg);
+        }
+        .evo-pdf-viewer-toolbar-next {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+    .evo-pdf-viewer-container {
+      evo-scroll-container {
+        .evo-scroll-content {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+
+          .evo-pdf-viewer-page-wrapper {
+            display: block;
+            margin-top: auto;
+            margin-bottom: auto;
+            flex-shrink: 0;
+          }
         }
       }
     }
-  } */
+  }
   &.evo-pdf-viewer-theme-dark {
     background-color: #555555;
     .evo-pdf-viewer-toolbar {