kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-11-04 01:18:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored alternatives and options js

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach
2025-01-17 01:04:27 +01:00
parent 0360c443b7
commit a0664691e6
1 changed files with 25 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/static/js/modal.js
View File

@@ -52,49 +52,32 @@ function openDynamicPopup(subitem) {
linkBox.classList.add('d-none'); linkBox.classList.add('d-none');
linkHref.href = '#'; linkHref.href = '#';
} }
function populateSection(sectionId, listId, items, onClickHandler) {
const section = document.getElementById(sectionId);
const list = document.getElementById(listId);
list.innerHTML = '';
const alternativesSection = document.getElementById('dynamicAlternativesSection'); if (items && items.length > 0) {
const alternativesList = document.getElementById('dynamicAlternativesList'); section.classList.remove('d-none');
alternativesList.innerHTML = ''; items.forEach(item => {
if (subitem.alternatives && subitem.alternatives.length > 0) { const listItem = document.createElement('li');
alternativesSection.classList.remove('d-none'); listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
subitem.alternatives.forEach(alt => { listItem.innerHTML = `
const listItem = document.createElement('li'); <span>
listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center'); <i class="${item.icon.class}"></i> ${item.name}
listItem.innerHTML = ` </span>
<span> <button class="btn btn-outline-secondary btn-sm">Open</button>
<i class="${alt.icon.class}"></i> ${alt.name} `;
</span> listItem.querySelector('button').addEventListener('click', () => onClickHandler(item));
<button class="btn btn-outline-secondary btn-sm">Open</button> list.appendChild(listItem);
`; });
listItem.querySelector('button').addEventListener('click', () => openDynamicPopup(alt)); } else {
alternativesList.appendChild(listItem); section.classList.add('d-none');
}); }
} else {
alternativesSection.classList.add('d-none');
} }
const childrenSection = document.getElementById('dynamicChildrenSection'); populateSection('dynamicAlternativesSection', 'dynamicAlternativesList', subitem.alternatives, openDynamicPopup);
const childrenList = document.getElementById('dynamicChildrenList'); populateSection('dynamicChildrenSection', 'dynamicChildrenList', subitem.children, openDynamicPopup);
childrenList.innerHTML = '';
if (subitem.children && subitem.children.length > 0) {
childrenSection.classList.remove('d-none');
subitem.children.forEach(child => {
const listItem = document.createElement('li');
listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
listItem.innerHTML = `
<span>
<i class="${child.icon.class}"></i> ${child.name}
</span>
<button class="btn btn-outline-secondary btn-sm">Open</button>
`;
listItem.querySelector('button').addEventListener('click', () => openDynamicPopup(child));
childrenList.appendChild(listItem);
});
document.querySelector('.modal-body').appendChild(childrenSection);
} else {
childrenSection.classList.add('d-none');
}
const copyButton = document.getElementById('dynamicCopyButton'); const copyButton = document.getElementById('dynamicCopyButton');
copyButton.onclick = () => { copyButton.onclick = () => {