73 lines
2.7 KiB
JavaScript
73 lines
2.7 KiB
JavaScript
/* ==========================================================================
|
|
Ertunç Özbay — Workshop & Portfolio Script (Plain JS, No Dependencies)
|
|
Handles:
|
|
1. Accessible mobile navigation menu toggle (with Escape key support)
|
|
2. Static blog category filtering on the Blog page
|
|
========================================================================== */
|
|
|
|
(function () {
|
|
"use strict";
|
|
|
|
// 1. Mobile Navigation Toggle
|
|
var navToggle = document.querySelector("[data-nav-toggle]");
|
|
var siteNav = document.querySelector("[data-site-nav]");
|
|
|
|
if (navToggle && siteNav) {
|
|
navToggle.addEventListener("click", function () {
|
|
var isExpanded = navToggle.getAttribute("aria-expanded") === "true";
|
|
var nextState = !isExpanded;
|
|
navToggle.setAttribute("aria-expanded", String(nextState));
|
|
siteNav.classList.toggle("is-open", nextState);
|
|
var labelSpan = navToggle.querySelector("[data-nav-label]");
|
|
if (labelSpan) {
|
|
labelSpan.textContent = nextState ? "Close" : "Menu";
|
|
}
|
|
});
|
|
|
|
// Close mobile menu when pressing Escape
|
|
document.addEventListener("keydown", function (event) {
|
|
if (event.key === "Escape" && siteNav.classList.contains("is-open")) {
|
|
navToggle.setAttribute("aria-expanded", "false");
|
|
siteNav.classList.remove("is-open");
|
|
var labelSpan = navToggle.querySelector("[data-nav-label]");
|
|
if (labelSpan) {
|
|
labelSpan.textContent = "Menu";
|
|
}
|
|
navToggle.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 2. Blog Category Filter (Progressive Enhancement)
|
|
var filterButtons = document.querySelectorAll("[data-blog-filter]");
|
|
var blogCards = document.querySelectorAll("[data-blog-category]");
|
|
var filterStatus = document.getElementById("blog-filter-status");
|
|
|
|
if (filterButtons.length > 0 && blogCards.length > 0) {
|
|
filterButtons.forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
var selectedCategory = button.getAttribute("data-blog-filter");
|
|
|
|
filterButtons.forEach(function (btn) {
|
|
btn.setAttribute("aria-pressed", btn === button ? "true" : "false");
|
|
});
|
|
|
|
var visibleCount = 0;
|
|
blogCards.forEach(function (card) {
|
|
var categories = (card.getAttribute("data-blog-category") || "").split(",");
|
|
var match = selectedCategory === "all" || categories.indexOf(selectedCategory) !== -1;
|
|
card.hidden = !match;
|
|
if (match) {
|
|
visibleCount += 1;
|
|
}
|
|
});
|
|
|
|
if (filterStatus) {
|
|
filterStatus.textContent =
|
|
"Showing " + visibleCount + (visibleCount === 1 ? " entry" : " entries") +
|
|
(selectedCategory === "all" ? "." : " in selected category.");
|
|
}
|
|
});
|
|
});
|
|
}
|
|
})();
|