https://ytwangzero.github.io/js/scripts.js

1/*!
2* Start Bootstrap - Resume v7.0.6 (https://startbootstrap.com/theme/resume)
3* Copyright 2013-2023 Start Bootstrap
4* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-resume/blob/master/LICENSE)
5*/
6//
7// Scripts
8// 
9
10window.addEventListener('DOMContentLoaded', event => {
11
12    // Activate Bootstrap scrollspy on the main nav element
13    const sideNav = document.body.querySelector('#sideNav');
14    if (sideNav) {
15        new bootstrap.ScrollSpy(document.body, {
16            target: '#sideNav',
17            rootMargin: '0px 0px -40%',
18        });
19    };
20
21    // Collapse responsive navbar when toggler is visible
22    const navbarToggler = document.body.querySelector('.navbar-toggler');
23    const responsiveNavItems = [].slice.call(
24        document.querySelectorAll('#navbarResponsive .nav-link')
25    );
26    responsiveNavItems.map(function (responsiveNavItem) {
27        responsiveNavItem.addEventListener('click', () => {
28            if (window.getComputedStyle(navbarToggler).display !== 'none') {
29                navbarToggler.click();
30            }
31        });
32    });
33
34    const galleryTriggers = document.querySelectorAll('[data-gallery-trigger]');
35    const lightbox = document.getElementById('interestLightbox');
36    const lightboxImage = document.getElementById('interestLightboxImage');
37    const lightboxCaption = document.getElementById('interestLightboxCaption');
38    const lightboxCloseTargets = document.querySelectorAll('[data-gallery-close]');
39    let lastFocusedTrigger = null;
40
41    if (galleryTriggers.length && lightbox && lightboxImage && lightboxCaption) {
42        const openLightbox = trigger => {
43            const image = trigger.querySelector('img');
44
45            if (!image) {
46                return;
47            }
48
49            lastFocusedTrigger = trigger;
50            lightboxImage.src = image.currentSrc || image.src;
51            lightboxImage.alt = image.alt;
52            lightboxCaption.textContent = image.alt;
53            lightbox.classList.add('is-open');
54            lightbox.setAttribute('aria-hidden', 'false');
55            document.body.classList.add('lightbox-open');
56        };
57
58        const closeLightbox = () => {
59            lightbox.classList.remove('is-open');
60            lightbox.setAttribute('aria-hidden', 'true');
61            document.body.classList.remove('lightbox-open');
62
63            if (lastFocusedTrigger) {
64                lastFocusedTrigger.focus();
65            }
66        };
67
68        galleryTriggers.forEach(trigger => {
69            trigger.addEventListener('click', () => openLightbox(trigger));
70        });
71
72        lightboxCloseTargets.forEach(target => {
73            target.addEventListener('click', closeLightbox);
74        });
75
76        document.addEventListener('keydown', event => {
77            if (event.key === 'Escape' && lightbox.classList.contains('is-open')) {
78                closeLightbox();
79            }
80        });
81    }
82
83});