43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
/**
|
|
* Use this file for JavaScript code that you want to run in the front-end
|
|
* on posts/pages that contain this block.
|
|
*
|
|
* When this file is defined as the value of the `viewScript` property
|
|
* in `block.json` it will be enqueued on the front end of the site.
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* {
|
|
* "viewScript": "file:./view.js"
|
|
* }
|
|
* ```
|
|
*
|
|
* If you're not making any changes to this file because your project doesn't need any
|
|
* JavaScript running in the front-end, then you should delete this file and remove
|
|
* the `viewScript` property from `block.json`.
|
|
*
|
|
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
|
|
*/
|
|
|
|
/* eslint-disable no-console */
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Get the element with the id "lcp-header-container"
|
|
var headerContainer = document.getElementById('lcp-header-container');
|
|
|
|
// Check if the element exists
|
|
if (headerContainer) {
|
|
// Get the height of the header container
|
|
var headerHeight = headerContainer.offsetHeight;
|
|
|
|
// Get the current value of the --lcp--header--height custom property
|
|
var currentHeaderHeight = getComputedStyle(document.documentElement).getPropertyValue('--lcp--header--height').trim();
|
|
|
|
// Compare if the current value is different from the new headerHeight (in px)
|
|
if (currentHeaderHeight !== headerHeight + 'px') {
|
|
// If they are different, update the --lcp--header--height custom property
|
|
document.documentElement.style.setProperty('--lcp--header--height', headerHeight + 'px');
|
|
}
|
|
}
|
|
});
|