openguessr-ui 0.4.0 → 0.5.0

package/README.md

@@ -441,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/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,7 +117,7 @@
 
 			// 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;
@@ -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.4.0",
+	"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();