kempo-ui 0.0.3 → 0.0.4

package/src/components/PhotoViewer.js

@@ -0,0 +1,368 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
+import { boolExists } from '../utils/propConverters.js';
+import './Icon.js';
+
+export default class PhotoViewer extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		src: { type: String, reflect: true },
+		alt: { type: String, reflect: true },
+		fullscreen: { type: Boolean, reflect: true, converter: boolExists },
+		keyboardControls: { type: Boolean, reflect: true, attribute: 'keyboard-controls', converter: boolExists },
+		global: { type: Boolean, reflect: true, converter: boolExists }
+	};
+
+	constructor() {
+		super();
+		this.src = '';
+		this.alt = '';
+		this.fullscreen = false;
+		this.keyboardControls = true;
+		this.global = false;
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleImageClick = () => {
+		this.open();
+	}
+
+	handleImageKeydown = event => {
+		if(event.key === 'Enter' && !this.fullscreen) {
+			this.open();
+		}
+	}
+
+	handleCloseClick = () => {
+		this.close();
+	}
+
+	handleOverlayClick = event => {
+		if(event.target === event.currentTarget) {
+			this.close();
+		}
+	}
+
+	handlePrevClick = event => {
+		event.stopPropagation();
+		const prev = this.getPrevSibling();
+		if(prev) {
+			this.close();
+			prev.open();
+		}
+	}
+
+	handleNextClick = event => {
+		event.stopPropagation();
+		const next = this.getNextSibling();
+		if(next) {
+			this.close();
+			next.open();
+		}
+	}
+
+	handleKeydown = event => {
+		if(event.key === 'Escape') {
+			this.close();
+		} else if(event.key === 'ArrowLeft') {
+			const prev = this.getPrevSibling();
+			if(prev) {
+				this.close();
+				prev.open();
+			}
+		} else if(event.key === 'ArrowRight') {
+			const next = this.getNextSibling();
+			if(next) {
+				this.close();
+				next.open();
+			}
+		}
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if(this.keyboardControls) {
+			document.removeEventListener('keydown', this.handleKeydown);
+		}
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		
+		if(changedProperties.has('fullscreen')) {
+			this.dispatchEvent(new CustomEvent(`fullscreenchange`, {
+				detail: { fullscreen: this.fullscreen }
+			}));
+			this.dispatchEvent(new CustomEvent(this.fullscreen ? 'fullscreen' : 'fullscreenclose'));
+			this.updateNavigationState();
+			
+			if(this.keyboardControls) {
+				if(this.fullscreen) {
+					document.addEventListener('keydown', this.handleKeydown);
+				} else {
+					document.removeEventListener('keydown', this.handleKeydown);
+				}
+			}
+		}
+
+		if(changedProperties.has('src') || changedProperties.has('alt')) {
+			this.handleFullscreenCaption();
+		}
+	}
+
+	firstUpdated() {
+		this.handleFullscreenCaption();
+	}
+
+	/*
+		Public Methods
+	*/
+	open() {
+		this.fullscreen = true;
+	}
+
+	close() {
+		this.fullscreen = false;
+	}
+
+	toggle() {
+		this.fullscreen = !this.fullscreen;
+	}
+
+	/*
+		Private Methods
+	*/
+	getPrevSibling() {
+		if(this.global) {
+			const viewers = Array.from(document.getElementsByTagName('k-photo-viewer'));
+			const index = viewers.indexOf(this);
+			if(index === -1) return null;
+			return viewers[index === 0 ? viewers.length - 1 : index - 1];
+		} else {
+			let prev = this.previousElementSibling;
+			while(prev && prev.tagName !== 'K-PHOTO-VIEWER') {
+				prev = prev.previousElementSibling;
+			}
+			if(!prev && this.hasPhotoSiblings()) {
+				prev = this.parentElement.lastElementChild;
+				while(prev && prev.tagName !== 'K-PHOTO-VIEWER') {
+					prev = prev.previousElementSibling;
+				}
+			}
+			return prev;
+		}
+	}
+
+	getNextSibling() {
+		if(this.global) {
+			const viewers = Array.from(document.getElementsByTagName('k-photo-viewer'));
+			const index = viewers.indexOf(this);
+			if(index === -1) return null;
+			return viewers[index === viewers.length - 1 ? 0 : index + 1];
+		} else {
+			let next = this.nextElementSibling;
+			while(next && next.tagName !== 'K-PHOTO-VIEWER') {
+				next = next.nextElementSibling;
+			}
+			if(!next && this.hasPhotoSiblings()) {
+				next = this.parentElement.firstElementChild;
+				while(next && next.tagName !== 'K-PHOTO-VIEWER') {
+					next = next.nextElementSibling;
+				}
+			}
+			return next;
+		}
+	}
+
+	hasPhotoSiblings() {
+		if(this.global) {
+			return document.getElementsByTagName('k-photo-viewer').length > 1;
+		}
+		return Array.from(this.parentElement.children)
+			.filter(el => el !== this && el.tagName === 'K-PHOTO-VIEWER')
+			.length > 0;
+	}
+
+	updateNavigationState() {
+		const hasNavigation = this.fullscreen && this.hasPhotoSiblings();
+		const navButtons = this.shadowRoot.querySelectorAll('.nav-btn');
+		navButtons.forEach(btn => {
+			btn.style.display = hasNavigation ? '' : 'none';
+		});
+	}
+
+	async handleFullscreenCaption() {
+		await this.updateComplete;
+		const fullscreenSlot = this.shadowRoot.querySelector('slot[name="fullscreen-caption"]');
+		if(fullscreenSlot && !fullscreenSlot.assignedNodes().length) {
+			const defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+			const contents = defaultSlot ? defaultSlot.assignedNodes() : [];
+			contents.forEach(node => {
+				if(node.nodeType === Node.ELEMENT_NODE) {
+					const clone = node.cloneNode(true);
+					clone.slot = 'fullscreen-caption';
+					this.appendChild(clone);
+				}
+			});
+		}
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: block;
+		}
+		#wrapper {
+			position: relative;
+			width: 100%;
+			height: 100%;
+		}
+		#img {
+			max-width: 100%;
+			height: auto;
+			cursor: pointer;
+			outline: none;
+			border-radius: var(--img_radius, 0);
+		}
+		#img:focus {
+			box-shadow: var(--focus_shadow);
+		}
+		#fullscreen-overlay {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 9999;
+			background: rgba(0,0,0,0.9);
+			padding: 2rem;
+			display: none;
+		}
+		:host([fullscreen]) #fullscreen-overlay {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.content {
+			position: relative;
+			max-width: 100%;
+			max-height: 90vh;
+		}
+		#fullscreen-img {
+			max-height: 75vh;
+			max-width: 100%;
+			object-fit: contain;
+			cursor: default;
+		}
+		#close {
+			position: absolute;
+			top: 1rem;
+			right: 1rem;
+			z-index: 1;
+			background: none;
+			border: none;
+			color: white;
+			cursor: pointer;
+		}
+		.nav-btn {
+			position: fixed;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: 1;
+			background: none;
+			border: none;
+			color: white;
+			cursor: pointer;
+			padding: 1rem;
+			opacity: 0.7;
+			font-size: 3rem;
+			-webkit-text-stroke: 1px black;
+			text-stroke: 1px black;
+			text-shadow: 0 0 3px rgba(0,0,0,0.8);
+		}
+		.nav-btn::slotted(*),
+		.nav-btn k-icon {
+			filter: drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,1));
+		}
+		.nav-btn:hover {
+			opacity: 1;
+		}
+		#prev {
+			left: 1rem;
+		}
+		#next {
+			right: 1rem;
+		}
+		.caption {
+			text-align: center;
+			max-width: 600px;
+			width: fit-content;
+			margin: 1rem auto 0;
+		}
+		#fullscreen-overlay .caption {
+			color: white;
+		}
+		:host([fullscreen]) .caption {
+			color: white;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<div id="wrapper">
+				<img 
+					id="img" 
+					src="${this.src}" 
+					alt="${this.alt}" 
+					tabindex="0"
+					@click=${this.handleImageClick}
+					@keydown=${this.handleImageKeydown}
+				/>
+				<div class="caption">
+					<slot></slot>
+				</div>
+				<div id="fullscreen-overlay" @click=${this.handleOverlayClick}>
+					<button id="close" class="no-btn" @click=${this.handleCloseClick}>
+						<slot name="close">
+							<k-icon name="close"></k-icon>
+						</slot>
+					</button>
+					<button id="prev" class="nav-btn no-btn" @click=${this.handlePrevClick}>
+						<slot name="prev">
+							<k-icon name="chevron-left"></k-icon>
+						</slot>
+					</button>
+					<button id="next" class="nav-btn no-btn" @click=${this.handleNextClick}>
+						<slot name="next">
+							<k-icon name="chevron-right"></k-icon>
+						</slot>
+					</button>
+					<div class="content">
+						<img id="fullscreen-img" src="${this.src}" alt="${this.alt}" />
+						<div class="caption">
+							<slot name="fullscreen-caption"></slot>
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define('k-photo-viewer', PhotoViewer);

package/src/components/Resize.js

@@ -0,0 +1,210 @@
+import { LitElement, html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import Icon from './Icon.js';
+import drag from '../utils/drag.js';
+
+export default class Resize extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		resizing: { type: String, reflect: true },
+		dimention: { type: String, reflect: true }
+	};
+
+	/*
+		Lifecycle Callbacks
+	*/
+	constructor() {
+		super();
+		this.resizing = '';
+		this.dimension = '';
+		this.startSize = { width: 0, height: 0 };
+		this.cleanupFuncs = [];
+	}
+
+	firstUpdated() {
+		super.firstUpdated();
+		this.setupDragHandlers();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.cleanupFuncs.forEach(cleanup => cleanup());
+	}
+
+	/*
+		Event Handlers
+	*/
+	dragStartHandler = ({ element }) => {
+		const { width, height } = this.getBoundingClientRect();
+		this.startSize.width = width;
+		this.startSize.height = height;
+		this.resizing = element.id;
+	};
+
+	dragEndHandler = () => {
+		this.resizing = '';
+	};
+
+	dragSideHandler = ({ x }) => {
+		this.style.width = this.startSize.width + x + 'px';
+	};
+
+	dragBottomHandler = ({ y }) => {
+		this.style.height = this.startSize.height + y + 'px';
+	};
+
+	dragCornerHandler = ({ x, y }) => {
+		this.style.width = this.startSize.width + x + 'px';
+		this.style.height = this.startSize.height + y + 'px';
+	};
+
+	/*
+		Utility Methods
+	*/
+	setupDragHandlers() {
+		const sideHandle = this.shadowRoot.getElementById('side');
+		const bottomHandle = this.shadowRoot.getElementById('bottom');
+		const cornerHandle = this.shadowRoot.getElementById('corner');
+
+		if(sideHandle) {
+			this.cleanupFuncs.push(drag({
+				element: sideHandle,
+				startCallback: this.dragStartHandler,
+				endCallback: this.dragEndHandler,
+				callback: this.dragSideHandler,
+				preventScroll: true
+			}));
+		}
+
+		if(bottomHandle) {
+			this.cleanupFuncs.push(drag({
+				element: bottomHandle,
+				startCallback: this.dragStartHandler,
+				endCallback: this.dragEndHandler,
+				callback: this.dragBottomHandler,
+				preventScroll: true
+			}));
+		}
+
+		if(cornerHandle) {
+			this.cleanupFuncs.push(drag({
+				element: cornerHandle,
+				startCallback: this.dragStartHandler,
+				endCallback: this.dragEndHandler,
+				callback: this.dragCornerHandler,
+				preventScroll: true
+			}));
+		}
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		: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([dimension="height"]) {
+			grid-template-columns: 1fr;
+		}
+		:host([dimension="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([dimension="height"]) #side,
+		:host([dimension="height"]) #corner,
+		:host([dimension="width"]) #bottom,
+		:host([dimension="width"]) #corner {
+			display: none;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<div id="main">
+				<slot></slot>
+			</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>
+		`;
+	}
+}
+
+customElements.define('k-resize', Resize);

package/src/components/ShadowComponent.js

@@ -1,12 +1,14 @@
 import { LitElement } from '../lit-all.min.js';
 
 export default class ShadowComponent extends LitElement {
+    static stylesheetPath = '/kempo.min.css';
+
     createRenderRoot() {
         const shadowRoot = this.attachShadow({ mode: 'open' });
         
         const link = document.createElement('link');
         link.rel = 'stylesheet';
-        link.href = '/kempo.min.css';
+        link.href = this.constructor.stylesheetPath;
         shadowRoot.appendChild(link);
         
         // Inject component styles if they exist

package/src/components/ShowMore.js

@@ -0,0 +1,109 @@
+import { LitElement, html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import Icon from './Icon.js';
+import { boolExists } from '../utils/propConverters.js';
+
+export default class ShowMore extends ShadowComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		opened: { type: Boolean, converter: boolExists, reflect: true }
+	};
+
+	/*
+		Lifecycle Callbacks
+	*/
+	constructor() {
+		super();
+		this.opened = false;
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		
+		if(changedProperties.has('opened')) {
+			this.dispatchEvent(new CustomEvent('change', {
+				detail: { opened: this.opened }
+			}));
+			this.dispatchEvent(new CustomEvent(this.opened ? 'opened' : 'closed'));
+		}
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleToggleClick = () => {
+		this.toggle();
+	};
+
+	/*
+		Public Methods
+	*/
+	more() {
+		this.opened = true;
+	}
+
+	less() {
+		this.opened = false;
+	}
+
+	toggle() {
+		this.opened = !this.opened;
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		: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;
+		}
+	`;
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html`
+			<div id="wrapper">
+				<div id="content">
+					<slot></slot>
+				</div>
+				<button id="toggle" @click=${this.handleToggleClick} 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>
+		`;
+	}
+}
+
+customElements.define('k-show-more', ShowMore);