@fusion.dev/helix-headless 0.116.0 → 0.118.0

package/dist/map/root/map-root.js

@@ -37,12 +37,10 @@ const TILT_STEP = 10;
 const TILTED = 50;
 const placed = (marker) => Number.isFinite(marker.lat) && Number.isFinite(marker.lng);
 const ASK_LAPSES = 3000;
-const HINT_SHOWS = 1600;
 const SETTLES = 400;
 let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
-        this.activateHintLabel = 'Press the map to use it';
         this.bearing = 0;
         this.cluster = false;
         this.faceNorthLabel = 'Face north';
@@ -65,9 +63,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.tiltedLabel = 'Tilted {degrees} degrees';
         this.tiltLabel = 'Show in 3D';
         this.turnedLabel = 'Facing {degrees} degrees';
-        this.twoFingerHintLabel = 'Use two fingers to move the map';
-        this.usingLabel = 'Using the map. Press Escape to scroll the page again.';
-        this.wheelHintLabel = 'Use {key} and scroll to zoom the map';
         this.zoomedLabel = 'Zoom level {level}';
         this.said = '';
         this.asked = undefined;
@@ -136,61 +131,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 this.activate(marker);
             }
         };
-        this.hint = '';
-        this.taken = false;
-        this.handleWheel = (event) => {
-            if (this.gestures === 'cooperative' && !(event.ctrlKey || event.metaKey)) {
-                const mac = typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');
-                this.showHint(fillTemplate(this.wheelHintLabel, { key: mac ? '⌘' : 'Ctrl' }), event);
-            }
-            else if (this.gestures === 'activate' && !this.taken) {
-                this.showHint(this.activateHintLabel, event);
-            }
-        };
-        this.handleTouchMove = (event) => {
-            const finger = event.touches[0];
-            if (event.touches.length !== 1) {
-                return;
-            }
-            if (this.gestures === 'cooperative') {
-                this.showHint(this.twoFingerHintLabel, finger);
-            }
-            else if (this.gestures === 'activate' && !this.taken) {
-                this.showHint(this.activateHintLabel, finger);
-            }
-        };
-        this.handleTake = (event) => {
-            const viewport = this.partNamed('viewport');
-            if (this.gestures !== 'activate' || this.taken || !viewport) {
-                return;
-            }
-            const path = event.composedPath();
-            const onMap = path.includes(viewport) ||
-                path.some((one) => one instanceof Element && one.parentElement === this && one.slot === '');
-            if (onMap) {
-                this.taken = true;
-                this.hint = '';
-            }
-        };
-        this.handleGiveBackKey = (event) => {
-            if (event.key === 'Escape' && this.taken) {
-                this.taken = false;
-            }
-        };
-        this.handleGiveBackOutside = (event) => {
-            if (!event.composedPath().includes(this)) {
-                this.taken = false;
-            }
-        };
-        this.handleGiveBackBlur = () => {
-            this.taken = false;
-        };
-        this.handleLeave = (event) => {
-            this.idle.leave();
-            if (event.pointerType !== 'touch') {
-                this.taken = false;
-            }
-        };
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
@@ -303,23 +243,16 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }
         this.dispatchEvent(new HelixActivateEvent({ value: marker.name || marker.label || '' }));
     }
-    get gestureMode() {
-        if (this.gestures === 'cooperative') {
-            return 'cooperative';
-        }
-        return this.gestures === 'activate' && !this.taken ? 'off' : 'free';
-    }
-    showHint(words, at) {
-        const box = this.partNamed('viewport')?.getBoundingClientRect();
-        this.hintAt =
-            at && box && box.width > 0 && box.height > 0
-                ? { x: (at.clientX - box.left) / box.width, y: (at.clientY - box.top) / box.height }
-                : undefined;
-        this.hint = words;
-        clearTimeout(this.hinting);
-        this.hinting = setTimeout(() => {
-            this.hint = '';
-        }, HINT_SHOWS);
+    get restingGestureLabels() {
+        return {
+            activate: 'Press the map to use it',
+            twoFinger: 'Use two fingers to move the map',
+            using: 'Using the map. Press Escape to scroll the page again.',
+            wheel: 'Use {key} and scroll to zoom the map',
+        };
+    }
+    gesturesChanged() {
+        this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'gestures' }));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -328,10 +261,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('keydown', this.handleMarkerKeydown);
         this.addEventListener('keyup', this.handleMarkerKeyup);
-        this.addEventListener('keydown', this.handleGiveBackKey);
-        this.addEventListener('pointerdown', this.handleTake);
-        this.addEventListener('touchmove', this.handleTouchMove, { passive: true });
-        this.addEventListener('wheel', this.handleWheel, { passive: true });
         this.hiding = new MutationObserver(() => this.requestUpdate());
         this.hiding.observe(this, { attributeFilter: ['hidden'], attributes: true, subtree: true });
     }
@@ -346,14 +275,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('keydown', this.handleMarkerKeydown);
         this.removeEventListener('keyup', this.handleMarkerKeyup);
-        this.removeEventListener('keydown', this.handleGiveBackKey);
-        this.removeEventListener('pointerdown', this.handleTake);
-        this.removeEventListener('touchmove', this.handleTouchMove);
-        this.removeEventListener('wheel', this.handleWheel);
-        clearTimeout(this.hinting);
-        this.taken = false;
-        document.removeEventListener('pointerdown', this.handleGiveBackOutside);
-        window.removeEventListener('blur', this.handleGiveBackBlur);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -364,20 +285,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         if (changed.has('mapType')) {
             this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
         }
-        if (changed.has('gestures') || changed.has('taken')) {
-            if (this.gestures !== 'activate' && this.taken) {
-                this.taken = false;
-            }
-            if (this.taken) {
-                document.addEventListener('pointerdown', this.handleGiveBackOutside);
-                window.addEventListener('blur', this.handleGiveBackBlur);
-            }
-            else {
-                document.removeEventListener('pointerdown', this.handleGiveBackOutside);
-                window.removeEventListener('blur', this.handleGiveBackBlur);
-            }
-            this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'gestures' }));
-        }
         if (changed.has('layersOpen')) {
             if (this.layersOpen) {
                 document.addEventListener('pointerdown', this.handleOutside);
@@ -619,7 +526,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         hostAria(this.internals, { label: this.label });
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
-        this.toggleState('using', this.taken);
     }
     renderLayers() {
         const layers = this.layers.filter((layer) => this.shown(layer));
@@ -639,7 +545,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
       tabindex="0"
       @focusin=${this.idle.stir}
       @keydown=${this.handleKeydown}
-      @pointerleave=${this.handleLeave}
+      @pointerleave=${this.handlePointerLeave}
       @pointermove=${this.idle.stir}
     >
       <div part="header">
@@ -647,13 +553,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
       </div>
       <div part="viewport">
         <slot @slotchange=${this.handleSlotChange}></slot>
-        <div
-          part="gesture-hint"
-          aria-hidden="true"
-          ?hidden=${this.hint === ''}
-          style=${this.hintAt ? `--_map-hint-x: ${(this.hintAt.x * 100).toFixed(2)}%; --_map-hint-y: ${(this.hintAt.y * 100).toFixed(2)}%` : nothing}
-        >${this.hint}</div>
-        <div part="gesture-status" aria-hidden="true" ?hidden=${!this.taken}>${this.usingLabel}</div>
+        ${this.renderGestures()}
       </div>
       ${this.renderLayers()}
       ${this.renderControls()}
@@ -667,9 +567,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     </div>`;
     }
 };
-__decorate([
-    property({ attribute: 'activate-hint-label' })
-], HelixHeadlessMap.prototype, "activateHintLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMap.prototype, "bearing", void 0);
@@ -682,9 +579,6 @@ __decorate([
 __decorate([
     property({ attribute: 'flat-label' })
 ], HelixHeadlessMap.prototype, "flatLabel", void 0);
-__decorate([
-    property()
-], HelixHeadlessMap.prototype, "gestures", void 0);
 __decorate([
     property({ attribute: 'hybrid-label' })
 ], HelixHeadlessMap.prototype, "hybridLabel", void 0);
@@ -742,15 +636,6 @@ __decorate([
 __decorate([
     property({ attribute: 'turned-label' })
 ], HelixHeadlessMap.prototype, "turnedLabel", void 0);
-__decorate([
-    property({ attribute: 'two-finger-hint-label' })
-], HelixHeadlessMap.prototype, "twoFingerHintLabel", void 0);
-__decorate([
-    property({ attribute: 'using-label' })
-], HelixHeadlessMap.prototype, "usingLabel", void 0);
-__decorate([
-    property({ attribute: 'wheel-hint-label' })
-], HelixHeadlessMap.prototype, "wheelHintLabel", void 0);
 __decorate([
     property({ attribute: 'zoomed-label' })
 ], HelixHeadlessMap.prototype, "zoomedLabel", void 0);
@@ -766,15 +651,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessMap.prototype, "stop", void 0);
-__decorate([
-    state()
-], HelixHeadlessMap.prototype, "hint", void 0);
-__decorate([
-    state()
-], HelixHeadlessMap.prototype, "hintAt", void 0);
-__decorate([
-    state()
-], HelixHeadlessMap.prototype, "taken", void 0);
 HelixHeadlessMap = __decorate([
     customElement('helix-headless-map')
 ], HelixHeadlessMap);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.116.0",
+  "version": "0.118.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.116.0",
-    "@fusion.dev/helix-icons": "0.116.0",
+    "@fusion.dev/helix-core": "0.118.0",
+    "@fusion.dev/helix-icons": "0.118.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.116.0",
-    "@fusion.dev/helix-testing": "0.116.0",
+    "@fusion.dev/helix-cem": "0.118.0",
+    "@fusion.dev/helix-testing": "0.118.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",