48 lines
1.9 KiB
JavaScript
48 lines
1.9 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
const filters = document.querySelectorAll("[data-filter]");
|
|
const cards = document.querySelectorAll("[data-tags]");
|
|
|
|
filters.forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
filters.forEach((b) => b.setAttribute("data-active", "false"));
|
|
btn.setAttribute("data-active", "true");
|
|
const value = btn.dataset.filter;
|
|
cards.forEach((card) => {
|
|
const tags = card.dataset.tags.split(",");
|
|
const show = value === "todos" || tags.includes(value);
|
|
card.style.display = show ? "" : "none";
|
|
});
|
|
});
|
|
});
|
|
|
|
const backdrop = document.getElementById("case-modal");
|
|
const modalBody = document.getElementById("case-modal-body");
|
|
document.querySelectorAll("[data-case-trigger]").forEach((card) => {
|
|
card.addEventListener("click", () => {
|
|
modalBody.innerHTML = `
|
|
<p class="eyebrow">${card.dataset.caseTag || ""}</p>
|
|
<h3>${card.dataset.caseTitle}</h3>
|
|
<p style="margin-top:0.8rem;"><strong>Contexto:</strong> ${card.dataset.caseContext}</p>
|
|
<p style="margin-top:0.6rem;"><strong>Problema:</strong> ${card.dataset.caseProblem}</p>
|
|
<p style="margin-top:0.6rem;"><strong>Solución:</strong> ${card.dataset.caseSolution}</p>
|
|
<div class="tags" style="margin-top:1rem;">${(card.dataset.tags || "")
|
|
.split(",")
|
|
.map((t) => `<span class="pill">${t}</span>`)
|
|
.join("")}</div>
|
|
<p style="margin-top:1rem; font-size:0.85rem; color:var(--text-soft);">* Caso de referencia (placeholder) — se reemplaza por proyectos reales del portfolio.</p>
|
|
`;
|
|
backdrop.classList.add("open");
|
|
});
|
|
});
|
|
|
|
backdrop?.addEventListener("click", (e) => {
|
|
if (e.target === backdrop || e.target.closest("[data-modal-close]")) {
|
|
backdrop.classList.remove("open");
|
|
}
|
|
});
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape") backdrop?.classList.remove("open");
|
|
});
|
|
})(); |