12282443963

Committed 11 Dec 2024 06:17PM UTC coverage: 97.436% (-0.8%) from 98.206%

Build # 12282443963

Build Type

Pull #4989

github

Committed by

web-flow

Commit Message

Merge 92e762395 into 5b674b468

Pull Request Pull Request #4989: chore: testing something

Run Details

4996 of 5296 branches covered (94.34%)

Branch coverage included in aggregate %.

7 of 19 new or added lines in 1 file covered. (36.84%)

257 existing lines in 8 files now uncovered.

32739 of 33432 relevant lines covered (97.93%)

380.42 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

86.57

/packages/overlay/src/OverlayStack.ts

/*
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

import { Overlay } from './Overlay.js';

const supportsPopover = 'showPopover' in document.createElement('div');

class OverlayStack {
    private get document(): Document {
        return this.root.ownerDocument /* c8 ignore next */ || document;
    }

    private pointerdownPath?: EventTarget[];

    private lastOverlay?: Overlay;

    private root: HTMLElement = document.body;

    stack: Overlay[] = [];

    constructor() {
        this.bindEvents();
    }

    bindEvents(): void {
        this.document.addEventListener('pointerdown', this.handlePointerdown);
        this.document.addEventListener('pointerup', this.handlePointerup);
        this.document.addEventListener('keydown', this.handleKeydown);
    }

    private closeOverlay(overlay: Overlay): void {
        const overlayIndex = this.stack.indexOf(overlay);
        if (overlayIndex > -1) {
            this.stack.splice(overlayIndex, 1);
        }
        overlay.open = false;
    }

    /**
     * Cach the `pointerdownTarget` for later testing
     *
     * @param event {ClickEvent}
     */
    handlePointerdown = (event: Event): void => {
        this.pointerdownPath = event.composedPath();
        this.lastOverlay = this.stack[this.stack.length - 1];
    };

    /**
     * Close all overlays that are not ancestors of this click event
     *
     * @param event {ClickEvent}
     */
    handlePointerup = (): void => {
        // Test against the composed path in `pointerdown` in case the visitor moved their
        // pointer during the course of the interaction.
        // Ensure that this value is cleared even if the work in this method goes undone.
        const composedPath = this.pointerdownPath;
        this.pointerdownPath = undefined;
        if (!this.stack.length) return;
        if (!composedPath?.length) return;
        const lastOverlay = this.lastOverlay;
        this.lastOverlay = undefined;

        const lastIndex = this.stack.length - 1;
        const nonAncestorOverlays = this.stack.filter((overlay, i) => {
            const inStack = composedPath.find(
                (el) =>
                    // The Overlay is in the stack
                    el === overlay ||
                    // The Overlay trigger is in the stack and the Overlay is a "hint"
                    (el === overlay?.triggerElement &&
                        'hint' === overlay?.type) ||
                    // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a
                    // `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
                    (i === lastIndex &&
                        overlay !== lastOverlay &&
                        overlay.triggerInteraction === 'longpress')
            );
            return (
                !inStack &&
                !overlay.shouldPreventClose() &&
                overlay.type !== 'manual' &&
                // Don't close if this overlay is modal and not on top of the overlay stack.
                !(overlay.type === 'modal' && lastOverlay !== overlay)
            );
        }) as Overlay[];
        nonAncestorOverlays.reverse();
        nonAncestorOverlays.forEach((overlay) => {
            this.closeOverlay(overlay);
            let parentToClose = overlay.parentOverlayToForceClose;
            while (parentToClose) {
                this.closeOverlay(parentToClose);
                parentToClose = parentToClose.parentOverlayToForceClose;
            }
        });
    };

    handleBeforetoggle = (event: Event): void => {
        const { target, newState: open } = event as Event & {
            newState: string;
        };
        if (open === 'open') return;
        this.closeOverlay(target as Overlay);
    };

    private handleKeydown = (event: KeyboardEvent): void => {
        if (event.code !== 'Escape') return;
        if (!this.stack.length) return;
        const last = this.stack[this.stack.length - 1];
        if (last?.type === 'page') {
            event.preventDefault();
            return;
        }
        if (supportsPopover) return;
        if (last?.type === 'manual') {
            // Manual Overlays should not close on "light dismiss".
            return;
        }

        if (!last) return;
        this.closeOverlay(last);
    };

    /**
     * Get an array of Overlays that all share the same trigger element.
     *
     * @param triggerElement {HTMLELement}
     * @returns {Overlay[]}
     */
    overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {
        return this.stack.filter(
            (overlay) => overlay.triggerElement === triggerElement
        );
    }

    /**
     * When overlays are added manage the open state of exisiting overlays appropriately:
     * - 'modal': should close other non-'modal' and non-'manual' overlays
     * - 'page': should close other non-'modal' and non-'manual' overlays
     * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
     * - 'manual': shouldn't close other overlays
     * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
     */
    add(overlay: Overlay): void {
        if (this.stack.includes(overlay)) {
            const overlayIndex = this.stack.indexOf(overlay);
            if (overlayIndex > -1) {
                this.stack.splice(overlayIndex, 1);
                this.stack.push(overlay);
            }
            return;
        }
        if (
            overlay.type === 'auto' ||
            overlay.type === 'modal' ||
            overlay.type === 'page'
        ) {
            // manage closing open overlays
            const queryPathEventName = 'sp-overlay-query-path';
            const queryPathEvent = new Event(queryPathEventName, {
                composed: true,
                bubbles: true,
            });
            overlay.addEventListener(
                queryPathEventName,
                (event: Event) => {
                    const path = event.composedPath();
                    this.stack.forEach((overlayEl) => {
                        const inPath = path.find((el) => el === overlayEl);
                        if (
                            !inPath &&
                            overlayEl.type !== 'manual' &&
                            overlayEl.type !== 'modal'
                        ) {
                            this.closeOverlay(overlayEl);
                        }
                    });
                },
                { once: true }
            );
            overlay.dispatchEvent(queryPathEvent);
        } else if (overlay.type === 'hint') {
            const hasPrevious = this.stack.some((overlayEl) => {
                return (
                    overlayEl.type !== 'manual' &&
                    overlayEl.triggerElement &&
                    overlayEl.triggerElement === overlay.triggerElement
                );
            });
            if (hasPrevious) {
                overlay.open = false;
                return;
            }
            this.stack.forEach((overlayEl) => {
                if (overlayEl.type === 'hint') {
                    this.closeOverlay(overlayEl);
                }
            });
        }
        requestAnimationFrame(() => {
            this.stack.push(overlay);
            overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {
                once: true,
            });
        });
    }

    remove(overlay: Overlay): void {
        this.closeOverlay(overlay);
    }
}

export const overlayStack = new OverlayStack();

1	/*	38✔
2	Copyright 2023 Adobe. All rights reserved.	38✔
3	This file is licensed to you under the Apache License, Version 2.0 (the "License");	38✔
4	you may not use this file except in compliance with the License. You may obtain a copy	38✔
5	of the License at http://www.apache.org/licenses/LICENSE-2.0	38✔
6	Unless required by applicable law or agreed to in writing, software distributed under	38✔
7	the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS	38✔
8	OF ANY KIND, either express or implied. See the License for the specific language	38✔
9	governing permissions and limitations under the License.	38✔
10	*/	38✔
11		38✔
12	import { Overlay } from './Overlay.js';	38✔
13		38✔
14	const supportsPopover = 'showPopover' in document.createElement('div');	38✔
15		38✔
16	class OverlayStack {	38✔
17	private get document(): Document {	38✔
18	return this.root.ownerDocument /* c8 ignore next */ \|\| document;	38✔
19	}	38✔
20		38✔
21	private pointerdownPath?: EventTarget[];	38✔
22		38✔
23	private lastOverlay?: Overlay;	38✔
24		38✔
25	private root: HTMLElement = document.body;	38✔
26		38✔
27	stack: Overlay[] = [];	38✔
28		38✔
29	constructor() {	38✔
30	this.bindEvents();	38✔
31	}	38✔
32		38✔
33	bindEvents(): void {	38✔
34	this.document.addEventListener('pointerdown', this.handlePointerdown);	38✔
35	this.document.addEventListener('pointerup', this.handlePointerup);	38✔
36	this.document.addEventListener('keydown', this.handleKeydown);	38✔
37	}	38✔
38		38✔
39	private closeOverlay(overlay: Overlay): void {	38✔
40	const overlayIndex = this.stack.indexOf(overlay);	357✔
41	if (overlayIndex > -1) {	357✔
42	this.stack.splice(overlayIndex, 1);	313✔
43	}	313✔
44	overlay.open = false;	357✔
45	}	357✔
46		38✔
47	/**	38✔
48	* Cach the `pointerdownTarget` for later testing	38✔
49	*	38✔
50	* @param event {ClickEvent}	38✔
51	*/	38✔
52	handlePointerdown = (event: Event): void => {	38✔
53	this.pointerdownPath = event.composedPath();	155✔
54	this.lastOverlay = this.stack[this.stack.length - 1];	155✔
55	};	155✔
56		38✔
57	/**	38✔
58	* Close all overlays that are not ancestors of this click event	38✔
59	*	38✔
60	* @param event {ClickEvent}	38✔
61	*/	38✔
62	handlePointerup = (): void => {	38✔
63	// Test against the composed path in `pointerdown` in case the visitor moved their	495✔
64	// pointer during the course of the interaction.	495✔
65	// Ensure that this value is cleared even if the work in this method goes undone.	495✔
66	const composedPath = this.pointerdownPath;	495✔
67	this.pointerdownPath = undefined;	495✔
68	if (!this.stack.length) return;	495✔
69	if (!composedPath?.length) return;	495✔
70	const lastOverlay = this.lastOverlay;	47✔
71	this.lastOverlay = undefined;	47✔
72		47✔
73	const lastIndex = this.stack.length - 1;	47✔
74	const nonAncestorOverlays = this.stack.filter((overlay, i) => {	47✔
75	const inStack = composedPath.find(	47✔
76	(el) =>	47✔
77	// The Overlay is in the stack	658✔
78	el === overlay \|\|	658✔
79	// The Overlay trigger is in the stack and the Overlay is a "hint"	615✔
80	(el === overlay?.triggerElement &&	615!
81	'hint' === overlay?.type) \|\|	3!
82	// The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a	613✔
83	// `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction	613✔
84	(i === lastIndex &&	613✔
85	overlay !== lastOverlay &&	613✔
86	overlay.triggerInteraction === 'longpress')	11✔
87	);	47✔
88	return (	47✔
89	!inStack &&	47✔
90	!overlay.shouldPreventClose() &&	2✔
91	overlay.type !== 'manual' &&	1!
UNCOV 92	// Don't close if this overlay is modal and not on top of the overlay stack.	×
UNCOV 93	!(overlay.type === 'modal' && lastOverlay !== overlay)	×
94	);	47✔
95	}) as Overlay[];	47✔
96	nonAncestorOverlays.reverse();	47✔
97	nonAncestorOverlays.forEach((overlay) => {	47✔
UNCOV 98	this.closeOverlay(overlay);	×
UNCOV 99	let parentToClose = overlay.parentOverlayToForceClose;	×
UNCOV 100	while (parentToClose) {	×
101	this.closeOverlay(parentToClose);	×
102	parentToClose = parentToClose.parentOverlayToForceClose;	×
103	}	×
104	});	47✔
105	};	495✔
106		38✔
107	handleBeforetoggle = (event: Event): void => {	38✔
108	const { target, newState: open } = event as Event & {	312✔
109	newState: string;	312✔
110	};	312✔
111	if (open === 'open') return;	312✔
112	this.closeOverlay(target as Overlay);	18✔
113	};	312✔
114		38✔
115	private handleKeydown = (event: KeyboardEvent): void => {	38✔
116	if (event.code !== 'Escape') return;	272✔
117	if (!this.stack.length) return;	6✔
118	const last = this.stack[this.stack.length - 1];	5✔
119	if (last?.type === 'page') {	272!
120	event.preventDefault();	1✔
121	return;	1✔
122	}	1✔
123	if (supportsPopover) return;	4!
124	if (last?.type === 'manual') {	272!
125	// Manual Overlays should not close on "light dismiss".	×
126	return;	×
127	}	×
128		×
129	if (!last) return;	×
130	this.closeOverlay(last);	×
131	};	272✔
132		38✔
133	/**	38✔
134	* Get an array of Overlays that all share the same trigger element.	38✔
135	*	38✔
136	* @param triggerElement {HTMLELement}	38✔
137	* @returns {Overlay[]}	38✔
138	*/	38✔
139	overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {	38✔
140	return this.stack.filter(	×
141	(overlay) => overlay.triggerElement === triggerElement	×
142	);	×
143	}	×
144		38✔
145	/**	38✔
146	* When overlays are added manage the open state of exisiting overlays appropriately:	38✔
147	* - 'modal': should close other non-'modal' and non-'manual' overlays	38✔
148	* - 'page': should close other non-'modal' and non-'manual' overlays	38✔
149	* - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays	38✔
150	* - 'manual': shouldn't close other overlays	38✔
151	* - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger	38✔
152	*/	38✔
153	add(overlay: Overlay): void {	38✔
154	if (this.stack.includes(overlay)) {	313!
UNCOV 155	const overlayIndex = this.stack.indexOf(overlay);	×
UNCOV 156	if (overlayIndex > -1) {	×
UNCOV 157	this.stack.splice(overlayIndex, 1);	×
UNCOV 158	this.stack.push(overlay);	×
UNCOV 159	}	×
UNCOV 160	return;	×
UNCOV 161	}	×
162	if (	313✔
163	overlay.type === 'auto' \|\|	313✔
164	overlay.type === 'modal' \|\|	61✔
165	overlay.type === 'page'	50✔
166	) {	313✔
167	// manage closing open overlays	272✔
168	const queryPathEventName = 'sp-overlay-query-path';	272✔
169	const queryPathEvent = new Event(queryPathEventName, {	272✔
170	composed: true,	272✔
171	bubbles: true,	272✔
172	});	272✔
173	overlay.addEventListener(	272✔
174	queryPathEventName,	272✔
175	(event: Event) => {	272✔
176	const path = event.composedPath();	272✔
177	this.stack.forEach((overlayEl) => {	272✔
178	const inPath = path.find((el) => el === overlayEl);	42✔
179	if (	42✔
180	!inPath &&	42✔
181	overlayEl.type !== 'manual' &&	27✔
182	overlayEl.type !== 'modal'	25✔
183	) {	42✔
184	this.closeOverlay(overlayEl);	24✔
185	}	24✔
186	});	272✔
187	},	272✔
188	{ once: true }	272✔
189	);	272✔
190	overlay.dispatchEvent(queryPathEvent);	272✔
191	} else if (overlay.type === 'hint') {	313✔
192	const hasPrevious = this.stack.some((overlayEl) => {	31✔
193	return (	2✔
194	overlayEl.type !== 'manual' &&	2✔
195	overlayEl.triggerElement &&	2✔
UNCOV 196	overlayEl.triggerElement === overlay.triggerElement	×
197	);	2✔
198	});	31✔
199	if (hasPrevious) {	31!
200	overlay.open = false;	×
201	return;	×
202	}	×
203	this.stack.forEach((overlayEl) => {	31✔
204	if (overlayEl.type === 'hint') {	2✔
205	this.closeOverlay(overlayEl);	2✔
206	}	2✔
207	});	31✔
208	}	31✔
209	requestAnimationFrame(() => {	313✔
210	this.stack.push(overlay);	313✔
211	overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {	313✔
212	once: true,	313✔
213	});	313✔
214	});	313✔
215	}	313✔
216		38✔
217	remove(overlay: Overlay): void {	38✔
218	this.closeOverlay(overlay);	313✔
219	}	313✔
220	}	38✔
221		38✔
222	export const overlayStack = new OverlayStack();	38✔

adobe / spectrum-web-components / 12282443963

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous