kempo-ui 0.0.3 → 0.0.4

package/src/components/Sortable.js

@@ -0,0 +1,193 @@
+import { LitElement, html, css } from '../lit-all.min.js';
+import drag from '../utils/drag.js';
+
+/*
+	Sortable Container Component
+*/
+export class Sortable extends LitElement {
+	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;
+	}
+
+	render(){
+		return html`<slot></slot>`;
+	}
+
+	static styles = css`
+		:host {
+			display: block;
+		}
+	`;
+}
+customElements.define('k-sortable', Sortable);
+
+/*
+	Sortable Item Component
+*/
+export class SortableItem extends LitElement {
+	static properties = {
+		sorting: { type: Boolean, reflect: true }
+	};
+
+	constructor(){
+		super();
+		this.cleanupDrag = null;
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	firstUpdated(){
+		this.setupDrag();
+	}
+
+	updated(changedProperties){
+		super.updated(changedProperties);
+		if(changedProperties.has('sorting') && !this.sorting){
+			// Re-setup drag after sorting completes
+			this.setupDrag();
+		}
+	}
+
+	disconnectedCallback(){
+		super.disconnectedCallback();
+		if(this.cleanupDrag){
+			this.cleanupDrag();
+			this.cleanupDrag = null;
+		}
+	}
+
+	/*
+		Methods
+	*/
+	setupDrag(){
+		if(this.cleanupDrag){
+			this.cleanupDrag();
+		}
+		const handle = this.shadowRoot.getElementById('handle');
+		if(handle){
+			this.cleanupDrag = drag({
+				element: handle,
+				startCallback: this.handleDragStart,
+				moveCallback: this.handleDragMove,
+				endCallback: this.handleDragEnd
+			});
+		}
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleDragStart = () => {
+		this.sorting = true;
+	};
+
+	handleDragMove = ({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}`);
+		}
+	};
+
+	handleDragEnd = () => {
+		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);
+			}
+			this.sortable.dispatchEvent(new CustomEvent('sort', { bubbles: true }));
+		}
+	};
+
+	/*
+		Getters
+	*/
+	get sortable(){
+		return this.closest('k-sortable');
+	}
+
+	/*
+		Rendering
+	*/
+	render(){
+		return html`
+			<div id="handle">
+				<k-icon name="drag-handle"></k-icon>
+			</div>
+			<div id="content" class="p pl0">
+				<slot></slot>
+			</div>
+		`;
+	}
+
+	static styles = css`
+		: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;
+		}
+	`;
+}
+customElements.define('k-sortable-item', SortableItem);

package/src/components/Split.js

@@ -0,0 +1,192 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import drag from '../utils/drag.js';
+import { watchWindowSize, unwatchWindowSize } from '../utils/watchWindowSize.js';
+
+export default class Split extends ShadowComponent {
+	static properties = {
+		resizing: { type: Boolean, reflect: true },
+		stacked: { type: Boolean, reflect: true },
+		stackWidth: { type: Number, attribute: 'stack-width' }
+	};
+
+	constructor() {
+		super();
+		
+		this.resizing = false;
+		this.stacked = false;
+		this.stackWidth = 0;
+		
+		// Private state
+		this.dragStartWidth = 0;
+		this.dragCleanup = () => {};
+		this.windowResizeHandler = this.handleWindowResize.bind(this);
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	firstUpdated() {
+		super.firstUpdated();
+		this.setupDragHandler();
+		this.stacked = watchWindowSize(this.windowResizeHandler) <= this.stackWidth;
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.dragCleanup();
+		unwatchWindowSize(this.windowResizeHandler);
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleWindowResize = (width) => {
+		this.stacked = width <= this.stackWidth;
+	};
+
+	handleDragStart = () => {
+		this.resizing = true;
+		this.dragStartWidth = Math.round(this.shadowRoot.getElementById('left').getBoundingClientRect().width);
+		this.dispatchEvent(new CustomEvent('resizestart', {
+			detail: { startSize: this.dragStartWidth },
+			bubbles: true
+		}));
+	};
+
+	handleDrag = ({ x }) => {
+		const size = `${this.dragStartWidth + x}px`;
+		this.setSize(size);
+		this.dispatchEvent(new CustomEvent('resize', {
+			detail: { size },
+			bubbles: true
+		}));
+	};
+
+	handleDragEnd = ({ x }) => {
+		this.resizing = false;
+		const width = this.dragStartWidth + x;
+		const size = `${width}px`;
+		this.setSize(size);
+		this.dispatchEvent(new CustomEvent('resizeend', {
+			detail: { size },
+			bubbles: true
+		}));
+	};
+
+	/*
+		Public Methods
+	*/
+	setSize(size) {
+		this.style.setProperty('--left_width', size);
+	}
+
+	setupDragHandler() {
+		const handle = this.shadowRoot.getElementById('divider-handle');
+		if(handle) {
+			this.dragCleanup = drag({
+				element: handle,
+				callback: this.handleDrag,
+				startCallback: this.handleDragStart,
+				endCallback: this.handleDragEnd
+			});
+		}
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		: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]) #left,
+		:host([stacked]) #right {
+			display: block;
+		}
+
+		:host([stacked]) #divider-handle {
+			display: none;
+		}
+
+		:host([stacked]) .pane {
+			min-width: 0;
+			max-width: 100%;
+			max-height: none;
+			overflow: auto;
+		}
+
+		:host([stacked]) {
+			display: block;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<div id="left" class="pane">
+				<slot></slot>
+			</div>
+			<div id="divider-handle">
+				<div id="divider-border"></div>
+			</div>
+			<div id="right" class="pane">
+				<slot name="right"></slot>
+			</div>
+		`;
+	}
+}
+
+customElements.define('k-split', Split);