kempo 2.9.2 → 2.10.0

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/Icon.js

@@ -20,7 +20,9 @@ const getIconByName = (name) => {
   return new Promise( async (resolve, reject) => {
     let svg;
     for(let i=0; i < Icon.pathToIcons.length && !svg; i++){
-      svg = await tryDir(Icon.pathToIcons[i]);
+      try {
+        svg = await tryDir(Icon.pathToIcons[i]);
+      } catch(e){}
     }
     if(svg){
       resolve(svg);

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]);