bpb-website/script.js

// Mobile NavBar
document.addEventListener('DOMContentLoaded', () => {

    // Get all "navbar-burger" elements
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  
    // Add a click event on each of them
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {
  
        // Get the target from the "data-target" attribute
        const target = el.dataset.target;
        const $target = document.getElementById(target);
  
        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
  
      });
    });
  
  });

  // Footer copyright date
  const copyDate = ( () => {
   let date = new Date();
  document.getElementById("year").innerHTML = "&nbsp" + date.getFullYear() + "&nbsp";
  } );
   copyDate();
document.addEventListener("load", function () {
  // Your code goes here
  document.querySelectorAll("formFooter").style.display = "none";
});


document.addEventListener("DOMContentLoaded", function () {
    // Close lightbox when clicking outside the image
    document.querySelectorAll(".lightbox").forEach(function (lightbox) {
        lightbox.addEventListener("click", function (event) {
            if (event.target === lightbox) {
                window.location.hash = ""; // Close lightbox
            }
        });
    });

    // Close lightbox when pressing Escape key
    document.addEventListener("keydown", function (event) {
        if (event.key === "Escape") {
            window.location.hash = ""; // Close lightbox
        }
    });
});



document.addEventListener("DOMContentLoaded", function () {
    let images = Array.from(document.querySelectorAll(".gallery-item a"));
    let lightboxImages = images.map(img => img.getAttribute("href"));
    let currentIndex = 0;

    function openLightbox(index) {
        currentIndex = index;
        let lightbox = document.getElementById("lightbox");
        if (!lightbox) {
            lightbox = document.createElement("div");
            lightbox.id = "lightbox";
            lightbox.className = "lightbox";
            lightbox.innerHTML = `
                <a href="#" class="close">&times;</a>
                <img id="lightbox-img" src="" alt="">
                <p id="lightbox-caption" class="caption" style="color: white; text-align: center; margin-top: 10px;"></p>
            `;
            document.body.appendChild(lightbox);
        }

        let lightboxImg = document.getElementById("lightbox-img");
        let lightboxCaption = document.getElementById("lightbox-caption");
        let caption = images[currentIndex].parentElement.querySelector(".caption").textContent;

        lightboxImg.src = images[currentIndex].querySelector("img").src;
        lightboxCaption.textContent = caption;
        lightbox.style.display = "flex";

        // document.getElementById("prev").onclick = () => navigateLightbox(-1);
        // document.getElementById("next").onclick = () => navigateLightbox(1);
    }

    function navigateLightbox(direction) {
        currentIndex += direction;
        if (currentIndex < 0) currentIndex = images.length - 1;
        if (currentIndex >= images.length) currentIndex = 0;

        let lightboxImg = document.getElementById("lightbox-img");
        let lightboxCaption = document.getElementById("lightbox-caption");

        lightboxImg.src = images[currentIndex].querySelector("img").src;
        lightboxCaption.textContent = images[currentIndex].parentElement.querySelector(".caption").textContent;
    }

    // Open lightbox when clicking a thumbnail
    images.forEach((img, index) => {
        img.addEventListener("click", (event) => {
            event.preventDefault();
            openLightbox(index);
        });
    });

    // Close lightbox when clicking outside the image
    document.addEventListener("click", (event) => {
        if (event.target.classList.contains("lightbox")) {
            document.getElementById("lightbox").style.display = "none";
        }
    });

    // Close lightbox with Escape key, navigate with Left/Right arrows
    document.addEventListener("keydown", (event) => {
        if (event.key === "Escape") {
            document.getElementById("lightbox").style.display = "none";
        } else if (event.key === "ArrowRight") {
            navigateLightbox(1);
        } else if (event.key === "ArrowLeft") {
            navigateLightbox(-1);
        }
    });
    
document.querySelector(".lightbox .close").addEventListener("click", function(event) {
    event.preventDefault();
    document.querySelector(".lightbox").style.display = "none";
});


    // Swipe gestures for mobile
    let touchStartX = 0;
    let touchEndX = 0;

    document.addEventListener("touchstart", (event) => {
        touchStartX = event.changedTouches[0].screenX;
    });

    document.addEventListener("touchend", (event) => {
        touchEndX = event.changedTouches[0].screenX;
        handleSwipe();
    });

    function handleSwipe() {
        let swipeDistance = touchStartX - touchEndX;
        if (swipeDistance > 50) {
            navigateLightbox(1); // Swipe left → Next image
        } else if (swipeDistance < -50) {
            navigateLightbox(-1); // Swipe right → Previous image
        }
    }
});


// Get the button:
let mybutton = document.getElementById("top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}