inherentlee/siblinghood
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

editorconfig and spaces -> tabs

Browse Source
This commit is contained in:
Lee Cattarin
2026-01-07 14:59:26 -08:00
parent 058fc17f89
commit 4e5f7f52d1
9 changed files with 439 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
scripts/nav.js
View File

@ -1,13 +1,13 @@
/* Nav construction */
const cards = [
{
title: "card one",
href: "/card-one/"
},
{
title: "card two",
href: "/card-two/"
},
{
title: "card one",
href: "/card-one/"
},
{
title: "card two",
href: "/card-two/"
},
{
title: "card three",
href: "/card-three/"
@ -15,56 +15,56 @@ const cards = [
]
const constructMenuLink = function(title, href) {
const path = window.location.pathname;
const path = window.location.pathname;
const a = document.createElement("a");
a.href = href;
a.title = title;
a.innerHTML = title;
if (path === href) a.id = "current-page";
const a = document.createElement("a");
a.href = href;
a.title = title;
a.innerHTML = title;
if (path === href) a.id = "current-page";
return a;
return a;
}
const constructSkipLink = function() {
const a = constructMenuLink("skip to main", "#main");
a.id = "skip";
const a = constructMenuLink("skip to main", "#main");
a.id = "skip";
return a;
return a;
}
const constructDropdown = function() {
const div = document.createElement("div");
div.id = "dropdown";
const div = document.createElement("div");
div.id = "dropdown";
const button = document.createElement("button");
button.innerHTML = "cards ⮷";
button.id="drop-button";
button.ariaLabel = "card submenu";
button.ariaExpanded = "false";
button.type = "button";
button.setAttribute("aria-controls", "drop-content");
div.append(button);
const button = document.createElement("button");
button.innerHTML = "cards ⮷";
button.id="drop-button";
button.ariaLabel = "card submenu";
button.ariaExpanded = "false";
button.type = "button";
button.setAttribute("aria-controls", "drop-content");
div.append(button);
const ul = document.createElement("ul");
ul.id = "drop-content";
ul.ariaHidden = "true";
const ul = document.createElement("ul");
ul.id = "drop-content";
ul.ariaHidden = "true";
for (const card of cards) {
const li = document.createElement("li");
li.append(constructMenuLink(card.title, card.href));
ul.append(li);
}
for (const card of cards) {
const li = document.createElement("li");
li.append(constructMenuLink(card.title, card.href));
ul.append(li);
}
div.append(ul);
return div;
div.append(ul);
return div;
}
const constructNav = function() {
const nav = document.getElementById("top-nav");
nav.append(constructSkipLink());
nav.append(constructMenuLink("home", "/"));
nav.append(constructDropdown());
const nav = document.getElementById("top-nav");
nav.append(constructSkipLink());
nav.append(constructMenuLink("home", "/"));
nav.append(constructDropdown());
}
constructNav();
@ -80,52 +80,52 @@ const firstDropdownItem = dropdownItems[0];
const lastDropdownItem = dropdownItems[dropdownItems.length - 1];
const openDropdown = function() {
dropdownContent.classList.add("show");
dropdownContent.setAttribute("aria-hidden", "false");
dropdownButton.setAttribute("aria-expanded", "true");
dropdownContent.classList.add("show");
dropdownContent.setAttribute("aria-hidden", "false");
dropdownButton.setAttribute("aria-expanded", "true");
}
const closeDropdown = function() {
if (dropdownButton.ariaExpanded === "true") {
dropdownContent.classList.remove("show");
dropdownContent.setAttribute("aria-hidden", "true");
dropdownButton.setAttribute("aria-expanded", "false");
}
if (dropdownButton.ariaExpanded === "true") {
dropdownContent.classList.remove("show");
dropdownContent.setAttribute("aria-hidden", "true");
dropdownButton.setAttribute("aria-expanded", "false");
}
}
dropdownButton.addEventListener("click", (event) => {
if (dropdownButton.ariaExpanded === "false") openDropdown();
else closeDropdown();
if (dropdownButton.ariaExpanded === "false") openDropdown();
else closeDropdown();
});
dropdownButton.addEventListener("keydown", (event) => {
if (event.key === "Enter" || event.key === " ") { // Space or Enter key
event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
if (dropdownButton.ariaExpanded === "false") {
openDropdown();
} else {
closeDropdown();
}
}
if (event.key === "Enter" || event.key === " ") { // Space or Enter key
event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
if (dropdownButton.ariaExpanded === "false") {
openDropdown();
} else {
closeDropdown();
}
}
});
firstDropdownItem.addEventListener("keydown", (event) => {
if (event.key === "Tab" && event.shiftKey) closeDropdown();
if (event.key === "Tab" && event.shiftKey) closeDropdown();
});
lastDropdownItem.addEventListener("keydown", (event) => {
if (event.key === "Tab" && !event.shiftKey) closeDropdown();
if (event.key === "Tab" && !event.shiftKey) closeDropdown();
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
closeDropdown();
dropdownButton.focus();
}
if (event.key === "Escape") {
closeDropdown();
dropdownButton.focus();
}
});
window.addEventListener("click", (event) => {
if (!event.target.matches("#drop-button")) closeDropdown();
if (!event.target.matches("#drop-button")) closeDropdown();
});
/* footer */