kempo 4.2.3 → 4.2.5

package/src/components/Dialog.js

@@ -1,338 +0,0 @@
-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':'close');
-    }
-  }
-  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: 1px;
-        width: 1px;
-        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/
-        top: 0;
-        left: 0;
-        z-index: 100;
-      }
-      :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: 100%;
-        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 - 4rem));
-        min-height: var(--min_height, 12rem);
-        height: var(--height, fit-content);
-        max-height: var(--max_height, calc(100vh - 4rem));
-        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 = {}){
-    if(options.closeExisting!==false)document.querySelectorAll('k-dialog').forEach(d=>d.close());
-    const {
-      removeOnClose = true,
-      closeCallback = () => {}
-    } = options;
-    const $dialog = new Dialog({
-      opened: true,
-      ...options,
-      closeCallback: (...args) => {
-        if(removeOnClose){
-          $dialog.remove();
-        }
-        closeCallback(...args);
-      }
-    });
-    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;
-    }
-    if (options.width) $dialog.style.setProperty('--width', options.width);
-    if (options.minWidth) $dialog.style.setProperty('--min_width', options.minWidth);
-    if (options.maxWidth) $dialog.style.setProperty('--max_width', options.maxWidth);
-    if (options.height) $dialog.style.setProperty('--height', options.height);
-    if (options.minHeight) $dialog.style.setProperty('--min_height', options.minHeight);
-    if (options.maxHeight) $dialog.style.setProperty('--max_height', options.maxHeight);
-    document.body.prepend($dialog);
-    $dialog.open();
-    return $dialog;
-  }
-  static confirm(text, responseCallback, options = {
-    title: 'Confirm'
-  }){
-    return Dialog.create(`
-      <h5 slot="title" class="pyh px m0">${options.title}</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);
-      }
-    });
-  }
-  static alert(text, responseCallback, options = {
-    title: 'Alert'
-  }){
-    return Dialog.create(`
-      <h5 slot="title" class="pyh px m0">${options.title}</h5>
-      <p class="p">${text}</p>
-    `, {
-      closeCallback: responseCallback,
-      cancelText: 'Ok',
-      ...options,
-    });
-  }
-  static error(text, responseCallback, options = {
-    title: 'Error'
-  }){
-    return Dialog.create(`
-      <h5 slot="title" class="pyh px m0 tc-danger">${options.title}</h5>
-      <p class="p">${text}</p>
-    `, {
-      closeCallback: responseCallback,
-      cancelText: 'Ok',
-      ...options,
-    });
-  }
-  static success(text, responseCallback, options = {
-    title: 'Success'
-  }){
-    return Dialog.create(`
-      <h5 slot="title" class="pyh px m0 tc-success">${options.title}</h5>
-      <p class="p">${text}</p>
-    `, {
-      closeCallback: responseCallback,
-      cancelText: 'Ok',
-      ...options,
-    });
-  }
-}
-window.customElements.define('k-dialog', Dialog);

package/src/components/DirectoryViewer.js

@@ -1,363 +0,0 @@
-import LazyComponent from './LazyComponent.js';
-import Component from './Component.js';
-// import './Icon.js';
-import {
-  onEvent,
-  offEvent,
-  dispatchEvent
-} from '../utils/element.js';
-import watchDirectoryHandle from '../utils/watchDirectoryHandle.js';
-
-const handle = Symbol(),
-      loadDirectoryClickHandler = Symbol(),
-      openToggleClickHandler = Symbol(),
-      fileSelectedHandler = Symbol(),
-      watchId = Symbol(),
-      changeCallback = Symbol(),
-      filters = Symbol();
-export default class DirectoryViewer extends LazyComponent {
-  constructor(_handle = false){
-    super();
-    
-    /* Private Members */
-    this[handle] = _handle;
-    this[watchId] = false;
-    this[filters] = [];
-
-    /* Private Methods */
-    this[loadDirectoryClickHandler] = () => this.loadDirectory();
-    this[openToggleClickHandler] = () => {
-      if(!this.root){
-        this.toggleOpen();
-        this.select();
-      } else {
-        this.clearDirectoryHandle();
-      }
-    }
-    this[changeCallback] = () => {
-      this.updateContents();
-    }
-
-    /* Init */
-    this.slot = 'content';
-    this.registerAttributes({
-      root: !_handle,
-      hasHandle: !!_handle,
-      opened: !_handle,
-      selected: false
-    });
-  }
-
-  /* Lifecycle Callbacks */
-  async render(force){
-    if(await super.render(force)){
-      onEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
-      onEvent(this.shadowRoot.getElementById('loadDirectory'), 'click', this[loadDirectoryClickHandler]);
-      onEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
-      this.renderDirectory();
-      return true;
-    }
-    return false;
-  }
-  async renderDirectory(){
-    if(!this[handle] || !this.rendered) return;
-    this.innerHTML = this[handle].name;
-    this.renderContents();
-  }
-  async renderContents(){
-    this.querySelectorAll('[slot="content"]').forEach(e=>e.remove());
-    if(
-      this.rendered && 
-      this[handle] &&
-      (this.opened || this.root)
-    ){
-      for await(const entry of this[handle].values()){
-        if(entry.kind === 'directory'){
-          if(this.filters.every(filter=>filter(entry))){
-            this.appendChild(new DirectoryViewer(entry, false));
-          }
-        }
-      }
-      for await(const entry of this[handle].values()){
-        if(entry.kind === 'file'){
-          if(this.filters.every(filter=>filter(entry))){
-            this.appendChild(new File(entry));
-          }
-        }
-      }
-      if(!this[watchId]) this[watchId] = watchDirectoryHandle(this[handle], this[changeCallback]);
-    } else {
-      if(this[watchId]){
-        clearInterval(this[watchId]);
-        this[watchId] = false;
-      }
-    }
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
-    offEvent(this.shadowRoot.getElementById('loadDirectory'), 'click', this[loadDirectoryClickHandler]);
-    offEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
-  }
-  attributeChangedCallback(n, oV, nV){
-    if(n === 'opened' && oV !== nV){
-      if(!nV && this.root){
-        this.opened = true; // root must be opened
-      } else {
-        this.renderContents();
-      }
-    }
-  }
-
-  /* Protected Members */
-  get rootDir(){
-    if(this.root) return this;
-    else return this.closest('k-directory-viewer[root="true"]')
-  }
-  get filters(){
-    return this.rootDir[filters];
-  }
-
-
-  /* Public Methods */
-  async loadDirectory(){
-    if(window.showDirectoryPicker){
-      this[handle] = await window.showDirectoryPicker();
-      if(this[handle]){
-        this.hasHandle = true;
-        dispatchEvent(this, 'directoryloaded', {
-          dirHandle: this[handle],
-          dirComponent: this
-        });
-        this.renderDirectory();
-      }
-    }
-  }
-  open(){
-    this.opened = true;
-  }
-  close(){
-    if(!this.root) this.opened = false;
-  }
-  toggleOpen(){
-    if(!this.root) this.opened = !this.opened;
-  }
-  clearDirectoryHandle(){
-    this[handle] = false;
-    this.hasHandle = false;
-    this.innerHTML = '';
-  }
-  async updateContents(){
-    if(this.opened || this.root){
-      const existingSubDirSet = new Set([...this.querySelectorAll('k-directory-viewer')]);
-      for await(const entry of this[handle].values()){
-        if(entry.kind === 'directory'){
-          const existingSubDirsArray = [...existingSubDirSet];
-          const $existing = existingSubDirsArray.find(($e)=>entry.isSameEntry($e[handle])&&entry.name===$e[handle].name);
-          if($existing){
-            this.appendChild($existing)
-            existingSubDirSet.delete($existing);
-          } else this.appendChild(new DirectoryViewer(entry, false));
-        }
-      }
-      existingSubDirSet.forEach($e=>$e.remove()); // remove unused dirs
-
-      const existingFileSet = new Set([...this.querySelectorAll('k-directory-viewer-file')]);
-      for await(const entry of this[handle].values()){
-        if(entry.kind === 'file'){
-          const existingFileArray = [...existingFileSet];
-          const $existing = existingFileArray.find(($e)=>entry.isSameEntry($e[handle])&&entry.name===$e[handle].name);
-          if($existing){
-            this.appendChild($existing)
-            existingFileSet.delete($existing);
-          } else this.appendChild(new File(entry));
-        }
-      }
-      existingFileSet.forEach($e=>$e.remove()); // remove unused files
-      if(!this[watchId]) this[watchId] = watchDirectoryHandle(this[handle], this[changeCallback]);
-    } else {
-      if(this[watchId]){
-        clearInterval(this[watchId]);
-        this[watchId] = false;
-      }
-    }
-  }
-  select(){
-    const $currentSelection = this.closest('k-directory-viewer[root]').querySelector('k-directory-viewer[selected], k-directory-viewer-file[selected]');
-    if($currentSelection === this) return;
-    if($currentSelection) $currentSelection.selected = false;
-    this.selected = true;
-    this.dispatchEvent(new CustomEvent('dirselected', {
-      detail: {
-        dirHandle: this[handle],
-        dirComponent: this
-      },
-      bubbles: true,
-      composed: true
-    }));
-  }
-  addFilter(filter){
-    this[filters].push(filter);
-    this.renderContents();
-  }
-
-  /* Shadow DOM */
-  get shadowTemplate(){
-    return /*html*/`
-      <button
-        id="loadDirectory"
-      >
-        <slot name="selectButton">
-          <k-icon name="folder-create"></k-icon> Select Directory
-        </slot>
-      </button>
-      <button
-        id="openToggle"
-        class="no-btn"
-      >
-        <k-icon name="folder" id="folder-closed"></k-icon>
-        <k-icon name="folder-open" id="folder-opened"></k-icon>
-        <k-icon name="folder-clear" id="folder-clear"></k-icon>
-        ${super.shadowTemplate}
-      </button>
-      <div id="tree">
-        <slot name="content"></slot>
-      </div>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host([has-handle]) #loadDirectory,
-      :host([opened]) #folder-closed,
-      :host(:not([opened])) #folder-opened,
-      :host(:not([has-handle])) #folder-closed,
-      :host(:not([has-handle])) #folder-opened,
-      :host(:not([has-handle])) #folder-clear,
-      :host(:not([root])) #folder-clear,
-      :host([root]) #folder-opened {
-        display: none;
-      }
-      #openToggle {
-        display: block;
-        width: 100%;
-        flex: 1 1 auto;
-      }
-      #tree {
-        padding-left: var(--spacer);
-      }
-      #wrapper {
-        display: flex;
-      }
-      #clearSelectedDirectory {
-        flex: none;
-      }
-      :host([selected]) #openToggle {
-        background-color: var(--c_primary);
-        color: var(--tc_on_primary);
-        border-radius: var(--raidus);
-      }
-    `;
-  }
-
-  static observedAttributes = [
-    ...LazyComponent.observedAttributes,
-    'opened'
-  ];
-
-  static watchInterval = 1000;
-}
-window.customElements.define('k-directory-viewer', DirectoryViewer);
-
-const selectFileClickHandler = Symbol();
-export class File extends Component {
-  constructor(_handle = false){
-    super();
-
-    /* Private Members */
-    this[handle] = _handle;
-
-    /* Private Methods */
-    this[selectFileClickHandler] = () => this.select();
-
-    /* Init */
-    this.slot = 'content';
-    this.registerAttribute('selected', false);
-  }
-
-  /* Lifecycle Callbacks */
-  async render(force){
-    if(await super.render(force)){
-      if(this[handle]){
-        this.innerHTML = this[handle].name;
-        const ext = this[handle].name.split('.').pop();
-        const $extIcon = this.shadowRoot.getElementById('extIcon');
-        if(['png', 'gif', 'jpeg', 'jpg', 'tif', 'webp'].includes(ext)){
-          $extIcon.name = 'image';
-        } else if(['txt', 'rtf', 'js', 'css', 'html',].includes(ext)){
-          $extIcon.name = 'file-text';
-        } else {
-          $extIcon.name = 'file';
-        }
-        onEvent(this.shadowRoot.getElementById('selectFile'), 'click', this[selectFileClickHandler]);
-      }
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('selectFile'), 'click', this[selectFileClickHandler]);
-  }
-
-  /* Public Methods */
-  select(){
-    const $currentSelection = this.closest('k-directory-viewer[root]').querySelector('k-directory-viewer[selected], k-directory-viewer-file[selected]');
-    if($currentSelection === this) return;
-    if($currentSelection) $currentSelection.selected = false;
-    this.selected = true;
-    this.dispatchEvent(new CustomEvent('fileselected', {
-      detail: {
-        fileHandle: this[handle],
-        fileComponent: this
-      },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-
-  /* Shadow DOM */
-  get shadowTemplate(){
-    return /*html*/`
-      <button
-        id="selectFile"
-        class="no-btn"
-      >
-        <k-icon
-          id="extIcon"
-          name=""
-        ></k-icon>
-        ${super.shadowTemplate}
-    </button>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-        width: 100%;
-      }
-      :host([selected]) {
-        background-color: var(--c_primary);
-        color: var(--tc_on_primary);
-        border-radius: var(--raidus);
-      }
-      #selectFile {
-        width: 100%;
-      }
-    `
-  }
-}
-window.customElements.define('k-directory-viewer-file', File);