adobe/spectrum-web-components | Build 13555636806 | packages/dialog/src/DialogBase.ts | Coveralls

1

/*

15✔

2

Copyright 2020 Adobe. All rights reserved.

15✔

3

This file is licensed to you under the Apache License, Version 2.0 (the "License");

15✔

4

you may not use this file except in compliance with the License. You may obtain a copy

15✔

5

of the License at http://www.apache.org/licenses/LICENSE-2.0

15✔

6

15✔

7

Unless required by applicable law or agreed to in writing, software distributed under

15✔

8

the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS

15✔

9

OF ANY KIND, either express or implied. See the License for the specific language

15✔

10

governing permissions and limitations under the License.

15✔

11

*/

15✔

12

15✔

13

import {

15✔

14

    CSSResultArray,

15✔

15

    html,

15✔

16

    nothing,

15✔

17

    PropertyValues,

15✔

18

    SpectrumElement,

15✔

19

    TemplateResult,

15✔

20

} from '@spectrum-web-components/base';

15✔

21

import { property } from '@spectrum-web-components/base/src/decorators.js';

15✔

22

15✔

23

import '@spectrum-web-components/underlay/sp-underlay.js';

15✔

24

import '@spectrum-web-components/button/sp-button.js';

15✔

25

15✔

26

// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225

15✔

27

import '@spectrum-web-components/dialog/sp-dialog.js';

15✔

28

import modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';

15✔

29

import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';

15✔

30

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

15✔

31

import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';

15✔

32

import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';

15✔

33

15✔

34

/**

15✔

35

 * @element sp-dialog-base

15✔

36

15✔

37

 * @slot - A Dialog element to display.

15✔

38

 * @fires close - Announces that the dialog has been closed.

15✔

39

*/

15✔

40

export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {

15✔

41

    public static override get styles(): CSSResultArray {

23✔

42

        return [modalWrapperStyles, modalStyles];

23✔

43

23✔

44

23✔

45

    @property({ type: Boolean, reflect: true })

23✔

46

    public dismissable = false;

23✔

47

23✔

48

    @property({ type: Boolean, reflect: true })

23✔

49

    public open = false;

23✔

50

23✔

51

    @property({ type: String, reflect: true })

23✔

52

    public mode?: 'fullscreen' | 'fullscreenTakeover';

23✔

53

23✔

54

/**

23✔

55

     * When set to true, fills screens smaller than 350px high and 400px wide with the full dialog.

23✔

56

*/

23✔

57

    @property({ type: Boolean })

23✔

58

    public responsive = false;

23✔

59

23✔

60

    private transitionPromise = Promise.resolve();

23✔

61

23✔

62

    private resolveTransitionPromise = (): void => {

23✔

65

23✔

66

    @property({ type: Boolean })

23✔

67

    public underlay = false;

23✔

68

23✔

69

    protected get dialog(): Dialog {

23✔

70

        const dialog = (

8✔

71

            this.shadowRoot.querySelector('slot') as HTMLSlotElement

8✔

72

        ).assignedElements()[0] as Dialog;

8✔

73

        if (window.__swc.DEBUG) {

8✔

74

            if (!dialog) {

8✔

81

8✔

82

        return dialog || this;

8✔

83

8✔

84

23✔

85

    public override async focus(): Promise<void> {

23✔

86

        if (this.shadowRoot) {

1✔

87

            const firstFocusable = firstFocusableIn(this.dialog);

1✔

88

            if (firstFocusable) {

1✔

89

                if ((firstFocusable as SpectrumElement).updateComplete) {

1✔

90

                    await firstFocusable.updateComplete;

1✔

91

1✔

92

                firstFocusable.focus();

1✔

93

            } else {

1✔

96

            /* c8 ignore next 3 */

15✔

97

        } else {

15✔

98

            super.focus();

15✔

99

15✔

100

1✔

101

23✔

102

    private animating = false;

23✔

103

15✔

104

    public overlayWillCloseCallback(): boolean {

15✔

109

15✔

110

    private dismiss(): void {

15✔

111

        if (!this.dismissable) {

2✔

112

            return;

1✔

113

1✔

114

        this.close();

1✔

115

2✔

116

15✔

117

    protected handleClose(event: Event): void {

15✔

118

        event.stopPropagation();

1✔

119

        this.close();

1✔

120

1✔

121

15✔

122

    public close(): void {

15✔

123

        this.open = false;

2✔

124

2✔

125

15✔

126

    private dispatchClosed(): void {

15✔

127

        this.dispatchEvent(

8✔

128

            new Event('close', {

8✔

129

                bubbles: true,

8✔

130

})

8✔

131

);

8✔

132

8✔

133

15✔

134

    private handleTransitionEvent(event: TransitionEvent): void {

15✔

135

        this.dispatchEvent(

136✔

136

            new TransitionEvent(event.type, {

136✔

137

                bubbles: true,

136✔

138

                composed: true,

136✔

139

                propertyName: event.propertyName,

136✔

140

})

136✔

141

);

136✔

142

136✔

143

15✔

144

    protected handleUnderlayTransitionend(event: TransitionEvent): void {

15✔

145

        if (!this.open && event.propertyName === 'visibility') {

14✔

146

            this.resolveTransitionPromise();

5✔

147

5✔

148

        this.handleTransitionEvent(event);

14✔

149

14✔

150

15✔

151

    protected handleModalTransitionend(event: TransitionEvent): void {

15✔

152

        if (this.open || !this.underlay) {

54✔

153

            this.resolveTransitionPromise();

25✔

154

25✔

155

        this.handleTransitionEvent(event);

54✔

156

54✔

157

15✔

158

    private get hasTransitionDuration(): boolean {

15✔

159

        const modal = this.shadowRoot.querySelector('.modal') as HTMLElement;

10✔

160

10✔

161

        const modalTransitionDurations =

10✔

162

            window.getComputedStyle(modal).transitionDuration;

10✔

163

        for (const duration of modalTransitionDurations.split(','))

10✔

178

10✔

179

15✔

180

    protected override update(changes: PropertyValues<this>): void {

15✔

181

        if (changes.has('open') && changes.get('open') !== undefined) {

33✔

182

            const hasTransitionDuration = this.hasTransitionDuration;

10✔

183

            this.animating = true;

10✔

184

            this.transitionPromise = new Promise((res) => {

10✔

185

                this.resolveTransitionPromise = () => {

10✔

186

                    this.animating = false;

30✔

187

                    if (!this.open && hasTransitionDuration)

30✔

188

                        this.dispatchClosed();

30✔

189

                    res();

30✔

190

};

30✔

191

});

10✔

193

10✔

194

        super.update(changes);

33✔

195

33✔

196

15✔

197

    protected renderDialog(): TemplateResult {

15✔

198

        return html`

6✔

199

            <slot></slot>

6✔

200

`;

6✔

201

6✔

202

15✔

203

    protected override render(): TemplateResult {

15✔

204

        return html`

33✔

205

            ${this.underlay

33✔

206

                ? html`

15✔

207

                      <sp-underlay

15✔

208

                          ?open=${this.open}

15✔

209

                          @close=${this.dismiss}

15✔

210

                          @transitionrun=${this.handleTransitionEvent}

15✔

211

                          @transitionend=${this.handleUnderlayTransitionend}

15✔

212

                          @transitioncancel=${this.handleTransitionEvent}

15✔

213

                      ></sp-underlay>

18✔

214

18✔

215

                : nothing}

33✔

216

            <div

33✔

217

                class="modal ${this.mode}"

33✔

218

                @transitionrun=${this.handleTransitionEvent}

33✔

219

                @transitionend=${this.handleModalTransitionend}

33✔

220

                @transitioncancel=${this.handleTransitionEvent}

33✔

221

                @close=${this.handleClose}

33✔

222

33✔

223

                ${this.renderDialog()}

33✔

224

            </div>

33✔

225

`;

33✔

226

33✔

227

15✔

228

    protected override updated(changes: PropertyValues<this>): void {

15✔

229

        if (changes.has('open')) {

33✔

230

            if (this.open) {

33✔

231

                if (

16✔

232

                    'updateComplete' in this.dialog &&

16✔

233

                    'shouldManageTabOrderForScrolling' in this.dialog

16✔

234

) {

16✔

235

                    this.dialog.updateComplete.then(() => {

16✔

236

                        this.dialog.shouldManageTabOrderForScrolling();

16✔

237

});

16✔

238

16✔

239

16✔

240

33✔

241

33✔

242

15✔

243

/**

15✔

244

     * Bind the open/close transition into the update complete lifecycle so

15✔

245

     * that the overlay system can wait for it to be "visibly ready" before

15✔

246

     * attempting to throw focus into the content contained herein. Not

15✔

247

     * waiting for this can cause small amounts of page scroll to happen

15✔

248

     * while opening the Tray when focusable content is included: e.g. Menu

15✔

249

     * elements whose selected Menu Item is not the first Menu Item.

15✔

250

*/

15✔

251

    protected override async getUpdateComplete(): Promise<boolean> {

15✔

252

        const complete = (await super.getUpdateComplete()) as boolean;

28✔

253

        await this.transitionPromise;

28✔

254

        return complete;

28✔

255

28✔

256

15✔

adobe / spectrum-web-components / 13555636806

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

1	/*	15✔
2	Copyright 2020 Adobe. All rights reserved.	15✔
3	This file is licensed to you under the Apache License, Version 2.0 (the "License");	15✔
4	you may not use this file except in compliance with the License. You may obtain a copy	15✔
5	of the License at http://www.apache.org/licenses/LICENSE-2.0	15✔
6		15✔
7	Unless required by applicable law or agreed to in writing, software distributed under	15✔
8	the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS	15✔
9	OF ANY KIND, either express or implied. See the License for the specific language	15✔
10	governing permissions and limitations under the License.	15✔
11	*/	15✔
12		15✔
13	import {	15✔
14	CSSResultArray,	15✔
15	html,	15✔
16	nothing,	15✔
17	PropertyValues,	15✔
18	SpectrumElement,	15✔
19	TemplateResult,	15✔
20	} from '@spectrum-web-components/base';	15✔
21	import { property } from '@spectrum-web-components/base/src/decorators.js';	15✔
22		15✔
23	import '@spectrum-web-components/underlay/sp-underlay.js';	15✔
24	import '@spectrum-web-components/button/sp-button.js';	15✔
25		15✔
26	// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225	15✔
27	import '@spectrum-web-components/dialog/sp-dialog.js';	15✔
28	import modalWrapperStyles from '@spectrum-web-components/modal/src/modal-wrapper.css.js';	15✔
29	import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';	15✔
30	import { Dialog } from './Dialog.js';	15✔
31	import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';	15✔
32	import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';	15✔
33		15✔
34	/**	15✔
35	* @element sp-dialog-base	15✔
36	*	15✔
37	* @slot - A Dialog element to display.	15✔
38	* @fires close - Announces that the dialog has been closed.	15✔
39	*/	15✔
40	export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {	15✔
41	public static override get styles(): CSSResultArray {	23✔
42	return [modalWrapperStyles, modalStyles];	23✔
43	}	23✔
44		23✔
45	@property({ type: Boolean, reflect: true })	23✔
46	public dismissable = false;	23✔
47		23✔
48	@property({ type: Boolean, reflect: true })	23✔
49	public open = false;	23✔
50		23✔
51	@property({ type: String, reflect: true })	23✔
52	public mode?: 'fullscreen' \| 'fullscreenTakeover';	23✔
53		23✔
54	/**	23✔
55	* When set to true, fills screens smaller than 350px high and 400px wide with the full dialog.	23✔
56	*/	23✔
57	@property({ type: Boolean })	23✔
58	public responsive = false;	23✔
59		23✔
60	private transitionPromise = Promise.resolve();	23✔
61		23✔
62	private resolveTransitionPromise = (): void => {	23✔
63	return;	×
64	};	×
65		23✔
66	@property({ type: Boolean })	23✔
67	public underlay = false;	23✔
68		23✔
69	protected get dialog(): Dialog {	23✔
70	const dialog = (	8✔
71	this.shadowRoot.querySelector('slot') as HTMLSlotElement	8✔
72	).assignedElements()[0] as Dialog;	8✔
73	if (window.__swc.DEBUG) {	8✔
74	if (!dialog) {	8✔
75	window.__swc.warn(	×
76	this,	×
77	`<${this.localName}> expects to be provided dialog content via its default slot.`,	×
78	'https://opensource.adobe.com/spectrum-web-components/components/dialog-base/#dialog'	×
79	);	×
80	}	×
81	}	8✔
82	return dialog \|\| this;	8✔
83	}	8✔
84		23✔
85	public override async focus(): Promise<void> {	23✔
86	if (this.shadowRoot) {	1✔
87	const firstFocusable = firstFocusableIn(this.dialog);	1✔
88	if (firstFocusable) {	1✔
89	if ((firstFocusable as SpectrumElement).updateComplete) {	1✔
90	await firstFocusable.updateComplete;	1✔
91	}	1✔
92	firstFocusable.focus();	1✔
93	} else {	1✔
94	this.dialog.focus();	×
95	}	×
96	/* c8 ignore next 3 */	15✔
97	} else {	15✔
98	super.focus();	15✔
99	}	15✔
100	}	1✔
101		23✔
102	private animating = false;	23✔
103		15✔
104	public overlayWillCloseCallback(): boolean {	15✔
105	if (!this.open) return this.animating;	×
106	this.close();	×
107	return true;	×
108	}	×
109		15✔
110	private dismiss(): void {	15✔
111	if (!this.dismissable) {	2✔
112	return;	1✔
113	}	1✔
114	this.close();	1✔
115	}	2✔
116		15✔
117	protected handleClose(event: Event): void {	15✔
118	event.stopPropagation();	1✔
119	this.close();	1✔
120	}	1✔
121		15✔
122	public close(): void {	15✔
123	this.open = false;	2✔
124	}	2✔
125		15✔
126	private dispatchClosed(): void {	15✔
127	this.dispatchEvent(	8✔
128	new Event('close', {	8✔
129	bubbles: true,	8✔
130	})	8✔
131	);	8✔
132	}	8✔
133		15✔
134	private handleTransitionEvent(event: TransitionEvent): void {	15✔
135	this.dispatchEvent(	136✔
136	new TransitionEvent(event.type, {	136✔
137	bubbles: true,	136✔
138	composed: true,	136✔
139	propertyName: event.propertyName,	136✔
140	})	136✔
141	);	136✔
142	}	136✔
143		15✔
144	protected handleUnderlayTransitionend(event: TransitionEvent): void {	15✔
145	if (!this.open && event.propertyName === 'visibility') {	14✔
146	this.resolveTransitionPromise();	5✔
147	}	5✔
148	this.handleTransitionEvent(event);	14✔
149	}	14✔
150		15✔
151	protected handleModalTransitionend(event: TransitionEvent): void {	15✔
152	if (this.open \|\| !this.underlay) {	54✔
153	this.resolveTransitionPromise();	25✔
154	}	25✔
155	this.handleTransitionEvent(event);	54✔
156	}	54✔
157		15✔
158	private get hasTransitionDuration(): boolean {	15✔
159	const modal = this.shadowRoot.querySelector('.modal') as HTMLElement;	10✔
160		10✔
161	const modalTransitionDurations =	10✔
162	window.getComputedStyle(modal).transitionDuration;	10✔
163	for (const duration of modalTransitionDurations.split(','))	10✔
164	if (parseFloat(duration) > 0) return true;	10!
UNCOV 165		×
UNCOV 166	const underlay = this.shadowRoot.querySelector(	×
UNCOV 167	'sp-underlay'	×
UNCOV 168	) as HTMLElement;	×
UNCOV 169		×
UNCOV 170	if (underlay) {	×
171	const underlayTransitionDurations =	×
172	window.getComputedStyle(underlay).transitionDuration;	×
173	for (const duration of underlayTransitionDurations.split(','))	×
174	if (parseFloat(duration) > 0) return true;	×
175	}	×
UNCOV 176		×
UNCOV 177	return false;	×
178	}	10✔
179		15✔
180	protected override update(changes: PropertyValues<this>): void {	15✔
181	if (changes.has('open') && changes.get('open') !== undefined) {	33✔
182	const hasTransitionDuration = this.hasTransitionDuration;	10✔
183	this.animating = true;	10✔
184	this.transitionPromise = new Promise((res) => {	10✔
185	this.resolveTransitionPromise = () => {	10✔
186	this.animating = false;	30✔
187	if (!this.open && hasTransitionDuration)	30✔
188	this.dispatchClosed();	30✔
189	res();	30✔
190	};	30✔
191	});	10✔
192	if (!this.open && !hasTransitionDuration) this.dispatchClosed();	10!
193	}	10✔
194	super.update(changes);	33✔
195	}	33✔
196		15✔
197	protected renderDialog(): TemplateResult {	15✔
198	return html`	6✔
199	<slot></slot>	6✔
200	`;	6✔
201	}	6✔
202		15✔
203	protected override render(): TemplateResult {	15✔
204	return html`	33✔
205	${this.underlay	33✔
206	? html`	15✔
207	<sp-underlay	15✔
208	?open=${this.open}	15✔
209	@close=${this.dismiss}	15✔
210	@transitionrun=${this.handleTransitionEvent}	15✔
211	@transitionend=${this.handleUnderlayTransitionend}	15✔
212	@transitioncancel=${this.handleTransitionEvent}	15✔
213	></sp-underlay>	18✔
214	`	18✔
215	: nothing}	33✔
216	<div	33✔
217	class="modal ${this.mode}"	33✔
218	@transitionrun=${this.handleTransitionEvent}	33✔
219	@transitionend=${this.handleModalTransitionend}	33✔
220	@transitioncancel=${this.handleTransitionEvent}	33✔
221	@close=${this.handleClose}	33✔
222	>	33✔
223	${this.renderDialog()}	33✔
224	</div>	33✔
225	`;	33✔
226	}	33✔
227		15✔
228	protected override updated(changes: PropertyValues<this>): void {	15✔
229	if (changes.has('open')) {	33✔
230	if (this.open) {	33✔
231	if (	16✔
232	'updateComplete' in this.dialog &&	16✔
233	'shouldManageTabOrderForScrolling' in this.dialog	16✔
234	) {	16✔
235	this.dialog.updateComplete.then(() => {	16✔
236	this.dialog.shouldManageTabOrderForScrolling();	16✔
237	});	16✔
238	}	16✔
239	}	16✔
240	}	33✔
241	}	33✔
242		15✔
243	/**	15✔
244	* Bind the open/close transition into the update complete lifecycle so	15✔
245	* that the overlay system can wait for it to be "visibly ready" before	15✔
246	* attempting to throw focus into the content contained herein. Not	15✔
247	* waiting for this can cause small amounts of page scroll to happen	15✔
248	* while opening the Tray when focusable content is included: e.g. Menu	15✔
249	* elements whose selected Menu Item is not the first Menu Item.	15✔
250	*/	15✔
251	protected override async getUpdateComplete(): Promise<boolean> {	15✔
252	const complete = (await super.getUpdateComplete()) as boolean;	28✔
253	await this.transitionPromise;	28✔
254	return complete;	28✔
255	}	28✔
256	}	15✔

adobe / spectrum-web-components / 13555636806

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