Release 2.8.0

2026-08-16 17:15:31 +01:00
parent 1bdc122995
commit 203d0bfc01
105 changed files with 4185 additions and 677 deletions
@@ -39,6 +39,63 @@ function setAnnouncementScreenSelection(isSelected) {
  });
 }

+function getAnnouncementActionButtonState() {
+  var actionForm = document.getElementById('announcement-action-form');
+  var visibleButton = document.querySelector('button[form="announcement-action-form"]');
+  var actionPath = actionForm ? String(actionForm.getAttribute('action') || '').trim() : '';
+  var isPlay = /\/play$/.test(actionPath);
+  var isActive = !isPlay;
+  var selectedScreenCount = document.querySelectorAll('input[name="screen_ids[]"]:checked').length;
+
+  return {
+    visibleButton: visibleButton,
+    actionForm: actionForm,
+    isActive: isActive,
+    hasTargets: selectedScreenCount > 0,
+    actionDisabled: !isActive && selectedScreenCount === 0,
+    actionLabel: isActive ? 'Stop' : 'Play',
+    actionIcon: isActive ? 'bi-stop-fill' : 'bi-play-fill',
+    actionClassName: !isActive && selectedScreenCount === 0
+      ? 'btn-outline-info'
+      : (isActive ? 'btn-outline-warning' : 'btn-info'),
+    actionDisabledTitle: !isActive && selectedScreenCount === 0
+      ? 'Select at least one screen group to play this announcement.'
+      : '',
+    actionConfirmMessage: isActive
+      ? 'Stop this announcement on the selected screens now?'
+      : 'Send this announcement to the selected screens now?'
+  };
+}
+
+function updateAnnouncementActionButtonState() {
+  var state = getAnnouncementActionButtonState();
+  if (!state.visibleButton) {
+    return;
+  }
+
+  state.visibleButton.className = state.visibleButton.className.replace(/btn-outline-(info|warning|success)|btn-info/g, state.actionClassName);
+  state.visibleButton.disabled = state.actionDisabled;
+  state.visibleButton.setAttribute('aria-disabled', state.actionDisabled ? 'true' : 'false');
+  state.visibleButton.setAttribute('title', state.actionDisabled ? state.actionDisabledTitle : state.actionConfirmMessage);
+  state.visibleButton.setAttribute('aria-label', state.actionLabel);
+
+  var icon = state.visibleButton.querySelector('i.bi');
+  if (icon) {
+    icon.className = 'bi ' + state.actionIcon + ' me-1';
+  }
+
+  var label = state.visibleButton.childNodes.length > 1 ? state.visibleButton.childNodes[state.visibleButton.childNodes.length - 1] : null;
+  if (label && label.nodeType === Node.TEXT_NODE) {
+    label.textContent = state.actionLabel;
+  } else {
+    state.visibleButton.textContent = state.actionLabel;
+  }
+
+  if (state.actionForm) {
+    state.actionForm.setAttribute('data-confirm-message', state.actionConfirmMessage);
+  }
+}
+
 function positionAnnouncementTypePicker() {
  var picker = document.querySelector('[data-announcement-type-picker]');
  var toggle = document.querySelector('[data-announcement-type-picker-toggle]');
@@ -141,125 +198,6 @@ function setAnnouncementTypeValue(typeKey) {
  updateAnnouncementTypePickerSelection();
 }

-function updateAnnouncementIconPreview() {
-  var iconSelect = document.getElementById('announcement-icon');
-  var preview = document.querySelector('[data-announcement-icon-preview]');
-  if (!iconSelect || !preview) {
-    return;
-  }
-
-  var selectedOption = iconSelect.options[iconSelect.selectedIndex] || null;
-  var iconKey = selectedOption ? String(selectedOption.value || '').trim().toLowerCase() : '';
-  var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || iconKey).trim() : iconKey;
-
-  preview.className = 'announcement-icon-preview';
-  preview.innerHTML = '<i class="bi bi-' + iconKey + '" aria-hidden="true"></i>';
-  preview.setAttribute('aria-label', label);
-  preview.setAttribute('title', label);
-}
-
-function positionAnnouncementIconPicker() {
-  var picker = document.querySelector('[data-announcement-icon-picker]');
-  var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-  var shell = document.querySelector('[data-announcement-icon-picker-shell]');
-  if (!picker || picker.hidden || !toggle || !shell) {
-    return;
-  }
-
-  var padding = 8;
-  var toggleRect = toggle.getBoundingClientRect();
-  var menuRect = picker.getBoundingClientRect();
-  var viewportHeight = window.innerHeight || document.documentElement.clientHeight || toggleRect.bottom;
-  var placementAbove = false;
-  var spaceBelow = viewportHeight - toggleRect.bottom - padding;
-  var spaceAbove = toggleRect.top - padding;
-
-  if (menuRect.height > spaceBelow && spaceAbove > spaceBelow) {
-    placementAbove = true;
-  }
-
-  picker.classList.toggle('is-open-above', placementAbove);
-}
-
-function closeAnnouncementIconPicker() {
-  var picker = document.querySelector('[data-announcement-icon-picker]');
-  var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-  if (!picker) {
-    return;
-  }
-
-  picker.hidden = true;
-  picker.classList.remove('is-open-above');
-  if (toggle) {
-    toggle.setAttribute('aria-expanded', 'false');
-  }
-}
-
-function openAnnouncementIconPicker() {
-  var picker = document.querySelector('[data-announcement-icon-picker]');
-  var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-  if (!picker) {
-    return;
-  }
-
-  picker.hidden = false;
-  if (toggle) {
-    toggle.setAttribute('aria-expanded', 'true');
-  }
-
-  if (typeof window !== 'undefined' && window.requestAnimationFrame) {
-    window.requestAnimationFrame(positionAnnouncementIconPicker);
-  } else {
-    positionAnnouncementIconPicker();
-  }
-}
-
-function updateAnnouncementIconPickerSelection() {
-  var iconSelect = document.getElementById('announcement-icon');
-  var previewButton = document.querySelector('[data-announcement-icon-picker-toggle]');
-  var picker = document.querySelector('[data-announcement-icon-picker]');
-  if (!iconSelect || !previewButton || !picker) {
-    return;
-  }
-
-  var selectedOption = iconSelect.options[iconSelect.selectedIndex] || null;
-  var selectedValue = selectedOption ? String(selectedOption.value || '').trim().toLowerCase() : '';
-  var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || selectedValue).trim() : selectedValue;
-  var icon = previewButton.querySelector('[data-announcement-icon-picker-icon]');
-  var text = previewButton.querySelector('[data-announcement-icon-picker-label]');
-
-  previewButton.setAttribute('aria-label', label);
-  previewButton.setAttribute('title', label);
-  if (icon) {
-    icon.className = 'bi bi-' + selectedValue;
-  }
-  if (text) {
-    text.textContent = label;
-  }
-
-  picker.querySelectorAll('[data-announcement-icon-option]').forEach(function (button) {
-    var isSelected = String(button.getAttribute('data-icon-key') || '').trim().toLowerCase() === selectedValue;
-    button.classList.toggle('is-selected', isSelected);
-    button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
-  });
-}
-
-function setAnnouncementIconValue(iconKey) {
-  var iconSelect = document.getElementById('announcement-icon');
-  if (!iconSelect) {
-    return;
-  }
-
-  var normalized = String(iconKey || '').trim().toLowerCase();
-  if (!normalized) {
-    return;
-  }
-
-  iconSelect.value = normalized;
-  updateAnnouncementIconPreview();
-  updateAnnouncementIconPickerSelection();
-}
-
 function initAnnouncementForm() {
  var typeInput = document.getElementById('announcement-type');
  var typePickerToggle = document.querySelector('[data-announcement-type-picker-toggle]');
@@ -270,10 +208,6 @@ function initAnnouncementForm() {
  var colorPicker = document.querySelector('[data-announcement-color-picker-shell]');
  var screenSelectAll = document.querySelector('[data-announcement-screen-select-all]');
  var screenSelectNone = document.querySelector('[data-announcement-screen-select-none]');
-  var iconSelect = document.getElementById('announcement-icon');
-  var iconPickerToggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-  var iconPicker = document.querySelector('[data-announcement-icon-picker]');
-  var iconPickerClose = document.querySelector('[data-announcement-icon-picker-close]');

  if (typeInput) {
    updateAnnouncementTypePickerSelection();
@@ -347,44 +281,16 @@ function initAnnouncementForm() {
    });
  }

-  if (iconSelect) {
-    iconSelect.addEventListener('change', updateAnnouncementIconPreview);
-    updateAnnouncementIconPreview();
-  }
+  document.addEventListener('web-async-save:success', function (event) {
+    var detail = event && event.detail ? event.detail : null;
+    var form = detail && detail.form ? detail.form : null;
+    if (!form || form.id !== 'announcement-form') {
+      return;
+    }

-  if (iconPickerToggle) {
-    iconPickerToggle.addEventListener('click', function (event) {
-      event.preventDefault();
-      var isExpanded = iconPicker && !iconPicker.hidden;
-      if (isExpanded) {
-        closeAnnouncementIconPicker();
-      } else {
-        openAnnouncementIconPicker();
-      }
-    });
-  }
+    updateAnnouncementActionButtonState();
+  });

-  if (iconPickerClose) {
-    iconPickerClose.addEventListener('click', function (event) {
-      event.preventDefault();
-      closeAnnouncementIconPicker();
-    });
-  }
-
-  if (iconPicker) {
-    iconPicker.addEventListener('click', function (event) {
-      var button = event.target && event.target.closest ? event.target.closest('[data-announcement-icon-option]') : null;
-      if (!button) {
-        return;
-      }
-
-      event.preventDefault();
-      setAnnouncementIconValue(button.getAttribute('data-icon-key'));
-      closeAnnouncementIconPicker();
-    });
-  }
-
-  window.addEventListener('resize', positionAnnouncementIconPicker);
  window.addEventListener('resize', positionAnnouncementTypePicker);

  document.addEventListener('click', function (event) {
@@ -396,20 +302,9 @@ function initAnnouncementForm() {
      }
    }

-    var picker = document.querySelector('[data-announcement-icon-picker]');
-    var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-    if (!picker || picker.hidden) {
-      return;
-    }
-
-    if (picker.contains(event.target) || (toggle && toggle.contains(event.target))) {
-      return;
-    }
-
-    closeAnnouncementIconPicker();
  });

-  updateAnnouncementIconPickerSelection();
+  updateAnnouncementActionButtonState();
 }

 if (typeof document !== 'undefined') {