Sudo-JHare/FHIRFLARE-IG-Toolkit
Sudo-JHare/FHIRFLARE-IG-Toolkit
1
0
Fork 0
mirror of https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit.git synced 2025-06-15 13:09:59 +00:00
Code Issues Packages Projects Releases 6 Wiki Activity

fixed Chevron expand/collapse functionality

Browse Source
This commit is contained in:
Joshua Hare 2025-04-14 11:56:14 +10:00
parent 884ca7c948
commit 6a4778ad38
1 changed files with 59 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
templates/cp_view_processed_ig.html
View File

@ -320,7 +320,7 @@ document.addEventListener('DOMContentLoaded', function() {
package_version: "{{ processed_ig.version }}", package_version: "{{ processed_ig.version }}",
filename: selectedFilePath filename: selectedFilePath
}); });
const exampleFetchUrl = `${exampleBaseUrl}?${exampleParams.toString()}`; const exampleFetchUrl = `${exampleBaseUrl}?${structureParams.toString()}`;
console.log("Fetching example from:", exampleFetchUrl); console.log("Fetching example from:", exampleFetchUrl);
exampleLoading.style.display = 'block'; exampleLoading.style.display = 'block';
@ -513,7 +513,7 @@ document.addEventListener('DOMContentLoaded', function() {
let childrenHtml = ''; let childrenHtml = '';
if (hasChildren) { if (hasChildren) {
childrenHtml += `<ul class="collapse list-group list-group-flush structure-subtree" id="${collapseId}">`; childrenHtml += `<ul class="collapse list-group list-group-flush" id="${collapseId}">`;
Object.values(node.children).sort((a, b) => (a.element?.path ?? a.name).localeCompare(b.element?.path ?? b.name)).forEach(childNode => { Object.values(node.children).sort((a, b) => (a.element?.path ?? a.name).localeCompare(b.element?.path ?? b.name)).forEach(childNode => {
childrenHtml += renderNodeAsLi(childNode, mustSupportPathsSet, resourceType, level + 1); childrenHtml += renderNodeAsLi(childNode, mustSupportPathsSet, resourceType, level + 1);
}); });
@ -521,7 +521,7 @@ document.addEventListener('DOMContentLoaded', function() {
} }
let itemHtml = `<li class="${liClass}">`; let itemHtml = `<li class="${liClass}">`;
itemHtml += `<div class="row gx-2 align-items-center ${hasChildren ? 'collapse-toggle' : ''}" ${hasChildren ? `data-bs-toggle="collapse" data-bs-target="#${collapseId}" role="button" aria-expanded="false" aria-controls="${collapseId}"` : ''}>`; itemHtml += `<div class="row gx-2 align-items-center ${hasChildren ? 'collapse-toggle' : ''}" ${hasChildren ? `data-collapse-id="${collapseId}" role="button" aria-expanded="false" aria-controls="${collapseId}"` : ''}>`;
itemHtml += `<div class="col-lg-4 col-md-3 text-truncate" style="${pathStyle}">`; itemHtml += `<div class="col-lg-4 col-md-3 text-truncate" style="${pathStyle}">`;
itemHtml += `<span style="display: inline-block; width: 1.2em; text-align: center;">`; itemHtml += `<span style="display: inline-block; width: 1.2em; text-align: center;">`;
if (hasChildren) { if (hasChildren) {
@ -582,34 +582,71 @@ document.addEventListener('DOMContentLoaded', function() {
} }
}); });
// Initialize collapse with manual click handling and debouncing
let lastClickTime = 0;
const debounceDelay = 200; // ms
structureDisplay.querySelectorAll('.collapse-toggle').forEach(toggleEl => { structureDisplay.querySelectorAll('.collapse-toggle').forEach(toggleEl => {
const collapseTargetId = toggleEl.getAttribute('data-bs-target'); const collapseId = toggleEl.getAttribute('data-collapse-id');
if (!collapseTargetId) return; if (!collapseId) {
const collapseEl = document.querySelector(collapseTargetId); console.warn("No collapse ID for toggle:", toggleEl.outerHTML);
return;
}
const collapseEl = document.querySelector(`#${collapseId}`);
if (!collapseEl) {
console.warn("No collapse element found for ID:", collapseId);
return;
}
const toggleIcon = toggleEl.querySelector('.toggle-icon'); const toggleIcon = toggleEl.querySelector('.toggle-icon');
if (!toggleIcon) {
console.warn("No toggle icon for:", collapseId);
return;
}
if (collapseEl && toggleIcon) { console.log("Initializing collapse for:", collapseId);
collapseEl.classList.remove('show'); // Initialize Bootstrap Collapse
toggleIcon.classList.remove('bi-chevron-down'); const bsCollapse = new bootstrap.Collapse(collapseEl, {
toggleIcon.classList.add('bi-chevron-right'); toggle: false
});
toggleEl.addEventListener('click', event => { // Custom click handler with debounce
event.preventDefault(); toggleEl.addEventListener('click', event => {
event.stopPropagation(); event.preventDefault();
const isCurrentlyShown = collapseEl.classList.contains('show'); event.stopPropagation();
toggleIcon.classList.toggle('bi-chevron-right', isCurrentlyShown); const now = Date.now();
toggleIcon.classList.toggle('bi-chevron-down', !isCurrentlyShown); if (now - lastClickTime < debounceDelay) {
}); console.log("Debounced click ignored for:", collapseId);
return;
}
lastClickTime = now;
console.log("Click toggle for:", collapseId, "Current show:", collapseEl.classList.contains('show'));
if (collapseEl.classList.contains('show')) {
bsCollapse.hide();
} else {
bsCollapse.show();
}
});
collapseEl.addEventListener('show.bs.collapse', () => { // Update icon and log state
collapseEl.addEventListener('show.bs.collapse', event => {
console.log("Show collapse triggered for:", event.target.id, "Show class:", event.target.classList.contains('show'));
if (toggleIcon) {
toggleIcon.classList.remove('bi-chevron-right'); toggleIcon.classList.remove('bi-chevron-right');
toggleIcon.classList.add('bi-chevron-down'); toggleIcon.classList.add('bi-chevron-down');
}); }
collapseEl.addEventListener('hide.bs.collapse', () => { });
collapseEl.addEventListener('hide.bs.collapse', event => {
console.log("Hide collapse triggered for:", event.target.id, "Show class:", event.target.classList.contains('show'));
if (toggleIcon) {
toggleIcon.classList.remove('bi-chevron-down'); toggleIcon.classList.remove('bi-chevron-down');
toggleIcon.classList.add('bi-chevron-right'); toggleIcon.classList.add('bi-chevron-right');
}); }
} });
collapseEl.addEventListener('shown.bs.collapse', event => {
console.log("Shown collapse completed for:", event.target.id, "Show class:", event.target.classList.contains('show'));
});
collapseEl.addEventListener('hidden.bs.collapse', event => {
console.log("Hidden collapse completed for:", event.target.id, "Show class:", event.target.classList.contains('show'));
});
}); });
} }
} catch (e) { } catch (e) {