kempo-ui 0.0.2 → 0.0.4

package/src/components/Import.js

@@ -0,0 +1,104 @@
+import LightComponent from './LightComponent.js';
+import { html, render, unsafeHTML } from '../lit-all.min.js';
+
+export default class Import extends LightComponent {
+	/*
+		Properties
+	*/
+	static properties = {
+		src: {
+			type: String,
+			reflect: true
+		},
+		content: {
+			type: String
+		},
+		scripts: {
+			type: Array
+		}
+	}
+
+	static replacements = {}
+	constructor(){
+		super();
+		this.src = '';
+		this.content = '';
+		this.scripts = [];
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	updated(changedProperties){
+		super.updated(); // Important: call super for LightComponent
+		
+		if(changedProperties.has('src')){
+			this.fetch();
+		}
+		
+		if(changedProperties.has('content') && this.scripts.length > 0){
+			// Execute scripts after DOM content is rendered
+			setTimeout(() => this.executeScripts(), 0);
+		}
+	}
+
+	/*
+		Methods
+	*/
+	async fetch(){
+		let contents = await (await fetch(this.src)).text();
+		for (const [name, value] of Object.entries(Import.replacements)) {
+			contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
+		}
+		
+		// Parse the HTML to extract scripts
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(contents, 'text/html');
+		const scriptElements = doc.querySelectorAll('script');
+		
+		// Extract script sources and inline code
+		this.scripts = Array.from(scriptElements).map(script => ({
+			src: script.src,
+			text: script.textContent,
+			type: script.type || 'text/javascript'
+		}));
+		
+		// Remove script tags from the content
+		scriptElements.forEach(script => script.remove());
+		
+		// Serialize back to string without scripts - use the entire body content
+		this.content = doc.body ? doc.body.innerHTML : contents;
+	}
+
+	executeScripts(){
+		this.scripts.forEach(script => {
+			const scriptElement = document.createElement('script');
+			scriptElement.type = script.type;
+			
+			if (script.src) {
+				scriptElement.src = script.src;
+			} else if (script.text) {
+				scriptElement.textContent = script.text;
+			}
+			
+			// Append to head to execute
+			document.head.appendChild(scriptElement);
+		});
+		
+		// Clear scripts after execution to avoid re-execution
+		this.scripts = [];
+	}
+
+	/*
+		Rendering
+	*/
+	renderLightDom() {
+		if (!this.content) {
+			return html``;
+		}
+		
+		// Use unsafeHTML to render the actual HTML content
+		return html`${unsafeHTML(this.content)}`;
+	}
+}
+window.customElements.define('k-import', Import);

package/src/components/LightComponent.js

@@ -1,32 +1,32 @@
-import { LitElement, html, render } from '../lit-all.min.js';
-
-export default class LightComponent extends LitElement {
-
-	/*
-	  Light DOM Setup
-	*/
-
-	createRenderRoot() {
-		this.lightRoot = document.createElement('div');
-		this.lightRoot.style.display = 'contents';
-		this.appendChild(this.lightRoot);
-		
-		return this;
-	}
-
-	/*
-	  Lifecycle Callbacks
-	*/
-
-	updated() {
-		render(this.renderLightDom(), this.lightRoot);
-	}
-
-	/*
-	  Rendering
-	*/
-
-	renderLightDom() {
-		return html``;
-	}
-}
+import { LitElement, html, render } from '../lit-all.min.js';
+
+export default class LightComponent extends LitElement {
+
+	/*
+	  Light DOM Setup
+	*/
+
+	createRenderRoot() {
+		this.lightRoot = document.createElement('div');
+		this.lightRoot.style.display = 'contents';
+		this.appendChild(this.lightRoot);
+		
+		return this;
+	}
+
+	/*
+	  Lifecycle Callbacks
+	*/
+
+	updated() {
+		render(this.renderLightDom(), this.lightRoot);
+	}
+
+	/*
+	  Rendering
+	*/
+
+	renderLightDom() {
+		return html``;
+	}
+}

package/src/components/PersistantCollapsible.js

@@ -0,0 +1,69 @@
+import Collapsible from './Collapsible.js';
+
+export default class PersistantCollapsible extends Collapsible {
+	constructor() {
+		super();
+		this.storageKey = '';
+	}
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateStorageKey();
+		this.loadFromStorage();
+		window.addEventListener('storage', this.handleStorageChange);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener('storage', this.handleStorageChange);
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		
+		if(changedProperties.has('opened')) {
+			this.saveToStorage();
+		}
+		
+		if(changedProperties.has('id')) {
+			this.updateStorageKey();
+			this.loadFromStorage();
+		}
+	}
+
+	/*
+		Event Handlers
+	*/
+	handleStorageChange = event => {
+		if(event.key === this.storageKey) {
+			this.loadFromStorage();
+		}
+	}
+
+	/*
+		Private Methods
+	*/
+	updateStorageKey() {
+		this.storageKey = this.id ? `PersistantCollapsible-${this.id}` : '';
+	}
+
+	loadFromStorage() {
+		if(this.storageKey) {
+			const stored = localStorage.getItem(this.storageKey);
+			if(stored !== null) {
+				this.opened = stored === 'true';
+			}
+		}
+	}
+
+	saveToStorage() {
+		if(this.storageKey) {
+			localStorage.setItem(this.storageKey, this.opened.toString());
+		}
+	}
+}
+
+customElements.define('k-p-collapsible', PersistantCollapsible);

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);