Release v2.18.0: template default content

src/web/public/js/playlists/playlist-schedule.js

@@ -1127,7 +1127,8 @@
           '<div class="d-flex align-items-center gap-4 ms-auto flex-shrink-0">' +
             '<button type="button" class="btn btn-sm btn-outline-danger" data-remove-schedule-rule data-confirm-message="Remove this rule?">Remove</button>' +
             '<button type="button" class="btn btn-tool p-0 text-body-secondary" data-lte-toggle="card-collapse" aria-label="Collapse rule ' + String(ruleIndex) + '" title="Collapse rule ' + String(ruleIndex) + '">' +
-              '<i class="bi ' + (isCollapsed ? 'bi-plus-lg' : 'bi-dash-lg') + '" aria-hidden="true" data-schedule-rule-collapse-icon></i>' +
+              '<i class="bi bi-dash-lg" aria-hidden="true" data-lte-icon="collapse"></i>' +
+              '<i class="bi bi-plus-lg" aria-hidden="true" data-lte-icon="expand"></i>' +
               '<span class="visually-hidden">Collapse rule ' + String(ruleIndex) + '</span>' +
             '</button>' +
           '</div>' +
@@ -1330,13 +1331,8 @@
         return card ? card.querySelector('[data-schedule-rule-collapse], [data-lte-toggle="card-collapse"]') : null;
     }
 
-    function getCollapseRuleIcon(card) {
-      return card ? card.querySelector('[data-schedule-rule-collapse-icon]') : null;
-    }
-
     function syncRuleCollapseButtonState(card) {
       var button = getCollapseRuleButton(card);
-      var icon = getCollapseRuleIcon(card);
       var numberNode = getRuleNumberNode(card);
       var ruleIndex = numberNode ? String(numberNode.textContent || '') : '';
       var isCollapsed = Boolean(card && card.classList && card.classList.contains('collapsed-card'));
@@ -1350,11 +1346,6 @@
       button.setAttribute('aria-label', label);
       button.setAttribute('title', label);
 
-      if (icon) {
-        icon.classList.remove('bi-dash-lg', 'bi-plus-lg');
-        icon.classList.add(isCollapsed ? 'bi-plus-lg' : 'bi-dash-lg');
-      }
-
       var visibleLabel = button.querySelector('.visually-hidden');
       if (visibleLabel) {
         visibleLabel.textContent = label;
@@ -1742,15 +1733,23 @@
       handleCardChange(card);
     });
 
+    function handleRuleCollapseComplete(event) {
+      var card = event.target && event.target.closest ? event.target.closest('[data-schedule-rule-card]') : null;
+      if (!card) {
+        return;
+      }
+      syncRuleCollapseButtonState(card);
+      persistScheduleDraft();
+    }
+
+    scheduleRuleList.addEventListener('collapsed.lte.card-widget', handleRuleCollapseComplete);
+    scheduleRuleList.addEventListener('expanded.lte.card-widget', handleRuleCollapseComplete);
+
     scheduleRuleList.addEventListener('click', function (event) {
       var removeButton = event.target && event.target.closest ? event.target.closest('[data-remove-schedule-rule]') : null;
       var collapseButton = event.target && event.target.closest ? event.target.closest('[data-schedule-rule-collapse], [data-lte-toggle="card-collapse"]') : null;
 
       if (collapseButton) {
-        window.setTimeout(function () {
-          syncRuleCollapseButtonState(collapseButton.closest('[data-schedule-rule-card]'));
-          persistScheduleDraft();
-        }, 0);
         return;
       }