https://www.hampdenhomebuyers.com/app/themes/spark/assets/scripts/…/setFullBleedTemplateCustomProperties.js

1// @ts-check
2
3/**
4 * Scope for setting custom properties
5 */
6const scope = document.querySelector('.page-template-page-full-bleed');
7
8/**
9 * Calculate and set the top padding for full-bleed elements
10 * to ensure they are not obscured by a top header template part.
11 *
12 * Also, adjust the margin-top of the next sibling element
13 * to ensure it is positioned correctly below the full-bleed element.
14 *
15 * @return void
16 */
17const setFullBleedTemplateCustomProperties = () => {
18  if (!(scope instanceof HTMLElement)) return;
19
20  setHeightProperty(
21    document.querySelector('#wpadminbar'),
22    '--admin-bar-height'
23  );
24  setHeightProperty(
25    document.querySelector(
26      '.wp-site-blocks > .wp-block-template-part:first-child'
27    ),
28    '--header-height'
29  );
30  setHeightProperty(
31    document.querySelector('.wp-site-blocks > .entry-content > :first-child'),
32    '--bleed-height'
33  );
34
35  adjustNextElementTopPadding();
36};
37
38/**
39 * Set a scoped custom property to the height of an element
40 *
41 * @param {Element|null} target - element's height will be used as value
42 * @param {string} name - custom property name
43 * @returns void
44 */
45const setHeightProperty = (target, name) => {
46  if (!(scope instanceof HTMLElement && target instanceof HTMLElement)) return;
47
48  scope.style.setProperty(name, `${target.getBoundingClientRect().height}px`);
49};
50
51/**
52 * Adjust the top padding of the element immediately following the full bleed header.
53 *
54 * @returns void
55 */
56const adjustNextElementTopPadding = () => {
57  if (!(scope instanceof HTMLElement)) return;
58
59  const followingElement = document.querySelector(
60    '.wp-site-blocks > .entry-content > :nth-child(2)'
61  );
62  if (!(followingElement instanceof HTMLElement)) return;
63
64  scope.style.setProperty(
65    '--og-next-element-padding-top',
66    followingElement.style.paddingTop
67  );
68};
69
70export { setFullBleedTemplateCustomProperties };