view release on metacpan or  search on metacpan

t/views/layouts/liteblog.tt  view on Meta::CPAN

// Now handle the showing/hiding logic of the header based on scrolling
window.addEventListener('scroll', function () {
    var heroSection = document.getElementById('hero'); // the big Hero header
    var heroBanner = document.getElementById('hero-banner'); // the navigation bar
    var mobileHeader = document.getElementById('mobile-header'); // the mobile compact bar

    mobileHeaderStyle = window.getComputedStyle(mobileHeader);
    var scrollY = window.scrollY || window.pageYOffset;

    // Show the mobile-header if on small screen (<768) and 
    // after user scrolls past heroSection height, or 
    // immediatly if not present.
    if (window.innerWidth <= 768) {
        mobileTriggerPoint = 0;
        if (heroSection && showHeroSection) {
            mobileTriggerPoint = heroSection.clientHeight;
        }
        if (scrollY >= mobileTriggerPoint) {
            mobileHeader.style.display = 'flex';
        } else {
            mobileHeader.style.display = 'none';
        }
    }

    /* Just do nothing if the mobile nav bar is displayed or 
     * if the heroSection is not enabled on this page */ 
    if (mobileHeaderStyle.display == 'flex' || showHeroSection == false) {
        return false;
    }

    /* Always display the hero navigation bar on scrolling */
    if (window.scrollY > heroSection.clientHeight) {
        //heroBanner.style.display = 'flex';
        heroBanner.classList.add('visible-hero')
        heroBanner.classList.remove('hidden-hero')
        heroBanner.style.display = 'flex';
        if (heroSection) { 
            heroSection.classList.remove('visible-hero');
            heroSection.classList.add('hidden-hero');
        }
    } else {
        heroBanner.style.display = 'none';
        heroBanner.classList.remove('visible-hero')
        heroBanner.classList.add('hidden-hero')
        if (heroSection) { 
            heroSection.classList.add('visible-hero');
            heroSection.classList.remove('hidden-hero');
        }
    }
});
</script>
[% END %]

[% IF navigation %]
<!-- Handle the click on the hamburger icon -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
    // Get the elements
    const menuToggle = document.querySelector('#menu-toggle');
    const mobileMenu = document.querySelector('#mobile-navigation-menu');

    // Add event listener
    menuToggle.addEventListener('click', function() {
        // Toggle the .open class on the mobile menu
        mobileMenu.classList.toggle('open');
    });
});
</script>
[% END %]

[% IF feature.highlight %]
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
    });
});
</script>
[% END %]

    </body>
</html>