kempo 2.2.0 → 2.4.0

package/icons/mode-auto.svg

@@ -0,0 +1 @@
+<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 440 -920 L 440 -760 L 520 -760 L 520 -920 L 440 -920 z M 818.67969 -885.5332 L 583.66602 -651.38281 C 553.04363 -670.31258 518.55019 -680 480 -680 C 424.66678 -680 377.49992 -660.49992 338.5 -621.5 C 299.50008 -582.50008 280 -535.33322 280 -480 C 280 -441.71314 289.5643 -407.43184 308.23633 -376.96484 L 97.058594 -166.5625 L 168.59375 -92.332031 L 263.80078 -187.18945 C 267.09506 -183.63709 270.46257 -180.11555 273.9375 -176.64062 C 343.93736 -106.64077 428.9377 -71.640625 528.9375 -71.640625 C 628.9373 -71.640625 713.93764 -106.64077 783.9375 -176.64062 C 853.93736 -246.64049 888.9375 -331.64082 888.9375 -431.64062 C 888.9375 -440.97395 888.60417 -450.14064 887.9375 -459.14062 C 887.27083 -468.14062 886.27083 -476.97398 884.9375 -485.64062 C 865.60421 -458.30735 840.60411 -436.47393 809.9375 -420.14062 C 779.27089 -403.80733 745.60409 -395.64062 708.9375 -395.64062 C 648.93762 -395.64062 597.93742 -416.64072 555.9375 -458.64062 C 552.62172 -461.95641 549.47084 -465.3433 546.42188 -468.77344 L 890.21484 -811.30273 L 818.67969 -885.5332 z M 212 -806 L 155 -747 L 256 -650 L 308 -706 L 212 -806 z M 480 -600 C 495.83397 -600 510.50253 -597.28065 524.08008 -592.01562 L 367.83594 -436.34375 C 362.67843 -449.80488 360 -464.32853 360 -480 C 360 -513.33327 371.66671 -541.66671 395 -565 C 418.33329 -588.33329 446.66673 -600 480 -600 z M 40 -520 L 40 -440 L 200 -440 L 200 -520 L 40 -520 z M 489.73047 -412.28906 C 492.87534 -408.86757 496.09809 -405.48004 499.4375 -402.14062 C 557.10405 -344.47408 626.93766 -315.64062 708.9375 -315.64062 C 722.27081 -315.64062 735.60419 -316.64064 748.9375 -318.64062 C 762.27081 -320.64062 775.60419 -323.3073 788.9375 -326.64062 C 767.60421 -274.64074 733.60407 -232.4739 686.9375 -200.14062 C 640.27093 -167.80736 587.60405 -151.64062 528.9375 -151.64062 C 451.60432 -151.64062 385.60406 -178.97407 330.9375 -233.64062 C 327.48999 -237.08813 324.17746 -240.59082 320.95312 -244.13086 L 489.73047 -412.28906 z " /></svg>

package/icons/tools.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M756-120 537-339l84-84 219 219-84 84Zm-552 0-84-84 276-276-68-68-28 28-51-51v82l-28 28-121-121 28-28h82l-50-50 142-142q20-20 43-29t47-9q24 0 47 9t43 29l-92 92 50 50-28 28 68 68 90-90q-4-11-6.5-23t-2.5-24q0-59 40.5-99.5T701-841q15 0 28.5 3t27.5 9l-99 99 72 72 99-99q7 14 9.5 27.5T841-701q0 59-40.5 99.5T701-561q-12 0-24-2t-23-7L204-120Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/ContentSlider.js

@@ -0,0 +1,192 @@
+import LazyComponent from './LazyComponent.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+const content = Symbol(),
+      prevClickHandler = Symbol(),
+      nextClickHandler = Symbol(),
+      keydownHandler = Symbol();
+export default class ContentSlider extends LazyComponent {
+  constructor(_content = [], {
+    index = 0,
+    controls = true,
+    globalControls = false,
+    keyboardControls = true,
+    loop = false
+  } = {}){
+    super();
+
+    /* Private Members */
+    this[content] = [..._content];
+
+    /* Private Methods */
+    this[prevClickHandler] = () => this.previous();
+    this[nextClickHandler] = () => this.next();
+    this[keydownHandler] = (event) => {
+      if(event.code === 'ArrowLeft'){
+        event.preventDefault();
+        dispatchEvent(this, 'keyleft');
+        this.previous();
+      } else if(event.code === 'ArrowRight'){
+        event.preventDefault();
+        dispatchEvent(this, 'keyright');
+        this.next();
+      }
+    }
+
+    /* Init */
+    this.registerAttributes({
+      index,
+      controls,
+      keyboardControls,
+      globalControls,
+      loop
+    });
+    this.tabIndex = 0;
+  }
+
+  /* Lifecycle Callback */
+  connectedCallback(){
+    super.connectedCallback();
+    this[content] = [...this.querySelectorAll(':scope > *')];
+  }
+  async render(force){
+    if(await super.render(force)){
+      if(this.keyboardControls){ // add keyboard controls
+        if(this.globalControls){
+          onEvent(window, 'keydown', this[keydownHandler]);
+        } else {
+          onEvent(this, 'keydown', this[keydownHandler]);
+          onEvent(this.shadowRoot, 'keydown', this[keydownHandler]);
+        }
+      }
+      onEvent(this.shadowRoot.getElementById('prev'), 'click', this[prevClickHandler]);
+      onEvent(this.shadowRoot.getElementById('next'), 'click', this[nextClickHandler]);
+      this.renderContent();
+      return true;
+    }
+    return false;
+  }
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(n === 'index' && oV !== nV){
+      const newIndex = parseInt(nV);
+      const validNew = Math.max(Math.min(this[content].length-1, newIndex), 0);
+      if(newIndex !== validNew){
+        this.index = validNew;
+      } else {
+        dispatchEvent(this, 'change', {
+          index: validNew
+        });
+        this.renderContent();
+      }
+    } else if(n === 'keyboard-controls' && oV !== nV){
+      if(this.keyboardControls){ // add keyboard controls
+        if(this.globalControls){
+          onEvent(window, 'keydown', this[keydownHandler]);
+        } else {
+          onEvent(this, 'keydown', this[keydownHandler]);
+          onEvent(this.shadowRoot, 'keydown', this[keydownHandler]);
+        }
+      } else { // remove keyboard controls
+        offEvent(this.globalControls?window:this.shadowRoot, 'keydown', this[keydownHandler]);
+      }
+    }
+  }
+  renderContent(){
+    this.innerHTML = '';
+    this.appendChild(this[content][this.index]);
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('prev'), 'click', this[prevClickHandler]);
+    offEvent(this.shadowRoot.getElementById('next'), 'click', this[nextClickHandler]);
+    offEvent(window, 'keydown', this[keydownHandler]);
+    offEvent(this.shadowRoot, 'keydown', this[keydownHandler]);
+    offEvent(this, 'keydown', this[keydownHandler]);
+  }
+
+  /* Public Methods */
+  previous(){
+    let newIndex = this.index - 1;
+    if(this.loop){
+      if(newIndex < 0) newIndex = this[content].length - 1;
+    }
+    dispatchEvent(this, 'previous', {index: newIndex});
+    this.index = newIndex;
+  }
+  next(){
+    let newIndex = this.index + 1;
+    if(this.loop){
+      if(newIndex >= this[content].length) newIndex = 0;
+    }
+    dispatchEvent(this, 'next', {index: newIndex});
+    this.index = newIndex;
+  }
+  goto(newIndex){
+    dispatchEvent(this, 'goto', {index: newIndex});
+    this.index = newIndex;
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="content">
+        ${super.shadowTemplate}
+      </div>
+      <div id="controls">
+        <button
+          id="prev"
+          class="no-btn"
+        >
+          <slot name="prev">
+            <k-icon name="chevron-left"></k-icon>
+          </slot>
+        </button>
+        <button
+          id="next"
+          class="no-btn"
+        >
+          <slot name="next">
+            <k-icon name="chevron-right"></k-icon>
+          </slot>
+        </button>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+        position: relative;
+        outline: none;
+      }
+      #prev,
+      #next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 2rem;
+      }
+      #next {
+        right: 0;
+      }
+      :host(:not([controls="true"])) #controls {
+        display: none;
+      }
+    `;
+  }
+
+  /* Static Members */
+  static observedAttributes = [
+    ...LazyComponent.observedAttributes,
+    'index',
+    'keyboard-controls',
+    'global-controls'
+  ];
+}
+window.customElements.define('k-content-slider', ContentSlider);

package/src/components/DirectoryViewer.js

@@ -3,12 +3,13 @@ import Component from './Component.js';
 import './Icon.js';
 import {
   onEvent,
-  offEvent
+  offEvent,
+  dispatchEvent
 } from '../utils/element.js';
 import watchDirectoryHandle from '../utils/watchDirectoryHandle.js';
 
 const handle = Symbol(),
-      selectDirectoryClickHandler = Symbol(),
+      loadDirectoryClickHandler = Symbol(),
       openToggleClickHandler = Symbol(),
       fileSelectedHandler = Symbol(),
       watchId = Symbol(),
@@ -24,7 +25,7 @@ export default class DirectoryViewer extends LazyComponent {
     this[filters] = [];
 
     /* Private Methods */
-    this[selectDirectoryClickHandler] = () => this.selectDirectory();
+    this[loadDirectoryClickHandler] = () => this.loadDirectory();
     this[openToggleClickHandler] = () => {
       if(!this.root){
         this.toggleOpen();
@@ -51,7 +52,7 @@ export default class DirectoryViewer extends LazyComponent {
   async render(force){
     if(await super.render(force)){
       onEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
-      onEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
+      onEvent(this.shadowRoot.getElementById('loadDirectory'), 'click', this[loadDirectoryClickHandler]);
       onEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
       this.renderDirectory();
       return true;
@@ -95,7 +96,7 @@ export default class DirectoryViewer extends LazyComponent {
   disconnectedCallback(){
     super.disconnectedCallback();
     offEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
-    offEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
+    offEvent(this.shadowRoot.getElementById('loadDirectory'), 'click', this[loadDirectoryClickHandler]);
     offEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
   }
   attributeChangedCallback(n, oV, nV){
@@ -119,11 +120,15 @@ export default class DirectoryViewer extends LazyComponent {
 
 
   /* Public Methods */
-  async selectDirectory(){
+  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();
       }
     }
@@ -200,7 +205,7 @@ export default class DirectoryViewer extends LazyComponent {
   get shadowTemplate(){
     return /*html*/`
       <button
-        id="selectDirectory"
+        id="loadDirectory"
       >
         <slot name="selectButton">
           <k-icon name="folder-create"></k-icon> Select Directory
@@ -223,7 +228,7 @@ export default class DirectoryViewer extends LazyComponent {
   get shadowStyles(){
     return /*css*/`
       ${super.shadowStyles}
-      :host([has-handle]) #selectDirectory,
+      :host([has-handle]) #loadDirectory,
       :host([opened]) #folder-closed,
       :host(:not([opened])) #folder-opened,
       :host(:not([has-handle])) #folder-closed,

package/src/components/LazyComponent.js

@@ -1,6 +1,6 @@
 import Component from './Component.js';
 import { isInView } from '../utils/element.js';
-
+import raf from '../utils/raf.js';
 
 export default class LazyComponent extends Component {
   constructor(shadowDetails){
@@ -18,21 +18,24 @@ export default class LazyComponent extends Component {
   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();
-    }
+    raf(async ()=>{
+      if(await isInView(this)) await this.inViewCallback();
+    }, 2);
   }
   async inViewCallback(){
-    await this.render();
+    return await this.render();
   }
   async outOfViewCallback(){
     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>`;

package/src/components/ShowMore.js

@@ -6,17 +6,37 @@ import {
   dispatchEvent
 } from '../utils/element.js';
 
+const toggleClickHandler = Symbol();
 export default class ShowMore extends LazyComponent {
   constructor(){
     super();
 
+    this[toggleClickHandler] = () => this.toggle();
+
     this.registerAttribute('opened', false);
-    this.registerProp('_toggleClickHandler', () => this.toggle());
   }
+  
+  /* Lifecycle Callbacks */
   async render(force){
     await super.render(force);
-    onEvent(this.shadowRoot.getElementById('toggle'), 'click', this._toggleClickHandler);
+    onEvent(this.shadowRoot.getElementById('toggle'), 'click', this[toggleClickHandler]);
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('toggle'), 'click', this[toggleClickHandler]);
   }
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(n === 'opened' && oV !== nV){
+      if(this.opened){
+        dispatchEvent(this, 'change opened');
+      } else {
+        dispatchEvent(this, 'change closed');
+      }
+    }
+  }
+
+  /* Public Methods */
   more(){
     this.opened = true;
   }
@@ -24,7 +44,7 @@ export default class ShowMore extends LazyComponent {
     this.opened = false;
   }
   toggle(){
-    this.opened?this.less():this.more();
+    this.opened = !this.opened;
   }
 
   get shadowTemplate(){

package/src/components/ThemeSwitcher.js

@@ -15,7 +15,10 @@ export default class ThemeSwitcher extends Component {
       this.currentTheme =  ThemeSwitcher.getCurrentTheme();
     }
     this[clickHandler] = () => {
-      ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()==='light'?'dark':'light');
+      const current = ThemeSwitcher.getCurrentTheme();
+      if(current === 'auto') ThemeSwitcher.setTheme('light');
+      if(current === 'light') ThemeSwitcher.setTheme('dark');
+      if(current === 'dark') ThemeSwitcher.setTheme('auto');
     }
     this.registerAttribute('currentTheme', ThemeSwitcher.getCurrentTheme());
   }
@@ -27,6 +30,10 @@ export default class ThemeSwitcher extends Component {
     }
     return false;
   }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('toggle'), 'click', this[clickHandler]);
+  }
 
   get shadowTemplate(){
     return /*html*/`
@@ -34,13 +41,20 @@ export default class ThemeSwitcher extends Component {
         id="toggle"
         class="no-btn"
       >
+        <k-icon
+          id="autoMode"
+          name="mode-auto"
+          class="mode"
+        ></k-icon>
         <k-icon
           id="lightMode"
           name="light-mode"
+          class="mode"
         ></k-icon>
         <k-icon
           id="darkMode"
           name="dark-mode"
+          class="mode"
         ></k-icon>
       </button>
     `;
@@ -55,10 +69,14 @@ export default class ThemeSwitcher extends Component {
       #toggle {
         padding: var(--padding);
       }
-      :host([current-theme="dark"]) #darkMode,
-      :host([current-theme="light"]) #lightMode {
+      .mode {
         display: none;
       }
+      :host([current-theme="auto"]) #autoMode,
+      :host([current-theme="light"]) #lightMode,
+      :host([current-theme="dark"]) #darkMode {
+        display: block;
+      }
     `;
   }
 

package/src/kempo-hljs.css

@@ -18,6 +18,7 @@
   --c_deletion: #2b91af;
   --c_caret: black;
 }
+[auto-theme="dark"]:not([theme="light"]),
 [theme="dark"] {
   --c_text: #DCDCDC;
   --c_keyword: #569CD6;

package/src/utils/element.js

@@ -22,10 +22,13 @@ export const offEvent = (element, events, handler, scope = document) => {
     scope.querySelectorAll(element).forEach( el => offEvent(el, events, handler));
   }
 }
-export const dispatchEvent = (element, events, detail, scope = document) => {
+export const dispatchEvent = (element, events, detail, {
+  scope = document,
+  bubbles = false
+}={}) => {
   if(element instanceof EventTarget){
     events.toLowerCase().split(' ').forEach( event => {
-      element.dispatchEvent(new CustomEvent(event, { detail } ));
+      element.dispatchEvent(new CustomEvent(event, { bubbles, detail } ));
     });
   } else if(element instanceof NodeList || element instanceof Array){
     element.forEach( el => dispatchEvent(el, events, handler));

package/src/utils/raf.js

@@ -0,0 +1,10 @@
+const raf = (callback, frames = 1) => {
+  requestAnimationFrame(()=>{
+    if(frames === 1){
+      callback();
+    } else {
+      raf(callback, frames-1);
+    }
+  });
+}
+export default raf;