kempo 2.15.2 → 3.1.0

package/src/components/PhotoViewer.js

@@ -0,0 +1,358 @@
+import Component from './Component.js';
+import './Icon.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+const openHandler = Symbol(),
+      closeHandler = Symbol(),
+      overlayHandler = Symbol(),
+      prevHandler = Symbol(),
+      nextHandler = Symbol(),
+      keyboardHandler = Symbol(),
+      imgKeyboardHandler = Symbol();
+export default class PhotoViewer extends Component {
+  constructor(src = '', alt = '', options = {}){
+    super();
+    const {
+      keyboardControls = true,
+      global = false
+    } = options;
+    
+    this.registerAttributes({
+      src,
+      alt,
+      fullscreen: false,
+      keyboardControls,
+      global
+    });
+  }
+  /* Lifecycle Callbacks */
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(this.rendered && n === 'src' && oV !== nV){
+      this.shadowRoot.getElementById('img').src = nV;
+      this.shadowRoot.getElementById('fullscreen-img').src = nV;
+    } else if(this.rendered && n === 'alt' && oV !== nV){
+      this.shadowRoot.getElementById('img').alt = nV;
+      this.shadowRoot.getElementById('fullscreen-img').alt = nV;
+    } else if(this.rendered && n === 'fullscreen' && oV !== nV){
+      dispatchEvent(this, `fullscreenchange ${nV?' fullscreen':' fullscreenclose'}`);
+      this.updateNavigationState();
+      if(this.keyboardControls) {
+        if(nV) {
+          document.addEventListener('keydown', this[keyboardHandler]);
+        } else {
+          document.removeEventListener('keydown', this[keyboardHandler]);
+        }
+      }
+    }
+  }
+  async render(force){
+    if(await super.render(force)){
+      const $img = this.shadowRoot.getElementById('img')
+      $img.src = this.src;
+      $img.alt = this.alt;
+      const $fullImg = this.shadowRoot.getElementById('fullscreen-img')
+      $fullImg.src = this.src;
+      $fullImg.alt = this.alt;
+      
+      // Handle fullscreen caption
+      const fullscreenSlot = this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');
+      if (fullscreenSlot && !fullscreenSlot.assignedNodes().length) {
+        const defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+        const contents = defaultSlot.assignedNodes();
+        contents.forEach(node => {
+          const clone = node.cloneNode(true);
+          this.appendChild(clone).slot = 'fullscreen-caption';
+        });
+      }
+
+      onEvent($img, 'click', this[openHandler]);
+      onEvent($img, 'keydown', this[imgKeyboardHandler]);
+      onEvent(this.shadowRoot.getElementById('close'), 'click', this[closeHandler]);
+      onEvent(this.shadowRoot.getElementById('fullscreen-overlay'), 'click', this[overlayHandler]);
+      onEvent(this.shadowRoot.getElementById('prev'), 'click', this[prevHandler]);
+      onEvent(this.shadowRoot.getElementById('next'), 'click', this[nextHandler]);
+      this.updateNavigationState();
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('img'), 'click', this[openHandler]);
+    offEvent(this.shadowRoot.getElementById('img'), 'keydown', this[imgKeyboardHandler]);
+    offEvent(this.shadowRoot.getElementById('close'), 'click', this[closeHandler]);
+    offEvent(this.shadowRoot.getElementById('fullscreen-overlay'), 'click', this[overlayHandler]);
+    offEvent(this.shadowRoot.getElementById('prev'), 'click', this[prevHandler]);
+    offEvent(this.shadowRoot.getElementById('next'), 'click', this[nextHandler]);
+    if(this.keyboardControls) {
+      document.removeEventListener('keydown', this[keyboardHandler]);
+    }
+  }
+
+  /* Private Methods */
+  [imgKeyboardHandler] = (e) => {
+    if(e.key === 'Enter' && !this.fullscreen) {
+      this.open();
+    }
+  }
+  [openHandler] = () => {
+    this.open();
+  }
+  [closeHandler] = () => {
+    this.close();
+  }
+  [overlayHandler] = (e) => {
+    if (e.target === e.currentTarget) {
+      this.close();
+    }
+  }
+  [prevHandler] = (e) => {
+    e.stopPropagation();
+    const prev = this.getPrevSibling();
+    if(prev) {
+      this.close();
+      prev.open();
+    }
+  }
+  [nextHandler] = (e) => {
+    e.stopPropagation();
+    const next = this.getNextSibling();
+    if(next) {
+      this.close();
+      next.open();
+    }
+  }
+  [keyboardHandler] = (e) => {
+    if(e.key === 'Escape') {
+      this.close();
+    } else if(e.key === 'ArrowLeft') {
+      const prev = this.getPrevSibling();
+      if(prev) {
+        this.close();
+        prev.open();
+      }
+    } else if(e.key === 'ArrowRight') {
+      const next = this.getNextSibling();
+      if(next) {
+        this.close();
+        next.open();
+      }
+    }
+  }
+  getPrevSibling() {
+    if (this.global) {
+      // Find any PhotoViewer in document
+      const viewers = Array.from(document.getElementsByTagName('k-photo-viewer'));
+      const index = viewers.indexOf(this);
+      if (index === -1) return null;
+      return viewers[index === 0 ? viewers.length - 1 : index - 1];
+    } else {
+      // Only look at direct siblings
+      let prev = this.previousElementSibling;
+      while (prev && prev.tagName !== 'K-PHOTO-VIEWER') {
+        prev = prev.previousElementSibling;
+      }
+      if (!prev && this.hasPhotoSiblings()) {
+        prev = this.parentElement.lastElementChild;
+        while (prev && prev.tagName !== 'K-PHOTO-VIEWER') {
+          prev = prev.previousElementSibling;
+        }
+      }
+      return prev;
+    }
+  }
+
+  getNextSibling() {
+    if (this.global) {
+      // Find any PhotoViewer in document
+      const viewers = Array.from(document.getElementsByTagName('k-photo-viewer'));
+      const index = viewers.indexOf(this);
+      if (index === -1) return null;
+      return viewers[index === viewers.length - 1 ? 0 : index + 1];
+    } else {
+      // Only look at direct siblings
+      let next = this.nextElementSibling;
+      while (next && next.tagName !== 'K-PHOTO-VIEWER') {
+        next = next.nextElementSibling;
+      }
+      if (!next && this.hasPhotoSiblings()) {
+        next = this.parentElement.firstElementChild;
+        while (next && next.tagName !== 'K-PHOTO-VIEWER') {
+          next = next.nextElementSibling;
+        }
+      }
+      return next;
+    }
+  }
+
+  hasPhotoSiblings() {
+    if (this.global) {
+      return document.getElementsByTagName('k-photo-viewer').length > 1;
+    }
+    return Array.from(this.parentElement.children)
+      .filter(el => el !== this && el.tagName === 'K-PHOTO-VIEWER')
+      .length > 0;
+  }
+
+  updateNavigationState() {
+    const hasNavigation = this.fullscreen && this.hasPhotoSiblings();
+    const nav = this.shadowRoot.querySelectorAll('.nav-btn');
+    nav.forEach(btn => btn.classList.toggle('d-n', !hasNavigation));
+  }
+
+  /* Public Methods */
+  open(){
+    this.fullscreen = true;
+  }
+  close(){
+    this.fullscreen = false;
+  }
+  toggle(){
+    this.fullscreen = !this.fullscreen;
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="wrapper">
+        <img id="img" tabindex="0" />
+        <div class="caption">
+          <slot></slot>
+        </div>
+        <div id="fullscreen-overlay">
+          <button id="close" class="no-btn">
+            <slot name="close">
+              <k-icon name="close"></k-icon>
+            </slot>
+          </button>
+          <button id="prev" class="nav-btn no-btn">
+            <slot name="prev">
+              <k-icon name="chevron-left"></k-icon>
+            </slot>
+          </button>
+          <button id="next" class="nav-btn no-btn">
+            <slot name="next">
+              <k-icon name="chevron-right"></k-icon>
+            </slot>
+          </button>
+          <div class="content">
+            <img id="fullscreen-img" />
+            <div class="caption">
+              <slot name="fullscreen-caption"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+      }
+      #wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      #img {
+        max-width: 100%;
+        height: auto;
+        cursor: pointer;
+        outline: none;
+        border-radius: var(--img_radius, 0);
+      }
+      #img:focus {
+        box-shadow: var(--focus_shadow);
+      }
+      #fullscreen-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 9999;
+        background: rgba(0,0,0,0.9);
+        padding: 2rem;
+        display: none;
+      }
+      :host([fullscreen]) #fullscreen-overlay {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .content {
+        position: relative;
+        max-width: 100%;
+        max-height: 90vh;
+      }
+      #fullscreen-img {
+        max-height: 75vh;
+        max-width: 100%;
+        object-fit: contain;
+        cursor: default;
+      }
+      #close {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        z-index: 1;
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+      }
+      .nav-btn {
+        position: fixed;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 1rem;
+        opacity: 0.7;
+        font-size: 3rem;
+        -webkit-text-stroke: 1px black;
+        text-stroke: 1px black;
+        text-shadow: 0 0 3px rgba(0,0,0,0.8);
+      }
+      .nav-btn::slotted(*),
+      .nav-btn k-icon {
+        filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));
+      }
+      .nav-btn:hover {
+        opacity: 1;
+      }
+      #prev {
+        left: 1rem;
+      }
+      #next {
+        right: 1rem;
+      }
+      .caption {
+        text-align: center;
+        max-width: 600px;
+        width: fit-content;
+        margin: 1rem auto 0;
+      }
+      #fullscreen-overlay .caption {
+        color: white;
+      }
+      :host([fullscreen]) .caption {
+        color: white;
+      }
+    `;
+  }
+
+  /* Static Members */
+  static observedAttributes = [...super.observedAttributes, 'src', 'alt', 'fullscreen', 'keyboard-controls', 'global'];
+}
+window.customElements.define('k-photo-viewer', PhotoViewer);

package/src/kempo-vars.css

@@ -31,23 +31,23 @@
 :root,
 [theme="light"] {
   color-scheme: light;
-  --c_bg: #f9f9f9;
-  --c_bg__inv: #333;
-  --c_bg__alt: #eee;
-  --c_overscroll: white;
-  --c_border: #ccc;
+  --c_bg: rgb(249, 249, 249);
+  --c_bg__inv: rgb(51, 51, 51);
+  --c_bg__alt: rgb(238, 238, 238);
+  --c_overscroll: rgb(255, 255, 255);
+  --c_border: rgb(204, 204, 204);
   --c_border__inv: var(--d_c_bg_border);
-  --c_primary: #36f;
-  --c_primary__hover: #14d;
-  --c_secondary: #93f;
-  --c_secondary__hover: #71d;
-  --c_success: #080;
-  --c_success__hover: #060;
-  --c_warning: #f60;
-  --c_warning__hover: #d40;
-  --c_danger: #f03;
-  --c_danger__hover: #d01;
-  --c_input_accent: #36f;
+  --c_primary: rgb(51, 102, 255);
+  --c_primary__hover: rgb(17, 68, 221);
+  --c_secondary: rgb(153, 51, 255);
+  --c_secondary__hover: rgb(119, 17, 221);
+  --c_success: rgb(0, 136, 0);
+  --c_success__hover: rgb(0, 102, 0);
+  --c_warning: rgb(255, 102, 0);
+  --c_warning__hover: rgb(221, 68, 0);
+  --c_danger: rgb(255, 0, 51);
+  --c_danger__hover: rgb(221, 0, 17);
+  --c_input_accent: rgb(51, 102, 255);
   --c_highlight: rgba(41, 100, 210, 0.25);
   --tc: rgba(0, 0, 0, 0.93);
   --tc_dark: var(--tc);
@@ -68,8 +68,8 @@
   --btn_box_shadow: 0 0 0 transparent;
   --btn_box_shadow__hover: 0 0 0 transparent;
   --btn_border: transparent;
-  --btn_bg: #ddd;
-  --btn_bg__hover: #ccc;
+  --btn_bg: rgb(221, 221, 221);
+  --btn_bg__hover: rgb(204, 204, 204);
   --btn_tc: rgba(0, 0, 0, 0.93);
   --btn_transparent__hover: rgba(0, 0, 0, 0.05);
   --tc_link: var(--tc_primary);
@@ -85,23 +85,23 @@
 [auto-theme="dark"]:not([theme="light"]),
 [theme="dark"] {
   color-scheme: dark;
-  --c_bg: #333;
-  --c_bg__inv: #f9f9f9;
-  --c_bg__alt: #222;
-  --c_overscroll: black;
-  --c_border: #777;
-  --c_border__inv: #ccc;
-  --c_primary: #36f;
-  --c_primary__hover: #14d;
-  --c_secondary: #93f;
-  --c_secondary__hover: #71d;
-  --c_success: #080;
-  --c_success__hover: #060;
-  --c_warning: #f60;
-  --c_warning__hover: #d40;
-  --c_danger: #f03;
-  --c_danger__hover: #d01;
-  --c_input_accent: #36f;
+  --c_bg: rgb(51, 51, 51);
+  --c_bg__inv: rgb(249, 249, 249);
+  --c_bg__alt: rgb(34, 34, 34);
+  --c_overscroll: rgb(0, 0, 0);
+  --c_border: rgb(119, 119, 119);
+  --c_border__inv: rgb(204, 204, 204);
+  --c_primary: rgb(51, 102, 255);
+  --c_primary__hover: rgb(17, 68, 221);
+  --c_secondary: rgb(153, 51, 255);
+  --c_secondary__hover: rgb(119, 17, 221);
+  --c_success: rgb(0, 136, 0);
+  --c_success__hover: rgb(0, 102, 0);
+  --c_warning: rgb(255, 102, 0);
+  --c_warning__hover: rgb(221, 68, 0);
+  --c_danger: rgb(255, 0, 51);
+  --c_danger__hover: rgb(221, 0, 17);
+  --c_input_accent: rgb(51, 102, 255);
   --c_highlight: rgba(0, 89, 255, 0.25);
   --tc: rgba(255, 255, 255, 0.93);
   --tc_dark: rgba(0, 0, 0, 0.93);
@@ -114,13 +114,13 @@
   --tc_on_warning: var(--tc);
   --tc_on_danger: var(--tc);
   --c_overlay: rgba(0, 0, 0, 0.5);
-  --tc_primary: #8ab4f8;
-  --tc_secondary: #b6f;
-  --tc_success: #6b6;
-  --tc_warning: #f93;
-  --tc_danger: #f57;
-  --btn_bg: #aaa;
-  --btn_bg__hover: #bbb;
+  --tc_primary: rgb(138, 180, 248);
+  --tc_secondary: rgb(187, 102, 255);
+  --tc_success: rgb(102, 187, 102);
+  --tc_warning: rgb(255, 153, 51);
+  --tc_danger: rgb(255, 85, 119);
+  --btn_bg: rgb(170, 170, 170);
+  --btn_bg__hover: rgb(187, 187, 187);
   --btn_tc: rgba(0, 0, 0, 0.93);
   --btn_transparent__hover: rgba(255, 255, 255, 0.05);
   --btn_box_shadow: 0 0 0 transparent;

package/docs/nav-1.inc.html

@@ -1,84 +0,0 @@
-<nav
-  class="d-f bg-primary fixed"
->
-  <button
-    id="open-side-menu"
-    class="link"
-  >
-    <k-icon name="menu"></k-icon>
-  </button>
-  <a href="../">Home</a>
-  <k-search
-    class="flex mr"
-    style="min-width:10rem;max-width:24rem"
-  ></k-search>
-  <div class="flex"></div>
-  <k-theme-switcher></k-theme-switcher>
-</nav>
-<div style="width: 100%; height: 4rem;"></div>
-<k-side-menu
-  id="side-menu"
->
-  <h1>Kempo Docs</h1>
-  <menu>
-    <a href="../" class="h5 pl0 mb">Home</a>
-    <h5 class="mb0">Styles</h5>
-    <div class="pl mb">
-      <a href="../styles/typography.html">Typography</a>
-      <a href="../styles/displays-layouts.html">Displays and Layouts</a>
-      <a href="../styles/borders-spacing.html">Borders and Spacing</a>
-      <a href="../styles/inputs.html">Inputs</a>
-      <a href="../styles/buttons.html">Buttons</a>
-      <a href="../styles/tables.html">Tables</a>
-      <a href="../styles/colors.html">Colors</a>
-    </div>
-    <h5 class="mb0">Components</h5>
-    <div class="pl mb">
-      <a href="../components/component.html">Component</a>
-      <a href="../components/lazy-component.html">LazyComponent</a>
-      <a href="../components/reactivecomponent.html">ReactiveComponent</a>
-      <a href="../components/reactivelazy-component.html">ReactiveLazyComponent</a>
-      <a href="../components/focuscapture.html">FocusCapture</a>
-      <hr />
-      <a href="../components/accordion.html">Accordion</a>
-      <a href="../components/card.html">Card</a>
-      <a href="../components/content-slider.html">Content Slider</a>
-      <a href="../components/dialog.html">Dialog</a>
-      <a href="../components/directory-viewer.html">Directory Viewer</a>
-      <a href="../components/icon.html">Icon</a>
-      <a href="../components/import.html">Import</a>
-      <a href="../components/resize.html">Resize</a>
-      <a href="../components/search.html">Search</a>
-      <a href="../components/show-more.html">Show More</a>
-      <a href="../components/side-menu.html">Side Menu</a>
-      <a href="../components/split.html">Split</a>
-      <a href="../components/table.html">Table</a>
-      <a href="../components/tabs.html">Tabs</a>
-      <a href="../components/tags.html">Tags</a>
-      <a href="../components/theme-switcher.html">Theme Switcher</a>
-      <a href="../components/timestamp.html">Timestamp</a>
-      <a href="../components/toggle.html">Toggle</a>
-    </div>
-
-    <h5 class="mb0">Utils</h5>
-    <div class="pl mb">
-      <a href="../utils/cli.html">CLI</a>
-      <a href="../utils/cookie.html">Cookie</a>
-      <a href="../utils/debounce.html">Debounce</a>
-      <a href="../utils/drag.html">Drag</a>
-      <a href="../utils/element.html">Element</a>
-      <a href="../utils/format-timestamp.html">Format Timestamp</a>
-      <a href="../utils/fuzzy-match.html">Fuzzy Match</a>
-    </div>
-  </menu>
-</k-side-menu>
-<script>
-  document.getElementById('open-side-menu').addEventListener('click', async () => {
-    await window.customElements.whenDefined('k-side-menu');
-    document.getElementById('side-menu').open();
-  });
-</script>
-<script src="../kempo/components/SideMenu.js" type="module"></script>
-<script src="../kempo/components/Icon.js" type="module"></script>
-<script src="../kempo/components/ThemeSwitcher.js" type="module"></script>
-<script src="../kempo/components/Search.js" type="module"></script>