pesapakawan/wwwroot/website/js/dropdown.js

let activeDropdown = null;
let isAnimating = false;

function toggleDropdown(sectionId) {
  if (isAnimating) return;
  const content = document.getElementById(sectionId);
  const header = content.previousElementSibling;
  const icon = header.querySelector(".dropdown-icon");

  isAnimating = true;

  if (content.classList.contains("open")) {
    closeDropdown(content, header, icon);
    activeDropdown = null;
  } else {
    if (activeDropdown) {
      const activeContent = document.getElementById(activeDropdown);
      const activeHeader = activeContent.previousElementSibling;
      const activeIcon = activeHeader.querySelector(".dropdown-icon");
      closeDropdown(activeContent, activeHeader, activeIcon);
    }

    openDropdown(content, header, icon, sectionId);
    activeDropdown = sectionId;
  }

  setTimeout(() => {
    isAnimating = false;
  }, 500);
}

function openDropdown(content, header, icon, sectionId) {
  createRipple(header, event);

  content.classList.add("opening");
  header.classList.add("active");

  content.style.maxHeight = content.scrollHeight + "px";
  content.classList.add("open");

  icon.style.transform = "rotate(180deg) scale(1.1)";
  setTimeout(() => {
    icon.style.transform = "rotate(180deg) scale(1)";
  }, 150);

  const items = content.querySelectorAll("h3, p, ul, table, .content-item");
  items.forEach((item, index) => {
    item.style.opacity = "0";
    item.style.transform = "translateY(20px)";
    setTimeout(() => {
      item.style.opacity = "1";
      item.style.transform = "translateY(0)";
    }, 100 + index * 50);
  });

  setTimeout(() => {
    content.classList.remove("opening");
  }, 400);
}

function closeDropdown(content, header, icon) {
  content.classList.add("closing");
  header.classList.remove("active");

  const items = content.querySelectorAll("h3, p, ul, table, .content-item");
  items.forEach((item) => {
    item.style.opacity = "0";
    item.style.transform = "translateY(-10px)";
  });

  setTimeout(() => {
    content.classList.remove("open");
    content.style.maxHeight = "0px";
    icon.style.transform = "rotate(0deg)";
  }, 150);

  setTimeout(() => {
    content.classList.remove("closing");
  }, 400);
}

function createRipple(element, event) {
  const ripple = document.createElement("div");
  ripple.className = "ripple-effect";

  const rect = element.getBoundingClientRect();
  const size = Math.max(rect.width, rect.height);
  const x =
    (event?.clientX || rect.left + rect.width / 2) - rect.left - size / 2;
  const y =
    (event?.clientY || rect.top + rect.height / 2) - rect.top - size / 2;

  ripple.style.cssText = `
        position: absolute;
        width: ${size}px;
        height: ${size}px;
        left: ${x}px;
        top: ${y}px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
        border-radius: 50%;
        transform: scale(0);
        pointer-events: none;
        z-index: 1;
    `;

  element.style.position = "relative";
  element.style.overflow = "hidden";
  element.appendChild(ripple);

  setTimeout(() => {
    ripple.remove();
  }, 600);
}

document.addEventListener("DOMContentLoaded", function () {
  const style = document.createElement("style");
  style.textContent = `
        @keyframes ripple-animation {
            to {
                transform: scale(2);
                opacity: 0;
            }
        }
        
        @keyframes glow-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
            50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
        }
        
        @keyframes slide-in {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    `;
  document.head.appendChild(style);

  const dropdownContents = document.querySelectorAll(".dropdown-content");
  dropdownContents.forEach((content, index) => {
    content.style.maxHeight = "0px";
    content.style.overflow = "hidden";
    content.style.transition =
      "max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease";

    content.style.animation = `slide-in 0.6s ease ${index * 0.1}s both`;

    const items = content.querySelectorAll("h3, p, ul, table");
    items.forEach((item) => {
      if (!item.classList.contains("content-item")) {
        item.classList.add("content-item");
      }
    });
  });

  const dropdownHeaders = document.querySelectorAll(".dropdown-header");
  dropdownHeaders.forEach((header, index) => {
    header.style.animation = `slide-in 0.6s ease ${index * 0.1}s both`;

    header.addEventListener("mouseenter", function () {
      this.style.transform = "translateY(-2px)";
    });

    header.addEventListener("mouseleave", function () {
      this.style.transform = "translateY(0)";
    });
  });
});

document.addEventListener("click", function (event) {
  if (
    !event.target.closest(".dropdown-header") &&
    !event.target.closest(".dropdown-content")
  ) {
    if (activeDropdown && !isAnimating) {
      const content = document.getElementById(activeDropdown);
      const header = content.previousElementSibling;
      const icon = header.querySelector(".dropdown-icon");

      closeDropdown(content, header, icon);
      activeDropdown = null;
    }
  }
});

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape" && activeDropdown) {
    const content = document.getElementById(activeDropdown);
    const header = content.previousElementSibling;
    const icon = header.querySelector(".dropdown-icon");

    closeDropdown(content, header, icon);
    activeDropdown = null;
  }
});