@@ -904,25 +903,26 @@
return span.innerHTML;
}
- document.addEventListener('DOMContentLoaded', function () {
+ initialiseHelpdeskTicketShowInteractions();
+ document.addEventListener('DOMContentLoaded', initialiseHelpdeskTicketShowInteractions);
+ document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions);
+ document.addEventListener('livewire:init', initialiseHelpdeskTicketShowInteractions);
+
+ function initialiseHelpdeskTicketShowInteractions() {
document.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => syncRichEditor(editor));
updateCommentToggleButtons();
initialiseHelpdeskSidebarCards();
- });
-
-
+ }
function initialiseHelpdeskSidebarCards() {
const sidebar = document.querySelector('[data-helpdesk-sidebar-cards]');
- if (!sidebar || sidebar.dataset.helpdeskSidebarInitialised === 'true') {
+ if (!sidebar) {
return;
}
- sidebar.dataset.helpdeskSidebarInitialised = 'true';
-
Array.from(sidebar.children).forEach((card) => {
- if (!(card instanceof HTMLElement) || card.tagName.toLowerCase() === 'details') {
+ if (!(card instanceof HTMLElement)) {
return;
}
@@ -932,32 +932,60 @@
return;
}
- const details = document.createElement('details');
- details.className = card.className;
- details.dataset.helpdeskSidebarCard = 'true';
- details.open = false;
+ card.dataset.helpdeskSidebarCard = 'true';
+ card.dataset.open = card.dataset.open || 'false';
+ header.dataset.helpdeskSidebarCardHeader = 'true';
+ header.setAttribute('role', 'button');
+ header.setAttribute('tabindex', '0');
+ header.setAttribute('aria-expanded', card.dataset.open === 'true' ? 'true' : 'false');
+ });
- const summary = document.createElement('summary');
- summary.className = 'cursor-pointer list-none marker:hidden';
- header.classList.add('relative', 'pr-10');
+ if (sidebar.dataset.helpdeskSidebarInitialised === 'true') {
+ return;
+ }
- const chevron = document.createElement('span');
- chevron.className = 'pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-white/80 transition group-open:rotate-180';
- chevron.innerHTML = '
';
- header.appendChild(chevron);
- summary.appendChild(header);
+ sidebar.dataset.helpdeskSidebarInitialised = 'true';
- const body = document.createElement('div');
- body.className = 'pt-4';
+ sidebar.addEventListener('click', function (event) {
+ const header = event.target.closest('[data-helpdesk-sidebar-card-header]');
- while (card.firstChild) {
- body.appendChild(card.firstChild);
+ if (!header || !sidebar.contains(header)) {
+ return;
}
- details.appendChild(summary);
- details.appendChild(body);
- card.replaceWith(details);
+ if (event.target.closest('a, button, input, select, textarea, label, dialog')) {
+ return;
+ }
+
+ toggleHelpdeskSidebarCard(header);
});
+
+ sidebar.addEventListener('keydown', function (event) {
+ if (!['Enter', ' '].includes(event.key)) {
+ return;
+ }
+
+ const header = event.target.closest('[data-helpdesk-sidebar-card-header]');
+
+ if (!header || !sidebar.contains(header)) {
+ return;
+ }
+
+ event.preventDefault();
+ toggleHelpdeskSidebarCard(header);
+ });
+ }
+
+ function toggleHelpdeskSidebarCard(header) {
+ const card = header.closest('[data-helpdesk-sidebar-card]');
+
+ if (!card) {
+ return;
+ }
+
+ const isOpen = card.dataset.open === 'true';
+ card.dataset.open = isOpen ? 'false' : 'true';
+ header.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
}
function wrapSelection(textarea, before, after) {
diff --git a/Modules/Helpdesk/Tests/Feature/TicketSidebarCardsExpandableFilesTest.php b/Modules/Helpdesk/Tests/Feature/TicketSidebarCardsExpandableFilesTest.php
new file mode 100644
index 00000000..26787e92
--- /dev/null
+++ b/Modules/Helpdesk/Tests/Feature/TicketSidebarCardsExpandableFilesTest.php
@@ -0,0 +1,43 @@
+'),
+ strpos($view, '