@carbon/ibmdotcom-utilities 1.58.0 → 1.59.0

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.
@@ -22,20 +22,26 @@ var StickyHeader = /*#__PURE__*/function () {
22
22
  function StickyHeader() {
23
23
  _classCallCheck(this, StickyHeader);
24
24
  this.ownerDocument = root.document;
25
- this._banner = undefined;
26
- this._cumulativeHeight = 0;
27
- this._hasBanner = false;
28
- this._lastScrollPosition = 0;
29
- this._leadspaceWithSearch = undefined;
30
- this._leadspaceSearchBar = undefined;
31
- this._leadspaceWithSearchStickyThreshold = 0;
32
- this._localeModal = undefined;
33
- this._masthead = undefined;
34
- this._mastheadL0 = undefined;
35
- this._mastheadL1 = undefined;
36
- this._tableOfContents = undefined;
37
- this._tableOfContentsInnerBar = undefined;
38
- this._tableOfContentsLayout = undefined;
25
+ this._state = {
26
+ cumulativeOffset: 0,
27
+ hasBanner: false,
28
+ leadspaceSearchThreshold: 0,
29
+ maxScrollaway: 0,
30
+ scrollPosPrevious: 0,
31
+ scrollPos: 0
32
+ };
33
+ this._elements = {
34
+ banner: undefined,
35
+ leadspaceSearch: undefined,
36
+ leadspaceSearchBar: undefined,
37
+ leadspaceSearchInput: undefined,
38
+ localeModal: undefined,
39
+ masthead: undefined,
40
+ mastheadL0: undefined,
41
+ mastheadL1: undefined,
42
+ tableOfContents: undefined,
43
+ tableOfContentsInnerBar: undefined
44
+ };
39
45
  this._throttled = false;
40
46
  this._resizeObserver = new ResizeObserver(this._handleResize.bind(this));
41
47
  root.addEventListener('scroll', this._throttledHandler.bind(this));
@@ -47,7 +53,7 @@ var StickyHeader = /*#__PURE__*/function () {
47
53
  _createClass(StickyHeader, [{
48
54
  key: "height",
49
55
  get: function get() {
50
- return this._cumulativeHeight;
56
+ return this._state.cumulativeOffset;
51
57
  }
52
58
 
53
59
  /**
@@ -68,74 +74,80 @@ var StickyHeader = /*#__PURE__*/function () {
68
74
  return true;
69
75
  }
70
76
  }
77
+
78
+ /**
79
+ * Stores references to TOC sub-elements that are relevant to current viewport
80
+ * dimensions.
81
+ */
71
82
  }, {
72
- key: "_tableOfContentsStickyUpdate",
73
- value: function _tableOfContentsStickyUpdate() {
74
- var toc = this._tableOfContents;
83
+ key: "_updateTableOfContentsRefs",
84
+ value: function _updateTableOfContentsRefs() {
85
+ var toc = this._elements.tableOfContents;
75
86
  var tocRoot = toc.shadowRoot;
76
- var desktopSelector = ".".concat(ddsPrefix, "-ce--table-of-contents__items-container");
77
- if (window.innerWidth > gridBreakpoint) {
78
- if (toc.layout === 'horizontal') {
79
- this._tableOfContentsInnerBar = tocRoot.querySelector(".".concat(prefix, "--tableofcontents__navbar"));
80
- this._tableOfContentsLayout = 'horizontal';
81
- } else {
82
- this._tableOfContentsInnerBar = tocRoot.querySelector(desktopSelector);
87
+ var selectors = {
88
+ desktop: {
89
+ vertical: ".".concat(ddsPrefix, "-ce--table-of-contents__items-container"),
90
+ horizontal: ".".concat(prefix, "--tableofcontents__navbar")
91
+ },
92
+ mobile: {
93
+ vertical: ".".concat(prefix, "--tableofcontents__sidebar"),
94
+ horizontal: ".".concat(prefix, "--tableofcontents__navbar")
83
95
  }
84
- } else {
85
- this._tableOfContentsInnerBar = tocRoot.querySelector(toc.layout === 'horizontal' ? ".".concat(prefix, "--tableofcontents__navbar") : ".".concat(prefix, "--tableofcontents__sidebar"));
86
- }
96
+ };
97
+ var viewportDimension = window.innerWidth >= gridBreakpoint ? 'desktop' : 'mobile';
98
+ this._elements.tableOfContentsInnerBar = tocRoot.querySelector(selectors[viewportDimension][toc.layout || 'vertical']);
87
99
  }
88
100
  }, {
89
101
  key: "banner",
90
102
  set: function set(component) {
91
103
  if (this._validateComponent(component, "".concat(ddsPrefix, "-universal-banner"))) {
92
- this._banner = component;
93
- this.hasBanner = true;
94
- if (this._masthead) {
95
- this._masthead.setAttribute('with-banner', '');
104
+ this._elements.banner = component;
105
+ this._state.hasBanner = true;
106
+ if (this._elements.masthead) {
107
+ this._elements.masthead.setAttribute('with-banner', '');
96
108
  }
97
- this._calculateCumulativeHeight();
109
+ this._manageStickyElements();
98
110
  }
99
111
  }
100
112
  }, {
101
- key: "leadspaceWithSearch",
113
+ key: "leadspaceSearch",
102
114
  set: function set(component) {
103
115
  if (this._validateComponent(component, "".concat(ddsPrefix, "-leadspace-with-search"))) {
104
- this._leadspaceWithSearch = component;
116
+ this._elements.leadspaceSearch = component;
105
117
  var leadspaceSearchBar = component.shadowRoot.querySelector(".".concat(prefix, "--search-container"));
106
- this._leadspaceSearchBar = leadspaceSearchBar;
107
- this._leadspaceWithSearchInput = component.querySelector("".concat(ddsPrefix, "-search-with-typeahead"));
108
- this._leadspaceWithSearchStickyThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
109
- this._calculateCumulativeHeight();
118
+ this._elements.leadspaceSearchBar = leadspaceSearchBar;
119
+ this._elements.leadspaceSearchInput = component.querySelector("".concat(ddsPrefix, "-search-with-typeahead"));
120
+ this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
121
+ this._manageStickyElements();
110
122
  }
111
123
  }
112
124
  }, {
113
125
  key: "localeModal",
114
126
  set: function set(component) {
115
127
  if (this._validateComponent(component, "".concat(ddsPrefix, "-locale-modal"))) {
116
- this._localeModal = component;
117
- this._calculateCumulativeHeight();
128
+ this._elements.localeModal = component;
129
+ this._manageStickyElements();
118
130
  }
119
131
  }
120
132
  }, {
121
133
  key: "masthead",
122
134
  set: function set(component) {
123
135
  if (this._validateComponent(component, "".concat(ddsPrefix, "-masthead"))) {
124
- this._masthead = component;
125
- if (this._banner) this._masthead.setAttribute('with-banner', '');
126
- this._mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
127
- this._mastheadL1 = component.querySelector("".concat(ddsPrefix, "-masthead-l1"));
128
- this._calculateCumulativeHeight();
136
+ this._elements.masthead = component;
137
+ if (this._elements.banner) this._elements.masthead.setAttribute('with-banner', '');
138
+ this._elements.mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
139
+ this._elements.mastheadL1 = component.querySelector("".concat(ddsPrefix, "-masthead-l1"));
140
+ this._manageStickyElements();
129
141
  }
130
142
  }
131
143
  }, {
132
144
  key: "tableOfContents",
133
145
  set: function set(component) {
134
146
  if (this._validateComponent(component, "".concat(ddsPrefix, "-table-of-contents"))) {
135
- this._tableOfContents = component;
136
- this._tableOfContentsStickyUpdate();
137
- this._resizeObserver.observe(this._tableOfContents);
138
- this._calculateCumulativeHeight();
147
+ this._elements.tableOfContents = component;
148
+ this._updateTableOfContentsRefs();
149
+ this._resizeObserver.observe(this._elements.tableOfContents);
150
+ this._manageStickyElements();
139
151
  }
140
152
  }
141
153
 
@@ -148,7 +160,7 @@ var StickyHeader = /*#__PURE__*/function () {
148
160
  var _this = this;
149
161
  if (!this._throttled) {
150
162
  this._throttled = true;
151
- this._calculateCumulativeHeight();
163
+ this._manageStickyElements();
152
164
  setTimeout(function () {
153
165
  _this._throttled = false;
154
166
  }, 20);
@@ -157,93 +169,190 @@ var StickyHeader = /*#__PURE__*/function () {
157
169
  }, {
158
170
  key: "_handleResize",
159
171
  value: function _handleResize() {
160
- var hasBanner = this._hasBanner,
161
- masthead = this._masthead,
162
- toc = this._tableOfContents,
163
- tocLayout = this._tableOfContentsLayout,
164
- leadspaceSearchBar = this._leadspaceSearchBar;
172
+ var hasBanner = this._state._hasBanner;
173
+ var _this$_elements = this._elements,
174
+ masthead = _this$_elements.masthead,
175
+ toc = _this$_elements.tableOfContents,
176
+ leadspaceSearchBar = _this$_elements.leadspaceSearchBar;
165
177
  if (toc && masthead) {
166
- this._tableOfContentsStickyUpdate();
167
- if (window.innerWidth >= gridBreakpoint && tocLayout !== 'horizontal' && !hasBanner) {
178
+ this._updateTableOfContentsRefs();
179
+ if (window.innerWidth >= gridBreakpoint && toc.layout !== 'horizontal' && !hasBanner) {
168
180
  masthead.style.top = '0';
169
181
  } else {
170
- // This has to happen after the tocStickyUpdate method.
171
- var tocInner = this._tableOfContentsInnerBar;
182
+ // This has to happen after the _updateTableOfContentsRefs method.
183
+ var tocInner = this._elements.tableOfContentsInnerBar;
172
184
  if (masthead.offsetTop === 0) {
173
185
  tocInner.style.top = "".concat(masthead.offsetHeight, "px");
174
186
  }
175
187
  }
176
- this._calculateCumulativeHeight();
188
+ this._manageStickyElements();
177
189
  }
178
190
  if (leadspaceSearchBar) {
179
- this._leadspaceWithSearchStickyThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
191
+ this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
180
192
  }
181
193
  }
194
+
195
+ /**
196
+ * Handles the banner given the current scroll position.
197
+ */
182
198
  }, {
183
- key: "_calculateCumulativeHeight",
184
- value: function _calculateCumulativeHeight() {
185
- var _StickyHeader$global = StickyHeader.global,
186
- oldY = _StickyHeader$global._lastScrollPosition,
187
- banner = _StickyHeader$global._banner,
188
- masthead = _StickyHeader$global._masthead,
189
- mastheadL0 = _StickyHeader$global._mastheadL0,
190
- mastheadL1 = _StickyHeader$global._mastheadL1,
191
- localeModal = _StickyHeader$global._localeModal,
192
- toc = _StickyHeader$global._tableOfContents,
193
- tocInner = _StickyHeader$global._tableOfContentsInnerBar,
194
- leadspaceSearch = _StickyHeader$global._leadspaceWithSearch,
195
- leadspaceSearchBar = _StickyHeader$global._leadspaceSearchBar,
196
- leadspaceSearchInput = _StickyHeader$global._leadspaceWithSearchInput,
197
- leadspaceSearchThreshold = _StickyHeader$global._leadspaceWithSearchStickyThreshold;
198
- var customPropertyName = this.constructor.customPropertyName;
199
- if (localeModal && localeModal.hasAttribute('open')) return;
200
- var newY = window.scrollY;
201
- this._lastScrollPosition = Math.max(0, newY);
199
+ key: "_handleBanner",
200
+ value: function _handleBanner() {
201
+ var banner = this._elements.banner;
202
+ var scrollPos = this._state.scrollPos;
203
+ this._state.cumulativeOffset += Math.max(banner.offsetHeight - scrollPos, 0);
204
+ }
202
205
 
203
- /**
204
- * maxScrollaway is a calculated value matching the height of all components
205
- * that are allowed to hide above the viewport.
206
- *
207
- * We should only have one sticky header showing as the page scrolls down.
208
- *
209
- * Items that stick, in order
210
- * - L0
211
- * - L1
212
- * - The TOC in horizontal bar form
213
- * - The leadspace with search (if no TOC)
214
- */
215
- var maxScrollaway = 0;
206
+ /**
207
+ * Handles the masthead given the current scroll position.
208
+ */
209
+ }, {
210
+ key: "_handleMasthead",
211
+ value: function _handleMasthead() {
212
+ var masthead = this._elements.masthead;
213
+ masthead.style.transition = 'none';
214
+ masthead.style.top = "".concat(this._state.cumulativeOffset, "px");
216
215
 
217
- // Calculate maxScrollaway values based on TOC positon
218
- var tocIsAtTop = false;
219
- var tocShouldStick = false;
220
- if (tocInner) {
221
- tocIsAtTop = tocInner.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1;
222
- tocShouldStick = toc.layout === 'horizontal' || window.innerWidth < gridBreakpoint;
223
- if (masthead && tocIsAtTop && (tocShouldStick || mastheadL1)) {
224
- maxScrollaway += masthead.offsetHeight;
225
- if (mastheadL1 && !tocShouldStick) {
226
- maxScrollaway -= mastheadL1.offsetHeight;
227
- }
228
- } else if (mastheadL0 && mastheadL1) {
229
- maxScrollaway += mastheadL0.offsetHeight;
216
+ // Masthead always sticks, therefore always add its height.
217
+ this._state.cumulativeOffset += masthead.offsetHeight;
218
+ }
219
+
220
+ /**
221
+ * Handles the table of contents given the current scroll position.
222
+ */
223
+ }, {
224
+ key: "_handleToc",
225
+ value: function _handleToc() {
226
+ var tableOfContentsInnerBar = this._elements.tableOfContentsInnerBar;
227
+ var tocShouldStick = this._state.tocShouldStick;
228
+ tableOfContentsInnerBar.style.transition = 'none';
229
+ tableOfContentsInnerBar.style.top = "".concat(this._state.cumulativeOffset, "px");
230
+ var tocIsStuck = Math.round(tableOfContentsInnerBar.getBoundingClientRect().top) <= this._state.cumulativeOffset + 1;
231
+ if (tocShouldStick && tocIsStuck) {
232
+ this._state.cumulativeOffset += tableOfContentsInnerBar.offsetHeight;
233
+ }
234
+ }
235
+
236
+ /**
237
+ * Handles the leadspace search given the current scroll position.
238
+ */
239
+ }, {
240
+ key: "_handleLeadspaceSearch",
241
+ value: function _handleLeadspaceSearch() {
242
+ var _this$_elements2 = this._elements,
243
+ leadspaceSearch = _this$_elements2.leadspaceSearch,
244
+ leadspaceSearchBar = _this$_elements2.leadspaceSearchBar,
245
+ leadspaceSearchInput = _this$_elements2.leadspaceSearchInput;
246
+ var leadspaceSearchThreshold = this._state.leadspaceSearchThreshold;
247
+ var searchShouldBeSticky = leadspaceSearch.getBoundingClientRect().bottom <= leadspaceSearchThreshold;
248
+ var searchIsSticky = leadspaceSearch.hasAttribute('sticky-search');
249
+ if (searchShouldBeSticky) {
250
+ if (!searchIsSticky) {
251
+ leadspaceSearch.style.paddingBottom = "".concat(leadspaceSearchBar.offsetHeight, "px");
252
+ leadspaceSearch.setAttribute('sticky-search', '');
253
+ leadspaceSearchInput.setAttribute('large', '');
254
+ window.requestAnimationFrame(function () {
255
+ leadspaceSearchBar.style.transitionDuration = '110ms';
256
+ leadspaceSearchBar.style.transform = 'translateY(0)';
257
+ });
230
258
  }
259
+ leadspaceSearchBar.style.top = "".concat(this._state.cumulativeOffset, "px");
260
+ this._state.cumulativeOffset += leadspaceSearchBar.offsetHeight;
261
+ } else if (searchIsSticky) {
262
+ leadspaceSearch.style.paddingBottom = '';
263
+ leadspaceSearch.removeAttribute('sticky-search');
264
+ leadspaceSearchInput.removeAttribute('large');
265
+ leadspaceSearchBar.style.transitionDuration = '';
266
+ leadspaceSearchBar.style.transform = '';
267
+ leadspaceSearchBar.style.top = '';
231
268
  }
269
+ }
232
270
 
233
- // Calculate maxScrollaway values based on leadspace search position
234
- if (!tocInner && leadspaceSearchBar) {
235
- var searchIsAtTop = leadspaceSearchBar.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1;
236
- if (masthead && searchIsAtTop) {
237
- maxScrollaway += masthead.offsetHeight;
271
+ /**
272
+ * Calculates a value matching the height of all components that are allowed
273
+ * to hide above the viewport.
274
+ *
275
+ * Adding an item's height to this value indicates we expect it to be hidden
276
+ * above the viewport.
277
+ *
278
+ * Items that stick, in order
279
+ * - L0
280
+ * - L1
281
+ * - The TOC in horizontal bar form
282
+ * - The leadspace with search (if no TOC)
283
+ */
284
+ }, {
285
+ key: "_calculateMaxScrollaway",
286
+ value: function _calculateMaxScrollaway() {
287
+ var _this$_elements3 = this._elements,
288
+ masthead = _this$_elements3.masthead,
289
+ mastheadL0 = _this$_elements3.mastheadL0,
290
+ mastheadL1 = _this$_elements3.mastheadL1,
291
+ tableOfContents = _this$_elements3.tableOfContents,
292
+ tableOfContentsInnerBar = _this$_elements3.tableOfContentsInnerBar,
293
+ leadspaceSearchBar = _this$_elements3.leadspaceSearchBar;
294
+
295
+ // Reset the value before performing any further calculations.
296
+ this._state.maxScrollaway = 0;
297
+
298
+ // Collect conditions we may want to test for to make logic easier to read.
299
+ var tocShouldStick = tableOfContents ? tableOfContents.layout === 'horizontal' || window.innerWidth < gridBreakpoint : false;
300
+ var tocIsAtTop = tableOfContentsInnerBar ? tableOfContentsInnerBar.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1 : false;
301
+ var searchIsAtTop = leadspaceSearchBar ? leadspaceSearchBar.getBoundingClientRect().top <= (masthead ? masthead.offsetTop + masthead.offsetHeight : 0) + 1 : false;
302
+ var tocIsAtSearch = leadspaceSearchBar && tableOfContentsInnerBar ? tableOfContentsInnerBar.getBoundingClientRect().top <= leadspaceSearchBar.getBoundingClientRect().bottom : false;
303
+ var mastheadL0IsActive = masthead === null || masthead === void 0 ? void 0 : masthead.querySelector('[expanded]');
304
+ var mastheadL1IsActive = mastheadL1 && mastheadL1.hasAttribute('active');
305
+
306
+ // Begin calculating maxScrollAway.
307
+
308
+ // If L0 is open, lock it to the top of the page.
309
+ if (mastheadL0 && mastheadL0IsActive) {
310
+ this._state.maxScrollaway = 0;
311
+ }
312
+ // If L1 is open, lock it to the top of the page.
313
+ else if (mastheadL1IsActive && mastheadL0) {
314
+ this._state.maxScrollaway = mastheadL0.offsetHeight;
315
+ } else {
316
+ // In cases where we have both an eligible ToC and leadspace search, we want
317
+ // the ToC to take precedence. Scroll away leadspace search.
318
+ if (searchIsAtTop && tocIsAtSearch && tocShouldStick) {
319
+ this._state.maxScrollaway += leadspaceSearchBar.offsetHeight;
320
+ }
321
+
322
+ // Scroll away entire masthead if either ToC or leadspace search is eligible
323
+ // to be the stuck element (unless L1 is open). Otherwise, scroll away the
324
+ // L0 if we have an L1.
325
+ if (searchIsAtTop || tocIsAtTop && tocShouldStick) {
326
+ if (masthead) {
327
+ this._state.maxScrollaway += masthead.offsetHeight;
328
+ }
329
+ } else if (masthead && mastheadL0 && mastheadL1) {
330
+ this._state.maxScrollaway += mastheadL0.offsetHeight;
238
331
  }
239
332
  }
333
+ }
334
+
335
+ /**
336
+ * Positions sticky elements. Does so by checking the scroll position and where
337
+ * tracked elements are in relation to it, then applying the correct styles to
338
+ * each element in succession to ensure that only one element is stuck to the
339
+ * top of the page, and all other elements that have been scrolled past can be
340
+ * revealed when scrolling back up.
341
+ */
342
+ }, {
343
+ key: "_positionElements",
344
+ value: function _positionElements() {
345
+ var _this$_elements4 = this._elements,
346
+ banner = _this$_elements4.banner,
347
+ masthead = _this$_elements4.masthead,
348
+ tocInner = _this$_elements4.tableOfContentsInnerBar,
349
+ leadspaceSearchBar = _this$_elements4.leadspaceSearchBar;
350
+ var oldY = this._state.scrollPosPrevious;
240
351
 
241
352
  /**
242
- * Cumulative offset is a calculated value used to set the `top` property of
243
- * components that stick to the top of the viewport.
244
- *
245
- * This value is equal to the difference between the previous scrollY and
246
- * the current scrollY values, but is positively and negatively limited.
353
+ * Reset to a value that is equal to the difference between the previous
354
+ * scrollY and the current scrollY values, but is positively and negatively
355
+ * limited.
247
356
  *
248
357
  * Positive limit: 0
249
358
  * all elements visible, starting at the top of the viewport.
@@ -253,55 +362,56 @@ var StickyHeader = /*#__PURE__*/function () {
253
362
  * with the elements that should be visible starting at the top of the
254
363
  * viewport.
255
364
  */
256
- var cumulativeOffset = Math.max(Math.min((masthead ? masthead.offsetTop : 0) + oldY - newY, 0), maxScrollaway * -1);
365
+ this._state.cumulativeOffset = Math.max(Math.min((masthead ? masthead.offsetTop : 0) + oldY - this._state.scrollPos, 0), this._state.maxScrollaway * -1);
366
+
367
+ /**
368
+ * Handle each potentially sticky element in the order we expect them to
369
+ * appear on the page. Important to do this sequentially for
370
+ * cumulativeOffset to be correctly calculated by the time each of these
371
+ * methods accesses it.
372
+ *
373
+ * @TODO One idea for improving this so the execution order doesn't matter
374
+ * is to collect our elements into an array ordered by document position,
375
+ * then loop over that array and execute a corresponding handler method.
376
+ */
257
377
  if (banner) {
258
- cumulativeOffset += Math.max(banner.offsetHeight - newY, 0);
378
+ this._handleBanner();
259
379
  }
260
380
  if (masthead) {
261
- masthead.style.transition = 'none';
262
- masthead.style.top = "".concat(cumulativeOffset, "px");
263
- cumulativeOffset += masthead.offsetHeight;
381
+ this._handleMasthead();
264
382
  }
265
- if (tocInner) {
266
- tocInner.style.transition = 'none';
267
- tocInner.style.top = "".concat(cumulativeOffset, "px");
268
- tocShouldStick = toc.layout === 'horizontal' || window.innerWidth < gridBreakpoint;
269
- var tocIsStuck = Math.round(tocInner.getBoundingClientRect().top) <= cumulativeOffset + 1;
270
- if (tocShouldStick && tocIsStuck) {
271
- cumulativeOffset += tocInner.offsetHeight;
272
- }
383
+ if (leadspaceSearchBar) {
384
+ this._handleLeadspaceSearch();
273
385
  }
274
- if (!tocInner && leadspaceSearchBar) {
275
- var searchShouldBeSticky = leadspaceSearch.getBoundingClientRect().bottom <= leadspaceSearchThreshold;
276
- var searchIsSticky = leadspaceSearch.hasAttribute('sticky-search');
277
- if (searchShouldBeSticky) {
278
- if (!searchIsSticky) {
279
- leadspaceSearch.style.paddingBottom = "".concat(leadspaceSearchBar.offsetHeight, "px");
280
- leadspaceSearch.setAttribute('sticky-search', '');
281
- leadspaceSearchInput.setAttribute('large', '');
282
- window.requestAnimationFrame(function () {
283
- leadspaceSearchBar.style.transitionDuration = '110ms';
284
- leadspaceSearchBar.style.transform = 'translateY(0)';
285
- });
286
- }
287
- leadspaceSearchBar.style.top = "".concat(cumulativeOffset, "px");
288
- cumulativeOffset += leadspaceSearchBar.offsetHeight;
289
- }
290
- if (!searchShouldBeSticky && searchIsSticky) {
291
- leadspaceSearch.removeAttribute('sticky-search');
292
- leadspaceSearch.style.paddingBottom = '';
293
- leadspaceSearchBar.style.top = '';
294
- leadspaceSearchBar.style.transitionDuration = '';
295
- leadspaceSearchBar.style.transform = '';
296
- leadspaceSearchInput.removeAttribute('large');
297
- }
386
+ if (tocInner) {
387
+ this._handleToc();
298
388
  }
389
+ }
390
+
391
+ /**
392
+ * Manages which elements are stuck and where they are positioned. We should
393
+ * only have one element stuck to the top of the viewport as the page scrolls
394
+ * down.
395
+ */
396
+ }, {
397
+ key: "_manageStickyElements",
398
+ value: function _manageStickyElements() {
399
+ var localeModal = this._elements.localeModal;
400
+ var scrollPosPrevious = this._state.scrollPos;
401
+
402
+ // Exit early if locale modal is open.
403
+ if (localeModal && localeModal.hasAttribute('open')) return;
404
+
405
+ // Store scroll positions.
406
+ this._state.scrollPosPrevious = scrollPosPrevious;
407
+ this._state.scrollPos = Math.max(0, window.scrollY);
299
408
 
300
- // Set internal property for use in scripts
301
- this._cumulativeHeight = cumulativeOffset;
409
+ // Given the current state, calculate how elements should be positioned.
410
+ this._calculateMaxScrollaway();
411
+ this._positionElements();
302
412
 
303
413
  // Set custom property for use in stylesheets
304
- root.document.documentElement.style.setProperty(customPropertyName, "".concat(this._cumulativeHeight, "px"));
414
+ root.document.documentElement.style.setProperty(this.constructor.customPropertyName, "".concat(this._state.cumulativeOffset, "px"));
305
415
  }
306
416
  }], [{
307
417
  key: "global",
@@ -11,10 +11,10 @@
11
11
  * @exports ibmdotcom.settings
12
12
  * @type {object} Settings object
13
13
  * @property {string} [prefix=dds]
14
- * Carbon for IBM.com v1.58.0',
14
+ * Carbon for IBM.com v1.59.0',
15
15
  */
16
16
  var settings = {
17
- version: 'Carbon for IBM.com v1.58.0',
17
+ version: 'Carbon for IBM.com v1.59.0',
18
18
  stablePrefix: 'dds'
19
19
  };
20
20
  export default settings;