kempo 4.2.4 → 4.2.5

package/src/components/Sortable.js

@@ -1,169 +0,0 @@
-import Component from './Component.js';
-import { onEvent, offEvent, dispatchEvent } from '../utils/element.js';
-import drag from '../utils/drag.js';
-
-const dragStartHandler = Symbol('dragStartHandler'),
-      dragMoveHandler = Symbol('dragMoveHandler'),
-      dragEndHandler = Symbol('dragEndHandler'),
-      cleanup = Symbol('cleanup');
-
-export class Sortable extends Component {
-  constructor(){
-    super();
-
-    this.registerAttributes({
-      sorting: false
-    });
-  }
-  async render(force){
-    if(await super.render(force)){
-
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    this.cleanupFuncs.forEach(func => func());
-  }
-
-  getCursorElement(){
-    const items = Array.from(this.children).filter(child => child.tagName === 'K-SORTABLE-ITEM' && !child.hasAttribute('sorting'));
-    if (items.length === 0) return null;
-
-    const cursorY = event.clientY;
-    if (cursorY < items[0].getBoundingClientRect().top) {
-      return [items[0], 'before'];
-    }
-    if (cursorY > items[items.length - 1].getBoundingClientRect().bottom) {
-      return [items[items.length - 1], 'after'];
-    }
-
-    for (const item of items) {
-      const rect = item.getBoundingClientRect();
-      const middleY = rect.top + rect.height / 2;
-      if (cursorY < middleY) {
-      return [item, 'before'];
-      } else if (cursorY < rect.bottom) {
-      return [item, 'after'];
-      }
-    }
-    return null;
-  }
-}
-window.customElements.define('k-sortable', Sortable);
-
-export class SortableItem extends Component {
-  constructor(){
-    super();
-
-    /* Private Methods */
-    this[dragStartHandler] = () => {
-      this.sorting = true;
-    }
-    this[dragMoveHandler] = ({y}) => {
-      this.style.transform = `translateY(${y}px)`;
-      this.style.zIndex = 9999;
-      const [target, position] = this.sortable.getCursorElement();
-      Array.from(this.sortable.children).forEach(child => {
-        child.classList.remove('target-before', 'target-after');
-      });
-      if (target) {
-        target.classList.add(`target-${position}`);
-      }
-    }
-    this[dragEndHandler] = ({y}) => {
-      this.sorting = false;
-      this.style.transform = '';
-      this.style.zIndex = '';
-      const [target, position] = this.sortable.getCursorElement();
-      Array.from(this.sortable.children).forEach(child => {
-        child.classList.remove('target-before', 'target-after');
-      });
-      if (target) {
-        if (position === 'before') {
-          this.sortable.insertBefore(this, target);
-        } else if (position === 'after') {
-          this.sortable.insertBefore(this, target.nextSibling);
-        }
-        dispatchEvent(this.sortable, 'sort');
-      }
-    }
-
-
-    /* Init */
-    this.registerAttributes({
-      sorting: false
-    });
-  }
-
-  /* Lifecycle Callbacks */
-  async render(force = false){
-    if(await super.render(force)){
-      const $handle = this.shadowRoot.getElementById('handle');
-      this[cleanup] = drag({
-        element: $handle,
-        startCallback: this[dragStartHandler],
-        moveCallback: this[dragMoveHandler],
-        endCallback: this[dragEndHandler]
-      });
-      return true;
-    }
-    return false;
-  }
-
-  /* Protected Members */
-  get sortable(){
-    return this.closest('k-sortable');
-  }
-
-
-  /* Shadow DOM */
-  get shadowTemplate(){
-    return /*html*/`
-      <div id="handle">
-        <k-icon name="drag-handle"></k-icon>
-      </div>
-      <div id="content" class="p pl0">
-        ${super.shadowTemplate}
-      </div>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-        border: 1px solid var(--c_border);
-        user-select: none;
-        position: relative;
-      }
-      :host([sorting]){
-       opacity: 0.8;
-      }
-      #handle {
-        display: inline-block;
-        cursor: pointer;
-        padding: var(--spacer);
-      }
-      #content {
-      display: inline-block;
-      }
-      :host(.target-before)::before,
-      :host(.target-after)::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background-color: var(--c_primary);
-      }
-      :host(.target-before)::before {
-        top: -2px;
-      }
-      :host(.target-after)::after {
-        bottom: -2px;
-      }
-    `;
-  }
-}
-window.customElements.define('k-sortable-item', SortableItem);

package/src/components/Split.js

@@ -1,164 +0,0 @@
-import Component from './Component.js';
-import drag from '../utils/drag.js';
-import {
-  dispatchEvent
-} from '../utils/element.js';
-import {
-  watchWindowSize,
-  unwatchWindowSize
-} from '../utils/watchWindowSize.js'
-
-const dragStartWidth = Symbol(),
-      dragStartCallback = Symbol(),
-      dragEndCallback = Symbol(),
-      dragCallback = Symbol(),
-      dragCleanup = Symbol(),
-      windowResizeHandler = Symbol();
-export default class Split extends Component {
-  constructor({
-    stackWidth = 0
-  } = {}){
-    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] = () => {}
-    this[windowResizeHandler] = (width) => {
-      this.stacked = width <= this.stackWidth;
-    }
-
-    /* Init */
-    this.registerAttributes({
-      resizing: false,
-      stacked: false,
-      stackWidth
-    });
-  }
-
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    this[dragCleanup]();
-  }
-  async render(force){
-    if(await super.render(force)){
-      this[dragCleanup] = drag({
-        element: this.shadowRoot.getElementById('divider-handle'),
-        callback: this[dragCallback],
-        startCallback: this[dragStartCallback],
-        endCallback: this[dragEndCallback]
-      });
-      this.stacked = watchWindowSize(this[windowResizeHandler]) <= this.stackWidth;
-      return true;
-    }
-    return false;
-  }
-
-  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;
-      }
-      :host([stacked="true"]),
-      :host([stacked="true"]) #left,
-      :host([stacked="true"]) #right {
-        display: block;
-      }
-      :host([stacked="true"]) #divider-handle {
-        display: none;
-      }
-      :host([stacked="true"]) .pane {
-        min-width: 0;
-        max-width: 100%;
-        max-height: none;
-        overflow: auto;
-      }
-    `;
-  }
-}
-window.customElements.define('k-split', Split);