|
8 | 8 | * @author Ed Wilde |
9 | 9 | * @version 1.0.0 |
10 | 10 | */ |
| 11 | +/* global jQuery */ |
11 | 12 | (function() { |
12 | 13 | 'use strict'; |
13 | 14 |
|
|
50 | 51 | // SilverStripe CMS uses jQuery PJAX, so we need multiple event listeners |
51 | 52 | document.addEventListener('pjax:end', () => this.setup()); |
52 | 53 | window.addEventListener('cms-content-loaded', () => this.setup()); |
53 | | - |
| 54 | + |
54 | 55 | // Also listen on jQuery if available (SilverStripe uses jQuery PJAX) |
55 | 56 | if (typeof jQuery !== 'undefined') { |
56 | 57 | jQuery(document).on('pjax:end', () => this.setup()); |
57 | 58 | } |
58 | | - |
| 59 | + |
59 | 60 | // Periodically check if button needs to be created (fallback) |
60 | 61 | // This handles cases where events don't fire reliably |
61 | 62 | setInterval(() => { |
|
116 | 117 | * Insert the button immediately before the filter button. |
117 | 118 | * Handles different DOM structures that may occur during GridField updates. |
118 | 119 | * Hides button if filter area is open (no filter button visible). |
119 | | - * |
| 120 | + * |
120 | 121 | * @param {HTMLElement} button - The button element to insert |
121 | 122 | */ |
122 | 123 | insertButtonBeforeFilter(button) { |
123 | 124 | const filterButton = document.querySelector('button[name="showFilter"], .grid-field__filter-open'); |
124 | 125 | const gridField = document.querySelector('.ss-gridfield, .grid-field'); |
125 | | - |
| 126 | + |
126 | 127 | if (!filterButton) { |
127 | 128 | // Check if filter is open (has show-filter class) |
128 | 129 | if (gridField && gridField.classList.contains('show-filter')) { |
129 | 130 | // Filter is open, hide our button |
130 | 131 | button.style.display = 'none'; |
131 | 132 | // Still need to insert it somewhere to keep reference |
132 | | - const toolbar = document.querySelector('.cms-content-toolbar') || |
| 133 | + const toolbar = document.querySelector('.cms-content-toolbar') || |
133 | 134 | document.querySelector('.cms-content-header'); |
134 | 135 | if (toolbar) { |
135 | 136 | toolbar.appendChild(button); |
|
192 | 193 | const form = document.querySelector('.queuedjobs-live-enabled'); |
193 | 194 | if (!form) return; |
194 | 195 |
|
195 | | - const observer = new MutationObserver((mutations) => { |
| 196 | + const observer = new MutationObserver(() => { |
196 | 197 | const button = document.querySelector('.queuedjobs-live-toggle'); |
197 | 198 | const filterButton = document.querySelector('button[name="showFilter"], .grid-field__filter-open'); |
198 | 199 | const gridField = document.querySelector('.ss-gridfield, .grid-field'); |
199 | | - |
| 200 | + |
200 | 201 | if (!button) { |
201 | 202 | // Button was removed, re-create it |
202 | 203 | this.createToggleButton(); |
|
207 | 208 | } else { |
208 | 209 | // Check if filter is open/closed |
209 | 210 | const filterIsOpen = gridField && gridField.classList.contains('show-filter'); |
210 | | - |
| 211 | + |
211 | 212 | if (filterIsOpen && !filterButton) { |
212 | 213 | // Filter is open, hide button |
213 | 214 | button.style.display = 'none'; |
|
313 | 314 |
|
314 | 315 | // Fade out (100ms transition) |
315 | 316 | icon.style.opacity = '0'; |
316 | | - |
| 317 | + |
317 | 318 | // Wait for fade out (100ms) + pause (200ms) before changing content |
318 | 319 | setTimeout(() => { |
319 | 320 | if (this.isPolling) { |
|
329 | 330 | this.toggleButton.setAttribute('aria-label', 'Toggle auto-refresh. Currently stopped.'); |
330 | 331 | this.toggleButton.setAttribute('aria-pressed', 'false'); |
331 | 332 | } |
332 | | - |
| 333 | + |
333 | 334 | // Update transition for fade in |
334 | 335 | icon.style.transition = 'opacity 0.15s ease'; |
335 | | - |
| 336 | + |
336 | 337 | // Trigger reflow to ensure transition applies |
337 | 338 | void icon.offsetHeight; |
338 | | - |
| 339 | + |
339 | 340 | // Fade in (150ms transition) |
340 | 341 | icon.style.opacity = '1'; |
341 | | - |
| 342 | + |
342 | 343 | // Reset transition back to default after fade in completes |
343 | 344 | setTimeout(() => { |
344 | 345 | icon.style.transition = ''; |
|
494 | 495 | notification.className = 'queuedjobs-live-notification'; |
495 | 496 | notification.setAttribute('role', 'alert'); |
496 | 497 | notification.setAttribute('aria-live', 'assertive'); |
497 | | - |
| 498 | + |
498 | 499 | const messageSpan = document.createElement('span'); |
499 | 500 | messageSpan.textContent = message; |
500 | 501 | notification.appendChild(messageSpan); |
|
0 commit comments