kempo 4.2.4 → 4.2.5

package/src/components/Resize.js

@@ -1,168 +0,0 @@
-import Component from './Component.js';
-import drag from '../utils/drag.js';
-
-const startSize = Symbol('startSize'),
-      dragStartHandler = Symbol('dragStartHandler'),
-      dragEndHandler = Symbol('dragEndHandler'),
-      dragSideHandler = Symbol('dragSideHandler'),
-      dragBottomHandler = Symbol('dragBottomHandler'),
-      dragCornerHandler = Symbol('dragCornerHandler'),
-      cleanupFuncs = Symbol('cleanupFuncs');
-export default class Resize extends Component {
-  constructor(){
-    super();
-
-    this[startSize] = {width: 0, height: 0};
-
-    this[dragStartHandler] = ({element}) => {
-      const { width, height } = this.getBoundingClientRect();
-      this[startSize].width = width;
-      this[startSize].height = height;
-      this.resizing = element.id;
-    }
-    this[dragEndHandler] = () => {
-      this.resizing = '';
-    }
-    this[dragSideHandler] = ({x}) => {
-      this.style.width = this[startSize].width + x + 'px';
-    }
-    this[dragBottomHandler] = ({y}) => {
-      this.style.height = this[startSize].height + y + 'px';
-    }
-    this[dragCornerHandler] = ({x, y}) => {
-      this.style.width = this[startSize].width + x + 'px';
-      this.style.height = this[startSize].height + y + 'px';
-    }
-    this[cleanupFuncs] = [];
-
-    this.registerAttribute('resizing', '');
-  }
-  async render(force){
-    if(await super.render(force)){
-      this[cleanupFuncs].push(drag({
-        element: this.shadowRoot.getElementById('side'),
-        startCallback: this[dragStartHandler],
-        endCallback: this[dragEndHandler],
-        callback: this[dragSideHandler],
-        preventScroll: true
-      }));
-      this[cleanupFuncs].push(drag({
-        element: this.shadowRoot.getElementById('bottom'),
-        startCallback: this[dragStartHandler],
-        endCallback: this[dragEndHandler],
-        callback: this[dragBottomHandler],
-        preventScroll: true
-      }));
-      this[cleanupFuncs].push(drag({
-        element: this.shadowRoot.getElementById('corner'),
-        startCallback: this[dragStartHandler],
-        endCallback: this[dragEndHandler],
-        callback: this[dragCornerHandler],
-        preventScroll: true
-      }));
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    this[cleanupFuncs].forEach( cleanup => cleanup());
-  }
-  get shadowTemplate(){
-    return /*html*/`
-      <div id="main">
-        ${super.shadowTemplate}
-      </div>
-      <div id="side" class="handle">
-        <svg viewBox="0 0 15 64" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m 15.000001,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 -1.384999,0 -2.5,1.338002 -2.5,3 v 58 c 0,1.661998 1.115001,3 2.5,3 1.384999,0 2.5,-1.338002 2.5,-3 z M 5.0000008,3 c 0,-1.661998 -1.115001,-3 -2.5,-3 C 1.1150018,0 7.5891117e-7,1.338002 7.5891117e-7,3 v 58 c 0,1.661998 1.11500104108883,3 2.50000004108883,3 1.384999,0 2.5,-1.338002 2.5,-3 z" /></svg>
-      </div>
-      <div id="bottom" class="handle">
-        <svg viewBox="0 0 64 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 3,0 C 1.3380017,0 0,1.1150014 0,2.5 0,3.8849986 1.3380017,5 3,5 H 61 C 62.661998,5 64,3.8849986 64,2.5 64,1.1150014 62.661998,0 61,0 Z M 3,10 C 1.3380017,10 0,11.115001 0,12.5 0,13.884999 1.3380017,15 3,15 h 58 c 1.661998,0 3,-1.115001 3,-2.5 C 64,11.115001 62.661998,10 61,10 Z" /></svg>
-      </div>
-      <div id="corner" class="handle">
-        <svg version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m12.735 3.0095e-4c-0.77288 0.011702-1.6098 0.36368-2.2773 1.0313l-9.4258 9.4258c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l9.4258-9.4258c1.1868-1.1868 1.3772-2.906 0.42774-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352zm0 8.5684c-0.77288 0.011702-1.6098 0.36564-2.2773 1.0332l-0.85744 0.85546c-1.1868 1.1868-1.3772 2.908-0.42773 3.8574 0.94943 0.94943 2.6687 0.7571 3.8555-0.42969l0.85742-0.85742c1.1868-1.1868 1.3772-2.906 0.42773-3.8555-0.41537-0.41537-0.977-0.61262-1.5781-0.60352z" /></svg>
-      </div>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        --handle_size: 1rem;
-
-        display: grid;
-        grid-template-columns: 1fr var(--handle_size);
-        grid-template-rows: 1fr var(--handle_size);
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        min-width: 10rem;
-        max-width: 100%;
-        min-height: 10rem;
-        max-height: 100%;
-      }
-      :host([dimention="height"]){
-        grid-template-columns: 1fr;
-      }
-      :host([dimention="width"]){
-        grid-template-rows: 1fr;
-      }
-      #main {
-        grid-row: 1;
-        grid-column: 1;
-        overflow: auto;
-      }
-      #side {
-        grid-row: 1;
-        grid-column: 2;
-        cursor: ew-resize;
-      }
-      #bottom {
-        grid-row: 2;
-        grid-column: 1;
-        text-align: center;
-        cursor: ns-resize;
-      }
-      #corner {
-        grid-row: 2;
-        grid-column: 2;
-        overflow: hidden;
-        cursor: nwse-resize;
-      }
-      .handle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .handle svg {
-        transform: scale(0.5);
-      }
-      #bottom svg {
-        height: var(--handle_size);
-      }
-      #side svg {
-        width: var(--handle_size);
-      }
-      #corner svg {
-        width: var(--handle_size);
-        height: var(--handle_size);
-      }
-      :host(:not([resizing=""])) #main {
-        pointer-events: none;
-      }
-      :host([resizing="side"]) #side,
-      :host([resizing="corner"]) #side,
-      :host([resizing="corner"]) #corner,
-      :host([resizing="corner"]) #bottom,
-      :host([resizing="bottom"]) #bottom {
-        background-color: var(--c_highlight);
-      }
-      :host([dimention="height"]) #side,
-      :host([dimention="height"]) #corner,
-      :host([dimention="width"]) #bottom,
-      :host([dimention="width"]) #corner {
-        display: none;
-      }
-    `;
-  }
-}
-window.customElements.define('k-resize', Resize);

package/src/components/Search.js

@@ -1,140 +0,0 @@
-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 {
-  static searchDataUrl = '/search.json';
-
-  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.searchDataUrl)).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;
-        color: var(--tc_primary);
-      }
-      #results a:last-child {
-        border-bottom: 0;
-      }
-    `;
-  }
-}
-window.customElements.define('k-search', Search);

package/src/components/ShowMore.js

@@ -1,102 +0,0 @@
-import LazyComponent from './LazyComponent.js';
-import './Icon.js';
-import {
-  onEvent,
-  offEvent,
-  dispatchEvent
-} from '../utils/element.js';
-
-const toggleClickHandler = Symbol();
-export default class ShowMore extends LazyComponent {
-  constructor(){
-    super();
-
-    this[toggleClickHandler] = () => this.toggle();
-
-    this.registerAttribute('opened', false);
-  }
-  
-  /* Lifecycle Callbacks */
-  async render(force){
-    await super.render(force);
-    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;
-  }
-  less(){
-    this.opened = false;
-  }
-  toggle(){
-    this.opened = !this.opened;
-  }
-
-  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/src/components/SideMenu.js

@@ -1,150 +0,0 @@
-import LazyComponent from './LazyComponent.js';
-import './Icon.js';
-import './FocusCapture.js';
-import {
-  onEvent,
-  offEvent,
-  dispatchEvent
-} from '../utils/element.js';
-
-export default 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 observedAttributes = [...super.observedAttributes, 'opened'];
-}
-window.customElements.define('k-side-menu', SideMenu);