Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: Use ID-based toggle for group collapse/expand

Browse Source 
Change from using 'this' pointer to using unique IDs for group toggling:

- Generate unique IDs for each group (group-0, group-1, etc.)
- Pass group ID to toggleGroup() function instead of DOM element
- Use getElementById() and previousElementSibling to find elements
- Add error handling with console.error for missing elements
- Add console.log statements for debugging

This approach is more reliable than relying on inline onclick handlers
with 'this' keyword, especially when the HTML is dynamically generated.
This commit is contained in:
root
2026-01-23 10:53:15 +00:00
parent 01792e8a58
commit f527a335de
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+17 -5
View File
@@ -1544,15 +1544,16 @@
// Display grouped downloads
let html = '';
groupNames.forEach(groupName => {
groupNames.forEach((groupName, index) => {
const groupDownloads = groups[groupName];
const groupId = `group-${index}`;
html += `
<div class="downloads-group">
<div class="downloads-group-header" onclick="toggleGroup(this)">
<div class="downloads-group-header" onclick="toggleGroup('${groupId}')">
<div class="downloads-group-title">${escapeHtml(groupName)}</div>
<div class="downloads-group-count">${groupDownloads.length}</div>
</div>
<div class="downloads-group-items">
<div class="downloads-group-items" id="${groupId}">
${groupDownloads.map(dl => renderDownloadItem(dl)).join('')}
</div>
</div>
@@ -1644,18 +1645,29 @@
`;
}
function toggleGroup(header) {
const items = header.nextElementSibling;
function toggleGroup(groupId) {
console.log('toggleGroup called with ID:', groupId);
const items = document.getElementById(groupId);
const header = items.previousElementSibling;
if (!items || !header) {
console.error('Could not find group elements');
return;
}
const isCollapsed = header.classList.contains('collapsed');
console.log('isCollapsed:', isCollapsed);
if (isCollapsed) {
// Expand
items.style.display = 'flex';
header.classList.remove('collapsed');
console.log('Expanded group');
} else {
// Collapse
items.style.display = 'none';
header.classList.add('collapsed');
console.log('Collapsed group');
}
}