rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update header content to be rendered from index directly

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-14 15:38:21 +01:00
parent dc06a33a72
commit 6816650ea5
7 changed files with 678 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
js/components/horizontal-scroll-nav.js
View File

@@ -5,16 +5,16 @@
class HorizontalScrollNav extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.attachShadow({ mode: "open" });
this.categories = [
{ id: 'all', label: 'All', active: true },
{ id: 'fiction', label: 'Fiction', active: false },
{ id: 'non-fiction', label: 'Non-Fiction', active: false },
{ id: 'mystery', label: 'Mystery', active: false },
{ id: 'romance', label: 'Romance', active: false },
{ id: 'sci-fi', label: 'Sci-Fi', active: false },
{ id: 'biography', label: 'Biography', active: false },
{ id: 'history', label: 'History', active: false },
{ id: "all", label: "All", active: true },
{ id: "fiction", label: "Fiction", active: false },
{ id: "non-fiction", label: "Non-Fiction", active: false },
{ id: "mystery", label: "Mystery", active: false },
{ id: "romance", label: "Romance", active: false },
{ id: "sci-fi", label: "Sci-Fi", active: false },
{ id: "biography", label: "Biography", active: false },
{ id: "history", label: "History", active: false },
];
}
@@ -24,28 +24,30 @@ class HorizontalScrollNav extends HTMLElement {
}
addEventListeners() {
const buttons = this.shadowRoot.querySelectorAll('.nav-pill');
buttons.forEach(button => {
button.addEventListener('click', (e) => {
const buttons = this.shadowRoot.querySelectorAll(".nav-pill");
buttons.forEach((button) => {
button.addEventListener("click", (e) => {
this.setActiveCategory(e.target.dataset.id);
});
});
}
setActiveCategory(id) {
this.categories = this.categories.map(cat => ({
this.categories = this.categories.map((cat) => ({
...cat,
active: cat.id === id
active: cat.id === id,
}));
this.render();
this.addEventListeners();
// Dispatch custom event for parent components
this.dispatchEvent(new CustomEvent('category-change', {
detail: { categoryId: id },
bubbles: true,
composed: true
}));
this.dispatchEvent(
new CustomEvent("category-change", {
detail: { categoryId: id },
bubbles: true,
composed: true,
})
);
}
render() {
@@ -61,7 +63,7 @@ class HorizontalScrollNav extends HTMLElement {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--spacing-xs, 0.25rem) 0;
padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
}
.nav-container::-webkit-scrollbar {
@@ -96,18 +98,22 @@ class HorizontalScrollNav extends HTMLElement {
}
</style>
<nav class="nav-container" role="navigation" aria-label="Book categories">
${this.categories.map(cat => `
${this.categories
.map(
(cat) => `
<button
class="nav-pill ${cat.active ? 'active' : ''}"
class="nav-pill ${cat.active ? "active" : ""}"
data-id="${cat.id}"
${cat.active ? 'aria-current="true"' : ''}
${cat.active ? 'aria-current="true"' : ""}
>
${cat.label}
</button>
`).join('')}
`
)
.join("")}
</nav>
`;
}
}
customElements.define('horizontal-scroll-nav', HorizontalScrollNav);
customElements.define("horizontal-scroll-nav", HorizontalScrollNav);