https://calmatters.org/wp-content/plugins/newspack-calmatters/assets/scripts/cm-navigation.js?ver=4.21.15

1
2
3// HAMBURGER MENU TOGGLE
4
5window.addEventListener("DOMContentLoaded", (event) => {
6
7    // Get all elements that can open or close the hamburger menu
8    const cmHamburgerButtons = Array.from(document.getElementsByClassName("cm-hamburger-button"));
9    // Get the main header
10    const cmMainNavHeader = document.getElementById("cm-masthead");
11    // Get the HTML 
12    const cmHTML = document.querySelector("html");
13    // Timing for fade in/out transition
14    const animationTimingFade = 200;
15    // Consider removing in a future update
16    var $j = jQuery.noConflict(); 
17    
18    // Set a variable for keeping track of if the menu is opened or closed
19    var isMenuOpen = false; 
20    // Function to Open the Hamburger Menu
21    const cmToggleHamburger = function() {
22        // Add or remove for page scrollability
23        cmHTML.classList.toggle("freeze-page"); 
24        // Disable button why fading menu in or out
25        cmHamburgerButtons.forEach(
26            (el) => el.classList.add('freeze-actions')
27        );
28        // Make the buttons available after the event are complete
29        setTimeout(function(){
30            cmHamburgerButtons.forEach(
31                (el) => el.classList.remove('freeze-actions')
32            );
33        }, `${animationTimingFade + 60}`);
34        
35        // if the menu is open
36        if(isMenuOpen){  
37            // Delay the removal of the cm-open-hamburger-menu class until the menu has faded
38            setTimeout(() => { 
39                // Add the class to unfix the menu
40                cmMainNavHeader.classList.remove("cm-open-hamburger-menu"); 
41              }, `${animationTimingFade + 50 }`);
42            // Fade out the menu. 
43            $j('.cm-fade-out-animation').fadeOut(animationTimingFade);
44            $j('.cm-fade-to-animation').fadeTo(animationTimingFade, 0);
45        }else{ 
46            // Add the class to set the menu as fixed
47            cmMainNavHeader.classList.add("cm-open-hamburger-menu");
48            // Fade in the menu. 
49            $j('.cm-fade-in-animation').fadeIn(animationTimingFade);
50            $j('.cm-fade-in-to-animation').fadeTo(animationTimingFade, .7);
51            $j('.cm-fade-to-animation').fadeTo(animationTimingFade, 1);
52        }
53
54        isMenuOpen = !isMenuOpen; // Keep track of menu's state
55    }
56
57
58    // Add the the toggle function to marked elements
59    cmHamburgerButtons.forEach((e, i)  => {
60        e.onclick = cmToggleHamburger;
61    });
62
63
64    const cmMain = document.getElementById("cm-main-navigation");
65
66    // SCROLL FUNCTION
67    if( document.querySelector('.singular') ){
68        const menuElement = document.getElementById('cm-masthead');
69        const cmHideMiniBar = document.getElementById("cm-mini-nav");
70
71		// Return early if either menuElement or cmHideMiniBar is null
72		if ( ! menuElement || ! cmHideMiniBar ) {
73			return;
74		}
75
76        // HEADER
77        var navObserverHeader = new IntersectionObserver(function(entries) { 
78            // If the observed is visible
79            if(entries[0]['isIntersecting'] === true) {
80                menuElement.classList.remove("scrolled");
81                cmHideMiniBar.classList.remove("scrolled");
82                // Main Header remove transitions
83                cmMain.style.opacity = "1";
84                cmMain.classList.remove("cm-fade-to-animation");
85            }
86            // Otherwise
87            else {
88                menuElement.classList.add("scrolled");
89                cmHideMiniBar.classList.add("scrolled");
90                // Main Header support transitions
91                cmMain.classList.add("cm-fade-to-animation");
92                cmMain.style.opacity = "0";
93            }
94        }, { threshold: [1], rootMargin: "100px 0px 0px" });
95        // threshold -- how much of the element needs to be in the viewport
96        // root margin, how much should the viewport expand.
97
98        // Please observe the static masthead (which lives under the main masthead)
99        navObserverHeader.observe(document.querySelector("#cm-static-masthead"));
100
101    }
102    
103
104});