workign comments strucuture

This commit is contained in:
Mark Gregory
2026-06-17 10:20:42 +01:00
parent fd193a5047
commit 7b317f0508
@@ -103,7 +103,7 @@
<i class="fa-solid fa-up-right-and-down-left-from-center mr-2" aria-hidden="true"></i>
Expand all
</button>
<button type="button" class="inline-flex items-center justify-center rounded-xl bg-slate-700 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-slate-800 dark:bg-slate-600 dark:hover:bg-slate-500" data-helpdesk-collapse-comments>
<button type="button" class="hidden items-center justify-center rounded-xl bg-slate-700 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-slate-800 dark:bg-slate-600 dark:hover:bg-slate-500" data-helpdesk-collapse-comments>
<i class="fa-solid fa-down-left-and-up-right-to-center mr-2" aria-hidden="true"></i>
Collapse all
</button>
@@ -234,9 +234,10 @@
const expandButton = event.target.closest('[data-helpdesk-expand-comments]');
if (expandButton) {
document.querySelectorAll('[data-helpdesk-comments-shell], [data-helpdesk-comment-card]').forEach((card) => {
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
card.open = true;
});
updateCommentToggleButtons();
return;
}
@@ -246,6 +247,7 @@
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
card.open = false;
});
updateCommentToggleButtons();
return;
}
@@ -293,6 +295,24 @@
}
});
function updateCommentToggleButtons() {
const commentCards = Array.from(document.querySelectorAll('[data-helpdesk-comment-card]'));
const expandButton = document.querySelector('[data-helpdesk-expand-comments]');
const collapseButton = document.querySelector('[data-helpdesk-collapse-comments]');
if (! expandButton || ! collapseButton) {
return;
}
const hasExpandableComments = commentCards.some((card) => ! card.open);
const hasExpandedComments = commentCards.some((card) => card.open);
expandButton.classList.toggle('hidden', ! hasExpandableComments);
expandButton.classList.toggle('inline-flex', hasExpandableComments);
collapseButton.classList.toggle('hidden', ! hasExpandedComments || hasExpandableComments);
collapseButton.classList.toggle('inline-flex', hasExpandedComments && ! hasExpandableComments);
}
function decodeHtmlEntities(value) {
const textarea = document.createElement('textarea');
textarea.innerHTML = value;