@torpor/ui 0.0.17 → 0.1.1

package/src/Popover/PopoverContent.torp

@@ -0,0 +1,78 @@
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The content that is displayed for a Popover when it is open, such as a Dialog
+ * in the middle of the screen or a div that slides in from the side.
+ */
+export default function PopoverContent($props: any) {
+	let div: HTMLDivElement;
+
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverContent must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	let closeOnClick = false;
+
+	let first = true;
+	$run(() => {
+		let visible = $state.visible;
+
+		if (first) {
+			first = false;
+			return;
+		}
+
+		if (visible) {
+			// HACK: Because this Popover could be shown with a click, we need to wait for another mousedown
+			// before we close on click. Otherwise the click immediately bubbles to the document
+			closeOnClick = false;
+			addDocumentEvent("mousedown", handleDocumentMouseDown);
+			addDocumentEvent("click", handleDocumentClick);
+			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
+			//await tick();
+			if (context.focusFirstElement) {
+				context.focusFirstElement();
+			}
+		} else {
+			removeDocumentEvent("mousedown", handleDocumentMouseDown);
+			removeDocumentEvent("click", handleDocumentClick);
+			// Focus the anchor element per WAI guidelines
+			if (context.anchorElement?.focus) {
+				context.anchorElement.focus();
+			}
+		}
+	});
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			div &&
+			!div.contains(e.target as HTMLElement) &&
+			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
+		) {
+			context.handleClickOutside!(e);
+		}
+	}
+
+	@render {
+		<div style="display: contents">
+			@if ($state.visible) {
+				<div
+					id={$props.id}
+					class={`torp-popover-content ${$props.class ?? ""}`.trim()}
+					&ref={div}
+				>
+					<:slot />
+				</div>
+			}
+		</div>
+	}
+}

package/src/Popover/PopoverContentAnchored.torp

@@ -0,0 +1,107 @@
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import getScrollParent from "../utils/getScrollParent";
+import setPopoverPosition from "../utils/setPopoverPosition";
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The content that is displayed for a Popover when it is open, displayed
+ * alongside an element.
+ *
+ * @prop {"top" | "right" | "bottom" | "left"} site -- Where the popover will be
+ * shown, relative to the popover button
+ * @prop {"start" | "center" | "end"} alignment -- How the popover will be
+ * aligned, relative to the popover button
+ */
+export default function PopoverContentAnchored($props: any) {
+	$props.side ??= "bottom";
+	$props.alignment ??= "center";
+
+	let div: HTMLDivElement;
+
+	let closeOnClick = false;
+
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverContentAnchored must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	let first = true;
+	$run(() => {
+		let visible = $state.visible;
+
+		if (first) {
+			first = false;
+			return;
+		}
+
+		if (visible) {
+			// HACK: Because this Popover could be shown with a click, we need to wait for another mousedown
+			// before we close on click. Otherwise the click immediately bubbles to the document
+			closeOnClick = false;
+			addDocumentEvent("mousedown", handleDocumentMouseDown);
+			addDocumentEvent("click", handleDocumentClick);
+			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
+			//await tick();
+			setPosition();
+			if (context.focusFirstElement) {
+				context.focusFirstElement();
+			}
+			const scrollParent = getScrollParent(context.anchorElement)
+			scrollParent.addEventListener("resize", setPosition);
+			scrollParent.addEventListener("scroll", setPosition);
+		} else {
+			removeDocumentEvent("mousedown", handleDocumentMouseDown);
+			removeDocumentEvent("click", handleDocumentClick);
+			// Stop listening for window resize and focus the anchor element per WAI guidelines
+			const scrollParent = getScrollParent(context.anchorElement)
+			scrollParent.removeEventListener("resize", setPosition);
+			scrollParent.removeEventListener("scroll", setPosition);
+			if (context.anchorElement?.focus) {
+				context.anchorElement.focus();
+			}
+		}
+	});
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			div &&
+			!div.contains(e.target as HTMLElement) &&
+			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
+		) {
+			e.preventDefault();
+			context.handleClickOutside!(e);
+		}
+	}
+
+	function setPosition() {
+		if (!context.anchorElement) {
+			throw new Error("PopoverContentAnchored must have an anchor element");
+		}
+
+		if (div) {
+			setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
+		}
+	}
+
+	@render {
+		<div style="display: contents">
+			@if ($state.visible) {
+				<div
+					id={$props.id}
+					class={`torp-popover-content-anchored ${$props.class ?? ""}`.trim()}
+					&ref={div}
+					:onmount={(el) => setPopoverPosition(context.anchorElement, el, $props.side, $props.alignment)}
+				>
+					<:slot />
+				</div>
+			}
+		</div>
+	}
+}

package/src/Popover/PopoverContentContextual.torp

@@ -0,0 +1,99 @@
+
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import getScrollParent from "../utils/getScrollParent";
+import setContextPosition from "../utils/setContextPosition";
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The content that is displayed for a Popover when it is open, displayed at the
+ * position that the user right-clicked.
+ */
+export default function PopoverContentContextual($props: any) {	
+	let div: HTMLDivElement;
+
+	let closeOnClick = false;
+
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverContentContextual must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	let first = true;
+	$run(() => {
+		let visible = $state.visible;
+
+		if (first) {
+			first = false;
+			return;
+		}
+
+		if (visible) {
+			// HACK: Because this Contextual could be shown with a click, we need to wait for another mousedown
+			// before we close on click. Otherwise the click immediately bubbles to the document
+			closeOnClick = false;
+			addDocumentEvent("mousedown", handleDocumentMouseDown);
+			addDocumentEvent("click", handleDocumentClick);
+			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
+			//await tick();
+			setPosition();
+			if (context.focusFirstElement) {
+				context.focusFirstElement();
+			}
+			const scrollParent = getScrollParent(context.anchorElement)
+			scrollParent.addEventListener("resize", setPosition);
+			scrollParent.addEventListener("scroll", setPosition);
+		} else {
+			removeDocumentEvent("mousedown", handleDocumentMouseDown);
+			removeDocumentEvent("click", handleDocumentClick);
+			// Stop listening for window resize and focus the anchor element per WAI guidelines
+			const scrollParent = getScrollParent(context.anchorElement)
+			scrollParent.removeEventListener("resize", setPosition);
+			scrollParent.removeEventListener("scroll", setPosition);
+			if (context.anchorElement?.focus) {
+				context.anchorElement.focus();
+			}
+		}
+	});
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			div &&
+			!div.contains(e.target as HTMLElement) &&
+			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
+		) {
+			context.handleClickOutside!(e);
+		}
+	}
+
+	function setPosition() {
+		if (!context.anchorElement) {
+			throw new Error("ContextualContent must have an anchor element");
+		}
+
+		if (div && $state.position) {
+			setContextPosition(context.anchorElement, div, $state.position);
+		}
+	}
+
+	@render {
+		<div style="display: contents">
+			@if ($state.visible) {
+				<div
+					id={$props.id}
+					class={`torp-popover-content-contextual ${$props.class ?? ""}`.trim()}
+					&ref={div}
+					:onmount={(el) => setContextPosition(context.anchorElement, el, $state.position)}
+				>
+					<:slot />
+				</div>
+			}
+		</div>
+	}
+}

package/src/Popover/PopoverOverlay.torp

@@ -0,0 +1,32 @@
+import { disableScroll } from "../mount/disableScroll";
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
+ */
+export default function PopoverOverlay($props: any) {
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverOverlay must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	// Any Popover with an overlay is modal
+	context.modal = true;
+
+	@render {
+		<div style="display: contents">
+			@if ($state.visible) {
+				<div
+					id={$props.id}
+					class={`torp-popover-overlay ${$props.class ?? ""}`.trim()}
+					tabindex="-1"
+					:onmount={(el) => disableScroll(el)}
+				>
+					<:slot />
+				</div>
+			}
+		</div>
+	}
+}

package/src/Popover/PopoverTrigger.torp

@@ -0,0 +1,29 @@
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The button that causes a Popover to appear or disappear.
+ */
+export default function PopoverTrigger($props: any) {
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverTrigger must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	function handleClick() {
+		$state.visible = !$state.visible;
+	}
+
+	@render {
+		<button
+			type="button"
+			id={$props.id}
+			class={`torp-popover-trigger ${$props.class ?? ""}`.trim()}
+			onclick={handleClick}
+			&ref={context.anchorElement}
+		>
+			<:slot />
+		</button>
+	}
+}

package/src/Popover/PopoverTriggerContextual.torp

@@ -0,0 +1,37 @@
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The element that causes a Popover to appear or disappear when right-clicked.
+ */
+export default function PopoverTriggerContextual($props: any) {
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverTriggerContextual must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	function handleContextual(e: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		e.preventDefault();
+		if ($state.position) {
+			// Get the position relative to the element, so we can reposition on scroll
+			const rect = e.currentTarget.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const y = e.clientY - rect.top;
+			$state.position = { x, y };
+			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
+		}
+		$state.visible = !$state.visible;
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-popover-trigger-contextual ${$props.class ?? ""}`.trim()}
+			oncontextmenu={handleContextual}
+			&ref={context.anchorElement}
+		>
+			<:slot />
+		</div>
+	}
+}

package/src/Popover/PopoverTriggerHover.torp

@@ -0,0 +1,38 @@
+
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+import hoverTrigger from "../mount/hoverTrigger";
+
+/**
+ * The div that causes a Popover to appear or disappear when hovered.
+ */
+export default function PopoverTriggerHover($props: any) {
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverTriggerHover must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	function handleHover(node, e) {
+		if ($state.position) {
+			// Get the position relative to the element, so we can reposition on scroll
+			const rect = node.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const y = e.clientY - rect.top;
+			$state.position = { x, y };
+			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
+		}
+		$state.visible = !$state.visible
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-popover-trigger-hover ${$props.class ?? ""}`.trim()}
+			:onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
+			&ref={context.anchorElement}
+		>
+			<:slot />
+		</div>
+	}
+}

package/src/Popover/PopoverTypes.ts

@@ -0,0 +1,30 @@
+export const PopoverContextName = "Popover";
+
+/** The shared context for popover components (Contextual, Prompt and Popover) */
+export interface PopoverContext {
+	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	// HACK: We need to be able to let children (i.e. Dialogs) override the click outside functionality
+	// There may be a more elegant way to accomplish this too
+	handleClickOutside?: (e: MouseEvent) => void;
+	state: PopoverState;
+	modal: boolean;
+	anchorElement?: HTMLElement;
+	// HACK: focusFirstElement is necessary because if we focus the first element e.g. in a Dialog's
+	// onMount, it will scroll the page to the focused element and mess up our careful positioning
+	// We need to be able to manually set the order to
+	// 1. set visible (so we have an element with content)
+	// 2. set position (so the element is in the right place)
+	// 3. set focus (for accessibility)
+	// There may be a more elegant way to accomplish this!
+	focusFirstElement?: () => void;
+}
+
+export interface PopoverState {
+	visible: boolean;
+	position: Point;
+}
+
+export interface Point {
+	x: number;
+	y: number;
+}

package/src/Popover/index.ts

@@ -0,0 +1,29 @@
+import Popover from "./Popover.torp";
+import PopoverContent from "./PopoverContent.torp";
+import PopoverContentAnchored from "./PopoverContentAnchored.torp";
+import PopoverContentContextual from "./PopoverContentContextual.torp";
+import PopoverOverlay from "./PopoverOverlay.torp";
+import PopoverTrigger from "./PopoverTrigger.torp";
+import PopoverTriggerContextual from "./PopoverTriggerContextual.torp";
+import PopoverTriggerHover from "./PopoverTriggerHover.torp";
+import clickPopover from "./mountClickPopover";
+import contextPopover from "./mountContextPopover";
+import hoverPopover from "./mountHoverPopover";
+import showPopover from "./showPopover";
+import showPopoverPrompt from "./showPopoverPrompt";
+
+export {
+	Popover,
+	PopoverOverlay,
+	PopoverTrigger,
+	PopoverTriggerHover,
+	PopoverTriggerContextual,
+	PopoverContentAnchored,
+	PopoverContentContextual,
+	PopoverContent,
+	showPopover,
+	showPopoverPrompt,
+	clickPopover,
+	contextPopover,
+	hoverPopover,
+};

package/src/Popover/mountClickPopover.ts

@@ -0,0 +1,50 @@
+import type { Component } from "@torpor/view";
+import showPopover from "./showPopover";
+
+interface ClickPopoverOptions {
+	popover: Component;
+	props?: Record<PropertyKey, any>;
+}
+
+/**
+ * A mount directive for showing a popover when an element is clicked.
+ * @param node The element to show the popover for
+ * @param options Options for showing the popover, consisting of the popover component and any props
+ */
+export default function clickPopover(node: HTMLElement, options: ClickPopoverOptions) {
+	const { popover, props } = options;
+
+	// Add a click event handler to the node
+	node.addEventListener("click", handleClick);
+
+	function handleClick(e: MouseEvent) {
+		e.preventDefault();
+		show();
+	}
+
+	let div: HTMLDivElement;
+
+	function show() {
+		// Show the popover in a div
+		if (div) {
+			document.body.removeChild(div);
+		}
+		div = document.createElement("div");
+		document.body.appendChild(div);
+
+		showPopover(popover, node, props, div);
+	}
+
+	return {
+		destroy(): void {
+			// Remove the event listener from the node on destroy
+			node.removeEventListener("click", handleClick);
+
+			// Remove the div we added
+			// TODO: Should we do this in more places?
+			if (div) {
+				document.body.removeChild(div);
+			}
+		},
+	};
+}

package/src/Popover/mountContextPopover.ts

@@ -0,0 +1,50 @@
+import type { Component } from "@torpor/view";
+import showPopover from "./showPopover";
+
+interface ContextPopoverOptions {
+	popover: Component;
+	props?: Record<PropertyKey, any>;
+}
+
+/**
+ * A mount directive for showing a popover when the user opens an element's context menu.
+ * @param node The element to show the popover for
+ * @param options Options for showing the popover, consisting of the popover component and any props
+ */
+export default function contextPopover(node: HTMLElement, options: ContextPopoverOptions) {
+	const { popover, props } = options;
+
+	// Add a contextmenu event handler to the node
+	node.addEventListener("contextmenu", handleClick);
+
+	function handleClick(e: MouseEvent) {
+		e.preventDefault();
+		show();
+	}
+
+	let div: HTMLDivElement;
+
+	function show() {
+		// Show the popover in a div
+		if (div) {
+			document.body.removeChild(div);
+		}
+		div = document.createElement("div");
+		document.body.appendChild(div);
+
+		showPopover(popover, node, props, div);
+	}
+
+	return {
+		destroy(): void {
+			// Remove the event listener from the node on destroy
+			node.removeEventListener("contextmenu", handleClick);
+
+			// Remove the div we added
+			// TODO: Should we do this in more places?
+			if (div) {
+				document.body.removeChild(div);
+			}
+		},
+	};
+}

package/src/Popover/mountHoverPopover.ts

@@ -0,0 +1,57 @@
+import type { Component } from "@torpor/view";
+import hoverTrigger from "../mount/hoverTrigger";
+import showPopover from "./showPopover";
+
+interface HoverPopoverOptions {
+	popover: Component;
+	props?: Record<PropertyKey, any>;
+	hoverDelay?: number;
+	touchDelay?: number;
+}
+
+/**
+ * A mount directive for showing a popover when an element is hovered.
+ * @param node The element to show the popover for
+ * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch
+ */
+export default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {
+	const { popover, props, hoverDelay, touchDelay } = options;
+
+	let div: HTMLDivElement | undefined;
+
+	function onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {
+		// Show the popover in a div
+		if (div) {
+			document.body.removeChild(div);
+		}
+		div = document.createElement("div");
+		document.body.appendChild(div);
+
+		// Get the position relative to the element, so we can reposition on scroll
+		const rect = node.getBoundingClientRect();
+		let position: { x: number; y: number };
+		if (e.type.startsWith("mouse")) {
+			const me = e as MouseEvent;
+			position = { x: me.clientX - rect.left, y: me.clientY - rect.top };
+		} else {
+			const te = e as TouchEvent;
+			position = {
+				x: te.touches[0].clientX - rect.left,
+				y: te.touches[0].clientY - rect.top,
+			};
+		}
+		const allProps = Object.assign({}, props, { anchor: node, position });
+
+		showPopover(popover, node, allProps, div);
+	}
+
+	function onExit() {
+		// Remove the div
+		if (div) {
+			document.body.removeChild(div);
+			div = undefined;
+		}
+	}
+
+	return hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });
+}

package/src/Popover/showPopover.ts

@@ -0,0 +1,24 @@
+// TODO: Allow passing in a variable -- so that you can show an inline popover
+import type { Component } from "@torpor/view";
+
+/**
+ * Shows a popover component in code.
+ * @param popover The popover component
+ * @param anchor The element to use as an anchor for the popover component
+ * @param props The properties for the popover component
+ * @param target The target element to show the popover in
+ * @returns The value selected by the user
+ */
+export default function showPopover(
+	popover: Component,
+	anchor: HTMLElement,
+	props?: Record<PropertyKey, any>,
+	target?: Element,
+): void {
+	// Add the anchor element to the properties
+	const allProps = Object.assign({}, props, { anchor });
+
+	// Create the popover
+	// TODO: This needs to clean up after itself, like the mount methods do
+	popover(target || anchor.parentElement || document.body, null, allProps);
+}

package/src/Popover/showPopoverPrompt.ts

@@ -0,0 +1,23 @@
+import type { Component } from "@torpor/view";
+
+/**
+ * Shows a popover component in code, and asynchronously returns the value selected by the user.
+ * @param popover The popover component
+ * @param props The properties for the popover component
+ * @param target The target element to show the popover in
+ * @returns The value selected by the user
+ */
+export default function showPopoverPrompt(
+	popover: Component,
+	props?: Record<PropertyKey, any>,
+	target?: Element,
+): Promise<void> {
+	return new Promise((resolve) => {
+		// Add the promise as the callback
+		const allProps = Object.assign({}, props, { callback: resolve });
+
+		// Create the popover
+		// TODO: This needs to clean up after itself, like the use methods do
+		popover(target || document.body, null, allProps);
+	});
+}