kempo 4.2.4 → 4.2.7

package/src/components/FocusCapture.js

@@ -1,31 +0,0 @@
-import LazyComponent from './LazyComponent.js';
-import { onEvent } from '../utils/element.js';
-
-export default class FocusCapture extends LazyComponent {
-  constructor(){
-    super({
-      delegatesFocus: true
-    }); 
-  }
-  render(){
-    super.render();
-    onEvent(this.shadowRoot.getElementById('after'), 'focus', () => {
-      this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus();
-    });
-  }
-  
-  get shadowTemplate(){
-    return /*html*/`
-      ${super.shadowTemplate}
-      <div id="after" tabindex="0"></div>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      :host {
-        display: inline-block;
-      }
-    `;
-  }
-}
-window.customElements.define('k-focus-capture', FocusCapture);

package/src/components/Icon.js

@@ -1,119 +0,0 @@
-import Component from './Component.js';
-
-const cache = {};
-
-const getIconByPath = async (path) => {
-  if (!cache[path]) {
-    cache[path] = new Promise(async (resolve, reject) => {
-      const controller = new AbortController();
-      const signal = controller.signal;
-      try {
-        const response = await fetch(path, { signal });
-        if (response.status === 200) {
-          resolve(await response.text());
-        } else if (response.status === 404) {
-          resolve(null);
-        }
-      } catch (e) {
-        if (e.name !== 'AbortError') {
-          reject(e);
-        }
-      }
-    }).catch(() => null);
-  }
-  return await cache[path];
-};
-
-const getIconByName = (name) => {
-  const tryDir = async (dir) => getIconByPath(`${dir}/${name}.svg`);
-
-  return new Promise( async (resolve, reject) => {
-    let svg;
-    for(let i=0; i < Icon.pathToIcons.length && !svg; i++){
-      try {
-        svg = await tryDir(Icon.pathToIcons[i]);
-      } catch(e){}
-    }
-    if(svg){
-      resolve(svg);
-    } else {
-      resolve(null);
-    }
-  });
-}
-
-export default class Icon extends Component {
-  constructor(name = ''){
-    super();
-    this.registerAttributes({
-      src: '',
-      name: name
-    });
-  }
-  connectedCallback(){
-    // super.connectedCallback();
-    // do not call super.connectedCallback because it will attempt to render and then again on attribute change
-    // so we are overwriting the parent method and not calling it
-  }
-  async render(force){
-    if(await super.render(force)){
-      if(this.src){
-        const svg = await getIconByPath(this.src);
-        if(svg){
-          this.innerHTML = svg;
-          this.fixSVG();
-        } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
-      } else if(this.name){
-        const svg = await getIconByName(this.name);
-        if(svg){
-          this.innerHTML = svg;
-          this.fixSVG();
-        } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
-      } else {
-        this.rendered = false;
-        if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
-      }
-      return true;
-    }
-    return false;
-  }
-  attributeChangedCallback(n, oV, nV){
-    super.attributeChangedCallback(n, oV, nV);
-    if(['src', 'name'].includes(n) && nV){
-      this.render(true);
-    }
-  }
-  fixSVG(){
-    const $svg = this.querySelector('svg');
-    $svg.removeAttribute('width');
-    $svg.removeAttribute('height');
-    $svg.querySelectorAll('path, rect, circle').forEach( $path => {
-      $path.setAttribute('fill', 'currentColor');
-    });
-  }
-  get shadowStyles(){
-    return /*css*/`
-      :host {
-        display: inline-block;
-        vertical-align: bottom;
-      }
-      ::slotted(svg){
-        height: 1.35em;
-        vertical-align: middle;
-      }
-    `;
-  }
-
-  static observedAttributes = [
-    'name',
-    'src'
-  ];
-
-  static pathToIcons = [
-    '/icons'
-  ];
-  static fallback = /*html*/`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>
-  `;
-}
-window.customElements.define('k-icon', Icon);

package/src/components/Import.js

@@ -1,48 +0,0 @@
-import Component from './Component.js';
-export default class Import extends Component {
-  constructor(src = ''){
-    super();
-    this.registerAttribute('src', src);
-  }
-  attributeChangedCallback(n, oV, nV){
-    if(n === 'src' && oV !== nV){
-      this.render(true);
-    }
-  }
-  async render(force){
-    const src = this.src;
-    if(src && await super.render(force)){
-      let contents = await (await fetch(src)).text();
-      for (const [name, value] of Object.entries(Import.replacements)) {
-        contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
-      }
-      const temp = document.createElement('template');
-      temp.innerHTML = contents;
-      const scripts = Array.from(temp.content.querySelectorAll('script[src]'));
-      scripts.forEach(script => script.remove());
-      this.innerHTML = temp.innerHTML;
-      for (const script of scripts) {
-        const newScript = document.createElement('script');
-        Array.from(script.attributes).forEach(attr => {
-          newScript.setAttribute(attr.name, attr.value);
-        });
-        await new Promise((resolve, reject) => {
-          newScript.onload = resolve;
-          newScript.onerror = reject;
-          this.appendChild(newScript);
-        });
-      }
-      return true;
-    }
-    return false;
-  }
-  get shadowStyles(){
-    return /*css*/`:host{display:contents;}`;
-  }
-  static replacements = {root: './'};
-  static addReplacement(name, value){
-    this.replacements = {...this.replacements,[name]: value};
-  }
-  static observedAttributes = [...super.observedAttributes, 'src'];
-}
-window.customElements.define('k-import', Import);

package/src/components/LazyComponent.js

@@ -1,65 +0,0 @@
-import Component from './Component.js';
-import { isInView } from '../utils/element.js';
-import raf from '../utils/raf.js';
-
-const inViewIntervalId = Symbol();
-export default class LazyComponent extends Component {
-  constructor(shadowDetails){
-    super(shadowDetails);
-
-    /* Private Members */
-    this[inViewIntervalId] = null;
-    
-    (new IntersectionObserver(([comp]) => {
-      if(comp.intersectionRatio > 0 && !this.rendered){
-        this.inViewCallback();
-      } else {
-        this.outOfViewCallback();
-      }
-    })).observe(this);
-    
-    this.registerAttributes({
-      unrender: false,
-      inViewInterval: 0
-    });
-  }
-  connectedCallback(){
-    // Do not do super.connectedCallback() because it will render the component prematurely
-    this.renderSkelton(); // so that the skeleton height is rendered, which will give it the propert height so potentional LazyComponents below it will get out of the viewport as they normally would, before we then check if it is in View (which is delayed a few frames.
-    raf(()=>{
-      if(isInView(this)){
-        this.inViewCallback();
-      } else {
-        this.outOfViewCallback();
-      }
-    }, 2);
-  }
-  async inViewCallback(){
-    clearInterval(this[inViewIntervalId]);
-    return await this.render();
-  }
-  async outOfViewCallback(){
-    clearInterval(this[inViewIntervalId]);
-    this[inViewIntervalId] = setInterval(async ()=>{
-      if(await isInView(this)){
-        this.inViewCallback();
-      }
-    }, this.inViewInterval || LazyComponent.inViewIntervalTimeout);
-    if(this.unrender){
-      await this.renderSkelton();
-      return true;
-    }
-    return false;
-  }
-  async renderSkelton(){
-    this.shadowRoot.innerHTML = `<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`;
-    this.rendered = false;
-    return true;
-  }
-  get skeletonTemplate(){
-    return /*html*/`<div style="height: var(--skeleton_height, 1rem)"></div>`;
-  }
-
-  /* Static Members */
-  static inViewIntervalTimeout = 1000;
-}

package/src/components/PersistantCollapsible.js

@@ -1,44 +0,0 @@
-import Collapsible from './Collapsible.js';
-import { onEvent, offEvent } from '../utils/element.js';
-
-const updateFromStorage = Symbol('updateFromStorage'),
-      storageChangeHandler = Symbol('storageChangeHandler'),
-      changeHandler = Symbol('changeHandler');
-export default class PersistantCollapsible extends Collapsible {
-  constructor(){
-    super();
-
-    /* Private Methods */
-    this[updateFromStorage] = () => {
-      this.opened = localStorage.getItem(`PersistantCollapsible-${this.id}`) === 'true';
-    }
-    this[storageChangeHandler] = (event) => {
-      if (event.key === `PersistantCollapsible-${this.id}`) {
-        this[updateFromStorage]();
-      }
-    }
-    this[changeHandler] = () => {
-      if(this.id){
-        localStorage.setItem(`PersistantCollapsible-${this.id}`, this.opened);
-      }
-    }
-  }
-
-  /* Lifecycle Callbacks */
-  async render(force){
-    if(await super.render(force)){
-      this[updateFromStorage]();
-      onEvent(window, 'storage', this[storageChangeHandler]);
-      onEvent(this, 'openedchanged', this[changeHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(window, 'storage', this[storageChangeHandler]);
-    offEvent(this, 'openedchanged', this[changeHandler]);
-    window.removeEventListener('storage', this[storageChangeHandler]);
-  }
-}
-window.customElements.define('k-p-collapsible', PersistantCollapsible);

package/src/components/PhotoViewer.js

@@ -1,358 +0,0 @@
-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/components/ReactiveComponent.js

@@ -1,11 +0,0 @@
-import Component from './Component.js';
-
-export default class ReactiveComponent extends Component {
-  attributeChangedCallback(n, oV, nV){
-    super.attributeChangedCallback(n, oV, nV);
-    if(this.constructor.renderOnChange.includes(n)){
-      this.render(true);
-    }
-  }
-  static renderOnChange = [];
-}

package/src/components/ReactiveLazyComponent.js

@@ -1,11 +0,0 @@
-import LazyComponent from './LazyComponent.js';
-
-export default class ReactiveComponent extends LazyComponent {
-  attributeChangedCallback(n, oV, nV){
-    super.attributeChangedCallback(n, oV, nV);
-    if(this.constructor.renderOnChange.includes(n)){
-      this.render(true);
-    }
-  }
-  static renderOnChange = [];
-}