@brightspace-ui/core 2.187.0 → 2.187.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,14 +1,13 @@
|
|
1
1
|
import '../colors/colors.js';
|
2
2
|
import { css, html, LitElement } from 'lit';
|
3
3
|
import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
|
4
|
-
import { getUniqueId } from '../../helpers/uniqueId.js';
|
5
4
|
|
6
5
|
const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
|
7
6
|
const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
|
8
7
|
|
9
8
|
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
10
9
|
|
11
|
-
const
|
10
|
+
const modals = new Set();
|
12
11
|
let scrollOverflow = null;
|
13
12
|
|
14
13
|
/**
|
@@ -84,10 +83,7 @@ class Backdrop extends LitElement {
|
|
84
83
|
|
85
84
|
disconnectedCallback() {
|
86
85
|
// allow body scrolling, show hidden elements, if backdrop is removed from the DOM
|
87
|
-
|
88
|
-
allowBodyScroll(this._bodyScrollKey);
|
89
|
-
this._bodyScrollKey = null;
|
90
|
-
}
|
86
|
+
allowBodyScroll(this);
|
91
87
|
if (this._hiddenElements) {
|
92
88
|
showAccessible(this._hiddenElements);
|
93
89
|
this._hiddenElements = null;
|
@@ -108,7 +104,7 @@ class Backdrop extends LitElement {
|
|
108
104
|
if (this.shown) {
|
109
105
|
|
110
106
|
if (this._state === null) {
|
111
|
-
|
107
|
+
preventBodyScroll(this);
|
112
108
|
this._hiddenElements = hideAccessible(this.parentNode.querySelector(`#${cssEscape(this.forTarget)}`));
|
113
109
|
}
|
114
110
|
this._state = 'showing';
|
@@ -117,8 +113,7 @@ class Backdrop extends LitElement {
|
|
117
113
|
|
118
114
|
const hide = () => {
|
119
115
|
if (!this.shown) {
|
120
|
-
allowBodyScroll(this
|
121
|
-
this._bodyScrollKey = null;
|
116
|
+
allowBodyScroll(this);
|
122
117
|
showAccessible(this._hiddenElements);
|
123
118
|
this._hiddenElements = null;
|
124
119
|
this._state = null;
|
@@ -135,19 +130,25 @@ class Backdrop extends LitElement {
|
|
135
130
|
}
|
136
131
|
|
137
132
|
}
|
138
|
-
|
139
133
|
}
|
140
134
|
|
141
|
-
export function allowBodyScroll(
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
if (scrollKeys.length === 0) {
|
135
|
+
export function allowBodyScroll(modal) {
|
136
|
+
if (!modals.has(modal)) return;
|
137
|
+
modals.delete(modal);
|
138
|
+
if (!modals.size) {
|
146
139
|
document.body.style.overflow = scrollOverflow;
|
147
140
|
scrollOverflow = null;
|
148
141
|
}
|
149
142
|
}
|
150
143
|
|
144
|
+
export function preventBodyScroll(modal) {
|
145
|
+
if (!modals.size) {
|
146
|
+
scrollOverflow = document.body.style.overflow;
|
147
|
+
document.body.style.overflow = 'hidden';
|
148
|
+
}
|
149
|
+
modals.add(modal);
|
150
|
+
}
|
151
|
+
|
151
152
|
function hideAccessible(target) {
|
152
153
|
|
153
154
|
const hiddenElements = [];
|
@@ -184,16 +185,6 @@ function hideAccessible(target) {
|
|
184
185
|
return hiddenElements;
|
185
186
|
}
|
186
187
|
|
187
|
-
export function preventBodyScroll() {
|
188
|
-
if (scrollKeys.length === 0) {
|
189
|
-
scrollOverflow = document.body.style.overflow;
|
190
|
-
document.body.style.overflow = 'hidden';
|
191
|
-
}
|
192
|
-
const key = getUniqueId();
|
193
|
-
scrollKeys.push(key);
|
194
|
-
return key;
|
195
|
-
}
|
196
|
-
|
197
188
|
function showAccessible(elems) {
|
198
189
|
for (let i = 0; i < elems.length; i++) {
|
199
190
|
const elem = elems[i];
|
@@ -206,6 +206,29 @@
|
|
206
206
|
</template>
|
207
207
|
</d2l-demo-snippet>
|
208
208
|
|
209
|
+
<h2>Dialog (native)</h2>
|
210
|
+
|
211
|
+
<d2l-demo-snippet>
|
212
|
+
<template>
|
213
|
+
<d2l-button id="openNative">Show Dialog</d2l-button>
|
214
|
+
<d2l-dialog id="dialogNative" title-text="Dialog Title">
|
215
|
+
<div>
|
216
|
+
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
|
217
|
+
<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
|
218
|
+
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
|
219
|
+
</div>
|
220
|
+
<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
|
221
|
+
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
222
|
+
</d2l-dialog>
|
223
|
+
<script>
|
224
|
+
document.querySelector('#dialogNative')._useNative = true;
|
225
|
+
document.querySelector('#openNative').addEventListener('click', () => {
|
226
|
+
document.querySelector('#dialogNative').opened = true;
|
227
|
+
});
|
228
|
+
</script>
|
229
|
+
</template>
|
230
|
+
</d2l-demo-snippet>
|
231
|
+
|
209
232
|
</d2l-demo-page>
|
210
233
|
</body>
|
211
234
|
</html>
|
@@ -313,8 +313,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
313
313
|
this._focusOpener();
|
314
314
|
this._state = null;
|
315
315
|
this.opened = false;
|
316
|
-
|
317
|
-
this._bodyScrollKey = null;
|
316
|
+
if (this._useNative) allowBodyScroll(this);
|
318
317
|
if (this._action === undefined) this._action = abortAction;
|
319
318
|
/** Dispatched with the action value when the dialog is closed for any reason */
|
320
319
|
this.dispatchEvent(new CustomEvent(
|
@@ -416,8 +415,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
|
|
416
415
|
return node.classList && node.classList.contains('d2l-dialog-outer');
|
417
416
|
});
|
418
417
|
|
419
|
-
|
420
|
-
this._bodyScrollKey = preventBodyScroll();
|
418
|
+
if (this._useNative) preventBodyScroll(this);
|
421
419
|
|
422
420
|
// focus first focusable child prior to auto resize (fixes screen reader hiccups)
|
423
421
|
this._focusInitial();
|
@@ -174,13 +174,13 @@ class ScrollWrapper extends RtlMixin(LitElement) {
|
|
174
174
|
|
175
175
|
connectedCallback() {
|
176
176
|
super.connectedCallback();
|
177
|
-
PRINT_MEDIA_QUERY_LIST?.
|
177
|
+
PRINT_MEDIA_QUERY_LIST.addEventListener?.('change', this._handlePrintChange);
|
178
178
|
}
|
179
179
|
|
180
180
|
disconnectedCallback() {
|
181
181
|
super.disconnectedCallback();
|
182
182
|
this._disconnectAll();
|
183
|
-
PRINT_MEDIA_QUERY_LIST?.
|
183
|
+
PRINT_MEDIA_QUERY_LIST.removeEventListener?.('change', this._handlePrintChange);
|
184
184
|
}
|
185
185
|
|
186
186
|
firstUpdated(changedProperties) {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "2.187.
|
3
|
+
"version": "2.187.2",
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
5
5
|
"type": "module",
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|