https://greece.fage/themes/custom/fage_yogurt/js/pl_overrides/fage-header.js?tjx8qa

1/**
2 * @file header.js
3 * Fage Yogurt Header functionality copied from
4 * web/themes/custom/fage_yogurt/components/components/header/header.js file.
5 */
6
7(function ($, Drupal, once) {
8  "use strict";
9
10  Drupal.behaviors.fageHeader = {
11    attach(context, settings) {
12
13      /**
14       * Get the admin and gin toolbars height.
15       *
16       * @param {*} context
17       * @returns int
18       *   The total height of the admin and gin toolbars.
19       */
20      function getAdminToolbarsHeight(context) {
21        const $admin_toolbar = $("#toolbar-administration", context);
22        const $gin_toolbar = $(".gin-secondary-toolbar", context);
23        let admin_toolbar_height = 0;
24
25        if ($admin_toolbar.length > 0) {
26          admin_toolbar_height += $admin_toolbar.outerHeight();
27        }
28
29        if ($gin_toolbar.length > 0) {
30          admin_toolbar_height += $gin_toolbar.outerHeight();
31        }
32
33        return admin_toolbar_height;
34
35      }
36      const headerElems = once('fage-header', '.header', context);
37      headerElems.forEac

37h(headerElem => {
38        const header = $(headerElem, context);
39        const body = header.parents("body");
40
41        const admin_toolbars_height = getAdminToolbarsHeight(context);
42
43        const $stickyNav = header.find(".sticky-container");
44
45        if ($stickyNav.length > 0) {
46          // first time load.
47          $stickyNav.css({ "top": `${admin_toolbars_height}px` });
48        }
49
50        const $navbar = header.find(".navbar-nav");
51
52        const $megamenu = $("#block-megamenu");
53        const $megamenuToggles = $navbar.find(".megamenu-toggle");
54        const $megamenuChildren = $megamenu.find(".megamenu-dropdown");
55
56        const $headerOverlay = header.find("#header-overlay");
57
58        /** SCROLL FUNCTIONALITY */
59        // accessibility
60        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
61
62        // height of content above header when at the top of the page
63        const headerOffsetHeight = $stickyNav.outerHeight(true);
64        let alertOffsetHeight = $("#site-alerts", context).outerHeight(true);
65
66        let lastScroll = 0;
67        let delta = 0;
68        let scrolling = false;
69
70        // set padding for spacing of header size when at top
71        const stickyContainerHeight = header
72        .find(".sticky-container")
73        .outerHeight(true);
74        // find nearest hero and add padding
75        body.find(".layout-main-wrapper").css({ "margin-top": stickyContainerHeight });
76
77        /** SCROLL FUNCTIONALITY */
78        const handleScrollAnim = () => {
79          scrolling = true;
80          const current = window.scrollY;
81          let currentOffset = 0;
82          // alertOffsetHeight = $("#site-alerts", context).outerHeight(true);
83          alertOffsetHeight = $(".messages__wrapper", context).outerHeight(true);
84          delta = delta + (current - lastScroll);
85
86          if (!body.hasClass("modal-open")) {
87            if (
88              delta >
89              headerOffsetHeight + (alertOffsetHeight ? alertOffsetHeight : 0)
90            ) {
91              header.addClass("header-sticky");
92              if (admin_toolbars_height > 0) {
93                $stickyNav.css({ "top": "53px" }); // 53px is the gin admin toolbar height
94              }
95              // handle showing or hiding of top menu
96              // if (current - lastScroll < 0) {
97              //   currentOffset -= current - lastScroll;
98              // }
99              // $stickyNav.css({ top: `-${headerOffsetHeight + currentOffset}px` });
100            } else if (
101              delta > 0 &&
102              delta <= headerOffsetHeight + (alertOffsetHeight ? alertOffsetHeight : 0)
103            ) {
104              header.removeClass("header-sticky");
105              // $stickyNav.css({ top: "0" });
106              $stickyNav.css({ "top": `${admin_toolbars_height}px` });
107            }
108          }
109          lastScroll = current;
110          scrolling = false;
111        };
112
113        window.addEventListener(
114          "scroll",
115          () => {
116            if (mediaQuery && !mediaQuery.matches) {
117              handleScrollAnim();
118            }
119          },
120          { passive: true }
121        );
122        /** END SCROLL FUNCTIONALITY */
123
124        let $searchBtn = $(".btn-search", context);
125        let $searchBar = $searchBtn
126          .parents(".header")
127          .find(".search-block__form-wrap");
128
129        $searchBtn.on("click", function () {
130          $searchBar.toggleClass("show");
131          if ($searchBar.hasClass("show")) {
132            addSearchClass();
133            removeHeaderClass();
134            $megamenuChildren.each(function () {
135              $(this).removeClass("show");
136            });
137          } else {
138            removeSearchClass();
139          }
140        });
141
142        const addSearchClass = () => {
143          header.addClass("searchbar-open");
144        };
145
146        const removeSearchClass = () => {
147          header.removeClass("searchbar-open");
148        };
149
150        const addHeaderClass = () => {
151          removeSearchClass();
152          $searchBar.removeClass("show");
153          header.addClass("megamenu-open");
154        };
155        const removeHeaderClass = () => {
156          header.removeClass("megamenu-open");
157        };
158
159        /** MEGAMENU FUNCTIONALITY */
160        const handleToggleMegaMenu = ($megamenuToggle) => {
161          const dropdown = $megamenuChildren.filter($megamenuToggle.data("megamenu"));
162
163          $megamenuToggles.removeClass("show");
164          $megamenuToggle.addClass("show");
165
166          $megamenu.addClass("show");
167          $megamenuChildren.each(function () {
168            $(this).removeClass("show");
169          });
170          dropdown.addClass("show");
171          addHeaderClass();
172        };
173
174        $megamenuToggles.on("mouseover", function () {
175          if ($(window).width() > 990) handleToggleMegaMenu($(this));
176        });
177
178        $stickyNav.on("mouseleave", function () {
179          if ($(window).width() > 990 && !$searchBar.hasClass("show")) {
180            removeHeaderClass();
181            $megamenuToggles.removeClass("show");
182            $searchBar.removeClass("show");
183            $megamenuChildren.each(function () {
184              $(this).removeClass("show");
185            });
186          }
187        });
188
189        /** END MEGAMENU FUNCTIONALITY */
190
191        /** MOBILE SLIDEOUT FUNCTIONALITY */
192        let headerModal = document.getElementById("header-modal");
193        const modalToggle = $stickyNav.find(".btn-x");
194
195        headerModal?.addEventListener("show.bs.modal", function (e) {
196          modalToggle.addClass("open");
197        });
198        headerModal?.addEventListener("hide.bs.modal", function (e) {
199          modalToggle.removeClass("open");
200        });
201
202      });
203
204    }
205  };
206})(jQuery, Drupal, once);
207
208
209
210