From 695d3b82b53d1e45a2bdcbadaec570098849695d Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 14 Mar 2024 09:10:32 +0100
Subject: [PATCH] Add toast timeout functionality

---
 resources/views/components/toast.blade.php | 32 +++++++++++++++++-----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/resources/views/components/toast.blade.php b/resources/views/components/toast.blade.php
index 64f07b8b4..7f07929b7 100644
--- a/resources/views/components/toast.blade.php
+++ b/resources/views/components/toast.blade.php
@@ -27,6 +27,7 @@
         <ul x-data="{
             toasts: [],
             toastsHovered: false,
+            timeout: null,
             expanded: false,
             layout: 'default',
             position: 'top-center',
@@ -286,14 +287,12 @@
             }
             stackToasts();
             $watch('toastsHovered', function(value) {
-
                 if (layout == 'default') {
                     if (position.includes('bottom')) {
                         resetBottom();
                     } else {
                         resetTop();
                     }
-
                     if (value) {
                         // calculate the new positions
                         expanded = true;
@@ -319,13 +318,32 @@
 
             <template x-for="(toast, index) in toasts" :key="toast.id">
                 <li :id="toast.id" x-data="{
-                    toastHovered: false
+                    toastHovered: false,
                 }" x-init="if (position.includes('bottom')) {
                     $el.firstElementChild.classList.add('toast-bottom');
                     $el.firstElementChild.classList.add('opacity-0', 'translate-y-full');
                 } else {
                     $el.firstElementChild.classList.add('opacity-0', '-translate-y-full');
                 }
+                $watch('toastsHovered', function(value) {
+                    if (value && this.timeout) {
+                        clearTimeout(this.timeout);
+                    } else {
+                        this.timeout = setTimeout(function() {
+                            setTimeout(function() {
+                                $el.firstElementChild.classList.remove('opacity-100');
+                                $el.firstElementChild.classList.add('opacity-0');
+                                if (toasts.length == 1) {
+                                    $el.firstElementChild.classList.remove('translate-y-0');
+                                    $el.firstElementChild.classList.add('-translate-y-full');
+                                }
+                                setTimeout(function() {
+                                    deleteToastWithId(toast.id)
+                                }, 300);
+                            }, 5);
+                        }, 2000)
+                    }
+                });
                 setTimeout(function() {
 
                     setTimeout(function() {
@@ -342,7 +360,7 @@
                     }, 5);
                 }, 50);
 
-                setTimeout(function() {
+                this.timeout = setTimeout(function() {
                     setTimeout(function() {
                         $el.firstElementChild.classList.remove('opacity-100');
                         $el.firstElementChild.classList.add('opacity-0');
@@ -390,12 +408,12 @@
                                             d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z"
                                             fill="currentColor"></path>
                                     </svg>
-                                    <p class="leading-2 text-neutral-200"
-                                        x-html="toast.message">
+                                    <p class="leading-2 text-neutral-200" x-html="toast.message">
                                     </p>
                                 </div>
                                 <p x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }"
-                                    class="mt-1.5 text-xs leading-2 opacity-90 whitespace-pre-wrap" x-html="toast.description"></p>
+                                    class="mt-1.5 text-xs leading-2 opacity-90 whitespace-pre-wrap"
+                                    x-html="toast.description"></p>
                             </div>
                         </template>
                         <template x-if="toast.html">