kempo 1.0.0

package/kempo/components/Search.js

@@ -0,0 +1,136 @@
+import Component from './Component.js';
+import debounce from '../utils/debounce.js';
+
+const inputHandler = Symbol('inputHandler'),
+      focusHandler = Symbol('focusHandler'),
+      blurHandler = Symbol('blurHandler');
+export default class Search extends Component {
+  constructor(){
+    super();
+
+    this[inputHandler] = debounce(() => {
+      this.search(this.shadowRoot.getElementById('input').value);
+    });
+    this[focusHandler] = () => {
+      this.opened = true;
+    }
+    this[blurHandler] = () => {
+      setTimeout(()=>{
+        this.opened = false;
+      }, 100);
+    }
+
+    this.registerAttribute('opened', false);
+    this.registerProp('pages', {});
+  }
+  async render(force){
+    if(await super.render(force)){
+      this.pages = await (await fetch('/search.json')).json();
+      const $input = this.shadowRoot.getElementById('input')
+      $input.addEventListener('input', this[inputHandler]);
+      $input.addEventListener('focus', this[focusHandler]);
+      $input.addEventListener('blur', this[blurHandler]);
+      return true;
+    }
+    return false;
+  }
+  search(term){
+    const $results = this.shadowRoot.getElementById('results');
+    if(term === ''){
+      $results.innerHTML =  '';
+    } else {
+      const t = term.trim().toLowerCase();
+      Object.keys(this.pages).forEach( path => {
+        const page  = this.pages[path];
+        page.score = 0;
+        if(page.name.toLowerCase().startsWith(t)){
+          page.score += 5;
+        } else if(page.name.toLowerCase().includes(t)){
+          page.score += 3;
+        }
+        if(page.terms.includes(t)){
+          page.score += 3;
+        }
+        page.terms.forEach( term => {
+          if(term.startsWith(t)){
+            page.score += 2;
+          } else if(term.includes(t)){
+            page.score += 1;
+          }
+        });
+      });
+      const results = Object.keys(this.pages)
+        .map( path => {
+          return {
+            path: path,
+            ...(this.pages[path])
+          }
+        })
+        .filter(({score})=>score)
+        .sort(({score: a}, {score: b})=>b-a)
+        .slice(0, 4);
+      if(results.length){
+        $results.innerHTML = results.map(({
+          path,
+          name
+        }) => `<a href="${path}">${name}</a>`).join('');
+      } else {
+        $results.innerHTML = `<a>No Results</a>`;
+      }
+    }
+  }
+
+
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="wrapper">
+        <input
+          id="input"
+          placeholder="Search"
+          type="search"
+        />
+        <div id="results"></div>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      :host {
+        display: inline-block;
+        align-self: center;
+      }
+      #wrapper {
+        position: relative;
+      }
+      #input {
+        width: 100%;
+        margin: 0;
+      }
+      #results {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        max-height: 20rem;
+        background-color: var(--c_bg);
+        color: var(--tc);
+        box-shadow: var(--drop_shadow);
+      }
+      :host([opened="true"]) #results {
+        display: block;
+      }
+      #results a {
+        display: block;
+        padding: var(--spacer_h);
+        text-decoration: none;
+        border-bottom: 1px solid var(--c_border);
+        border-radius: 0;
+      }
+      #results a:last-child {
+        border-bottom: 0;
+      }
+    `;
+  }
+}
+window.customElements.define('k-search', Search);

package/kempo/components/ShowMore.js

@@ -0,0 +1,82 @@
+import LazyComponent from './LazyComponent.js';
+import './Icon.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+export default class ShowMore extends LazyComponent {
+  constructor(){
+    super();
+
+    this.registerAttribute('opened', false);
+    this.registerProp('_toggleClickHandler', () => this.toggle());
+  }
+  async render(force){
+    await super.render(force);
+    onEvent(this.shadowRoot.getElementById('toggle'), 'click', this._toggleClickHandler);
+  }
+  more(){
+    this.opened = true;
+  }
+  less(){
+    this.opened = false;
+  }
+  toggle(){
+    this.opened?this.less():this.more();
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="wrapper">
+        <div id="content">
+          ${super.shadowTemplate}
+        </div>
+        <button
+          id="toggle"
+          class="no-btn"
+        >
+          <span id="more">
+            <slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>
+          </span>
+          <span id="less">
+            <slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>
+          </span>
+        </button>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        --closed_height: 7rem;
+        
+        display: block;
+      }
+      :host(:not([opened])) #content{
+        height: var(--closed_height);
+        overflow-y: hidden;
+      }
+      :host(:not([opened])) #content {
+        margin-bottom: calc(var(--closed_height) * -0.9);
+      }
+      :host(:not([opened]))  #toggle {
+        padding-top: calc(var(--closed_height) - 2rem);
+        background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);
+      }
+      #toggle {
+        width: 100%;
+        padding: var(--spacer_h);
+        text-align: center;
+        background: var(--c_bg);
+      }
+      :host([opened]) #more,
+      :host(:not([opened])) #less {
+        display: none;
+      }
+    `;
+  }
+}
+window.customElements.define('k-show-more', ShowMore);

package/kempo/components/SideMenu.js

@@ -0,0 +1,156 @@
+import LazyComponent from './LazyComponent.js';
+import './Icon.js';
+import './FocusCapture.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+export class SideMenu extends LazyComponent {
+  constructor(){
+    super();
+
+    this.registerAttribute('opened', false);
+    this.registerAttribute('overlayClose', true);
+    this.registerProps({
+      _overlayClick: () => {
+        if(this.overlayClose) this.close();
+      }
+    });
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('overlay'), 'click', this._overlayClick);
+  }
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(n === 'opened'){
+      if(nV === 'true'){
+        dispatchEvent(this, 'change open');
+      } else {
+        dispatchEvent(this, 'change close');
+      }
+    }
+  }
+  render(force){
+    super.render(force);
+    onEvent(this.shadowRoot.getElementById('overlay'), 'click', this._overlayClick);
+  }
+  open(){
+    this.opened = true;
+  }
+  close(){
+    this.opened = false;
+  }
+  toggle(){
+    this.opened?this.close():this.open();
+    dispatchEvent(this, 'toggle');
+  }
+  get shadowTemplate(){
+    return /*html*/`
+      <k-focus-capture>
+        <div id="container">
+          <button id="overlay" class="no-btn">
+            <k-icon id="overlay-x" name="close"></k-icon>
+          </button>
+          <div id="menu">
+            ${super.shadowTemplate}
+          </div>
+        </div>
+      </k-focus-capture>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        --bg: var(--c_bg);
+        --width: 20rem;
+
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        max-width: 100%;
+        height: 100vh;
+        z-index: 100;
+        pointer-events: none;
+      }
+      :host([opened]) {
+        pointer-events: auto;
+      }
+      k-focus-capture {
+        width: 100%;
+        height: 100%;
+      }
+      #container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        transition: opacity var(--animation_ms, 256ms);
+      }
+      :host([opened]) #container {
+        opacity: 1;
+      }
+      #overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background: var(--overlay, rgba(0, 0, 0, 0.5));
+      }
+      #overlay-x {
+        position: absolute;
+        top: var(--spacer_h);
+        right: var(--spacer_h);
+        font-size: 1.75rem;
+        cursor: pointer;
+        color: var(--tc_light);
+      }
+      :host([overlay-close="false"]) #overlay-x {
+        display: none;
+      }
+      :host([overlay-close="false"]) #overlay {
+        cursor: default;
+      }
+      #menu {
+        position: absolute;
+        width: var(--width);
+        max-width: calc(100vw - 6rem);
+        height: 100vh;
+        overflow-y: auto;
+        left: calc(var(--width) * -1);
+        top: 0;
+        background: var(--bg);
+        transition: left var(--animation_ms, 256ms);
+        padding: var(--menu_padding, var(--spacer))
+      }
+      :host([opened]) #menu {
+        left: 0;
+      }
+      :host([side="right"]) #menu {
+        left: auto;
+        transition: right var(--animation_ms, 256ms);
+        right: calc(var(--width) * -1);
+      }
+      :host([opened][side="right"]) #menu {
+        right: 0;
+      }
+      :host([side="right"]) #overlay-x {
+        right: auto;
+        left: var(--spacer_h);
+      }
+    `;
+  }
+
+  static get observedAttributes(){
+    return [
+      'opened',
+      ...super.observedAttributes
+    ]
+  }
+}
+window.customElements.define('k-side-menu', SideMenu);

package/kempo/components/Split.js

@@ -0,0 +1,133 @@
+import Component from './Component.js';
+import drag from '../utils/drag.js';
+import {
+  dispatchEvent
+} from '../utils/element.js';
+
+const dragStartWidth = Symbol(),
+      dragStartCallback = Symbol(),
+      dragEndCallback = Symbol(),
+      dragCallback = Symbol(),
+      dragCleanup = Symbol();
+export default class Split extends Component {
+  constructor(_saveWidth, _loadWidth){
+    super();
+
+    /* Private Members */
+    this[dragStartWidth] = 0;
+
+    /* Private Methods */
+    this[dragStartCallback] = () => {
+      this.resizing = true;
+      this[dragStartWidth] =  Math.round(this.shadowRoot.getElementById('left').getBoundingClientRect().width);
+      dispatchEvent(this, 'resizestart', {
+        startSize: this[dragStartWidth]
+      });
+    }
+    this[dragCallback] = ({x}) => {
+      const size = `${this[dragStartWidth] + x}px`;
+      this.setSize(size);
+      dispatchEvent(this, 'resize', { size } );
+    }
+    this[dragEndCallback] = ({x}) => {
+      this.resizing = false;
+      const width = this[dragStartWidth] + x;
+      const size = `${width}px`;
+      this.setSize(size);
+      dispatchEvent(this, 'resizeend', { size } );
+    }
+    this[dragCleanup] = () => {}
+
+    /* Init */
+    this.registerAttribute('resizing', false);
+  }
+
+  async connectedCallback(){
+    super.connectedCallback();
+    this[dragCleanup] = drag({
+      element: this.shadowRoot.getElementById('divider-handle'),
+      callback: this[dragCallback],
+      startCallback: this[dragStartCallback],
+      endCallback: this[dragEndCallback]
+    });
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    this[dragCleanup]();
+  }
+
+  setSize(size){
+    this.style.setProperty('--left_width', size);
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <div
+        id="left"
+        class="pane"
+      >
+        ${super.shadowTemplate}
+      </div>
+      <div id="divider-handle">
+        <div id="divider-border"></div>
+      </div>
+      <div
+        id="right"
+        class="pane"
+      >
+        <slot name="right"></slot>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        --left_width: calc( (100% - var(--handle_width)) / 2);
+        --handle_width: 0.5rem;
+        --min_pane_width: 6rem;
+
+        height: 100%;
+        display: flex;
+        align-items: stretch;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .pane, #divider-handle {
+        display: inline-block;
+      }
+      .pane {
+        min-width: var(--min_pane_width);
+        max-width: calc(100% - var(--min_pane_width));
+        max-height: 100%;
+        overflow: hidden;
+      }
+      #left {
+        flex: 0 0 var(--left_width);
+      }
+      #divider-handle {
+        display: flex;
+        justify-content: center;
+        width: var(--handle_width);
+        cursor: ew-resize;
+      }
+      :host([resizing]) #divider-handle {
+        background-color: var(--tc_primary);
+      }
+      :host([resizing]) .pane {
+        pointer-events: none;
+        user-select: none;
+      }
+      #divider-border {
+        width: 1px;
+        height: 100%;
+        border-left: 1px solid var(--c_border);
+      }
+      #right {
+        flex: 1 1;
+      }
+      
+    `;
+  }
+}
+window.customElements.define('k-split', Split);