mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 19:04:02 +00:00
fix(street-level): Esc shrinks the iPhone popover photo instead of collapsing the panel
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
1 parent
4682757e71
commit
83e6acc34d
2 files changed
+31
-2
No files matched your search
@@ -120,10 +120,18 @@ export class StreetLevelControls {
|
|||||||
this.listen(el.viewerExpand, 'click', () => this._toggleExpanded());
|
this.listen(el.viewerExpand, 'click', () => this._toggleExpanded());
|
||||||
if (this._expandMode === 'fullscreen')
|
if (this._expandMode === 'fullscreen')
|
||||||
this.listen(document, 'fullscreenchange', () => this._syncExpanded());
|
this.listen(document, 'fullscreenchange', () => this._syncExpanded());
|
||||||
else
|
else {
|
||||||
this.listen(el.viewerWrap, 'toggle', (event) =>
|
this.listen(el.viewerWrap, 'toggle', (event) =>
|
||||||
this._onPopoverToggle(event),
|
this._onPopoverToggle(event),
|
||||||
);
|
);
|
||||||
|
// Esc shrinks the photo before the panel's own Esc can collapse it.
|
||||||
|
this.listen(el.viewerWrap, 'keydown', (event) => {
|
||||||
|
if (event.key !== 'Escape' || !this.isViewerExpanded()) return;
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
this._exitExpanded();
|
||||||
|
});
|
||||||
|
}
|
||||||
} else setProp(el.viewerExpand, 'hidden', true);
|
} else setProp(el.viewerExpand, 'hidden', true);
|
||||||
for (const button of el.renderButtons) {
|
for (const button of el.renderButtons) {
|
||||||
this.listen(button, 'click', () => {
|
this.listen(button, 'click', () => {
|
||||||
|
|||||||
@@ -136,9 +136,17 @@ class FakeNode {
|
|||||||
target: this,
|
target: this,
|
||||||
key: event.key,
|
key: event.key,
|
||||||
newState: event.newState,
|
newState: event.newState,
|
||||||
|
stopped: false,
|
||||||
preventDefault() {},
|
preventDefault() {},
|
||||||
|
stopPropagation() {
|
||||||
|
this.stopped = true;
|
||||||
|
},
|
||||||
};
|
};
|
||||||
for (let node = this; node; node = event.bubbles ? node.parent : null)
|
for (
|
||||||
|
let node = this;
|
||||||
|
node && !delivered.stopped;
|
||||||
|
node = event.bubbles ? node.parent : null
|
||||||
|
)
|
||||||
for (const listener of [...(node.listeners.get(event.type) || [])])
|
for (const listener of [...(node.listeners.get(event.type) || [])])
|
||||||
listener(delivered);
|
listener(delivered);
|
||||||
return true;
|
return true;
|
||||||
@@ -586,6 +594,19 @@ test('on iPhone (no element fullscreen) EXPAND opens the viewer as a popover ove
|
|||||||
assert.equal(dom.wrap.popoverOpen, true);
|
assert.equal(dom.wrap.popoverOpen, true);
|
||||||
assert.equal(dom.root.contains(dom.wrap), true, 'never leaves the panel');
|
assert.equal(dom.root.contains(dom.wrap), true, 'never leaves the panel');
|
||||||
assert.deepEqual(expandLabel(dom), ['SHRINK', 'true']);
|
assert.deepEqual(expandLabel(dom), ['SHRINK', 'true']);
|
||||||
|
// Esc shrinks the photo; the panel's own Esc (collapse) never sees it.
|
||||||
|
let panelEsc = 0;
|
||||||
|
dom.root.addEventListener('keydown', () => panelEsc++);
|
||||||
|
expand.dispatchEvent({ type: 'keydown', key: 'Escape', bubbles: true });
|
||||||
|
await settle();
|
||||||
|
await settle();
|
||||||
|
assert.equal(dom.wrap.popoverOpen, false);
|
||||||
|
assert.equal(panelEsc, 0, 'the panel stays open');
|
||||||
|
assert.deepEqual(expandLabel(dom), ['EXPAND', 'false']);
|
||||||
|
expand.click();
|
||||||
|
await settle();
|
||||||
|
await settle();
|
||||||
|
assert.equal(dom.wrap.popoverOpen, true, 'and opens again');
|
||||||
expand.click();
|
expand.click();
|
||||||
await settle();
|
await settle();
|
||||||
await settle();
|
await settle();
|
||||||
|
|||||||
Reference in new issue
Block a user