@brightspace-ui/core 2.21.2 → 2.21.5
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.
|
@@ -372,8 +372,8 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
|
|
|
372
372
|
### Methods
|
|
373
373
|
|
|
374
374
|
- `highlight()`: highlights the item
|
|
375
|
-
- `scrollToItem()`: scrolls to the item
|
|
376
|
-
- `scrollToAndHighlight()`: scrolls to the item and then highlights it
|
|
375
|
+
- `scrollToItem(alignToTop=true)`: scrolls to the item. See [Element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for definition of alignToTop.
|
|
376
|
+
- `scrollToAndHighlight(alignToTop=true)`: scrolls to the item and then highlights it. . See [Element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) for definition of alignToTop.
|
|
377
377
|
|
|
378
378
|
### Events
|
|
379
379
|
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
+
<script type="module">
|
|
8
|
+
import '../../demo/demo-page.js';
|
|
9
|
+
import '../../dropdown/dropdown-menu.js';
|
|
10
|
+
import '../../menu/menu.js';
|
|
11
|
+
import '../list-item-content.js';
|
|
12
|
+
import '../list-item.js';
|
|
13
|
+
import '../list.js';
|
|
14
|
+
import '../../../components/inputs/input-date.js';
|
|
15
|
+
import '../../../components/dropdown/dropdown-button-subtle.js';
|
|
16
|
+
import '../../../components/dropdown/dropdown-menu.js';
|
|
17
|
+
import '../../../components/selection/selection-action-menu-item.js';
|
|
18
|
+
</script>
|
|
19
|
+
<style>
|
|
20
|
+
html {
|
|
21
|
+
--d2l-list-header-background-color: #f1f5fb;
|
|
22
|
+
}
|
|
23
|
+
.container {
|
|
24
|
+
height: 400px;
|
|
25
|
+
position: relative;
|
|
26
|
+
}
|
|
27
|
+
.template {
|
|
28
|
+
bottom: 0;
|
|
29
|
+
left: 0;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
position: absolute;
|
|
32
|
+
right: 0;
|
|
33
|
+
top: 0;
|
|
34
|
+
}
|
|
35
|
+
.main {
|
|
36
|
+
height: 100%;
|
|
37
|
+
overflow-x: hidden;
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
40
|
+
</head>
|
|
41
|
+
<body unresolved>
|
|
42
|
+
|
|
43
|
+
<d2l-demo-page page-title="d2l-list-item (scroll)">
|
|
44
|
+
|
|
45
|
+
<h2>Scroll To Item in Absolutely Positioned Div</h2>
|
|
46
|
+
|
|
47
|
+
<d2l-demo-snippet>
|
|
48
|
+
<template>
|
|
49
|
+
<div class="container">
|
|
50
|
+
<div class="template">
|
|
51
|
+
<div class="main">
|
|
52
|
+
<d2l-dropdown-button-subtle text="Scroll To Item">
|
|
53
|
+
<d2l-dropdown-menu>
|
|
54
|
+
<d2l-menu label="Actions">
|
|
55
|
+
<d2l-selection-action-menu-item id="scroll-item-start" text="Scroll To Last Item Align Start"></d2l-selection-action-menu-item>
|
|
56
|
+
<d2l-selection-action-menu-item id="scroll-item-end" text="Scroll To Last Item Align End"></d2l-selection-action-menu-item>
|
|
57
|
+
</d2l-menu>
|
|
58
|
+
</d2l-dropdown-menu>
|
|
59
|
+
</d2l-dropdown-button-subtle>
|
|
60
|
+
<script>
|
|
61
|
+
document.querySelector('#scroll-item-start').addEventListener('d2l-selection-action-click', () => {
|
|
62
|
+
window.setTimeout(() => {
|
|
63
|
+
const element = document.querySelector('#algebraic-number-theory');
|
|
64
|
+
element.scrollToItem();
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
document.querySelector('#scroll-item-end').addEventListener('d2l-selection-action-click', () => {
|
|
68
|
+
window.setTimeout(() => {
|
|
69
|
+
const element = document.querySelector('#algebraic-number-theory');
|
|
70
|
+
element.scrollToItem(false);
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
</script>
|
|
74
|
+
<div>
|
|
75
|
+
<label>Date included to show issues with overflow when scrolling to items</label>
|
|
76
|
+
<d2l-input-date></d2l-input-date>
|
|
77
|
+
<p>
|
|
78
|
+
The hidden d2l-calendar causes overflow which is hidden by the template but becomes
|
|
79
|
+
visible when scrollIntoView is called with <code>alignToTop=true</code> (<code>block='start'</code>).
|
|
80
|
+
Use <code>alignToTop=false</code> to avoid the issue.
|
|
81
|
+
</p>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<d2l-list>
|
|
85
|
+
<d2l-list-item selectable key="1" label="Introductory Earth Sciences">
|
|
86
|
+
<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
|
|
87
|
+
</d2l-list-item>
|
|
88
|
+
<d2l-list-item selectable key="2" selected label="Engineering Materials for Energy Systems">
|
|
89
|
+
<d2l-list-item-content>Engineering Materials for Energy Systems</d2l-list-item-content>
|
|
90
|
+
</d2l-list-item>
|
|
91
|
+
<d2l-list-item selectable key="3" label="Geomorphology and GIS">
|
|
92
|
+
<d2l-list-item-content>Geomorphology and GIS</d2l-list-item-content>
|
|
93
|
+
</d2l-list-item>
|
|
94
|
+
<d2l-list-item selectable key="4" label="Introductory Earth Sciences">
|
|
95
|
+
<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
|
|
96
|
+
</d2l-list-item>
|
|
97
|
+
<d2l-list-item selectable key="5" selected label="Engineering Materials for Energy Systems">
|
|
98
|
+
<d2l-list-item-content>Engineering Materials for Energy Systems</d2l-list-item-content>
|
|
99
|
+
</d2l-list-item>
|
|
100
|
+
<d2l-list-item selectable key="6" label="Geomorphology and GIS">
|
|
101
|
+
<d2l-list-item-content>Geomorphology and GIS</d2l-list-item-content>
|
|
102
|
+
</d2l-list-item>
|
|
103
|
+
<d2l-list-item selectable key="7" label="Introductory Earth Sciences">
|
|
104
|
+
<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
|
|
105
|
+
</d2l-list-item>
|
|
106
|
+
<d2l-list-item selectable key="8" selected label="Engineering Materials for Energy Systems">
|
|
107
|
+
<d2l-list-item-content>Engineering Materials for Energy Systems</d2l-list-item-content>
|
|
108
|
+
</d2l-list-item>
|
|
109
|
+
<d2l-list-item id="algebraic-number-theory" selectable key="9" label="Algebraic Number Theory">
|
|
110
|
+
<d2l-list-item-content>Algebraic Number Theory</d2l-list-item-content>
|
|
111
|
+
</d2l-list-item>
|
|
112
|
+
</d2l-list>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</template>
|
|
117
|
+
</d2l-demo-snippet>
|
|
118
|
+
|
|
119
|
+
</d2l-demo-page>
|
|
120
|
+
|
|
121
|
+
</body>
|
|
122
|
+
</html>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css, html, LitElement } from 'lit';
|
|
2
2
|
import { findComposedAncestor, getNextAncestorSibling, getPreviousAncestorSibling, isComposedAncestor } from '../../helpers/dom.js';
|
|
3
|
-
import { getComposedActiveElement, getFirstFocusableDescendant, getLastFocusableDescendant, isFocusable } from '../../helpers/focus.js';
|
|
3
|
+
import { getComposedActiveElement, getFirstFocusableDescendant, getLastFocusableDescendant, getNextFocusable, getPreviousFocusable, isFocusable } from '../../helpers/focus.js';
|
|
4
4
|
import { isInteractiveDescendant } from '../../mixins/interactive-mixin.js';
|
|
5
5
|
import { RtlMixin } from '../../mixins/rtl-mixin.js';
|
|
6
6
|
|
|
@@ -203,12 +203,19 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
203
203
|
`;
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
_focusCellItem(num, itemNum) {
|
|
206
|
+
_focusCellItem(previous, num, itemNum) {
|
|
207
207
|
const cell = this.shadowRoot && this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
|
|
208
208
|
if (!cell) return;
|
|
209
209
|
|
|
210
210
|
const firstFocusable = getFirstFocusableDescendant(cell);
|
|
211
|
-
if (!firstFocusable)
|
|
211
|
+
if (!firstFocusable) {
|
|
212
|
+
const listItem = findComposedAncestor(this, node => node.role === 'rowgroup');
|
|
213
|
+
if (listItem) {
|
|
214
|
+
const nextFocusable = previous ? getPreviousFocusable(listItem) : getNextFocusable(listItem);
|
|
215
|
+
if (nextFocusable) nextFocusable.focus();
|
|
216
|
+
}
|
|
217
|
+
return;
|
|
218
|
+
}
|
|
212
219
|
|
|
213
220
|
if (itemNum === 1 || !this._focusNextWithinCell(firstFocusable, itemNum)) {
|
|
214
221
|
firstFocusable.focus();
|
|
@@ -283,7 +290,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
283
290
|
|
|
284
291
|
if (!listItem) return;
|
|
285
292
|
const listItemRow = listItem.shadowRoot.querySelector('[role="gridrow"]');
|
|
286
|
-
listItemRow._focusCellItem(this._cellNum, this._cellFocusedItem);
|
|
293
|
+
listItemRow._focusCellItem(previous, this._cellNum, this._cellFocusedItem);
|
|
287
294
|
|
|
288
295
|
}
|
|
289
296
|
|
|
@@ -427,17 +427,17 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
427
427
|
});
|
|
428
428
|
}
|
|
429
429
|
|
|
430
|
-
scrollToAndHighlight() {
|
|
431
|
-
this.scrollToItem();
|
|
430
|
+
scrollToAndHighlight(alignToTop = true) {
|
|
431
|
+
this.scrollToItem(alignToTop);
|
|
432
432
|
setTimeout(() => {
|
|
433
433
|
this.highlight();
|
|
434
434
|
}, 1000);
|
|
435
435
|
}
|
|
436
436
|
|
|
437
|
-
scrollToItem() {
|
|
437
|
+
scrollToItem(alignToTop = true) {
|
|
438
438
|
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
439
|
-
if (reduceMotion) this.scrollIntoView();
|
|
440
|
-
else this.scrollIntoView({ behavior: 'smooth' });
|
|
439
|
+
if (reduceMotion) this.scrollIntoView(alignToTop);
|
|
440
|
+
else this.scrollIntoView({ behavior: 'smooth', block: alignToTop ? 'start' : 'end' });
|
|
441
441
|
}
|
|
442
442
|
|
|
443
443
|
_getNestedList() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.21.
|
|
3
|
+
"version": "2.21.5",
|
|
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",
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
console.warn('Using mathjax test context, this is intended for demo pages and tests only');
|
|
2
2
|
|
|
3
|
-
const disabled = window.location.search.indexOf('latex=false') !== -1;
|
|
4
|
-
|
|
5
3
|
document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({
|
|
6
4
|
outputScale: 1.1,
|
|
7
|
-
renderLatex: !
|
|
5
|
+
renderLatex: !(window.location.search.indexOf('latex=false') !== -1)
|
|
8
6
|
});
|