https://sint-pieters-leeuw.eu/wp-content/themes/appetite/assets/js/public/appetite.js?ver=2.2.3

1'use strict';
2/*
3 Handles additional functionalities of the theme.
4*/
5
6(function () {
7  var siteHeader = document.getElementById('masthead');
8
9  if (!siteHeader) {
10    return;
11  }
12
13  var fullScreenHeader = document.getElementById('primary-header');
14  var appetiteTheme = {
15    // Run on ready.
16    onReady: function onReady() {
17      this.setContentTopPaddings();
18      this.setPageHeader();
19      this.skipLinkFocusFix();
20    },
21    // Helper function that sets top paddings for the page header container if needed.
22    setPageHeaderTopPaddings: function setPageHeaderTopPaddings() {
23      if (
24        'undefined' != typeof window.matchMedia ||
25        'undefined' != typeof window.msMatchMedia
26      ) {
27        var tabletView = window.matchMedia('(min-width: 768px)');
28
29        if (tabletView.matches) {
30          fullScreenHeader.style.paddingTop = siteHeader.offsetHeight + 'px';
31        }
32      } else {
33        if (document.body.offsetWidth >= 768) {
34          fullScreenHeader.style.paddingTop = siteHeader.offsetHeight + 'px';
35        }
36      }
37    },
38    // Set a proper distance between a fixed header section and a content area.
39    setContentTopPaddings: function setContentTopPaddings() {
40      if (null === fullScreenHeader) {
41        return;
42      } // On load, set top paddings and make the page header section visible.
43
44      var setPropperPaddings = function setPropperPaddings() {
45        appetiteTheme.setPageHeaderTopPaddings();
46        fullScreenHeader.classList.add('visible');
47      };
48
49      window.requestAnimationFrame(setPropperPaddings);
50      var siteLogo = siteHeader.querySelector('.custom-logo');
51
52      if (null === siteLogo) {
53        return;
54      }
55
56      if (siteLogo.complete || siteLogo.naturalHeight > 0) {
57        window.requestAnimationFrame(setPropperPaddings);
58      }
59    },
60    // Set up page header section.
61    setPageHeader: function setPageHeader() {
62      if (null === fullScreenHeader) {
63        return;
64      } // On resize, run the paddings function.
65
66      var primaryHeaderResizeEvent = function primaryHeaderResizeEvent() {
67        window.requestAnimationFrame(appetiteTheme.setPageHeaderTopPaddings);
68      };
69
70      window.addEventListener('resize', primaryHeaderResizeEvent, false); // On scroll, change top paddings depending on an initial height of the hadader.
71
72      var primaryHeaderScrollEvent = function primaryHeaderScrollEvent() {
73        var scrollTop = window.scrollY || document.documentElement.scrollTop;
74
75        if (0 === scrollTop) {
76          setTimeout(function () {
77            window.requestAnimationFrame(
78              appetiteTheme.setPageHeaderTopPaddings
79            );
80          }, 100);
81        }
82      };
83
84      window.addEventListener('scroll', primaryHeaderScrollEvent, false);
85    },
86    // Helps with accessibility for keyboard only users.
87    skipLinkFocusFix: function skipLinkFocusFix() {
88      var isIe = /(trident|msie)/i.test(navigator.userAgent);
89
90      if (isIe && document.getElementById && window.addEventListener) {
91        window.addEventListener(
92          'hashchange',
93          function () {
94            var id = location.hash.substring(1),
95              element;
96
97            if (!/^[A-z0-9_-]+$/.test(id)) {
98              return;
99            }
100
101            element = document.getElementById(id);
102
103            if (element) {
104              if (
105                !/^(?:a|select|input|button|textarea)$/i.test(element.tagName)
106              ) {
107                element.tabIndex = -1;
108              }
109
110              element.focus();
111            }
112          },
113          false
114        );
115      }
116    },
117  }; // Things that need to happen when the document is ready.
118
119  document.addEventListener(
120    'DOMContentLoaded',
121    function () {
122      appetiteTheme.onReady();
123    },
124    false
125  );
126})();
127
128(function () {
129  'use strict';
130
131  if ('loading' === document.readyState) {
132    // The DOM has not yet been loaded.
133    document.addEventListener('DOMContentLoaded', initFeaturedImages);
134  } else {
135    // The DOM has already been loaded.
136    initFeaturedImages();
137  } // Initiate the header search when the DOM loads.
138
139  function initFeaturedImages() {
140    // If the browser does support object-fit, we don't need to continue
141    if ('objectFit' in document.documentElement.style !== false) {
142      return;
143    }
144
145    Array.prototype.forEach.call(
146      document.querySelectorAll('img.th-featured-image'),
147      function (image) {
148        var parentContainer = image.parentNode;
149        var fakeImg = document.createElement('span');
150        fakeImg.setAttribute('role', 'img');
151        fakeImg.setAttribute('aria-label', image.alt);
152        fakeImg.className =
153          'featured-image th-featured-image th-background-cover th-cover th-w-full th-h-full';
154        fakeImg.style.backgroundImage = 'url("'.concat(image.src, '")');
155        parentContainer.removeChild(image);
156        parentContainer.appendChild(fakeImg);
157      }
158    );
159  }
160})();
161
162(function () {
163  if ('loading' === document.readyState) {
164    // The DOM has not yet been loaded.
165    document.addEventListener('DOMContentLoaded', initHeader);
166  } else {
167    // The DOM has already been loaded.
168    initHeader();
169  } // Initiate the menus when the DOM loads.
170
171  function initHeader() {
172    var siteHeader = document.getElementById('masthead');
173
174    if (!siteHeader) {
175      return;
176    }
177
178    if (!document.documentElement.classList) {
179      siteHeader.classList.add('abs-header');
180      return;
181    }
182
183    setUpStickyHeader(siteHeader);
184  } // Set up the sticky header.
185
186  function setUpStickyHeader(headerContainer) {
187    var scrollTop = 0;
188
189    var setStickyHeaderClass = function setStickyHeaderClass() {
190      scrollTop = window.scrollY || document.documentElement.scrollTop;
191
192      if (scrollTop > 0) {
193        headerContainer.classList.add('scroll-header');
194      } else {
195        headerContainer.classList.remove('scroll-header');
196      }
197    };
198
199    setStickyHeaderClass();
200
201    var stickyHeaderEvent = function stickyHeaderEvent() {
202      window.requestAnimationFrame(setStickyHeaderClass);
203    };
204
205    window.addEventListener('scroll', stickyHeaderEvent, false);
206  }
207})();
208
209(function () {
210  if ('loading' === document.readyState) {
211    // The DOM has not yet been loaded.
212    document.addEventListener('DOMContentLoaded', initNavigation);
213  } else {
214    // The DOM has already been loaded.
215    initNavigation();
216  } // Initiate the menus when the DOM loads.
217
218  function initNavigation() {
219    if (!document.documentElement.classList) {
220      return;
221    }
222
223    var menuContainer = document.getElementById('site-navigation');
224
225    if (!menuContainer) {
226      return;
227    }
228
229    setToggleSubmenuOnFocus(menuContainer);
230    setToggleSubmenuOnTouch(menuContainer);
231    createMobileMenu(menuContainer);
232  }
233  /**
234   * Created a mobile menu based on the primary menu.
235   *
236   * @param {Object} container
237   */
238
239  function createMobileMenu(container) {
240    var primaryMenu = container.querySelector('.menu');
241
242    if (null === primaryMenu) {
243      return;
244    }
245
246    var mobileMenuContainer = document.getElementById('mobile-navigation');
247    var mobileContent = document.createDocumentFragment();
248    primaryMenu = primaryMenu.cloneNode(true);
249    primaryMenu.removeAttribute('id');
250    mobileContent.appendChild(primaryMenu); // Remove ID attributes from the list items to avoid repetition.
251
252    var mobileMenuItems = mobileContent.querySelectorAll('li');
253    var mobileMenuItemsCount = mobileMenuItems.length;
254
255    if (mobileMenuItemsCount) {
256      for (var itemIndex = 0; itemIndex < mobileMenuItemsCount; itemIndex++) {
257        mobileMenuItems[itemIndex].removeAttribute('id');
258      }
259    }
260
261    mobileMenuContainer.insertBefore(
262      mobileContent,
263      mobileMenuContainer.firstChild
264    );
265  }
266  /**
267   * Toggle `focus` class to allow sub-menu access on focus and blur.
268   *
269   * @param {Object} container
270   */
271
272  function setToggleSubmenuOnFocus(container) {
273    // Get the first ul element insite the menu container.
274    var primaryMenu = container.getElementsByTagName('ul')[0]; // Get all the link elements within the menu.
275
276    var menuLinks = primaryMenu.getElementsByTagName('a');
277    var i, focusFn;

277 // Sets or removes .focus class on an element.
278
279    focusFn = function focusFn() {
280      var self = this; // Move up through the ancestors of the current link until we hit .nav-menu.
281
282      while (
283        !self.classList.contains('main-navigation') &&
284        'nav' !== self.tagName.toLowerCase()
285      ) {
286        // On li elements toggle the class .focus.
287        if ('li' === self.tagName.toLowerCase()) {
288          if (self.classList.contains('focus')) {
289            self.classList.remove('focus');
290          } else {
291            self.classList.add('focus');
292          }
293        }
294
295        self = self.parentElement;
296      }
297    }; // Each time a menu link is focused or blurred, toggle focus.
298
299    for (i = 0; i < menuLinks.length; i++) {
300      menuLinks[i].addEventListener('focus', focusFn, false);
301      menuLinks[i].addEventListener('blur', focusFn, false);
302    }
303  }
304  /**
305   * Toggle `focus` class to allow sub-menu access on touch screens.
306   *
307   * @param {Object} container
308   */
309
310  function setToggleSubmenuOnTouch(container) {
311    var touchStartFn,
312      touchOutsideFn,
313      removeFocusFn,
314      i,
315      parentLink = container.querySelectorAll(
316        '.menu-item-has-children > a, .page_item_has_children > a'
317      );
318
319    removeFocusFn = function removeFocusFn() {
320      var focusedElements = container.querySelectorAll('li.focus');
321      var i;
322
323      for (i = 0; i < focusedElements.length; ++i) {
324        focusedElements[i].classList.remove('focus');
325      }
326    };
327
328    touchStartFn = function touchStartFn(e) {
329      var menuItem = this.parentNode,
330        i;
331
332      if (!menuItem.classList.contains('focus')) {
333        e.preventDefault();
334
335        for (i = 0; i < menuItem.parentNode.children.length; ++i) {
336          if (menuItem === menuItem.parentNode.children[i]) {
337            continue;
338          }
339
340          menuItem.parentNode.children[i].classList.remove('focus');
341        }
342
343        if (!container.classList.contains('is-touched')) {
344          container.classList.add('is-touched');
345        }
346
347        menuItem.classList.add('focus');
348      } else {
349        menuItem.classList.remove('focus');
350      }
351    };
352
353    touchOutsideFn = function touchOutsideFn(e) {
354      var isTochedMenu = container.classList.contains('is-touched');
355
356      if (!isTochedMenu) {
357        return;
358      }
359
360      var elementParent = e.target.parentNode;
361
362      if (
363        elementParent &&
364        !elementParent.classList.contains('menu-item') &&
365        isTochedMenu
366      ) {
367        removeFocusFn();
368      }
369    };
370
371    document.addEventListener('touchstart', touchOutsideFn, false);
372
373    for (i = 0; i < parentLink.length; ++i) {
374      parentLink[i].addEventListener('touchstart', touchStartFn, false);
375    }
376  }
377})();
378
379(function () {
380  if ('loading' === document.readyState) {
381    // The DOM has not yet been loaded.
382    document.addEventListener('DOMContentLoaded', initToggleSidebar);
383  } else {
384    // The DOM has already been loaded.
385    initToggleSidebar();
386  } // Set up toggle sidebar section.
387
388  function initToggleSidebar() {
389    if (!document.documentElement.classList) {
390      return;
391    }
392
393    var pageContainer = document.getElementById('page');
394
395    if (!pageContainer) {
396      return;
397    }
398
399    var toggleSection = document.getElementById('toggle-sidebar');
400    var toggleButton = document.getElementById('sidebar-button');
401    var closeButton = document.getElementById('close-toggle-sidebar');
402    var htmlRTL =
403      'rtl' === document.documentElement.getAttribute('dir') ? true : false;
404    toggleSection.style.display = 'block';
405    var toggleSectionWidth = toggleSection.offsetWidth;
406    toggleSection.style.removeProperty('display');
407
408    var bodyAction = function bodyAction(event) {
409      if (
410        !toggleSection.contains(event.target) &&
411        !toggleButton.contains(event.target) &&
412        event.target.nodeName !== 'BUTTON'
413      ) {
414        document.body.classList.toggle('active-toggle-sidebar');
415        closeToggleSection();
416      }
417    };
418
419    var closeToggleSection = function closeToggleSection() {
420      // Move a content area to a regular position.
421      if (htmlRTL) {
422        pageContainer.style.removeProperty('left');
423      } else {
424        pageContainer.style.removeProperty('right');
425      } // Update aria attributes.
426
427      toggleSection.setAttribute('aria-hidden', true);
428      toggleButton.setAttribute('aria-expanded', false); // Detect all clicks on the document
429
430      document.body.removeEventListener('click', bodyAction, false);
431      document.body.classList.add('hidden-toggle-sidebar');
432    };
433
434    var showToggleSection = function showToggleSection() {
435      if (-1 !== document.body.className.indexOf('hidden-toggle-sidebar')) {
436        document.body.classList.remove('hidden-toggle-sidebar');
437      } // Move a content area to the side.
438
439      if (htmlRTL) {
440        pageContainer.style.left = toggleSectionWidth + 'px';
441      } else {
442        pageContainer.style.right = toggleSectionWidth + 'px';
443      } // Update aria attributes.
444
445      toggleSection.setAttribute('aria-hidden', false);
446      toggleButton.setAttribute('aria-expanded', true);
447      closeButton.focus(); // Detect all clicks on the document
448
449      document.body.addEventListener('click', bodyAction, false);
450    };
451
452    var buttonAction = function buttonAction(event) {
453      document.body.classList.toggle('active-toggle-sidebar');
454
455      if (-1 !== document.body.className.indexOf('active-toggle-sidebar')) {
456        showToggleSection();
457      } else {
458        closeToggleSection();
459      }
460    };
461
462    toggleButton.addEventListener('click', buttonAction, false);
463    closeButton.addEventListener('click', buttonAction, false);
464  }
465})();