@brightspace-ui/core 3.8.0 → 3.8.1
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.
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
|
6
|
+
<meta charset="UTF-8">
|
|
7
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
8
|
+
<script>
|
|
9
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
10
|
+
window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => (urlParams.get('position') === 'fixed') } } } } };
|
|
11
|
+
</script>
|
|
12
|
+
<script type="module">
|
|
13
|
+
import '../../demo/demo-page.js';
|
|
14
|
+
import '../../button/button.js';
|
|
15
|
+
import '../../button/button-subtle.js';
|
|
16
|
+
import '../../dialog/dialog.js';
|
|
17
|
+
import '../dropdown.js';
|
|
18
|
+
import '../dropdown-content.js';
|
|
19
|
+
import '../../table/demo/table-test.js';
|
|
20
|
+
</script>
|
|
21
|
+
</head>
|
|
22
|
+
|
|
23
|
+
<body unresolved>
|
|
24
|
+
|
|
25
|
+
<d2l-demo-page page-title="d2l-dropdown">
|
|
26
|
+
|
|
27
|
+
<h2>Dropdown (in a scrollable container)</h2>
|
|
28
|
+
<d2l-demo-snippet>
|
|
29
|
+
<template>
|
|
30
|
+
<div style="height: 250px; overflow: scroll;">
|
|
31
|
+
<p>Gabion warp American Main gunwalls cutlass gally cable gibbet jib keel. Trysail chantey swing the lead hempen halter hang the jib chase Jack Tar furl galleon scurvy. Brig splice the main brace provost pink rutters tender heave to Shiver me timbers belaying pin Brethren of the Coast.</p>
|
|
32
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
33
|
+
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
34
|
+
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
35
|
+
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
36
|
+
<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
|
|
37
|
+
<a href="http://www.desire2learn.com">D2L</a>
|
|
38
|
+
</d2l-dropdown-content>
|
|
39
|
+
</d2l-dropdown>
|
|
40
|
+
<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>
|
|
41
|
+
<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>
|
|
42
|
+
<p>Hardtack hang the jib haul wind booty pillage spike hearties Pirate Round tack yard. Piracy fire ship trysail stern scurvy blow the man down skysail salmagundi lee grog blossom. Hands gabion ho schooner lad ballast keel mutiny square-rigged haul wind.</p>
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
</d2l-demo-snippet>
|
|
46
|
+
|
|
47
|
+
<h2>Dropdown (in a table with sticky headers)</h2>
|
|
48
|
+
|
|
49
|
+
<d2l-demo-snippet>
|
|
50
|
+
<template>
|
|
51
|
+
<d2l-test-table type="default" sticky-headers sticky-controls></d2l-test-table>
|
|
52
|
+
</template>
|
|
53
|
+
</d2l-demo-snippet>
|
|
54
|
+
|
|
55
|
+
<h2>Dropdown (in another dropdown)</h2>
|
|
56
|
+
|
|
57
|
+
<d2l-demo-snippet>
|
|
58
|
+
<template>
|
|
59
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
60
|
+
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
61
|
+
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
62
|
+
<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign.</p>
|
|
63
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
64
|
+
<d2l-button-subtle class="d2l-dropdown-opener">Open Nested!</d2l-button-subtle>
|
|
65
|
+
<d2l-dropdown-content max-width="600" align="start" prefer-fixed-positioning>
|
|
66
|
+
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
67
|
+
<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
|
|
68
|
+
<a href="http://www.desire2learn.com">D2L</a>
|
|
69
|
+
</d2l-dropdown-content>
|
|
70
|
+
</d2l-dropdown>
|
|
71
|
+
<p>Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
|
|
72
|
+
</d2l-dropdown-content>
|
|
73
|
+
</d2l-dropdown>
|
|
74
|
+
</template>
|
|
75
|
+
</d2l-demo-snippet>
|
|
76
|
+
|
|
77
|
+
<h2>Dropdown (in a dialog)</h2>
|
|
78
|
+
|
|
79
|
+
<d2l-demo-snippet>
|
|
80
|
+
<template>
|
|
81
|
+
<d2l-button id="openDialog1">Show Dialog</d2l-button>
|
|
82
|
+
<d2l-dialog id="dialog1" title-text="Dialog Title">
|
|
83
|
+
<div>
|
|
84
|
+
<p>Bilge tack furl dance the hempen jig fathom weigh anchor mizzen Blimey Jack Ketch flogging. Lee galleon avast schooner long clothes scuppers pinnace bucko deadlights gibbet. Nipper brigantine Buccaneer Gold Road matey gangway booty tender killick Brethren of the Coast.</p>
|
|
85
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
86
|
+
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
87
|
+
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
88
|
+
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
89
|
+
<p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
|
|
90
|
+
<a href="http://www.desire2learn.com">D2L</a>
|
|
91
|
+
</d2l-dropdown-content>
|
|
92
|
+
</d2l-dropdown>
|
|
93
|
+
<p>Piracy bowsprit Arr shrouds salmagundi scuttle heave down doubloon trysail Jack Ketch. Killick boom Jolly Roger Pieces of Eight crack Jennys tea cup Cat o'nine tails league Privateer topgallant lanyard. Cat o'nine tails coxswain scurvy spirits keelhaul quarterdeck matey nipper scallywag Jolly Roger.</p>
|
|
94
|
+
<p>Clap of thunder aye Corsair Barbary Coast prow shrouds schooner keel topmast code of conduct. Matey case shot spirits Davy Jones' Locker draft schooner Brethren of the Coast barkadeer jury mast measured fer yer chains. Bilge rat run a rig gaff warp loot clipper belaying pin main sheet lanyard avast.</p>
|
|
95
|
+
<p>Pieces of Eight lookout Letter of Marque mutiny tender spanker Jack Ketch long clothes crow's nest line. Lass draught six pounders spirits skysail jib American Main chase hulk coxswain. Run a shot across the bow galleon Cat o'nine tails brigantine reef Admiral of the Black wherry quarterdeck keelhaul coffer.</p>
|
|
96
|
+
</div>
|
|
97
|
+
<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
|
|
98
|
+
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
99
|
+
</d2l-dialog>
|
|
100
|
+
<script>
|
|
101
|
+
document.querySelector('#openDialog1').addEventListener('click', () => {
|
|
102
|
+
document.querySelector('#dialog1').opened = true;
|
|
103
|
+
});
|
|
104
|
+
</script>
|
|
105
|
+
</template>
|
|
106
|
+
</d2l-demo-snippet>
|
|
107
|
+
|
|
108
|
+
<h2>Dropdown (with DOM mutation)</h2>
|
|
109
|
+
|
|
110
|
+
<d2l-demo-snippet>
|
|
111
|
+
<template>
|
|
112
|
+
<div>
|
|
113
|
+
<div id="mutations-above"></div>
|
|
114
|
+
<d2l-dropdown prefer-fixed-positioning>
|
|
115
|
+
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
116
|
+
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
117
|
+
<d2l-button-subtle id="mutations-add-above">Add to Above</d2l-button-subtle>
|
|
118
|
+
</d2l-dropdown-content>
|
|
119
|
+
</d2l-dropdown>
|
|
120
|
+
</div>
|
|
121
|
+
<script>
|
|
122
|
+
document.querySelector('#mutations-add-above').addEventListener('click', e => {
|
|
123
|
+
const mutationsContainer = e.target.parentNode.parentNode.parentNode.querySelector('#mutations-above');
|
|
124
|
+
const newContent = document.createElement('p');
|
|
125
|
+
newContent.innerText = 'Blimey brigantine gangplank booty rope\'s end lugger heave down run a rig Yellow Jack dead men tell no tales. Pirate Round scuppers spanker hogshead Davy Jone\'s Locker heave down wench fluke marooned boom. Lanyard salmagundi careen doubloon swing the lead shrouds crow\'s nest parrel gun pressgang.';
|
|
126
|
+
mutationsContainer.appendChild(newContent);
|
|
127
|
+
});
|
|
128
|
+
</script>
|
|
129
|
+
</template>
|
|
130
|
+
</d2l-demo-snippet>
|
|
131
|
+
|
|
132
|
+
<script>
|
|
133
|
+
document.querySelector('d2l-demo-page').pageTitle = `d2l-dropdown (${ window.D2L.LP.Web.UI.Flags.Flag('GAUD-131-dropdown-fixed-positioning', false) ? 'fixed' : 'relative' })`;
|
|
134
|
+
</script>
|
|
135
|
+
</body>
|
|
136
|
+
|
|
137
|
+
</html>
|
|
@@ -2,7 +2,7 @@ import '../backdrop/backdrop.js';
|
|
|
2
2
|
import '../button/button.js';
|
|
3
3
|
import '../focus-trap/focus-trap.js';
|
|
4
4
|
import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
|
|
5
|
-
import { findComposedAncestor, getBoundingAncestor, isComposedAncestor, isVisible } from '../../helpers/dom.js';
|
|
5
|
+
import { findComposedAncestor, getBoundingAncestor, getComposedParent, isComposedAncestor, isVisible } from '../../helpers/dom.js';
|
|
6
6
|
import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
8
|
import { html } from 'lit';
|
|
@@ -284,6 +284,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
284
284
|
this._showBackdrop = false;
|
|
285
285
|
this._verticalOffset = defaultVerticalOffset;
|
|
286
286
|
|
|
287
|
+
this.__reposition = this.__reposition.bind(this);
|
|
287
288
|
this.__onResize = this.__onResize.bind(this);
|
|
288
289
|
this.__onAutoCloseFocus = this.__onAutoCloseFocus.bind(this);
|
|
289
290
|
this.__onAutoCloseClick = this.__onAutoCloseClick.bind(this);
|
|
@@ -316,6 +317,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
316
317
|
this.mediaQueryList = window.matchMedia(`(max-width: ${this.mobileBreakpointOverride - 1}px)`);
|
|
317
318
|
this._useMobileStyling = this.mediaQueryList.matches;
|
|
318
319
|
if (this.mediaQueryList.addEventListener) this.mediaQueryList.addEventListener('change', this._handleMobileResize);
|
|
320
|
+
if (this.opened) this.__addRepositionHandlers();
|
|
319
321
|
}
|
|
320
322
|
|
|
321
323
|
disconnectedCallback() {
|
|
@@ -330,6 +332,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
330
332
|
this.__dismissibleId = null;
|
|
331
333
|
|
|
332
334
|
if (this.__resizeObserver) this.__resizeObserver.disconnect();
|
|
335
|
+
this.__removeRepositionHandlers();
|
|
333
336
|
}
|
|
334
337
|
|
|
335
338
|
firstUpdated(changedProperties) {
|
|
@@ -447,6 +450,33 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
447
450
|
}
|
|
448
451
|
}
|
|
449
452
|
|
|
453
|
+
__addRepositionHandlers() {
|
|
454
|
+
if (!this._fixedPositioning) return;
|
|
455
|
+
|
|
456
|
+
const isScrollable = (node, prop) => {
|
|
457
|
+
const value = window.getComputedStyle(node, null).getPropertyValue(prop);
|
|
458
|
+
return (value === 'scroll' || value === 'auto');
|
|
459
|
+
};
|
|
460
|
+
|
|
461
|
+
let node = this;
|
|
462
|
+
this.__removeRepositionHandlers();
|
|
463
|
+
this._scrollablesObserved = [];
|
|
464
|
+
while (node) {
|
|
465
|
+
let observeScrollable = false;
|
|
466
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
467
|
+
observeScrollable = isScrollable(node, 'overflow-y') || isScrollable(node, 'overflow-x');
|
|
468
|
+
} else if (node.nodeType === Node.DOCUMENT_NODE) {
|
|
469
|
+
observeScrollable = true;
|
|
470
|
+
}
|
|
471
|
+
if (observeScrollable) {
|
|
472
|
+
this._scrollablesObserved.push(node);
|
|
473
|
+
node.addEventListener('scroll', this.__reposition);
|
|
474
|
+
}
|
|
475
|
+
node = getComposedParent(node);
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
}
|
|
479
|
+
|
|
450
480
|
__disconnectResizeObserver(entries) {
|
|
451
481
|
for (let i = 0; i < entries.length; i++) {
|
|
452
482
|
const entry = entries[i];
|
|
@@ -617,8 +647,12 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
617
647
|
|
|
618
648
|
await doOpen();
|
|
619
649
|
|
|
650
|
+
this.__addRepositionHandlers();
|
|
651
|
+
|
|
620
652
|
} else {
|
|
621
653
|
|
|
654
|
+
this.__removeRepositionHandlers();
|
|
655
|
+
|
|
622
656
|
if (this.__dismissibleId) {
|
|
623
657
|
clearDismissible(this.__dismissibleId);
|
|
624
658
|
this.__dismissibleId = null;
|
|
@@ -755,6 +789,27 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
|
|
|
755
789
|
await adjustPosition();
|
|
756
790
|
}
|
|
757
791
|
|
|
792
|
+
__removeRepositionHandlers() {
|
|
793
|
+
if (!this._fixedPositioning) return;
|
|
794
|
+
if (!this._scrollablesObserved) return;
|
|
795
|
+
|
|
796
|
+
this._scrollablesObserved.forEach(node => {
|
|
797
|
+
node.removeEventListener('scroll', this.__reposition);
|
|
798
|
+
});
|
|
799
|
+
this._scrollablesObserved = null;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
__reposition() {
|
|
803
|
+
// throttle repositioning (https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#scroll_event_throttling)
|
|
804
|
+
if (!this.__repositioning) {
|
|
805
|
+
requestAnimationFrame(() => {
|
|
806
|
+
this.__position(true);
|
|
807
|
+
this.__repositioning = false;
|
|
808
|
+
});
|
|
809
|
+
}
|
|
810
|
+
this.__repositioning = true;
|
|
811
|
+
}
|
|
812
|
+
|
|
758
813
|
__toggleScrollStyles() {
|
|
759
814
|
/* scrollHeight incorrect in IE by 4px second time opened */
|
|
760
815
|
this._bottomOverflow = this.__content.scrollHeight - (this.__content.scrollTop + this.__content.clientHeight) >= 5;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.8.
|
|
3
|
+
"version": "3.8.1",
|
|
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,171 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
-
<script>
|
|
8
|
-
window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
|
|
9
|
-
</script>
|
|
10
|
-
<script type="module">
|
|
11
|
-
import '../../demo/demo-page.js';
|
|
12
|
-
import '../../button/button.js';
|
|
13
|
-
import '../../button/button-subtle.js';
|
|
14
|
-
import '../../dialog/dialog.js';
|
|
15
|
-
import '../dropdown.js';
|
|
16
|
-
import '../dropdown-content.js';
|
|
17
|
-
import { css, html, LitElement } from 'lit';
|
|
18
|
-
|
|
19
|
-
class MutationDemo extends LitElement {
|
|
20
|
-
|
|
21
|
-
static get properties() {
|
|
22
|
-
return {
|
|
23
|
-
count: { type: Number }
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
static get styles() {
|
|
28
|
-
return css`
|
|
29
|
-
:host {
|
|
30
|
-
border: 1px solid var(--d2l-color-tungsten);
|
|
31
|
-
border-radius: 6px;
|
|
32
|
-
display: block;
|
|
33
|
-
margin: 1rem;
|
|
34
|
-
position: relative;
|
|
35
|
-
}
|
|
36
|
-
div::before {
|
|
37
|
-
border-bottom: 1px solid black;
|
|
38
|
-
border-left: 1px solid black;
|
|
39
|
-
content: 'WC';
|
|
40
|
-
font-size: 0.7rem;
|
|
41
|
-
padding: 0 0.2rem;
|
|
42
|
-
position: absolute;
|
|
43
|
-
right: 0;
|
|
44
|
-
top: 0;
|
|
45
|
-
}
|
|
46
|
-
p {
|
|
47
|
-
margin: 0.5rem;
|
|
48
|
-
}
|
|
49
|
-
`;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
constructor() {
|
|
53
|
-
super();
|
|
54
|
-
this.count = 1;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
render() {
|
|
58
|
-
const elems = [];
|
|
59
|
-
for (let i = 0; i < this.count; i++) {
|
|
60
|
-
const newContent = document.createElement('p');
|
|
61
|
-
newContent.innerText = 'Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway.';
|
|
62
|
-
elems.push(newContent);
|
|
63
|
-
}
|
|
64
|
-
return html`<div>${elems}</div>`;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
customElements.define('d2l-demo-mutation', MutationDemo);
|
|
69
|
-
|
|
70
|
-
</script>
|
|
71
|
-
</head>
|
|
72
|
-
|
|
73
|
-
<body unresolved>
|
|
74
|
-
|
|
75
|
-
<d2l-demo-page page-title="d2l-dropdown (fixed position)">
|
|
76
|
-
|
|
77
|
-
<h2>Dropdown (mutation testing)</h2>
|
|
78
|
-
|
|
79
|
-
<d2l-demo-snippet>
|
|
80
|
-
<template>
|
|
81
|
-
<div style="border: 1px solid var(--d2l-color-tungsten); border-radius: 6px; height: 600px; overflow: scroll;">
|
|
82
|
-
<d2l-demo-mutation count="1"></d2l-demo-mutation>
|
|
83
|
-
<div style="padding: 25px; position: relative;">
|
|
84
|
-
<d2l-dropdown prefer-fixed-positioning>
|
|
85
|
-
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
86
|
-
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
87
|
-
<d2l-button-subtle id="add-content1">Add to Light</d2l-button-subtle>
|
|
88
|
-
<d2l-button-subtle id="add-content2">Add to Shadow</d2l-button-subtle>
|
|
89
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
90
|
-
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
91
|
-
commodo consequat. </p>
|
|
92
|
-
<a href="http://www.desire2learn.com">D2L</a>
|
|
93
|
-
</d2l-dropdown-content>
|
|
94
|
-
</d2l-dropdown>
|
|
95
|
-
<br><br><br><br><br><br>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
<script>
|
|
99
|
-
document.querySelector('#add-content1').addEventListener('click', e => {
|
|
100
|
-
const dropdown = e.target.parentNode.parentNode;
|
|
101
|
-
const newContent = document.createElement('p');
|
|
102
|
-
newContent.innerText = '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.';
|
|
103
|
-
dropdown.parentNode.insertBefore(newContent, dropdown);
|
|
104
|
-
});
|
|
105
|
-
document.querySelector('#add-content2').addEventListener('click', () => {
|
|
106
|
-
const mutationDemo = document.querySelector('d2l-demo-mutation');
|
|
107
|
-
mutationDemo.count += 1;
|
|
108
|
-
});
|
|
109
|
-
</script>
|
|
110
|
-
</template>
|
|
111
|
-
</d2l-demo-snippet>
|
|
112
|
-
|
|
113
|
-
<h2>Dropdown (transform container)</h2>
|
|
114
|
-
|
|
115
|
-
<d2l-demo-snippet>
|
|
116
|
-
<template>
|
|
117
|
-
|
|
118
|
-
<div style="padding: 25px; transform: translate(0);">
|
|
119
|
-
<d2l-dropdown prefer-fixed-positioning>
|
|
120
|
-
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
121
|
-
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
122
|
-
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
123
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
124
|
-
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
125
|
-
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
126
|
-
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
|
127
|
-
anim id est laborum.</p>
|
|
128
|
-
<a href="http://www.desire2learn.com">D2L</a>
|
|
129
|
-
</d2l-dropdown-content>
|
|
130
|
-
</d2l-dropdown>
|
|
131
|
-
</div>
|
|
132
|
-
|
|
133
|
-
</template>
|
|
134
|
-
</d2l-demo-snippet>
|
|
135
|
-
|
|
136
|
-
<h2>Dropdown (in a dialog)</h2>
|
|
137
|
-
|
|
138
|
-
<d2l-demo-snippet>
|
|
139
|
-
<template>
|
|
140
|
-
<d2l-button id="openDialog1">Show Dialog</d2l-button>
|
|
141
|
-
<d2l-dialog id="dialog1" title-text="Dialog Title">
|
|
142
|
-
<div>
|
|
143
|
-
<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>
|
|
144
|
-
<d2l-dropdown prefer-fixed-positioning>
|
|
145
|
-
<d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
|
|
146
|
-
<d2l-dropdown-content max-width="400" prefer-fixed-positioning>
|
|
147
|
-
<a href="https://youtu.be/9ze87zQFSak">Google</a>
|
|
148
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
149
|
-
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
150
|
-
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
|
151
|
-
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
|
|
152
|
-
anim id est laborum.</p>
|
|
153
|
-
<a href="http://www.desire2learn.com">D2L</a>
|
|
154
|
-
</d2l-dropdown-content>
|
|
155
|
-
</d2l-dropdown>
|
|
156
|
-
</div>
|
|
157
|
-
<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
|
|
158
|
-
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
|
|
159
|
-
</d2l-dialog>
|
|
160
|
-
<script>
|
|
161
|
-
document.querySelector('#openDialog1').addEventListener('click', () => {
|
|
162
|
-
document.querySelector('#dialog1').opened = true;
|
|
163
|
-
});
|
|
164
|
-
</script>
|
|
165
|
-
</template>
|
|
166
|
-
</d2l-demo-snippet>
|
|
167
|
-
|
|
168
|
-
</d2l-demo-page>
|
|
169
|
-
|
|
170
|
-
</body>
|
|
171
|
-
</html>
|