Close #3693 Force az_paragraphs_full_width library to load in the hea…

…d alone. (#3709)
az-digital · Sep 12, 2024 · a97fff1 · a97fff1
1 parent 258e172
commit a97fff1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 41 deletions.
diff --git a/modules/custom/az_paragraphs/az_paragraphs.libraries.yml b/modules/custom/az_paragraphs/az_paragraphs.libraries.yml
@@ -8,13 +8,12 @@ az_paragraphs.az_text:
     - az_barrio/button-no-conflict
 az_paragraphs.az_paragraphs_full_width:
   version: VERSION
+  header: true
   css:
     theme:
       css/az_paragraphs_full_width.css: {}
   js:
     js/az_paragraphs_full_width.js: {}
-  dependencies:
-    - core/jquery
 az_paragraphs.az_text_background:
   version: VERSION
   css:

diff --git a/modules/custom/az_paragraphs/js/az_paragraphs_full_width.es6.js b/modules/custom/az_paragraphs/js/az_paragraphs_full_width.es6.js
@@ -2,8 +2,7 @@
  * @file
  * Provides helper functions to ensure proper display of full-width-paragraphs.
  */
-
-((Drupal, window, document) => {
+(() => {
   /**
    * Calculates scroll bar width if any and assigns the value to the
    * `--scrollbar-width` CSS variable on the html element.
@@ -34,9 +33,7 @@
       const lastFullWidthElement =
         allFullWidthElements[allFullWidthElements.length - 1];
       const contentRegionPosition = contentRegion.getBoundingClientRect();
-      const style =
-        allFullWidthElements[0].currentStyle ||
-        window.getComputedStyle(lastFullWidthElement, '');
+      const style = window.getComputedStyle(lastFullWidthElement, '');
       const bottomMargin = parseFloat(style.marginBottom);
       const contentRegionTop = contentRegionPosition.top;
       const lastFullWidthElementPosition =
@@ -54,14 +51,14 @@
   }
 
   /**
-   * Calculates and sets negative margins required for full with backgrounds.
+   * Calculates and sets negative margins required for full width backgrounds.
    *
-   * This function assigns values to the --full-width-left-distance` and
+   * This function assigns values to the `--full-width-left-distance` and
    * `--full-width-right-distance` CSS variables on the `html` element.
    */
   function calculateFullWidthNegativeMargins() {
     const contentRegion = document.querySelectorAll('.block-system-main-block');
-    if (contentRegion !== null) {
+    if (contentRegion.length > 0) {
       const contentRegionPosition = contentRegion[0].getBoundingClientRect();
       const distanceFromLeft = contentRegionPosition.left;
       const distanceFromRight = contentRegionPosition.right;
@@ -79,35 +76,28 @@
   }
 
   /**
-   * Attaches the the functions defined in this file to the document.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   After the document loads, execute functions.
+   * Executes functions to set up the page layout.
    */
-  Drupal.behaviors.azParagraphsFullWidthElements = {
-    attach: () => {
-      calculateScrollbarWidth();
-      calculateFullWidthNegativeMargins();
-      pushSidebarsDown();
-    },
-  };
+  function initialize() {
+    calculateScrollbarWidth();
+    calculateFullWidthNegativeMargins();
+    pushSidebarsDown();
+  }
 
-  /**
-   * Recalculates values for CSS variables on window resize.
-   */
+  // Initialize on page load
+  document.addEventListener('DOMContentLoaded', initialize);
+
+  // Recalculate values on window resize
   window.addEventListener('resize', () => {
     calculateScrollbarWidth();
     calculateFullWidthNegativeMargins();
     pushSidebarsDown();
   });
-  /**
-   * Recalculates values for CSS variables when azVideoPlay fires.
-   */
+
+  // Recalculate values when azVideoPlay custom event fires
   window.addEventListener('azVideoPlay', () => {
     calculateScrollbarWidth();
     calculateFullWidthNegativeMargins();
     pushSidebarsDown();
   });
-})(Drupal, this, this.document);
+})();
diff --git a/modules/custom/az_paragraphs/js/az_paragraphs_full_width.js b/modules/custom/az_paragraphs/js/az_paragraphs_full_width.js
@@ -4,7 +4,7 @@
 * https://www.drupal.org/node/2815083
 * @preserve
 **/
-(function (Drupal, window, document) {
+(function () {
   function calculateScrollbarWidth() {
     document.documentElement.style.setProperty('--scrollbar-width', "".concat(window.innerWidth - document.documentElement.clientWidth, "px"));
   }
@@ -17,7 +17,7 @@
       }
       var lastFullWidthElement = allFullWidthElements[allFullWidthElements.length - 1];
       var contentRegionPosition = contentRegion.getBoundingClientRect();
-      var style = allFullWidthElements[0].currentStyle || window.getComputedStyle(lastFullWidthElement, '');
+      var style = window.getComputedStyle(lastFullWidthElement, '');
       var bottomMargin = parseFloat(style.marginBottom);
       var contentRegionTop = contentRegionPosition.top;
       var lastFullWidthElementPosition = lastFullWidthElement.getBoundingClientRect();
@@ -30,7 +30,7 @@
   }
   function calculateFullWidthNegativeMargins() {
     var contentRegion = document.querySelectorAll('.block-system-main-block');
-    if (contentRegion !== null) {
+    if (contentRegion.length > 0) {
       var contentRegionPosition = contentRegion[0].getBoundingClientRect();
       var distanceFromLeft = contentRegionPosition.left;
       var distanceFromRight = contentRegionPosition.right;
@@ -40,13 +40,12 @@
       document.documentElement.style.setProperty('--full-width-right-distance', "".concat(negativeRightMargin, "px"));
     }
   }
-  Drupal.behaviors.azParagraphsFullWidthElements = {
-    attach: function attach() {
-      calculateScrollbarWidth();
-      calculateFullWidthNegativeMargins();
-      pushSidebarsDown();
-    }
-  };
+  function initialize() {
+    calculateScrollbarWidth();
+    calculateFullWidthNegativeMargins();
+    pushSidebarsDown();
+  }
+  document.addEventListener('DOMContentLoaded', initialize);
   window.addEventListener('resize', function () {
     calculateScrollbarWidth();
     calculateFullWidthNegativeMargins();
@@ -57,4 +56,4 @@
     calculateFullWidthNegativeMargins();
     pushSidebarsDown();
   });
-})(Drupal, this, this.document);
+})();