mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-26 14:45:50 +00:00
98 lines
3.6 KiB
JavaScript
98 lines
3.6 KiB
JavaScript
$(document).ready(() => {
|
|
// Add two new variables for arrow buttons
|
|
var leftArrow = document.getElementById("leftArrow");
|
|
var rightArrow = document.getElementById("rightArrow");
|
|
// Handle arrow button clicks
|
|
function handleArrowClick(direction) {
|
|
// Get the current data index
|
|
var currentIndex = parseInt(modal.getAttribute("data-index"));
|
|
|
|
// Calculate the new index based on the direction
|
|
var newIndex = direction === "left" ? currentIndex - 1 : currentIndex + 1;
|
|
|
|
// Update the modal content with the new data
|
|
updateModalContent(useCaseData[newIndex]);
|
|
|
|
// Update the modal's data-index attribute
|
|
modal.setAttribute("data-index", newIndex);
|
|
|
|
// Show or hide the arrow buttons based on the new index
|
|
leftArrow.style.display = newIndex === 0 ? "none" : "block";
|
|
rightArrow.style.display =
|
|
newIndex === useCaseData.length - 1 ? "none" : "block";
|
|
}
|
|
|
|
// Add click event listeners for arrow buttons
|
|
leftArrow.addEventListener("click", () => handleArrowClick("left"));
|
|
rightArrow.addEventListener("click", () => handleArrowClick("right"));
|
|
var modal = document.getElementById("myModal");
|
|
var openModalBtns = document.querySelectorAll("li.open-modal");
|
|
var useCaseData = [];
|
|
|
|
// Populate the useCaseData array with data from the li elements
|
|
openModalBtns.forEach(function (btn) {
|
|
var id = btn.getAttribute("data-id");
|
|
var title = btn.getAttribute("data-title");
|
|
var number = btn.getAttribute("data-number");
|
|
var src = btn.getAttribute("data-src");
|
|
|
|
useCaseData.push({ id, title, number, src });
|
|
});
|
|
|
|
// Get the elements in the modal that will be updated
|
|
var modalImage = document.querySelector(".modal .section-image");
|
|
var modalTextDescription = document.querySelector(
|
|
".modal .section-text-description"
|
|
);
|
|
var modalTextTitle = document.querySelector(".modal .section-text-title");
|
|
var modalLogos = document.querySelector(".modal .section-logos");
|
|
// Add a function to update the modal content
|
|
function updateModalContent({id, title, number, src }) {
|
|
modalImage.src = src;
|
|
modalImage.alt = title + " logo";
|
|
modalTextDescription.textContent = title;
|
|
modalTextTitle.textContent = title;
|
|
modalLogos.textContent = "Group of logos for " + title + " here...";
|
|
}
|
|
openModalBtns.forEach(function (btn, index) {
|
|
btn.onclick = function () {
|
|
// Read the data-* attributes from the clicked li
|
|
var id = btn.getAttribute("data-id");
|
|
var title = btn.getAttribute("data-title");
|
|
var number = btn.getAttribute("data-number");
|
|
var src = btn.getAttribute("data-src");
|
|
// Update the modal content with the data from the clicked li
|
|
modalImage.src = src;
|
|
modalImage.alt = title + " logo";
|
|
modalTextDescription.textContent = title;
|
|
modalTextTitle.textContent = title;
|
|
modalLogos.textContent = "Group of logos for " + title + " here...";
|
|
|
|
// Set the data index on the modal
|
|
modal.setAttribute("data-index", index);
|
|
|
|
// Update the modal content with the data from the clicked li
|
|
updateModalContent({ id, title, number, src });
|
|
|
|
// Show or hide the arrow buttons based on the index
|
|
leftArrow.style.display = index === 0 ? "none" : "block";
|
|
rightArrow.style.display =
|
|
index === useCaseData.length - 1 ? "none" : "block";
|
|
|
|
modal.style.display = "block";
|
|
};
|
|
});
|
|
|
|
window.onclick = function (event) {
|
|
if (event.target == modal) {
|
|
modal.style.display = "none";
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", function (event) {
|
|
if (event.key === "Escape") {
|
|
modal.style.display = "none";
|
|
}
|
|
});
|
|
});
|