@brightspace-ui/core 3.220.0 → 3.220.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.
Files changed (3) hide show
  1. package/components/backdrop/backdrop-loading.js +38 -8
  2. package/components/backdrop/demo/backdrop-loading.html +100 -0
  3. package/package.json +1 -1
package/components/backdrop/backdrop-loading.js CHANGED
@@ -2,11 +2,15 @@ import '../colors/colors.js';
2
2
  import '../loading-spinner/loading-spinner.js';
3
3
  import { css, html, LitElement, nothing } from 'lit';
4
4
  import { getOffsetParent } from '../../helpers/dom.js';
5
+ import { styleMap } from 'lit/directives/style-map.js';
5
6
 
6
7
  const BACKDROP_DELAY_MS = 800;
7
8
  const FADE_DURATION_MS = 500;
8
9
  const SPINNER_DELAY_MS = FADE_DURATION_MS;
9
10
 
11
+ const LOADING_SPINNER_MINIMUM_BUFFER = 100;
12
+ const LOADING_SPINNER_SIZE = 50;
13
+
10
14
  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
11
15
 
12
16
  /**
@@ -22,6 +26,7 @@ class LoadingBackdrop extends LitElement {
22
26
  */
23
27
  shown: { type: Boolean },
24
28
  _state: { type: String, reflect: true },
29
+ _spinnerTop: { state: true }
25
30
  };
26
31
  }
27
32
 
@@ -58,7 +63,6 @@ class LoadingBackdrop extends LitElement {
58
63
  d2l-loading-spinner {
59
64
  opacity: 0;
60
65
  position: absolute;
61
- top: 100px;
62
66
  transition: opacity ${FADE_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
63
67
  }
64
68
  :host([_state="shown"]) d2l-loading-spinner {
@@ -80,16 +84,16 @@ class LoadingBackdrop extends LitElement {
80
84
  super();
81
85
  this.shown = false;
82
86
  this._state = 'hidden';
87
+ this._spinnerTop = LOADING_SPINNER_MINIMUM_BUFFER;
83
88
  }
84
89
 
85
90
  render() {
86
91
  if (this._state === 'hidden') return nothing;
87
92
  return html`
88
- <div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#hide}"></div>
89
- <d2l-loading-spinner></d2l-loading-spinner>
93
+ <div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#hide}" size="${LOADING_SPINNER_SIZE}"></div>
94
+ <d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })}></d2l-loading-spinner>
90
95
  `;
91
96
  }
92
-
93
97
  updated(changedProperties) {
94
98
  if (changedProperties.has('_state')) {
95
99
  if (this._state === 'showing') {
@@ -98,8 +102,13 @@ class LoadingBackdrop extends LitElement {
98
102
  }, BACKDROP_DELAY_MS);
99
103
  }
100
104
  }
101
- }
102
105
 
106
+ if (changedProperties.has('shown') && (
107
+ (reduceMotion && this._state === 'shown') || (!reduceMotion && this._state === 'showing')
108
+ )) {
109
+ this.#centerLoadingSpinner();
110
+ }
111
+ }
103
112
  willUpdate(changedProperties) {
104
113
  if (changedProperties.has('shown')) {
105
114
  if (this.shown) {
@@ -110,6 +119,30 @@ class LoadingBackdrop extends LitElement {
110
119
  }
111
120
  }
112
121
 
122
+ #centerLoadingSpinner() {
123
+ if (this._state === 'hidden') { return; }
124
+
125
+ const loadingSpinner = this.shadowRoot.querySelector('d2l-loading-spinner');
126
+ if (!loadingSpinner) { return; }
127
+
128
+ const boundingRect = this.getBoundingClientRect();
129
+
130
+ // Calculate the centerpoint of the visible portion of the element
131
+ const upperVisibleBound = Math.max(0, boundingRect.top);
132
+ const lowerVisibleBound = Math.min(window.innerHeight, boundingRect.bottom);
133
+ const visibleHeight = lowerVisibleBound - upperVisibleBound;
134
+ const centeringOffset = visibleHeight / 2;
135
+
136
+ // Calculate if an offset is required to move to the top of the viewport before centering
137
+ const topOffset = Math.max(0, -boundingRect.top); // measures the distance below the top of the viewport, which is negative if the element starts above the viewport
138
+
139
+ // Adjust for the size of the spinner
140
+ const spinnerSizeOffset = LOADING_SPINNER_SIZE / 2;
141
+
142
+ const newPosition = centeringOffset + topOffset - spinnerSizeOffset;
143
+ this._spinnerTop = Math.max(LOADING_SPINNER_MINIMUM_BUFFER, newPosition);
144
+ }
145
+
113
146
  #fade() {
114
147
  let hideImmediately = reduceMotion || this._state === 'showing';
115
148
  if (this._state === 'shown') {
@@ -123,13 +156,11 @@ class LoadingBackdrop extends LitElement {
123
156
  this._state = 'hiding';
124
157
  }
125
158
  }
126
-
127
159
  #handleTransitionEnd() {
128
160
  if (this._state === 'hiding') {
129
161
  this.#hide();
130
162
  }
131
163
  }
132
-
133
164
  #hide() {
134
165
  this._state = 'hidden';
135
166
 
@@ -137,7 +168,6 @@ class LoadingBackdrop extends LitElement {
137
168
 
138
169
  if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert');
139
170
  }
140
-
141
171
  #show() {
142
172
  this._state = reduceMotion ? 'shown' : 'showing';
143
173
 
package/components/backdrop/demo/backdrop-loading.html CHANGED
@@ -38,6 +38,106 @@
38
38
  <td class="grade">85%</td>
39
39
  <td>100</td>
40
40
  </tr>
41
+ <tr>
42
+ <td>Math</td>
43
+ <td class="grade">85%</td>
44
+ <td>100</td>
45
+ </tr>
46
+ <tr>
47
+ <td>Math</td>
48
+ <td class="grade">85%</td>
49
+ <td>100</td>
50
+ </tr>
51
+ <tr>
52
+ <td>Math</td>
53
+ <td class="grade">85%</td>
54
+ <td>100</td>
55
+ </tr>
56
+ <tr>
57
+ <td>Math</td>
58
+ <td class="grade">85%</td>
59
+ <td>100</td>
60
+ </tr>
61
+ <tr>
62
+ <td>Math</td>
63
+ <td class="grade">85%</td>
64
+ <td>100</td>
65
+ </tr>
66
+ <tr>
67
+ <td>Math</td>
68
+ <td class="grade">85%</td>
69
+ <td>100</td>
70
+ </tr>
71
+ <tr>
72
+ <td>Math</td>
73
+ <td class="grade">85%</td>
74
+ <td>100</td>
75
+ </tr>
76
+ <tr>
77
+ <td>Math</td>
78
+ <td class="grade">85%</td>
79
+ <td>100</td>
80
+ </tr>
81
+ <tr>
82
+ <td>Math</td>
83
+ <td class="grade">85%</td>
84
+ <td>100</td>
85
+ </tr>
86
+ <tr>
87
+ <td>Math</td>
88
+ <td class="grade">85%</td>
89
+ <td>100</td>
90
+ </tr>
91
+ <tr>
92
+ <td>Math</td>
93
+ <td class="grade">85%</td>
94
+ <td>100</td>
95
+ </tr>
96
+ <tr>
97
+ <td>Math</td>
98
+ <td class="grade">85%</td>
99
+ <td>100</td>
100
+ </tr>
101
+ <tr>
102
+ <td>Math</td>
103
+ <td class="grade">85%</td>
104
+ <td>100</td>
105
+ </tr>
106
+ <tr>
107
+ <td>Math</td>
108
+ <td class="grade">85%</td>
109
+ <td>100</td>
110
+ </tr>
111
+ <tr>
112
+ <td>Math</td>
113
+ <td class="grade">85%</td>
114
+ <td>100</td>
115
+ </tr>
116
+ <tr>
117
+ <td>Math</td>
118
+ <td class="grade">85%</td>
119
+ <td>100</td>
120
+ </tr>
121
+ <tr>
122
+ <td>Math</td>
123
+ <td class="grade">85%</td>
124
+ <td>100</td>
125
+ </tr>
126
+ <tr>
127
+ <td>Math</td>
128
+ <td class="grade">85%</td>
129
+ <td>100</td>
130
+ </tr>
131
+ <tr>
132
+ <td>Math</td>
133
+ <td class="grade">85%</td>
134
+ <td>100</td>
135
+ </tr>
136
+ <tr>
137
+ <td>Math</td>
138
+ <td class="grade">85%</td>
139
+ <td>100</td>
140
+ </tr>
41
141
  <tr>
42
142
  <td>Art</td>
43
143
  <td class="grade">98%</td>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.220.0",
3
+ "version": "3.220.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",