@incursa/ui-kit 0.3.7 → 0.4.1

package/src/inc-design-language.js

@@ -6,6 +6,8 @@
         menu: ".inc-dropdown__menu",
         collapseToggle: '[data-inc-toggle="collapse"]',
         tabToggle: '[data-inc-toggle="tab"]',
+        autoRefresh: "[data-inc-auto-refresh]",
+        autoRefreshToggle: '[data-inc-action="auto-refresh-toggle"]',
         modalToggle: '[data-inc-toggle="modal"]',
         modalDismiss: '[data-inc-dismiss="modal"]',
         offcanvasToggle: '[data-inc-toggle="offcanvas"]',
@@ -25,6 +27,9 @@
         '[tabindex]:not([tabindex="-1"])',
     ].join(", ");
 
+    const autoRefreshControllers = [];
+    let autoRefreshReloadScheduled = false;
+
     function getTarget(trigger) {
         const rawTarget = trigger.getAttribute("data-inc-target")
             || trigger.getAttribute("href")
@@ -380,6 +385,278 @@
         return overlays[overlays.length - 1] || null;
     }
 
+    function parsePositiveInteger(value) {
+        const parsed = Number.parseInt(value || "", 10);
+
+        if (!Number.isFinite(parsed) || parsed < 1) {
+            return null;
+        }
+
+        return parsed;
+    }
+
+    function formatAutoRefreshRemaining(totalSeconds) {
+        if (totalSeconds < 60) {
+            return `${totalSeconds}s`;
+        }
+
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        return `${minutes}m ${seconds}s`;
+    }
+
+    function getAutoRefreshParts(root) {
+        return {
+            countdown: root.querySelector(".inc-auto-refresh__countdown"),
+            label: root.querySelector(".inc-auto-refresh__label"),
+            value: root.querySelector(".inc-auto-refresh__value"),
+            status: root.querySelector(".inc-auto-refresh__status"),
+            statusText: root.querySelector(".inc-auto-refresh__status-text"),
+            toggle: root.querySelector(".inc-auto-refresh__toggle"),
+            toggleText: root.querySelector(".inc-auto-refresh__toggle-text"),
+        };
+    }
+
+    function updateAutoRefreshToggle(controller) {
+        const { parts, isPaused, isLoading, pauseActionLabel, resumeActionLabel } = controller;
+
+        if (!(parts.toggle instanceof HTMLElement)) {
+            return;
+        }
+
+        const actionLabel = isPaused ? resumeActionLabel : pauseActionLabel;
+        parts.toggle.disabled = Boolean(isLoading);
+        parts.toggle.setAttribute("aria-pressed", isPaused ? "true" : "false");
+        parts.toggle.setAttribute("aria-label", actionLabel);
+
+        if (parts.toggleText) {
+            parts.toggleText.textContent = actionLabel;
+        }
+    }
+
+    function renderAutoRefreshCountdown(controller, remainingSeconds) {
+        const { root, parts, refreshLabel } = controller;
+
+        if (parts.label) {
+            parts.label.textContent = refreshLabel;
+        }
+
+        if (parts.value) {
+            parts.value.textContent = formatAutoRefreshRemaining(remainingSeconds);
+        }
+
+        root.classList.remove("is-paused");
+        root.classList.remove("is-loading");
+        root.setAttribute("aria-busy", "false");
+
+        if (parts.countdown) {
+            parts.countdown.hidden = false;
+        }
+
+        if (parts.status) {
+            parts.status.hidden = true;
+        }
+
+        updateAutoRefreshToggle(controller);
+    }
+
+    function renderAutoRefreshPaused(controller, remainingSeconds) {
+        const { root, parts, pausedLabel } = controller;
+
+        if (parts.label) {
+            parts.label.textContent = pausedLabel;
+        }
+
+        if (parts.value) {
+            parts.value.textContent = formatAutoRefreshRemaining(remainingSeconds);
+        }
+
+        root.classList.add("is-paused");
+        root.classList.remove("is-loading");
+        root.setAttribute("aria-busy", "false");
+
+        if (parts.countdown) {
+            parts.countdown.hidden = false;
+        }
+
+        if (parts.status) {
+            parts.status.hidden = true;
+        }
+
+        updateAutoRefreshToggle(controller);
+    }
+
+    function setAutoRefreshLoadingState(controller) {
+        const { root, parts, loadingLabel } = controller;
+
+        root.classList.remove("is-paused");
+        root.classList.add("is-loading");
+        root.setAttribute("aria-busy", "true");
+
+        if (parts.countdown) {
+            parts.countdown.hidden = true;
+        }
+
+        if (parts.statusText) {
+            parts.statusText.textContent = loadingLabel;
+        }
+
+        if (parts.status) {
+            parts.status.hidden = false;
+        }
+
+        updateAutoRefreshToggle(controller);
+    }
+
+    function stopAutoRefreshController(controller) {
+        if (controller.timeoutId) {
+            window.clearTimeout(controller.timeoutId);
+            controller.timeoutId = 0;
+        }
+    }
+
+    function pauseAutoRefresh(controller) {
+        if (autoRefreshReloadScheduled || controller.isLoading || controller.isPaused) {
+            return;
+        }
+
+        controller.isPaused = true;
+        controller.remainingMs = Math.max(controller.deadline - Date.now(), 0);
+        stopAutoRefreshController(controller);
+        renderAutoRefreshPaused(controller, Math.max(1, Math.ceil(controller.remainingMs / 1000)));
+    }
+
+    function resumeAutoRefresh(controller) {
+        if (autoRefreshReloadScheduled || controller.isLoading || !controller.isPaused) {
+            return;
+        }
+
+        controller.isPaused = false;
+        controller.deadline = Date.now() + controller.remainingMs;
+        controller.remainingMs = 0;
+        scheduleAutoRefreshTick(controller);
+    }
+
+    function toggleAutoRefresh(controller) {
+        if (controller.isPaused) {
+            resumeAutoRefresh(controller);
+            return;
+        }
+
+        pauseAutoRefresh(controller);
+    }
+
+    function scheduleWindowReload() {
+        if (autoRefreshReloadScheduled) {
+            return;
+        }
+
+        autoRefreshReloadScheduled = true;
+        autoRefreshControllers.forEach((controller) => stopAutoRefreshController(controller));
+
+        const deferToPaint = window.requestAnimationFrame
+            ? window.requestAnimationFrame.bind(window)
+            : (callback) => window.setTimeout(callback, 16);
+
+        deferToPaint(() => {
+            window.setTimeout(() => {
+                window.location.reload();
+            }, 120);
+        });
+    }
+
+    function startAutoRefreshReload(controller) {
+        if (autoRefreshReloadScheduled || controller.isLoading) {
+            return;
+        }
+
+        controller.isLoading = true;
+        stopAutoRefreshController(controller);
+        setAutoRefreshLoadingState(controller);
+        scheduleWindowReload();
+    }
+
+    function scheduleAutoRefreshTick(controller) {
+        if (autoRefreshReloadScheduled || controller.isLoading || controller.isPaused) {
+            return;
+        }
+
+        stopAutoRefreshController(controller);
+
+        const remainingMs = controller.deadline - Date.now();
+
+        if (remainingMs <= 0) {
+            startAutoRefreshReload(controller);
+            return;
+        }
+
+        const remainingSeconds = Math.ceil(remainingMs / 1000);
+        renderAutoRefreshCountdown(controller, remainingSeconds);
+
+        const nextDelay = remainingMs % 1000 || 1000;
+        controller.timeoutId = window.setTimeout(() => {
+            scheduleAutoRefreshTick(controller);
+        }, nextDelay);
+    }
+
+    function initializeAutoRefresh() {
+        document.querySelectorAll(selectors.autoRefresh).forEach((root) => {
+            if (!(root instanceof HTMLElement) || root._incAutoRefreshInitialized) {
+                return;
+            }
+
+            root._incAutoRefreshInitialized = true;
+
+            const refreshSeconds = parsePositiveInteger(root.getAttribute("data-inc-refresh-seconds"));
+
+            if (!refreshSeconds) {
+                return;
+            }
+
+            const controller = {
+                root,
+                parts: getAutoRefreshParts(root),
+                refreshLabel: root.getAttribute("data-inc-refresh-label") || "Refresh in",
+                loadingLabel: root.getAttribute("data-inc-refresh-loading-label") || "Refreshing",
+                pausedLabel: root.getAttribute("data-inc-refresh-paused-label") || "Paused at",
+                pauseActionLabel: root.getAttribute("data-inc-refresh-pause-action-label") || "Pause",
+                resumeActionLabel: root.getAttribute("data-inc-refresh-resume-action-label") || "Resume",
+                deadline: Date.now() + (refreshSeconds * 1000),
+                remainingMs: refreshSeconds * 1000,
+                timeoutId: 0,
+                isLoading: false,
+                isPaused: false,
+            };
+
+            root._incAutoRefreshController = controller;
+            autoRefreshControllers.push(controller);
+            scheduleAutoRefreshTick(controller);
+        });
+
+        if (!document._incAutoRefreshVisibilityBound && autoRefreshControllers.length) {
+            document._incAutoRefreshVisibilityBound = true;
+
+            document.addEventListener("visibilitychange", () => {
+                if (document.hidden || autoRefreshReloadScheduled) {
+                    return;
+                }
+
+                autoRefreshControllers.forEach((controller) => {
+                    if (controller.isLoading || controller.isPaused) {
+                        return;
+                    }
+
+                    if ((controller.deadline - Date.now()) <= 0) {
+                        startAutoRefreshReload(controller);
+                        return;
+                    }
+
+                    scheduleAutoRefreshTick(controller);
+                });
+            });
+        }
+    }
+
     function trapFocus(event, container) {
         if (event.key !== "Tab") {
             return false;
@@ -470,6 +747,20 @@
 
     function attachEventHandlers() {
         document.addEventListener("click", (event) => {
+            const autoRefreshToggle = event.target.closest(selectors.autoRefreshToggle);
+
+            if (autoRefreshToggle) {
+                const autoRefreshRoot = autoRefreshToggle.closest(selectors.autoRefresh);
+                const controller = autoRefreshRoot?._incAutoRefreshController;
+
+                if (controller) {
+                    event.preventDefault();
+                    toggleAutoRefresh(controller);
+                }
+
+                return;
+            }
+
             const menuToggle = event.target.closest(selectors.menuToggle);
 
             if (menuToggle) {
@@ -686,6 +977,7 @@
         initializeMenus();
         initializeCollapses();
         initializeTabs();
+        initializeAutoRefresh();
         attachEventHandlers();
     }
 

package/src/inc-design-language.scss

@@ -2787,6 +2787,88 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     gap: 0.75rem;
 }
 
+.inc-auto-refresh {
+    position: fixed;
+    right: max(1rem, env(safe-area-inset-right, 0px) + 1rem);
+    bottom: max(1rem, env(safe-area-inset-bottom, 0px) + 1rem);
+    z-index: $inc-z-index-alerts - 1;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid $inc-border-subtle;
+    border-radius: 999px;
+    background: rgba($inc-surface-primary, 0.96);
+    color: $body-color;
+    box-shadow: 0 0.75rem 1.5rem rgba($inc-surface-strong, 0.12);
+    font-size: 0.75rem;
+    line-height: 1.2;
+    white-space: nowrap;
+    backdrop-filter: blur(10px);
+
+    &--inline {
+        position: static;
+        right: auto;
+        bottom: auto;
+        z-index: auto;
+        vertical-align: middle;
+    }
+
+    &__countdown,
+    &__status {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        min-height: 1rem;
+    }
+
+    &__label,
+    &__status-text {
+        color: $text-muted;
+        font-weight: 600;
+    }
+
+    &__value {
+        font-family: $font-family-monospace;
+        font-variant-numeric: tabular-nums;
+        font-weight: 600;
+        color: $inc-surface-strong;
+    }
+
+    &__spinner {
+        display: inline-flex;
+        align-items: center;
+        color: $primary;
+    }
+
+    &__toggle {
+        flex: 0 0 auto;
+
+        &.inc-btn {
+            min-height: 1.625rem;
+            padding: 0.2rem 0.55rem;
+            font-size: 0.6875rem;
+            line-height: 1;
+        }
+    }
+
+    &__toggle-text {
+        display: inline-block;
+        min-width: 3.25rem;
+        text-align: center;
+    }
+
+    &.is-paused {
+        border-color: rgba($warning, 0.24);
+        box-shadow: 0 0.9rem 1.75rem rgba($warning, 0.1);
+    }
+
+    &.is-loading {
+        border-color: rgba($primary, 0.2);
+        box-shadow: 0 0.9rem 1.75rem rgba($primary, 0.14);
+    }
+}
+
 .inc-progress,
 .inc-meter {
     width: 100%;