IE - Menú Test AB - 25

// [Menu] Cambio submenu studies en páginas programa University

// New menu
const newStudiesMenu =  `
    <div id="ab-new-menu">
<div class="ab-menu-left-nav">
    <ul class="ab-list-left-nav">
        <li class="ab-link-left-nav ab-undergraduate">
            <a href="/university/studies/academic-programs/" target="_blank">
                <div>
                    <span>UNDERGRADUATE DEGREES</span>
                    <svg fill="none" viewBox="0 0 64 64" aria-hidden="true" class="ab-bracket">
                        <path fill="#000" d="M22.03 47.655L24.652 50 42 32.015 24.623 14 22 16.345l15.114 15.67-15.084 15.64z"></path>
                    </svg>
                </div>
            </a>
        </li>
        <li class="ab-link-left-nav ab-dual">
            <a href="/university/studies/dual-degrees/" target="_blank">
                <div>
                    <span>DUAL DEGREES</span>
                    <svg fill="none" viewBox="0 0 64 64" aria-hidden="true" class="ab-bracket">
                        <path fill="#000" d="M22.03 47.655L24.652 50 42 32.015 24.623 14 22 16.345l15.114 15.67-15.084 15.64z"></path>
                    </svg>
                </div>
            </a>
        </li>
        <li class="ab-link-left-nav ab-summer">
            <a href="https://www.ie.edu/ie-summer-school/" target="_blank">
                <div>
                    <span>IE SUMMER PROGRAMS</span>
                    <svg fill="none" viewBox="0 0 64 64" aria-hidden="true" class="ab-bracket">
                        <path fill="#000" d="M22.03 47.655L24.652 50 42 32.015 24.623 14 22 16.345l15.114 15.67-15.084 15.64z"></path>
                    </svg>
                </div>
            </a>
        </li>
        <li class="ab-link-left-nav ab-alternative">
            <a href="">
                <div>
                    <span>ALTERNATIVE CREDENTIALS</span>
                    <svg fill="none" viewBox="0 0 64 64" aria-hidden="true" class="ab-bracket">
                        <path fill="#000" d="M22.03 47.655L24.652 50 42 32.015 24.623 14 22 16.345l15.114 15.67-15.084 15.64z"></path>
                    </svg>
                </div>
            </a>
        </li>
        <li class="ab-link-left-nav ab-visiting">
            <a href="/university/studies/visiting-students-program/">
                <div>
                    <span>VISITING STUDENTS PROGRAM</span>
                </div>
            </a>
        </li>
        <li class="ab-link-left-nav ab-compare">
            <a href="https://www.ie.edu/university/compare-our-programs/">
                <div>
                    <span>COMPARE OUR PROGRAMS</span>
                </div>
            </a>
        </li>
    </ul>
</div>

        <div class="ab-all-links-container">
            <div class="ab-overlay-all-links"></div>
            <div class="ab-arrow-scroll-top">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.2928 6.03377L11.949 6.70698L7.99982 10.7588L4.05078 6.70698L4.70694 6.03376L7.53188 8.93218V0H8.46777V8.93221L11.2928 6.03377Z" fill="#0F0F0F"/>
                </svg>
            </div>
            <div class="ab-arrow-scroll">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.2928 6.03377L11.949 6.70698L7.99982 10.7588L4.05078 6.70698L4.70694 6.03376L7.53188 8.93218V0H8.46777V8.93221L11.2928 6.03377Z" fill="#0F0F0F"/>
                </svg>
            </div>
            <div class="ab-all-links">
                <div class="ab-all-links-undergraduate">
                    <ul class="ab-all-links-undergraduate-ul">
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-applied-mathematics/">
                                <div>
                                    <span>Bachelor in Applied Mathematics</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-architectural-studies/">
                                <div>
                                    <span>Bachelor in Architectural Studies</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-in-behavior-and-social-sciences/">
                                <div>
                                    <span>Bachelor in Behavior and Social Sciences</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-business-administration/">
                                <div>
                                    <span>Bachelor in Business Administration</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-communication/">
                                <div>
                                    <span>Bachelor in Communication and Digital Media</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-computer-science-artificial-intelligence/">
                                <div>
                                    <span>Bachelor in Computer Science and Artificial Intelligence</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-data-business-analytics/">
                                <div>
                                    <span>Bachelor in Data and Business Analytics</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-design/">
                                <div>
                                    <span>Bachelor in Design</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="nofollow" target="_self" class="" href="/university/studies/academic-programs/bachelor-economics/">
                                <div>
                                    <span>Bachelor in Economics</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-environmental-sciences-sustainability/">
                                <div>
                                    <span>Bachelor in Environmental Sciences for  Sustainability</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-in-fashion-design/">
                                <div>
                                    <span>Bachelor in Fashion Design</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-in-humanities/">
                                <div>
                                    <span>Bachelor in Humanities</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a aria-current="page" rel="nofollow" target="_self" class="" href="/university/studies/academic-programs/bachelor-international-relations/">
                                <div>
                                    <span>Bachelor in International Relations</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="nofollow" target="_self" class="" href="/university/studies/academic-programs/bachelor-laws/">
                                <div>
                                    <span>Bachelor of Laws (LL.B.)</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-philosophy-politics-law-economics-pple/">
                                <div>
                                    <span>Bachelor in Philosophy, Politics, Law and Economics (PPLE)</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/bachelor-political-science/">
                                <div>
                                    <span>Bachelor in Political Science</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="ab-all-links-dual">
                    <ul class="ab-all-links-dual-ul">
                        <li class="ab-all-links-li">
                            <a rel="nofollow" target="_self" class="" href="/university/studies/academic-programs/dual-degree-in-business-administration-data-and-business-analytics/">
                                <div>
                                    <span>Dual Degree in Business Administration &amp; Data and Business Analytics</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="nofollow" target="_self" class="" href="/university/studies/academic-programs/dual-degree-in-business-administration-design/">
                                <div>
                                    <span>Dual Degree in Business Administration &amp; Design</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/dual-degree-in-business-administration-fashion-design/">
                                <div>
                                    <span>Dual Degree in Business Administration &amp; Fashion Design</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/dual-degree-in-business-administration-bachelor-in-humanities/">
                                <div>
                                    <span>Dual Degree in Business Administration &amp; Humanities</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="nofollow" target="_self" class="" href="/university/studies/academic-programs/dual-degree-business-administration-international-relations/">
                                <div>
                                    <span>Dual Degree in Business Administration &amp; International Relations</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="nofollow" target="_self" class="" href="/university/studies/academic-programs/dual-degree-bachelor-business-administration-laws/">
                                <div>
                                    <span>Dual Degree in Business Administration &amp; Laws (LL.B.)</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/dual-degree-in-business-administration-computer-science-and-artificial-intelligence/">
                                <div>
                                    <span>Dual Degree in Business Administration &amp; Computer Science and Artificial Intelligence</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/dual-degree-in-business-administration-bachelor-political-science/">
                                <div>
                                    <span>Dual Degree in Business Administration &amp; Political Science</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/dual-degree-in-economics-applied-mathematics/">
                                <div>
                                    <span>Dual Degree in Economics &amp; Applied Mathematics</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="nofollow" target="_self" class="" href="/university/studies/academic-programs/dual-degree-in-economics-international-relations/">
                                <div>
                                    <span>Dual Degree in Economics &amp; International Relations </span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/dual-degree-bachelor-laws-international-relations/">
                                <div>
                                    <span>Dual Degree in Laws (LL.B.) &amp; International Relations</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a rel="" target="_self" class="" href="/university/studies/academic-programs/dual-degree-politics-law-economics-data-business-analytics/">
                                <div>
                                    <span>Dual Degree in Philosophy, Politics, Law and Economics &amp; Data and Business Analytics</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="ab-all-links-summer">
                  <ul class="ab-all-links-summer-ul">
                    <li class="ab-all-links-li">
                      <a data-link="anchor" target="_blank" rel="noopener" href="https://www.ie.edu/ie-summer-school/pre-university/pre-university-summer-program/" class="">
                        <div>
                          <span>Pre-University Summer Program</span>
                        </div>
                      </a>
                   </li>
                   <li class="ab-all-links-li">
                     <a data-link="anchor" target="_blank" rel="noopener" href="https://www.ie.edu/ie-summer-school/university/university-summer-program/" class="">
                      <div>
                       <span>University Summer Program</span>
                     </div>
                     </a>
                   </li>
                  </ul>
                </div>

                <div class="ab-all-links-alternative">
                    <ul class="ab-all-links-alternative-ul">
                        <li class="ab-all-links-li">
                            <a data-link="anchor" target="_blank" rel="noopener" href="https://www.ie.edu/alternative-credentials/certificates/certificate-business-fundamentals/" class="">
                                <div>
                                    <span>Certificate in Business Fundamentals</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a data-link="anchor" target="_blank" rel="noopener" href="https://www.ie.edu/alternative-credentials/certificates/certificate-in-creative-problem-solving-for-business/" class="">
                                <div>
                                    <span>Certificate in Creative Problem Solving for Business</span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a data-link="anchor" target="_blank" rel="noopener" href="https://www.ie.edu/alternative-credentials/certificates/certificate-data-science/" class="">
                                <div>
                                    <span>Certificate in Data Science </span>
                                </div>
                            </a>
                        </li>
                        <li class="ab-all-links-li">
                            <a data-link="anchor" target="_blank" rel="noopener" href="https://www.ie.edu/alternative-credentials/certificates/certificate-environmental-data-science/" class="">
                                <div>
                                    <span>Certificate in Environmental Data Science </span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
`;

// Functions to manage the display of the links of the sub-categories
function displayUndergraduate() {
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-dual').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-alternative').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-summer').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-undergraduate').style.display = "block";
    document.querySelector('#ab-new-menu .ab-arrow-scroll').style.display = "block";
    document.querySelector('#ab-new-menu .ab-arrow-scroll-top').style.display = "block";
}
function displayDual() {
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-alternative').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-undergraduate').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-summer').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-dual').style.display = "block";
    document.querySelector('#ab-new-menu .ab-arrow-scroll').style.display = "block";
    document.querySelector('#ab-new-menu .ab-arrow-scroll-top').style.display = "block";
}
function displaySummer() {
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-alternative').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-undergraduate').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-summer').style.display = "block";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-dual').style.display = "none";
    document.querySelector('#ab-new-menu .ab-arrow-scroll').style.display = "none";
    document.querySelector('#ab-new-menu .ab-arrow-scroll-top').style.display = "none";
}
function displayAlternative() {
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-dual').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-undergraduate').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-alternative').style.display = "block";
    document.querySelector('#ab-new-menu .ab-arrow-scroll').style.display = "none";
    document.querySelector('#ab-new-menu .ab-arrow-scroll-top').style.display = "none";
}
function hideLinks() {
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-dual').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-undergraduate').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-alternative').style.display = "none";
    document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-summer').style.display = "none";
    document.querySelector('#ab-new-menu .ab-arrow-scroll').style.display = "none";
    document.querySelector('#ab-new-menu .ab-arrow-scroll-top').style.display = "none";
}

// Function to manage the display of the moving arrow and the transparent overlay
function transparentEffectInactive() {
    let scrollOverlay;
    let scrollArrow;

    if (document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-dual').style.display == "block") {
        if (window.innerWidth > 1541) {
            scrollOverlay = 180;
            scrollArrow = 190;
        } else {
            scrollOverlay = 145;
            scrollArrow = 155;
        }
    } else if (document.querySelector('#ab-new-menu .ab-all-links .ab-all-links-undergraduate').style.display == "block") {
        if (window.innerWidth > 1541) {
            scrollOverlay = 252;
            scrollArrow = 260;
        } else {
            scrollOverlay = 252;
            scrollArrow = 260;
        }
    }

    if (document.querySelector('#ab-new-menu .ab-all-links').scrollTop > scrollOverlay && (document.querySelector('#ab-new-menu .ab-overlay-all-links').style.opacity == '1' || document.querySelector('#ab-new-menu .ab-overlay-all-links').style.opacity == '')) {
        document.querySelector('#ab-new-menu .ab-overlay-all-links').style.opacity = '0';
    } else if (document.querySelector('#ab-new-menu .ab-all-links').scrollTop < scrollOverlay && document.querySelector('#ab-new-menu .ab-overlay-all-links').style.opacity == '0') {
        document.querySelector('#ab-new-menu .ab-overlay-all-links').style.opacity = '1';
    }

    // Down arrow
    if (document.querySelector('#ab-new-menu .ab-all-links').scrollTop > scrollArrow) {
        document.querySelector('#ab-new-menu .ab-arrow-scroll svg path').style.fill = '#c9c9c9';
        document.querySelector('#ab-new-menu .ab-arrow-scroll').style.cursor = 'default';
    } else if (document.querySelector('#ab-new-menu .ab-all-links').scrollTop < scrollArrow) {
        document.querySelector('#ab-new-menu .ab-arrow-scroll svg path').style.fill = '#0F0F0F';
        document.querySelector('#ab-new-menu .ab-arrow-scroll').style.cursor = 'pointer';
    }

    // Up arrow
    if (document.querySelector('#ab-new-menu .ab-all-links').scrollTop > 5) {
        document.querySelector('#ab-new-menu .ab-arrow-scroll-top svg path').style.fill = '#0F0F0F';
        document.querySelector('#ab-new-menu .ab-arrow-scroll-top').style.cursor = 'pointer';
    } else if (document.querySelector('#ab-new-menu .ab-all-links').scrollTop < 5) {
        document.querySelector('#ab-new-menu .ab-arrow-scroll-top svg path').style.fill = '#c9c9c9';
        document.querySelector('#ab-new-menu .ab-arrow-scroll-top').style.cursor = 'default';
    }
}

// Function to scroll back to top the links if you change of category
function scrollBackToTopOfTheList() {
    if (document.querySelector('#ab-new-menu .ab-all-links').scrollTop > 0) {
        document.querySelector('#ab-new-menu .ab-all-links').scrollTo(0, 0);
    }
}

// Function to scroll down when clicking on the moving arrow
function scrollOnClick() {
    document.querySelector('.ab-all-links').scrollBy({
        top: 100,
        behavior: "smooth",
    });
}

// Function to scroll up when clicking on the moving arrow
function scrollTopOnClick() {
    document.querySelector('.ab-all-links').scrollBy({
        top: -100,
        behavior: "smooth",
    });
}

// Function to to display the second level of the first category "undergraduate degrees" by default
function openUndergraduateByDefault() {
    var event = new MouseEvent('mouseover', {
      'view': window,
      'bubbles': false,
      'cancelable': true
    });
    document.querySelector('#ab-new-menu .ab-menu-left-nav li.ab-link-left-nav.ab-undergraduate').dispatchEvent(event);
}

const observerOptions = { childList: true, subtree: true };
const observer = new MutationObserver(() => {
    // Display the new menu when needed + add event listeners
    if(document.querySelector('ul[class^="DesktopSubMenu__SubNavList"]:has(a[href="/university/studies/academic-programs/"])')) {
        if (!document.querySelector('#ab-new-menu')) {
            document.querySelector('ul[class^="DesktopSubMenu__SubNavList"]:has(a[href="/university/studies/academic-programs/"]').insertAdjacentHTML('beforebegin', newStudiesMenu);

            document.querySelector('#ab-new-menu .ab-menu-left-nav li.ab-link-left-nav.ab-undergraduate').addEventListener('mouseover', () => {
                displayUndergraduate();
                scrollBackToTopOfTheList();
            });
            document.querySelector('#ab-new-menu .ab-menu-left-nav li.ab-link-left-nav.ab-dual').addEventListener('mouseover', () => {
                displayDual();
                scrollBackToTopOfTheList();
            });
            document.querySelector('#ab-new-menu .ab-menu-left-nav li.ab-link-left-nav.ab-alternative').addEventListener('mouseover', displayAlternative);
            document.querySelector('#ab-new-menu .ab-menu-left-nav li.ab-link-left-nav.ab-summer').addEventListener('mouseover', displaySummer);
            document.querySelector('#ab-new-menu .ab-menu-left-nav li.ab-link-left-nav.ab-visiting').addEventListener('mouseover', hideLinks);
            document.querySelector('#ab-new-menu .ab-menu-left-nav li.ab-link-left-nav.ab-compare').addEventListener('mouseover', hideLinks);

            document.querySelector('#ab-new-menu .ab-all-links').addEventListener('scroll', transparentEffectInactive);
            document.querySelector('#ab-new-menu .ab-arrow-scroll').addEventListener('click', scrollOnClick);
            document.querySelector('#ab-new-menu .ab-arrow-scroll-top').addEventListener('click', scrollTopOnClick);

            openUndergraduateByDefault();
        }
    // Remove the new menu when needed
    } else if (!document.querySelector('ul[class^="DesktopSubMenu__SubNavList"]:has(a[href="/university/studies/academic-programs/"])') && document.querySelector('#ab-new-menu')) {
        document.querySelector('#ab-new-menu').remove();
    }
});
observer.observe(document.querySelector('body'), observerOptions);