kempo 2.9.1 → 2.9.4

package/src/components/DirectoryViewer.js

@@ -1,6 +1,6 @@
 import LazyComponent from './LazyComponent.js';
 import Component from './Component.js';
-import './Icon.js';
+// import './Icon.js';
 import {
   onEvent,
   offEvent,
@@ -10,7 +10,8 @@ import watchDirectoryHandle from '../utils/watchDirectoryHandle.js';
 
 const handle = Symbol(),
       loadDirectoryClickHandler = Symbol(),
-      selectedHandler = Symbol(),
+      openToggleClickHandler = Symbol(),
+      fileSelectedHandler = Symbol(),
       watchId = Symbol(),
       changeCallback = Symbol(),
       filters = Symbol();
@@ -36,13 +37,13 @@ export default class DirectoryViewer extends LazyComponent {
     this[changeCallback] = () => {
       this.updateContents();
     }
-    this[selectedHandler] = (e) => {
-      
-    }
 
     /* Init */
+    this.slot = 'content';
     this.registerAttributes({
+      root: !_handle,
       hasHandle: !!_handle,
+      opened: !_handle,
       selected: false
     });
   }
@@ -50,8 +51,9 @@ export default class DirectoryViewer extends LazyComponent {
   /* Lifecycle Callbacks */
   async render(force){
     if(await super.render(force)){
-      onEvent(this.shadowRoot, 'fileSelected directorySelected', this[selectedHandler]);
+      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;
     }
@@ -131,6 +133,15 @@ export default class DirectoryViewer extends LazyComponent {
       }
     }
   }
+  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;
@@ -172,11 +183,11 @@ export default class DirectoryViewer extends LazyComponent {
     }
   }
   select(){
-    const $currentSelection = this.querySelector('k-directory[selected], k-file[selected]');
+    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', {
+    this.dispatchEvent(new CustomEvent('dirselected', {
       detail: {
         dirHandle: this[handle],
         dirComponent: this
@@ -258,83 +269,6 @@ export default class DirectoryViewer extends LazyComponent {
 }
 window.customElements.define('k-directory-viewer', DirectoryViewer);
 
-export class Directory extends Component {
-  constructor(_handle = false){
-    super();
-
-    /* Private Members */
-    this[handle] = _handle;
-
-    /* Private Methods */
-    this[selectDirectoryClickHandler] = () => 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;
-        onEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
-      }
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
-  }
-
-  /* Protected Members */
-  get rootDir(){
-    return this.closest('k-directory-viewer')
-  }
-
-  /* Public Methods */
-  select(){
-    const $currentSelection = this.rootDir.querySelector('k-directory[selected], k-file[selected]');
-    if($currentSelection === this) return;
-    if($currentSelection) $currentSelection.selected = false;
-    this.selected = true;
-    this.dispatchEvent(new CustomEvent('directorySelected', {
-      detail: {
-        fileHandle: this[handle],
-        fileComponent: this
-      },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  /* Shadow DOM */
-  get shadowTemplate(){
-    return /*html*/`
-      <button
-        id="selectDirectory"
-      >
-        <slot name="selectButton">
-          <k-icon id="extIcon" name="file"></k-icon> ${this[handle].name}
-        </slot>
-      </button>
-      ${super.shadowTemplate}
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host([selected]) #selectFile {
-        background-color: var(--c_primary);
-        color: var(--tc_on_primary);
-        border-radius: var(--raidus);
-      }
-    `;
-  }
-}
-
 const selectFileClickHandler = Symbol();
 export class File extends Component {
   constructor(_handle = false){
@@ -376,18 +310,13 @@ export class File extends Component {
     offEvent(this.shadowRoot.getElementById('selectFile'), 'click', this[selectFileClickHandler]);
   }
 
-  /* Protected Members */
-  get rootDir(){
-    return this.closest('k-directory-viewer')
-  }
-
   /* Public Methods */
   select(){
-    const $currentSelection = this.rootDir.querySelector('k-directory[selected], k-file[selected]');
+    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', {
+    this.dispatchEvent(new CustomEvent('fileselected', {
       detail: {
         fileHandle: this[handle],
         fileComponent: this

package/src/components/FocusCapture.js

@@ -1,4 +1,5 @@
 import LazyComponent from './LazyComponent.js';
+import { onEvent } from '../utils/element.js';
 
 export default class FocusCapture extends LazyComponent {
   constructor(){
@@ -8,7 +9,7 @@ export default class FocusCapture extends LazyComponent {
   }
   render(){
     super.render();
-    this.shadowRoot.getElementById('after').addEventListener('focus', () => {
+    onEvent(this.shadowRoot.getElementById('after'), 'focus', () => {
       this.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').focus();
     });
   }

package/src/components/Search.js

@@ -4,7 +4,10 @@ import debounce from '../utils/debounce.js';
 const inputHandler = Symbol('inputHandler'),
       focusHandler = Symbol('focusHandler'),
       blurHandler = Symbol('blurHandler');
+
 export default class Search extends Component {
+  static searchDataUrl = '/search.json';
+
   constructor(){
     super();
 
@@ -25,7 +28,7 @@ export default class Search extends Component {
   }
   async render(force){
     if(await super.render(force)){
-      this.pages = await (await fetch('/search.json')).json();
+      this.pages = await (await fetch(Search.searchDataUrl)).json();
       const $input = this.shadowRoot.getElementById('input')
       $input.addEventListener('input', this[inputHandler]);
       $input.addEventListener('focus', this[focusHandler]);

package/src/components/Table.js

@@ -127,6 +127,7 @@ export default class Table extends Component {
     const start = (this.currentPage - 1) * this.pageSize;
     const end = start + this.pageSize;
     const paginatedRecords = this.records.slice(start, end);
+    let fetchRecords = false;
     paginatedRecords.forEach((record, index) => {
       const $tr = document.createElement('tr');
       if (this.enableSelection) {
@@ -149,12 +150,15 @@ export default class Table extends Component {
       if(this.controls?.before?.length){
         $tr.appendChild(this.renderRowControls(this.controls.before, record, start + index));
       }
-      this.fields.forEach(({name, formatter, calculator}) => {
+      if(record === null){
         const $td = document.createElement('td');
-        if (record === null) {
-          $td.innerHTML = 'Loading...';
-            dispatchEvent(this, 'fetchRecords', { start, end });
-        } else {
+        $td.colSpan = this.fields.length;
+        $td.innerHTML = '<i>Loading...</i>';
+        fetchRecords = true;
+        $tr.appendChild($td);
+      } else {
+        this.fields.forEach(({name, formatter, calculator}, index) => {
+          const $td = document.createElement('td');
           let value;
           if(calculator){
             value = calculator(record, this);
@@ -173,14 +177,17 @@ export default class Table extends Component {
             }
           }
           $td.innerHTML = value;
-        }
-        $tr.appendChild($td);
-      });
+          $tr.appendChild($td);
+        });
+      }
       if(this.controls?.after?.length){
         $tr.appendChild(this.renderRowControls(this.controls.after, record, start + index));
       }
       $records.appendChild($tr);
     });
+    if(fetchRecords){
+      dispatchEvent(this, 'fetchRecords', { start, end });
+    }
   }
   
   renderRowControls(controls = [], record, index) {

package/src/components/Timestamp.js

@@ -2,17 +2,20 @@ import Component from './Component.js'
 import formatTimestamp from '../utils/formatTimestamp.js';
 
 export default class Timestamp extends Component {
-	constructor(timestamp){
+	constructor(timestamp = 0, format = '', locale = ''){
 		super();
-		this.registerAttribute('timestamp', 0);
-		if(timestamp) this.timestamp = timestamp;
+		this.registerAttributes({
+			timestamp,
+			locale,
+			format
+		});
 	}
 
 	/* Lifecycle Callbacks */
 	attributeChangedCallback(n, oV, nV){
 		if(n == 'timestamp'){
 			if(nV){
-				this.innerHTML = formatTimestamp(nV, 'en-US');
+				this.innerHTML = formatTimestamp(nV, this.format, this.locale || navigator.language);
 			} else {
 				this.innerHTML = '';
 			}

package/src/components/Toggle.js

@@ -45,15 +45,18 @@ export default class Toggle extends Component {
   on(){
     this.value = true;
     dispatchEvent(this, 'on', { value: true });
+    return this;
   }
   off(){
     this.value = false;
     dispatchEvent(this, 'on', { value: false });
+    return this;
   }
   toggle(){
     if(this.value) this.off();
     else this.on();
     dispatchEvent(this, 'toggle', { value: this.value });
+    return this;
   }
 
   get shadowTemplate(){

package/src/utils/formatTimestamp.js

@@ -1,11 +1,27 @@
-export default (timestamp, forceLocale) => {
-  return Intl.DateTimeFormat(forceLocale || navigator.language, {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    millisecond: '3-digit'
-  }).format(new Date(parseInt(timestamp)));
+export default (timestamp, format, forceLocale) => {
+  const date = new Date(parseInt(timestamp));
+  if (format) {
+    const pad = (num, size) => ('000' + num).slice(size * -1);
+    const tokens = {
+      YYYY: date.getFullYear(),
+      YY: String(date.getFullYear()).slice(-2),
+      MM: pad(date.getMonth() + 1, 2),
+      M: date.getMonth() + 1,
+      DD: pad(date.getDate(), 2),
+      D: date.getDate(),
+      hh: pad(date.getHours(), 2),
+      h: date.getHours(),
+      mm: pad(date.getMinutes(), 2),
+      m: date.getMinutes(),
+      ss: pad(date.getSeconds(), 2),
+      s: date.getSeconds(),
+      iiii: pad(date.getMilliseconds(), 3),
+      iii: pad(date.getMilliseconds(), 3),
+      ii: pad(date.getMilliseconds(), 2),
+      i: date.getMilliseconds()
+    };
+    return format.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g, (matched) => tokens[matched]);
+  } else {
+    return date.toLocaleString(forceLocale || navigator.language);
+  }
 }

package/src/components/Stacks.js

@@ -1,79 +0,0 @@
-import Component from './Component.js';
-
-export default class Stacks extends Component {
-
-  /* Public Members */
-  get panels(){
-    return [...this.querySelectorAll('k-stack-panel')];
-  }
-
-  /* Public Methods */
-  reorderPanels(){
-    const panels = this.panels;
-    panels.reverse().forEach((panel, index) => panel.style.setProperty('--order', index));
-  }
-
-  /* Shadow DOM */
-  get shadowStyles(){
-    return /*css*/`
-      :host {
-        --stack_width: 16rem;
-        display: block;
-        height: 100%;
-        position: relative;
-      }
-    `;
-  }
-}
-window.customElements.define('k-stacks', Stacks);
-
-export class StackPanel extends Component {
-  constructor(){
-    super();
-
-    this.registerAttribute('stack', 0);
-  }
-
-  /* Lifecycle Callbacks */
-  connectedCallback(){
-    super.connectedCallback();
-    const stacks = this.stacks;
-    if(stacks) stacks.reorderPanels();
-  }
-  attributeChangedCallback(n, oV, nV){
-    super.attributeChangedCallback(n, oV, nV);
-    if(n ==='stack' && oV !== nV){
-      this.style.setProperty('--stack', nV);
-    }
-  }
-
-  /* Protected Members */
-  get stacks(){
-    return this.closest('k-stacks');
-  }
-
-
-  /* Shadow DOM */
-  get shadowStyles(){
-    return /*css*/`
-      :host {
-        --stack: 0;
-        display: block;
-        height: 100%;
-        width: var(--stack_width);
-        position: absolute;
-        top: 0;
-        left: calc(var(--stack) * var(--stack_width));
-        transition: left var(--animation_ms) ease-in-out;
-        z-index: var(--order);
-      }
-    `;
-  }
-
-  /* Static Members */
-  static observedAttributes = [
-    ...super.observedAttributes,
-    'stack'
-  ];
-}
-window.customElements.define('k-stack-panel', StackPanel);

package/src/utils/files.js

@@ -1,15 +0,0 @@
-export const getDir = async () => {
-
-}
-let id,
-    interval = 1000;
-const watchers = new Map();
-const poll = () => {
-
-};
-export const watchDir = async (dirHandle, callback, interval = 1000) => {
-  
-}
-export const unwatchDir = async (dirHandle, callback) => {
-
-}