openguessr-ui 0.3.6 → 0.5.0

package/README.md

@@ -343,7 +343,8 @@ The loading spinner component can be displayed while large content loads, such a
 
 The notification component is used for short messages at the top of the screen, optionally with an action. It needs to be mounted. It takes the following props:
 
-- `top`: Distance from the top of the viewport, defaults to `--layout-margin`
+- `top`: Distance from the top of the viewport, defaults to `--box-margin`
+- `offsetSafeArea`: Whether the top position should be offset by the safe area inset, defaults to true
 - `onaccept`: Called when the accept button is used
 - `ondismiss`: Called when the dismiss button is used
 
@@ -440,6 +441,8 @@ Options:
 - `zIndex`: Tooltip z-index
 - `mobile`: Set to false to hide the tooltip on mobile
 
+Tooltips with automatic state handling are shown on hover (and on long-press with touch input).
+
 ## Sound effects
 
 UI sound effects are available as `.ogg` files and can be played with any audio library. The `sounds` export maps each name to its file URL:

package/components/Notification.svelte

@@ -3,7 +3,7 @@
 	import { Check, SquareArrowOutUpRight, X } from "@lucide/svelte";
 	import { fly } from "svelte/transition";
 
-	let { top = "var(--box-margin)", onaccept, ondismiss } = $props();
+	let { top = "var(--box-margin)", offsetSafeArea = true, onaccept, ondismiss } = $props();
 
 	function accept() {
 		if (notification.acceptFunction) {
@@ -36,7 +36,7 @@
 	);
 </script>
 
-<div class="notification-holder" style:top>
+<div class="notification-holder" style:top style:margin-top={offsetSafeArea ? "env(safe-area-inset-top)" : ""}>
 	{#if notification.visible}
 		<div id="notification-bar" transition:fly={{ y: -20, duration: 250 }}>
 			<p id="notification-text">
@@ -103,7 +103,6 @@
 		position: fixed;
 		left: var(--box-margin);
 		right: var(--box-margin);
-		margin-top: env(safe-area-inset-top);
 		display: flex;
 		justify-content: center;
 		pointer-events: none;

package/components/Popup.svelte

@@ -59,7 +59,6 @@
 	// Drawer logic ------------------------------------------------------------------------------------
 
 	// Bindings
-	let contentEl = $state();
 	let uiWindowHeight = $state();
 
 	// Drawer state
@@ -93,7 +92,7 @@
 
 	const dragStart = (event) => {
 		// Abort if not a drawer, already tracking a finger, or if content should be scrolled by the "finger downwards" movement because it isn't scrolled all the way up
-		if (!popupToDrawer.current || dragStartY != null || isScrolledDown(event.target, contentEl)) return;
+		if (!popupToDrawer.current || dragStartY != null || isScrolledDown(event.target, event.currentTarget)) return; // Current target is ui-window
 
 		// Catch the drawer where it is (could still be animating open)
 		cancelAnimationFrame(openAnimationFrame);
@@ -118,11 +117,11 @@
 
 			// Dragging finger upwards while the touched element (or an ancestor up to the content) can still scroll down
 			// Mainly relevant for the slow stretch animation when the drwaer is dragged upwards (which shouldn't show when content is scrolled down)
-			const isScrollingDown = eventY <= dragStartY && canScrollDown(event.target, contentEl);
+			const isScrollingDown = eventY <= dragStartY && canScrollDown(event.target, event.currentTarget); // Current target is ui-window
 
 			if (isScrollingHorizontally || isScrollingDown) {
 				dragStartY = null;
-				return animateDrawerOpen(); // Touch  could've stopped the drawer during open, since it's a content scroll not a drag, resume
+				return animateDrawerOpen(); // Touch could've stopped the drawer during open, since it's a content scroll not a drag, resume
 			}
 		}
 
@@ -140,7 +139,7 @@
 	};
 
 	const dragEnd = (event) => {
-		if (dragStartY == null || !findDragTouch(event.changedTouches)) return; // Only the dragging finger ends the drag
+		if (dragStartY == null || !findDragTouch(event.changedTouches)) return; // Only the dragging finger can end the drag
 		dragStartY = null;
 
 		if (!isDragging) return animateDrawerOpen(); // Single tap without drag, resume opening if it was caught mid-animation
@@ -149,14 +148,14 @@
 		// Calculate velocity
 		const first = velocitySamples[0];
 		const last = velocitySamples.at(-1);
-		const velocity = last.time > first.time ? (last.y - first.y) / (last.time - first.time) : 0; // Pixels per ms (time is ms)
+		const velocity = last.time > first.time ? (last.y - first.y) / (last.time - first.time) : 0; // Pixels per ms
 
 		// If swiped with enough velocity or past 35%, animate it shut, otherwise open fully again
 		if (velocity > 0.4 || drawerVerticalOffset > uiWindowHeight * 0.35) {
 			const duration = clamp((closedOffset - drawerVerticalOffset) / Math.max(velocity, 1.5), 180, 420); // Faster drag velocity means lower duration
 			closeTiming = { duration, easing: cubicBezier(0.45, 0.55, 0.4, 0.92) };
 			close();
-		} else animateDrawerOpen(); // Too little drag, snap back to fully open state
+		} else animateDrawerOpen();
 	};
 
 	// Automatic z-indexing ---------------------------------------------------------------------
@@ -258,7 +257,7 @@
 			<button class="close-popup-button standard-button" aria-label="close" onclick={close}
 				><X strokeWidth={2.25} /></button
 			>
-			<div class="content of-top of-bottom" class:content-frameless={frameless} bind:this={contentEl}>
+			<div class="content of-top of-bottom" class:content-frameless={frameless}>
 				{@render children?.()}
 			</div>
 		</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "openguessr-ui",
-	"version": "0.3.6",
+	"version": "0.5.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite example"

package/utils/tooltip.svelte.js

@@ -6,6 +6,8 @@ export function tooltip({ text, imageSrc, imageAspectRatio = "1 / 1", state, onc
         let visible = false;
         let cleanupAutoUpdate;
         let showTimeout = null;
+        let longPressTimeout = null;
+        let suppressClick = false;
 
         const persistent = Boolean(state);
         const closedScale = imageSrc ? 0.85 : 0;
@@ -157,6 +159,43 @@ export function tooltip({ text, imageSrc, imageAspectRatio = "1 / 1", state, onc
             hide();
         }
 
+        // On touch devices, a long press shows the tooltip
+        function onPointerDown(e) {
+            suppressClick = false;
+            if (e.pointerType != "touch" || !e.isPrimary) return;
+
+            // Close the tooltip on any click or other pointer down (scroll, swipe...)
+            const closeLongPressTooltip = () => {
+                suppressClick = false;
+                hide();
+            }
+
+            // After the 500ms timeout, the tooltip is shown
+            clearTimeout(longPressTimeout);
+            longPressTimeout = setTimeout(() => {
+                if (!visible) show();
+                if (visible) {
+                    suppressClick = true;
+                    document.addEventListener('pointerdown', closeLongPressTooltip, { capture: true, once: true });
+                }
+            }, 500);
+        }
+
+        // On pointerup, and pointercancel since cancel can be e.g. a scroll starting
+        function cancelLongPress() {
+            clearTimeout(longPressTimeout);
+            longPressTimeout = null;
+        }
+
+        // Don't trigger the element's click action after a long press
+        function onClick(e) {
+            cancelLongPress(); // Pointerup doesn't fire reliably with clicks (especialy on WK)
+            if (!suppressClick) return hide(); // The click may change what's under the cursor (e.g. a new page) without a pointerleave until the mouse moves
+            suppressClick = false;
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+
         if (persistent) {
             $effect(() => {
                 if (state.visible) scheduleShow();
@@ -165,13 +204,22 @@ export function tooltip({ text, imageSrc, imageAspectRatio = "1 / 1", state, onc
         } else {
             node.addEventListener('pointerenter', onPointerEnter);
             node.addEventListener('pointerleave', onPointerLeave);
+            node.addEventListener('pointerdown', onPointerDown);
+            node.addEventListener('pointerup', cancelLongPress);
+            node.addEventListener('pointercancel', cancelLongPress);
+            node.addEventListener('click', onClick, true);
         }
 
         return () => {
             if (!persistent) {
                 node.removeEventListener('pointerenter', onPointerEnter);
                 node.removeEventListener('pointerleave', onPointerLeave);
+                node.removeEventListener('pointerdown', onPointerDown);
+                node.removeEventListener('pointerup', cancelLongPress);
+                node.removeEventListener('pointercancel', cancelLongPress);
+                node.removeEventListener('click', onClick, true);
             }
+            if (longPressTimeout) clearTimeout(longPressTimeout);
             if (showTimeout) clearTimeout(showTimeout);
             cleanupAutoUpdate?.();
             tooltipElement?.remove();