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