case-study.js

(function () {
  const pageData = window.caseStudyPageData || {};

  function language() {
    return typeof getCurrentLocale === "function" ? getCurrentLocale() : (document.documentElement.lang || "en");
  }

  function applyTranslations() {
    const activeLanguage = language();
    const translations = pageData.translations;
    /* The page id opts this case study into the shipped locale pack, so a
     * locale beyond the inline EN/TR pair is not silently reset to English. */
    const namespace = pageData.id ? `case-studies:${pageData.id}` : null;
    const active = typeof getLocalizedCollection === "function"
      ? getLocalizedCollection(translations, activeLanguage, namespace)
      : (translations?.[activeLanguage] || translations?.en);

    if (active) {
      document.querySelectorAll("[data-case-i18n]").forEach((element) => {
        const value = active[element.dataset.caseI18n];
        if (value) element.textContent = value;
      });
      document.querySelectorAll("[data-case-i18n-alt]").forEach((element) => {
        const value = active[element.dataset.caseI18nAlt];
        if (value) element.alt = value;
      });
      document.querySelectorAll("[data-case-i18n-aria-label]").forEach((element) => {
        const value = active[element.dataset.caseI18nAriaLabel];
        if (value) element.setAttribute("aria-label", value);
      });
    }

    const title = active?.__title || pageData.titles?.[activeLanguage] || pageData.titles?.en;
    if (title) document.title = title;

    const openModalImage = document.querySelector("[data-case-modal].is-open [data-case-modal-image]");
    const openModalTrigger = document.querySelector("[data-case-gallery][aria-expanded='true']");
    if (openModalImage && openModalTrigger) {
      openModalImage.alt = openModalTrigger.querySelector("img")?.alt || "";
    }
  }

  if (typeof subscribeSiteLocale === "function") subscribeSiteLocale(() => applyTranslations());

  const modal = document.querySelector("[data-case-modal]");
  const modalImage = modal?.querySelector("[data-case-modal-image]");
  const modalClose = modal?.querySelector("[data-case-modal-close]");
  let modalTrigger = null;
  if (modal) modal.inert = true;

  function closeModal() {
    if (!modal?.classList.contains("is-open")) return;
    modal.classList.remove("is-open");
    modal.setAttribute("aria-hidden", "true");
    modal.inert = true;
    document.body.classList.remove("case-modal-open");
    modalTrigger?.setAttribute("aria-expanded", "false");
    if (modalImage) {
      modalImage.removeAttribute("src");
      modalImage.alt = "";
    }
    modalTrigger?.focus();
  }

  document.querySelectorAll("[data-case-gallery]").forEach((button) => {
    button.setAttribute("aria-expanded", "false");
    button.addEventListener("click", () => {
      if (!modal || !modalImage) return;
      modalTrigger = button;
      const image = button.querySelector("img");
      modalImage.src = button.dataset.caseGallery;
      modalImage.alt = image?.alt || "";
      modal.classList.add("is-open");
      modal.inert = false;
      modal.setAttribute("aria-hidden", "false");
      document.body.classList.add("case-modal-open");
      button.setAttribute("aria-expanded", "true");
      modalClose?.focus();
    });
  });

  modalClose?.addEventListener("click", closeModal);
  modal?.addEventListener("click", (event) => {
    if (event.target === modal) closeModal();
  });
  document.addEventListener("keydown", (event) => {
    if (!modal?.classList.contains("is-open")) return;
    if (event.key === "Escape") closeModal();
    if (event.key === "Tab" && modalClose) {
      event.preventDefault();
      modalClose.focus();
    }
  });

  applyTranslations();
})();