@brightspace-ui/core 2.21.3 → 2.21.6
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.
|
@@ -146,7 +146,7 @@ To make your usage of `d2l-breadcrumb` (child) accessible, use the following att
|
|
|
146
146
|
|
|
147
147
|
## Current Page [d2l-breadcrumb-current-page]
|
|
148
148
|
|
|
149
|
-
|
|
149
|
+
Only include the current page in the breadcrumb if your page or view does not have a visible heading. You will notice that some older pages or tools in Brightspace still display the current page as the last breadcrumb despite having a visible page heading, but this is now a legacy pattern.
|
|
150
150
|
|
|
151
151
|
<!-- docs: demo live name:d2l-breadcrumb-current-page display:block -->
|
|
152
152
|
```html
|
|
@@ -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>
|
|
@@ -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.6",
|
|
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
|
});
|