919 lines
28 KiB
HTML
919 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Category Tree Viewer</title>
|
|
|
|
<!-- Resource hints to optimize loading -->
|
|
<link rel="preload" href="/socket.io/socket.io.js" as="script">
|
|
<link rel="preconnect" href="/api">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
h1 {
|
|
color: #667eea;
|
|
margin-bottom: 2rem;
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
.tree {
|
|
list-style: none;
|
|
}
|
|
|
|
.tree ul {
|
|
list-style: none;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.category {
|
|
margin: 0.5rem 0;
|
|
padding: 0.75rem;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #667eea;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.category-header.has-children {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.category:hover {
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
.category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.category-image {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.category-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.category-name {
|
|
font-weight: 600;
|
|
color: #333;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.category-count {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.toggle {
|
|
color: #667eea;
|
|
font-weight: bold;
|
|
margin-right: 0.5rem;
|
|
user-select: none;
|
|
}
|
|
|
|
.children {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.children.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: #667eea;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.error {
|
|
background: #fee;
|
|
color: #c33;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.category-products {
|
|
margin-top: 0.5rem;
|
|
padding-left: 4rem;
|
|
font-size: 0.9rem;
|
|
color: #555;
|
|
}
|
|
|
|
.product-item {
|
|
padding: 0.25rem 0;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.product-image {
|
|
width: 32px;
|
|
height: 32px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.product-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.product-item.more {
|
|
cursor: pointer;
|
|
color: #667eea;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.product-item.more:hover {
|
|
color: #764ba2;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.search-wrapper {
|
|
position: relative;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
#filter-input {
|
|
width: 100%;
|
|
padding: 0.75rem 2.5rem 0.75rem 1rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
#filter-input:focus {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
|
outline: none;
|
|
}
|
|
|
|
#clear-btn {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: #999;
|
|
font-size: 1.25rem;
|
|
cursor: pointer;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#clear-btn.visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#clear-btn:hover {
|
|
color: #667eea;
|
|
background: rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
#version-reload-btn {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
transition: all 0.3s ease;
|
|
display: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#version-reload-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
|
|
}
|
|
|
|
#version-reload-btn.show {
|
|
display: block;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Mobile Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.container {
|
|
padding: 1rem;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.search-wrapper {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#filter-input {
|
|
padding: 0.625rem 2.25rem 0.625rem 0.875rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
#clear-btn {
|
|
font-size: 1.1rem;
|
|
right: 0.375rem;
|
|
}
|
|
|
|
.tree ul {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.category {
|
|
margin: 0.375rem 0;
|
|
padding: 0.625rem;
|
|
border-left-width: 3px;
|
|
}
|
|
|
|
.category-header {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.category-image {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.category-name {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.category-count {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.toggle {
|
|
font-size: 0.9rem;
|
|
margin-right: 0.375rem;
|
|
}
|
|
|
|
.category-products {
|
|
padding-left: 2.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.product-image {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.product-item {
|
|
padding: 0.375rem 0;
|
|
}
|
|
|
|
#version-reload-btn {
|
|
bottom: 15px;
|
|
right: 15px;
|
|
padding: 10px 16px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Ensure touch targets are at least 44px */
|
|
.category-header.has-children {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
body {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.container {
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
#filter-input {
|
|
padding: 0.5rem 2rem 0.5rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#clear-btn {
|
|
font-size: 1rem;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.tree ul {
|
|
padding-left: 0.75rem;
|
|
}
|
|
|
|
.category {
|
|
margin: 0.25rem 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.category-header {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.category-image {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.category-name {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.category-count {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.category-products {
|
|
padding-left: 2rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.product-image {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
#version-reload-btn {
|
|
bottom: 10px;
|
|
right: 10px;
|
|
padding: 8px 14px;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="search-wrapper">
|
|
<input type="text" id="filter-input" placeholder="🔍" autocomplete="off">
|
|
<button id="clear-btn" title="Clear search">✕</button>
|
|
</div>
|
|
<div id="tree-container">
|
|
<div class="loading">Loading categories...</div>
|
|
</div>
|
|
</div>
|
|
<button id="version-reload-btn" onclick="location.reload()">New version - [reload]</button>
|
|
|
|
<script src="/socket.io/socket.io.js" async></script>
|
|
<script>
|
|
// Initialize socket when io is available (async)
|
|
function initSocket() {
|
|
if (typeof io === 'undefined') {
|
|
// Socket.io not loaded yet, try again soon
|
|
setTimeout(initSocket, 50);
|
|
return;
|
|
}
|
|
|
|
const socket = io({
|
|
transports: ['websocket']
|
|
});
|
|
|
|
// Version checking
|
|
const clientEtag = document.querySelector('meta[name="app-version"]')?.content;
|
|
const reloadBtn = document.getElementById('version-reload-btn');
|
|
|
|
// Socket Events
|
|
socket.on('connect', () => {
|
|
console.log('🔌 Connected to server via WebSocket');
|
|
// Check version on connect and reconnect
|
|
if (clientEtag) {
|
|
socket.emit('checkVersion', clientEtag);
|
|
}
|
|
});
|
|
|
|
socket.on('versionMismatch', ({ serverEtag }) => {
|
|
console.log('⚠️ New version available on server');
|
|
if (reloadBtn) {
|
|
reloadBtn.classList.add('show');
|
|
}
|
|
});
|
|
|
|
socket.on('categoriesUpdated', () => {
|
|
console.log('🔄 Categories updated, reloading tree...');
|
|
loadCategories();
|
|
});
|
|
|
|
socket.on('categoryProductsUpdated', ({ id }) => {
|
|
console.log(`🔄 Products for category ${id} updated, reloading...`);
|
|
updateCategoryProducts(id);
|
|
});
|
|
|
|
// Debounce function
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function (...args) {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => func.apply(this, args), wait);
|
|
};
|
|
}
|
|
|
|
const debouncedSearch = debounce((value) => {
|
|
socket.emit('search', value);
|
|
}, 300);
|
|
|
|
// Event Listeners
|
|
filterInput.addEventListener('input', (e) => {
|
|
const value = e.target.value;
|
|
state.filter = value;
|
|
|
|
// Toggle clear button visibility
|
|
if (value) {
|
|
clearBtn.classList.add('visible');
|
|
} else {
|
|
clearBtn.classList.remove('visible');
|
|
}
|
|
|
|
if (value.trim()) {
|
|
debouncedSearch(value);
|
|
} else {
|
|
// Clear matches and collapse all categories
|
|
resetMatches(state.categories);
|
|
resetExpansion(state.categories);
|
|
collapseAllProducts(state.categories);
|
|
render();
|
|
}
|
|
});
|
|
|
|
socket.on('searchResults', ({ query, matches }) => {
|
|
if (query !== state.filter) return;
|
|
|
|
const matchSet = new Set(matches);
|
|
|
|
// Reset expansion and matches
|
|
resetExpansion(state.categories);
|
|
|
|
// Mark matches and expand
|
|
markMatches(state.categories, matchSet);
|
|
|
|
render();
|
|
});
|
|
}
|
|
|
|
// Start socket initialization (async, non-blocking)
|
|
initSocket();
|
|
|
|
// State management
|
|
const state = {
|
|
categories: [],
|
|
filter: '',
|
|
// We store expansion state directly on category objects
|
|
};
|
|
|
|
// DOM Elements
|
|
const container = document.getElementById('tree-container');
|
|
const filterInput = document.getElementById('filter-input');
|
|
const clearBtn = document.getElementById('clear-btn');
|
|
|
|
// Auto-focus search field on page load
|
|
window.addEventListener('load', () => {
|
|
filterInput.focus();
|
|
});
|
|
|
|
// Clear button functionality
|
|
clearBtn.addEventListener('click', () => {
|
|
filterInput.value = '';
|
|
state.filter = '';
|
|
clearBtn.classList.remove('visible');
|
|
|
|
// Clear matches and collapse all categories
|
|
resetMatches(state.categories);
|
|
resetExpansion(state.categories);
|
|
collapseAllProducts(state.categories);
|
|
render();
|
|
|
|
// Refocus the input
|
|
filterInput.focus();
|
|
});
|
|
|
|
function resetMatches(nodes) {
|
|
nodes.forEach(node => {
|
|
node._hasMatch = false;
|
|
if (node.children) resetMatches(node.children);
|
|
});
|
|
}
|
|
|
|
function markMatches(nodes, matchSet) {
|
|
let anyMatch = false;
|
|
nodes.forEach(node => {
|
|
const isDirectMatch = matchSet.has(node.kKategorie);
|
|
let childMatch = false;
|
|
|
|
if (node.children) {
|
|
childMatch = markMatches(node.children, matchSet);
|
|
}
|
|
|
|
if (isDirectMatch || childMatch) {
|
|
node._hasMatch = true;
|
|
node._isDirectMatch = isDirectMatch; // Track if this node itself matches
|
|
anyMatch = true;
|
|
|
|
// Expand if children have matches
|
|
if (childMatch) {
|
|
node.isChildrenExpanded = true;
|
|
}
|
|
|
|
// Expand if direct match (to show products)
|
|
if (isDirectMatch) {
|
|
node.isChildrenExpanded = true;
|
|
node.isExpanded = true;
|
|
// Trigger load if needed
|
|
if (node.products === null) fetchProducts(node);
|
|
}
|
|
} else {
|
|
node._hasMatch = false;
|
|
node._isDirectMatch = false;
|
|
}
|
|
});
|
|
return anyMatch;
|
|
}
|
|
|
|
function resetExpansion(nodes) {
|
|
nodes.forEach(node => {
|
|
node.isChildrenExpanded = false;
|
|
node.isExpanded = false;
|
|
if (node.children) resetExpansion(node.children);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Initial Load
|
|
loadCategories();
|
|
|
|
async function loadCategories() {
|
|
try {
|
|
const response = await fetch('/api/categories');
|
|
if (!response.ok) throw new Error('Failed to load categories');
|
|
state.categories = await response.json();
|
|
|
|
// Initialize and fetch products for all categories
|
|
initCategories(state.categories);
|
|
|
|
render();
|
|
} catch (err) {
|
|
container.innerHTML = `<div class="error">❌ ${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function initCategories(nodes) {
|
|
nodes.forEach(node => {
|
|
// Initialize state properties
|
|
node.products = null; // null means loading
|
|
node.isExpanded = false;
|
|
node.isChildrenExpanded = false; // New state for subcategory expansion
|
|
|
|
// Fetch products
|
|
// fetchProducts(node); // Lazy load instead
|
|
|
|
if (node.children) {
|
|
initCategories(node.children);
|
|
}
|
|
});
|
|
}
|
|
|
|
function fetchProducts(node) {
|
|
fetch(`/api/categories/${node.kKategorie}/products`)
|
|
.then(res => res.ok ? res.json() : [])
|
|
.then(products => {
|
|
node.products = products;
|
|
render(); // Re-render on data arrival
|
|
})
|
|
.catch(() => {
|
|
node.products = [];
|
|
render();
|
|
});
|
|
}
|
|
|
|
function updateCategoryProducts(id) {
|
|
const findAndReload = (nodes) => {
|
|
for (const node of nodes) {
|
|
if (node.kKategorie === id) {
|
|
node.products = null; // Set to loading
|
|
render();
|
|
fetchProducts(node);
|
|
return true;
|
|
}
|
|
if (node.children && findAndReload(node.children)) return true;
|
|
}
|
|
return false;
|
|
};
|
|
findAndReload(state.categories);
|
|
}
|
|
|
|
// Filtering Logic
|
|
function filterTree(nodes, query) {
|
|
if (!query.trim()) return nodes; // Return original structure if no filter
|
|
|
|
return nodes.map(node => {
|
|
// Only keep if marked as having a match
|
|
if (node._hasMatch) {
|
|
// Filter children
|
|
const matchingChildren = node.children ? filterTree(node.children, query) : [];
|
|
|
|
// Filter products if loaded
|
|
let matchingProducts = node.products;
|
|
if (matchingProducts) {
|
|
const words = query.toLowerCase().split(/\s+/).filter(w => w);
|
|
matchingProducts = matchingProducts.filter(p => {
|
|
const name = p.cName.toLowerCase();
|
|
return words.every(w => name.includes(w));
|
|
});
|
|
}
|
|
|
|
return {
|
|
...node,
|
|
products: matchingProducts,
|
|
children: matchingChildren,
|
|
_original: node
|
|
};
|
|
}
|
|
return null;
|
|
}).filter(n => n !== null);
|
|
}
|
|
|
|
// Rendering
|
|
function render() {
|
|
const filteredCategories = filterTree(state.categories, state.filter);
|
|
|
|
container.innerHTML = '';
|
|
|
|
if (state.filter && filteredCategories.length === 0) {
|
|
container.innerHTML = '<div class="loading" style="color: #666">No matching articles found.</div>';
|
|
return;
|
|
}
|
|
|
|
const ul = document.createElement('ul');
|
|
ul.className = 'tree';
|
|
filteredCategories.forEach(cat => {
|
|
ul.appendChild(renderCategory(cat));
|
|
});
|
|
container.appendChild(ul);
|
|
}
|
|
|
|
function countSubcategoryArticles(children) {
|
|
let total = 0;
|
|
children.forEach(child => {
|
|
// Count articles in this child
|
|
const childCount = child.products ? child.products.length : child.articleCount;
|
|
total += childCount;
|
|
|
|
// Recursively count articles in nested subcategories
|
|
if (child.children && child.children.length > 0) {
|
|
total += countSubcategoryArticles(child.children);
|
|
}
|
|
});
|
|
return total;
|
|
}
|
|
|
|
function renderCategory(category) {
|
|
// category might be a filtered copy or original.
|
|
// If it's a copy, it has _original pointing to the real state node.
|
|
const realNode = category._original || category;
|
|
|
|
const li = document.createElement('li');
|
|
|
|
const div = document.createElement('div');
|
|
div.className = 'category';
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'category-header';
|
|
|
|
// Toggle for children or products
|
|
const hasChildren = category.children && category.children.length > 0;
|
|
const hasProducts = category.articleCount > 0 || (category.products && category.products.length > 0);
|
|
|
|
if (hasChildren || hasProducts) {
|
|
header.classList.add('has-children');
|
|
const toggle = document.createElement('span');
|
|
toggle.className = 'toggle';
|
|
toggle.textContent = realNode.isChildrenExpanded ? '▼' : '▶';
|
|
header.appendChild(toggle);
|
|
|
|
header.onclick = (e) => {
|
|
e.stopPropagation();
|
|
realNode.isChildrenExpanded = !realNode.isChildrenExpanded;
|
|
|
|
// Lazy load products if expanding and not yet loaded
|
|
if (realNode.isChildrenExpanded && realNode.products === null) {
|
|
fetchProducts(realNode);
|
|
}
|
|
|
|
render();
|
|
};
|
|
}
|
|
|
|
// Image
|
|
if (category.kBild) {
|
|
const img = document.createElement('img');
|
|
img.className = 'category-image';
|
|
img.src = `/img/cat/${category.kBild}.avif`;
|
|
img.alt = category.cName;
|
|
img.loading = 'lazy';
|
|
img.onerror = () => img.style.display = 'none';
|
|
header.appendChild(img);
|
|
}
|
|
|
|
// Info
|
|
const info = document.createElement('div');
|
|
info.className = 'category-info';
|
|
|
|
const name = document.createElement('div');
|
|
name.className = 'category-name';
|
|
name.textContent = category.cName;
|
|
info.appendChild(name);
|
|
|
|
const count = document.createElement('div');
|
|
count.className = 'category-count';
|
|
// When filtering, show actual matching product count
|
|
// If this category is not a direct match (only matches due to subcategories),
|
|
// and products aren't loaded, show 0 instead of total articleCount
|
|
let productCount;
|
|
if (category.products !== null && category.products !== undefined) {
|
|
// Products are loaded, use the filtered count
|
|
productCount = category.products.length;
|
|
} else if (state.filter && !realNode._isDirectMatch) {
|
|
// Filtering is active and this is not a direct match, so show 0
|
|
productCount = 0;
|
|
} else {
|
|
// No filter or is a direct match, use API count
|
|
productCount = category.articleCount;
|
|
}
|
|
let countText = `${productCount} articles`;
|
|
|
|
// Always show subcategory count if children exist (User requirement)
|
|
// Use filtered children length
|
|
if (category.children && category.children.length > 0) {
|
|
const subcategoryArticleCount = countSubcategoryArticles(category.children);
|
|
countText += `, ${category.children.length} subcategories`;
|
|
if (subcategoryArticleCount > 0) {
|
|
countText += ` with ${subcategoryArticleCount} more articles`;
|
|
}
|
|
}
|
|
count.textContent = countText;
|
|
info.appendChild(count);
|
|
|
|
header.appendChild(info);
|
|
div.appendChild(header);
|
|
|
|
// Products
|
|
const productsDiv = document.createElement('div');
|
|
productsDiv.className = 'category-products';
|
|
|
|
// Only show products if:
|
|
// 1. Not filtering (show all), OR
|
|
// 2. This category is a direct match (not just expanded due to child matches)
|
|
const shouldShowProducts = !state.filter || realNode._isDirectMatch;
|
|
|
|
if (realNode.isChildrenExpanded && shouldShowProducts) {
|
|
if (category.products === null) {
|
|
productsDiv.innerHTML = '<small>Loading products...</small>';
|
|
productsDiv.style.display = 'block';
|
|
} else if (category.products.length > 0) {
|
|
productsDiv.style.display = 'block';
|
|
const ul = document.createElement('ul');
|
|
ul.style.listStyle = 'none';
|
|
|
|
const limit = realNode.isExpanded ? category.products.length : 3;
|
|
|
|
category.products.slice(0, limit).forEach(p => {
|
|
const li = document.createElement('li');
|
|
li.className = 'product-item';
|
|
|
|
if (p.images && p.images.length > 0) {
|
|
const img = document.createElement('img');
|
|
img.className = 'product-image';
|
|
img.src = `/img/prod/${p.images[0]}.avif`;
|
|
img.alt = p.cName;
|
|
img.loading = 'lazy';
|
|
img.onerror = () => img.style.display = 'none';
|
|
li.appendChild(img);
|
|
}
|
|
|
|
const span = document.createElement('span');
|
|
span.textContent = p.cName;
|
|
li.appendChild(span);
|
|
ul.appendChild(li);
|
|
});
|
|
|
|
if (!realNode.isExpanded && category.products.length > 3) {
|
|
const more = document.createElement('li');
|
|
more.className = 'product-item more';
|
|
more.style.fontStyle = 'italic';
|
|
more.textContent = `...and ${category.products.length - 3} more`;
|
|
more.onclick = (e) => {
|
|
e.stopPropagation();
|
|
// Collapse others
|
|
collapseAllProducts(state.categories);
|
|
realNode.isExpanded = true;
|
|
render();
|
|
};
|
|
ul.appendChild(more);
|
|
}
|
|
|
|
productsDiv.appendChild(ul);
|
|
} else {
|
|
productsDiv.style.display = 'none';
|
|
}
|
|
} else {
|
|
productsDiv.style.display = 'none';
|
|
}
|
|
|
|
div.appendChild(productsDiv);
|
|
|
|
// Children
|
|
if (category.children && category.children.length > 0 && realNode.isChildrenExpanded) {
|
|
const childrenUl = document.createElement('ul');
|
|
childrenUl.className = 'children';
|
|
|
|
category.children.forEach(child => {
|
|
childrenUl.appendChild(renderCategory(child));
|
|
});
|
|
div.appendChild(childrenUl);
|
|
}
|
|
|
|
li.appendChild(div);
|
|
return li;
|
|
}
|
|
|
|
function collapseAllProducts(nodes) {
|
|
nodes.forEach(node => {
|
|
node.isExpanded = false;
|
|
if (node.children) collapseAllProducts(node.children);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |