source_monitor 0.7.0 → 0.8.0

data/app/assets/builds/source_monitor/application.js

@@ -2488,6 +2488,7 @@ var notification_controller_default = class extends Controller {
     }
     this.clearTimeout();
     this.registerController();
+    this.applyLevelDelay();
     this.startTimer();
   }
   disconnect() {
@@ -2505,8 +2506,17 @@ var notification_controller_default = class extends Controller {
     if (this.delayValue <= 0) return;
     this.timeoutId = window.setTimeout(() => this.dismiss(), this.delayValue);
   }
+  applyLevelDelay() {
+    const level = this.element.dataset.level;
+    if (level === "error" && this.delayValue === 5e3) {
+      this.delayValue = 1e4;
+    }
+  }
   dismiss() {
     if (!this.element) return;
+    this.element.dispatchEvent(
+      new CustomEvent("notification:dismissed", { bubbles: true })
+    );
     this.element.classList.add("opacity-0", "translate-y-2");
     window.setTimeout(() => {
       if (this.element && this.element.remove) {
@@ -2521,6 +2531,122 @@ var notification_controller_default = class extends Controller {
   }
 };
 
+// app/assets/javascripts/source_monitor/controllers/notification_container_controller.js
+var notification_container_controller_default = class extends Controller {
+  static values = {
+    maxVisible: { default: 3, type: Number },
+    expanded: { default: false, type: Boolean }
+  };
+  static targets = ["list", "badge", "badgeCount", "clearAll"];
+  connect() {
+    this.rafId = null;
+    this.boundHandleClickOutside = this.handleClickOutside.bind(this);
+    this.boundScheduleRecalculate = () => this.scheduleRecalculate();
+    this.observer = new MutationObserver(this.boundScheduleRecalculate);
+    this.observer.observe(this.listTarget, { childList: true });
+    this.listTarget.addEventListener(
+      "notification:dismissed",
+      this.boundScheduleRecalculate
+    );
+    this.recalculateVisibility();
+  }
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.listTarget.removeEventListener(
+      "notification:dismissed",
+      this.boundScheduleRecalculate
+    );
+    document.removeEventListener("click", this.boundHandleClickOutside);
+  }
+  scheduleRecalculate() {
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+    }
+    this.rafId = requestAnimationFrame(() => {
+      this.rafId = null;
+      this.recalculateVisibility();
+    });
+  }
+  recalculateVisibility() {
+    const toasts = Array.from(this.listTarget.children);
+    const total = toasts.length;
+    if (this.expandedValue) {
+      toasts.forEach((toast) => {
+        toast.classList.remove("hidden");
+        toast.removeAttribute("aria-hidden");
+        toast.removeAttribute("inert");
+      });
+    } else {
+      toasts.forEach((toast, index) => {
+        if (index < this.maxVisibleValue) {
+          toast.classList.remove("hidden");
+          toast.removeAttribute("aria-hidden");
+          toast.removeAttribute("inert");
+        } else {
+          toast.classList.add("hidden");
+          toast.setAttribute("aria-hidden", "true");
+          toast.setAttribute("inert", "");
+        }
+      });
+    }
+    const hiddenCount = this.expandedValue ? 0 : Math.max(0, total - this.maxVisibleValue);
+    if (this.hasBadgeTarget) {
+      if (this.hasBadgeCountTarget) {
+        this.badgeCountTarget.textContent = `+${hiddenCount} more`;
+      }
+      if (hiddenCount > 0) {
+        this.badgeTarget.classList.remove("hidden");
+      } else {
+        this.badgeTarget.classList.add("hidden");
+      }
+    }
+    if (this.hasClearAllTarget) {
+      const showClearAll = total > 0 && (hiddenCount > 0 || this.expandedValue);
+      if (showClearAll) {
+        this.clearAllTarget.classList.remove("hidden");
+      } else {
+        this.clearAllTarget.classList.add("hidden");
+      }
+    }
+  }
+  toggleExpand(event) {
+    event.preventDefault();
+    if (this.expandedValue) {
+      this.collapseStack();
+    } else {
+      this.expandStack();
+    }
+  }
+  expandStack() {
+    this.expandedValue = true;
+    this.recalculateVisibility();
+    document.addEventListener("click", this.boundHandleClickOutside);
+  }
+  collapseStack() {
+    this.expandedValue = false;
+    document.removeEventListener("click", this.boundHandleClickOutside);
+    this.recalculateVisibility();
+  }
+  handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.collapseStack();
+    }
+  }
+  clearAll(event) {
+    event.preventDefault();
+    const toasts = Array.from(this.listTarget.children);
+    toasts.forEach((toast) => toast.remove());
+    this.collapseStack();
+  }
+};
+
 // app/assets/javascripts/source_monitor/controllers/dropdown_controller.js
 var dropdown_controller_default = class extends Controller {
   static targets = ["menu"];
@@ -2746,6 +2872,7 @@ if (!existingApplication) {
   window.SourceMonitorStimulus = application;
 }
 application.register("notification", notification_controller_default);
+application.register("notification-container", notification_container_controller_default);
 application.register("async-submit", async_submit_controller_default);
 application.register("dropdown", dropdown_controller_default);
 application.register("modal", modal_controller_default);