https://manitobamuseum.ca/wp-content/themes/undcscores/blocks/hori…/horizontal-navigation.js?ver=6.8.8

1document.addEventListener('DOMContentLoaded', function() {
2    var menu = document.querySelector('.horizontal-menu');
3    var scrollLeft = document.querySelector('.scroll-left');
4    var scrollRight = document.querySelector('.scroll-right');
5
6    function updateButtons() {
7        scrollLeft.disabled = menu.scrollLeft <= 0;
8        scrollRight.disabled = menu.offsetWidth + menu.scrollLeft >= menu.scrollWidth;
9    }
10
11    // Array.from(document.querySelectorAll('main h2, main .anchor-nav')).filter(e => {
12    //     var id = e.textContent.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
13    //     return id;
14    // }).forEach((element) => {
15    //     var id = element.textContent.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
16    //     if (id.match(/^\d/)) {
17    //         id = 'id-' + id;
18    //     }
19    //     while (document.getElementById(id)) {
20    //         id += '-2';
21    //     }
22    //     element.id = id;
23
24    //     var menuItem = document.createElement('div');
25    //     menuItem.classList.add('menu-item');
26    //     menuItem.dataset.href = `#${id}`;
27    //     menuItem.textContent = element.textContent.replace(/\.$/, '');
28    //     menuItem.setAttribute('aria-controls', id);
29    //     menuItem.setAttribute('aria-selected', 'false');
30    //     menu.appendChild(menuItem);
31    // });
32
33    // Get all elements with the class '.menu-item'
34    var menuItems = menu.querySelectorAll('.menu-item');
35
36    // Convert the NodeList to an array
37    var menuItemsArray = Array.from(menuItems);
38
39    // Initialize a variable to store the maximum width and the corresponding element
40    var maxWidth = 0;
41    var elementWithMaxWidth;
42
43    // Loop through the array of menu items to find the one with the largest width
44    menuItemsArray.forEach(function(item) {
45    var itemWidth = item.offsetWidth;
46        if (itemWidth > maxWidth) {
47            maxWidth = itemWidth;
48            elementWithMaxWidth = item;
49        }
50    });
51    
52    scrollLeft.addEventListener('click', function() {
53        var scrollDistance = menu.offsetWidth;
54        menu.scrollLeft -= scrollDistance;
55        updateButtons();
56    });
57
58    scrollRight.addEventListener('click', function() {
59        var scrollDistance = menu.offsetWidth;
60        menu.scrollLeft += scrollDistance;
61        updateButtons();
62    });
63
64    window.addEventListener('load', function() {
65        updateButtons();
66    });
67    menu.addEventListener('scroll', updateButtons);
68
69    var items = document.querySelectorAll('.menu-item');
70    items.forEach(item => {
71        //Removing the click event - changing this to just be anchor links
72        // item.addEventListener('click', function(e) {
73        //     e.preventDefault();
74
75        //     // Find the topmost parent element of the target element
76        //     var targetElement = document.querySelector(this.dataset.href);
77        //     var topmostParent = targetElement;
78        //     while (
79        //         topmostParent.parentElement && 
80        //         topmostParent.parentElement !== document.body && 
81        //         topmostParent.parentElement !== document.getElementById('page') &&
82        //         topmostParent.parentElement !== document.getElementById('primary') &&
83        //         topmostParent.parentElement.nodeName  != 'ARTICLE' &&
84        //         topmostParent.parentElement.className.indexOf('entry-content') === -1
85        //         )
86        //     {
87        //         topmostParent = topmostParent.parentElement;
88        //     }
89
90        //     var scrollOffset = topmostParent.getBoundingClientRect().top - 110;
91        //     window.scrollBy({ top: scrollOffset, behavior: 'smooth' });
92        //     /*
93        //     topmostParent.scrollIntoView({
94        //         behavior: 'smooth',
95        //         block: 'start', // Scroll to the top of the target element
96        //         inline: 'nearest' // Scroll to the nearest edge of the target element (horizontally centered)
97        //     });
98        //     */
99        // });
100    });
101
102    window.addEventListener('scroll', function() {
103        var scrollPosition = window.scrollY;

104        items.forEach(item => {
105            var element = document.querySelector(item.dataset.href);
106
107            if (element.offsetTop <= scrollPosition && element.offsetTop + element.offsetHeight > scrollPosition) {
108                item.classList.add('selected');
109                item.setAttribute('aria-selected', 'true');
110            } else {
111                item.classList.remove('selected');
112                item.setAttribute('aria-selected', 'false');
113            }
114        });
115    });
116
117});