kempo 1.0.0

package/kempo/components/Dialog.js

@@ -0,0 +1,277 @@
+import Component from './Component.js';
+import './FocusCapture.js';
+import './Icon.js';
+import {
+  firstFocusable,
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+export default class Dialog extends Component {
+  constructor({
+    opened = false,
+    closeBtn = true,
+    overlayClose = true,
+    confirmText = '',
+    confirmClasses = 'success ml',
+    confirmAction = () => {},
+    cancelText = '',
+    cancelClasses = '',
+    cancelAction = () => {},
+    closeCallback = () => {}
+  } = {}){
+    super();
+
+    this.registerAttributes({
+      opened,
+      closeBtn,
+      overlayClose,
+      confirmText,
+      confirmClasses,
+      cancelText,
+      cancelClasses
+    });
+    this.registerProps({
+      confirmAction,
+      cancelAction,
+      closeCallback,
+      previousFocus: null,
+      _clickHandler: (event) => {
+        const {target: { id }} = event;
+        if(
+          (id == 'overlay' && this.overlayClose) || 
+          id == 'close'
+        ){
+          this.close();
+        } else if(id == 'cancel'){
+          this.cancelAction(event);
+          if(!event.defaultPrevented) this.close();
+        } else if(id == 'confirm'){
+          this.confirmAction(event);
+          if(!event.defaultPrevented) this.close();
+        }
+      },
+      _keydownHandler: ({ keyCode }) => {
+        if(keyCode === 27){
+          this.close();
+        }
+      },
+      _hasTitle: () => !!this.querySelector('[slot="title"]')
+    });
+  }
+  connectedCallback(){
+    super.connectedCallback();
+    onEvent(this.shadowRoot, 'click', this._clickHandler);
+  }
+  disconnectedCallback(){
+    super.connectedCallback();
+    offEvent(this.shadowRoot, 'click', this._clickHandler);
+    offEvent(window, 'keydown', this._keydownHandler); // just in case this was removed without being closed first
+  }
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(name === 'opened'){
+      dispatchEvent(this, nV?'opened':'closed');
+    }
+  }
+  open(){
+    this.opened = true;
+    const $toFucus = this.shadowRoot.querySelector('[autofocus]') || firstFocusable(this.shadowRoot);
+    if($toFucus) $toFucus.focus();
+    onEvent(window, 'keydown', this._keydownHandler);
+  }
+  close(){
+    this.opened = false;
+    this.blur();
+    this.closeCallback();
+    offEvent(window, 'keydown', this._keydownHandler);
+  }
+  toggle(){
+    this.opened?this.close():this.open();
+  }
+  focus(){
+    const $firstFocus = firstFocusable(this.shadowRoot);
+    if($firstFocus){
+      this.previousFocus = document.activeElement;
+      $firstFocus.focus();
+    }
+  }
+  blur(){
+    if(this.previousFocus){
+      this.previousFocus.focus();
+    }
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <k-focus-capture>
+        <button id="overlay" aria-label="Close the Dialog"></button>
+        <div id="wrapper">
+          <div
+            id="dialog"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="title"
+          >
+            <div
+              id="header"
+              class="${this._hasTitle()?'has-title':''}"
+            >
+              <div
+                id="title"
+              ><slot name="title"></slot></div>
+              ${this.renderIf(this.closeBtn, /*html*/`
+                <button
+                  id="close"
+                >
+                  <k-icon name="close"></k-icon>
+                </button>
+              `)}
+            </div>
+            <div id="body">
+              ${super.shadowTemplate}
+            </div>
+            ${this.renderIf(this.cancelText || this.confirmText, /*html*/`
+              <div id="footer">
+                ${this.renderIf(this.cancelText, /*html*/`
+                  <button id="cancel" class="${this.cancelClasses}">
+                    ${this.cancelText}
+                  </button>
+                `)}
+                ${this.renderIf(this.confirmText, /*html*/`
+                  <button id="confirm" class="${this.confirmClasses}">
+                    ${this.confirmText}
+                  </button>
+                `)}
+              </div>
+            `)}
+          </div>
+        </div>
+      </k-focus-capture>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: inline;
+        height: 0;
+        width: 0;
+      }
+      :host(:not([opened])){
+        display: none;
+      }
+      #overlay {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        background-color: var(--c_overlay);
+        z-index: 100;
+        border: 0px solid transparent;
+        box-shadow: 0 0 0 transparent;
+      }
+      #wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        z-index: 101;
+        pointer-events: none;
+      }
+      #dialog {
+        display: flex;
+        flex-direction: column;
+        min-width: var(--min_width, 20rem);
+        width: var(--width, fit-content);
+        max-width: var(--max_width, calc(100vw - 2rem));
+        min-height: var(--min_height, 12rem);
+        height: var(--height, fit-content);
+        max-height: var(--max_height, calc(100vh - 2rem));
+        background-color: var(--c_bg);
+        box-shadow: var(--drop_shadow);
+        border-radius: var(--radius);
+        pointer-events: all;
+      }
+      #header {
+        display: flex;
+        align-items: center;
+      }
+      #header.has-title {
+        border-bottom: 1px solid var(--c_border);
+      }
+      #title {
+        flex: 1 1 auto;
+      }
+      #close {
+        border: 0px;
+        background: transparent;
+        box-shadow: 0 0 0 transparent;
+        color: var(--tc);
+      }
+      #close k-icon {
+        pointer-events: none;
+      }
+      #body {
+        flex: 1 1 auto;
+      }
+      #footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: var(--spacer_h);
+      }
+    `;
+  }
+
+  static renderOnChange = [
+    'opened',
+    'closeBtn',
+    'overlayClose',
+    'title',
+    'confirmText',
+    'cancelText'
+  ];
+
+  static create(contents = '', options = {}){
+    const $dialog = new Dialog({
+      opened: true,
+      ...options 
+    });
+    onEvent($dialog, 'close',  $dialog.remove);
+    if(contents instanceof HTMLElement || contents instanceof DocumentFragment){
+      $dialog.appendChild(contents);
+    } else if(contents instanceof NodeList){
+      contents.forEach( $el => $dialog.appendChild($el));
+    } else {
+      $dialog.innerHTML = contents;
+    }
+    document.body.appendChild($dialog);
+  }
+  static confirm(text, responseCallback, options){
+    Dialog.create(`
+      <h5 slot="title" class="pyh px m0">Confirm Event Deletion</h5>
+      <p class="p">${text}</p>
+    `, {
+      ...options,
+      closeBtn: false,
+      overlayClose: false,
+      confirmText: 'Yes',
+      confirmClasses: 'success ml',
+      confirmAction: () => {
+        return responseCallback(true);
+      },
+      cancelText: 'No',
+      cancelClasses: 'danger',
+      cancelAction: () => {
+        return responseCallback(false);
+      }
+    });
+  }
+}
+window.customElements.define('k-dialog', Dialog);

package/kempo/components/FocusCapture.js

@@ -0,0 +1,30 @@
+import LazyComponent from './LazyComponent.js';
+
+export default class FocusCapture extends LazyComponent {
+  constructor(){
+    super({
+      delegatesFocus: true
+    }); 
+  }
+  render(){
+    super.render();
+    this.shadowRoot.getElementById('after').addEventListener('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/kempo/components/Icon.js

@@ -0,0 +1,60 @@
+import Component from './Component.js';
+
+export default class Icon extends Component {
+  constructor(){
+    super();
+    this.registerAttributes({
+      src: '',
+      name: ''
+    });
+  }
+  async render(force){
+    if(await super.render(force)){
+      if(this.src){
+        this.innerHTML = await (await fetch(this.src)).text();
+        this.fixSVG();
+      } else if(this.name){
+        this.innerHTML = await (await fetch(`${Icon.pathToIcons}/${this.name}.svg`)).text();
+        this.fixSVG();
+      } else {
+        this.rendered = false;
+        this.innerHTML = '';
+      }
+      return true;
+    }
+    return false;
+  }
+  attributeChangedCallback(n, oV, nV){
+    if(['src', 'name'].includes(n)){
+      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';
+}
+window.customElements.define('k-icon', Icon);

package/kempo/components/Import.js

@@ -0,0 +1,40 @@
+import Component from './Component.js';
+
+export default class Import extends Component {
+  constructor(){
+    super();
+    this.registerAttribute('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)){
+      this.innerHTML = await (await fetch(src)).text();
+      this.querySelectorAll('script').forEach( $badScript => {
+        const $goodScript = document.createElement('script');
+        if($badScript.getAttribute('type')) $goodScript.type = $badScript.getAttribute('type');
+        if($badScript.getAttribute('src')) $goodScript.src = $badScript.getAttribute('src');
+        if($badScript.textContent) $goodScript.textContent = $badScript.textContent;
+        $badScript.parentElement.replaceChild($goodScript, $badScript);
+      });
+      
+    }
+  }
+
+  get shadowStyles(){
+    return /*css*/`
+      :host {
+        display: inline;
+      }
+    `;
+  }
+
+  static get renderOnAttributes(){
+    retur ['src'];
+  }
+}
+window.customElements.define('k-import', Import);

package/kempo/components/LazyComponent.js

@@ -0,0 +1,40 @@
+import Component from './Component.js';
+import { isInView } from '../utils/element.js';
+
+
+export default class LazyComponent extends Component {
+  constructor(shadowDetails){
+    super(shadowDetails);
+    (new IntersectionObserver(([comp]) => {
+      if(comp.intersectionRatio > 0 && !this.rendered){
+        this.inViewCallback();
+      } else {
+        this.outOfViewCallback();
+      }
+    })).observe(this);
+    
+    this.registerAttribute('unrender', false);
+  }
+  async connectedCallback(){
+    // Do not do super.connectedCallback() because it will render the component prematurely
+    await 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.
+    if(await isInView(this)){
+      await this.inViewCallback();
+    }
+  }
+  async inViewCallback(){
+    await this.render();
+  }
+  async outOfViewCallback(){
+    if(this.unrender){
+      await this.renderSkelton();
+    }
+  }
+  async renderSkelton(){
+    this.shadowRoot.innerHTML = `<link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />${this.skeletonTemplate}<style>${this.shadowStyles}</style>`;
+    this.rendered = false;
+  }
+  get skeletonTemplate(){
+    return /*html*/`<div style="height: var(--skeleton_height, 1rem)"></div>`;
+  }
+}

package/kempo/components/ReactiveComponent.js

@@ -0,0 +1,11 @@
+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/kempo/components/ReactiveLazyComponent.js

@@ -0,0 +1,11 @@
+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 = [];
+}

package/kempo/components/Resize.js

@@ -0,0 +1,168 @@
+import Component from './Component.js';
+import drag from '../utils/drag.js';
+
+const startSize = Symbol('startSize'),
+      dragStartHandler = Symbol('dragStartHandler'),
+      dragEndHandler = Symbol('dragEndHandler'),
+      dragSideHandler = Symbol('dragSideHandler'),
+      dragBottomHandler = Symbol('dragBottomHandler'),
+      dragCornerHandler = Symbol('dragCornerHandler'),
+      cleanupFuncs = Symbol('cleanupFuncs');
+export default class Resize extends Component {
+  constructor(){
+    super();
+
+    this[startSize] = {width: 0, height: 0};
+
+    this[dragStartHandler] = ({element}) => {
+      const { width, height } = this.getBoundingClientRect();
+      this[startSize].width = width;
+      this[startSize].height = height;
+      this.resizing = element.id;
+    }
+    this[dragEndHandler] = () => {
+      this.resizing = '';
+    }
+    this[dragSideHandler] = ({x}) => {
+      this.style.width = this[startSize].width + x + 'px';
+    }
+    this[dragBottomHandler] = ({y}) => {
+      this.style.height = this[startSize].height + y + 'px';
+    }
+    this[dragCornerHandler] = ({x, y}) => {
+      this.style.width = this[startSize].width + x + 'px';
+      this.style.height = this[startSize].height + y + 'px';
+    }
+    this[cleanupFuncs] = [];
+
+    this.registerAttribute('resizing', '');
+  }
+  async render(force){
+    if(await super.render(force)){
+      this[cleanupFuncs].push(drag({
+        element: this.shadowRoot.getElementById('side'),
+        startCallback: this[dragStartHandler],
+        endCallback: this[dragEndHandler],
+        callback: this[dragSideHandler],
+        preventScroll: true
+      }));
+      this[cleanupFuncs].push(drag({
+        element: this.shadowRoot.getElementById('bottom'),
+        startCallback: this[dragStartHandler],
+        endCallback: this[dragEndHandler],
+        callback: this[dragBottomHandler],
+        preventScroll: true
+      }));
+      this[cleanupFuncs].push(drag({
+        element: this.shadowRoot.getElementById('corner'),
+        startCallback: this[dragStartHandler],
+        endCallback: this[dragEndHandler],
+        callback: this[dragCornerHandler],
+        preventScroll: true
+      }));
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    this[cleanupFuncs].forEach( cleanup => cleanup());
+  }
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="main">
+        ${super.shadowTemplate}
+      </div>
+      <div id="side" class="handle">
+        <svg viewBox="0 0 15 64" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m 15.000001,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 -1.384999,0 -2.5,1.338002 -2.5,3 v 58 c 0,1.661998 1.115001,3 2.5,3 1.384999,0 2.5,-1.338002 2.5,-3 z M 5.0000008,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 C 1.1150018,0 7.5891117e-7,1.338002 7.5891117e-7,3 v 58 c 0,1.661998 1.11500104108883,3 2.50000004108883,3 1.384999,0 2.5,-1.338002 2.5,-3 z" /></svg>
+      </div>
+      <div id="bottom" class="handle">
+        <svg viewBox="0 0 64 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 3,0 C 1.3380017,0 0,1.1150014 0,2.5 0,3.8849986 1.3380017,5 3,5 H 61 C 62.661998,5 64,3.8849986 64,2.5 64,1.1150014 62.661998,0 61,0 Z M 3,10 C 1.3380017,10 0,11.115001 0,12.5 0,13.884999 1.3380017,15 3,15 h 58 c 1.661998,0 3,-1.115001 3,-2.5 C 64,11.115001 62.661998,10 61,10 Z" /></svg>
+      </div>
+      <div id="corner" class="handle">
+        <svg version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m12.735 3.0095e-4c-0.77288 0.011702-1.6098 0.36368-2.2773 1.0313l-9.4258 9.4258c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l9.4258-9.4258c1.1868-1.1868 1.3772-2.906 0.42774-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352zm0 8.5684c-0.77288 0.011702-1.6098 0.36564-2.2773 1.0332l-0.85744 0.85546c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l0.85742-0.85742c1.1868-1.1868 1.3772-2.906 0.42773-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352z" /></svg>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        --handle_size: 1rem;
+
+        display: grid;
+        grid-template-columns: 1fr var(--handle_size);
+        grid-template-rows: 1fr var(--handle_size);
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        min-width: 10rem;
+        max-width: 100%;
+        min-height: 10rem;
+        max-height: 100%;
+      }
+      :host([dimention="height"]){
+        grid-template-columns: 1fr;
+      }
+      :host([dimention="width"]){
+        grid-template-rows: 1fr;
+      }
+      #main {
+        grid-row: 1;
+        grid-column: 1;
+        overflow: auto;
+      }
+      #side {
+        grid-row: 1;
+        grid-column: 2;
+        cursor: ew-resize;
+      }
+      #bottom {
+        grid-row: 2;
+        grid-column: 1;
+        text-align: center;
+        cursor: ns-resize;
+      }
+      #corner {
+        grid-row: 2;
+        grid-column: 2;
+        overflow: hidden;
+        cursor: nwse-resize;
+      }
+      .handle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .handle svg {
+        transform: scale(0.5);
+      }
+      #bottom svg {
+        height: var(--handle_size);
+      }
+      #side svg {
+        width: var(--handle_size);
+      }
+      #corner svg {
+        width: var(--handle_size);
+        height: var(--handle_size);
+      }
+      :host(:not([resizing=""])) #main {
+        pointer-events: none;
+      }
+      :host([resizing="side"]) #side,
+      :host([resizing="corner"]) #side,
+      :host([resizing="corner"]) #corner,
+      :host([resizing="corner"]) #bottom,
+      :host([resizing="bottom"]) #bottom {
+        background-color: var(--c_highlight);
+      }
+      :host([dimention="height"]) #side,
+      :host([dimention="height"]) #corner,
+      :host([dimention="width"]) #bottom,
+      :host([dimention="width"]) #corner {
+        display: none;
+      }
+    `;
+  }
+}
+window.customElements.define('k-resize', Resize);