]> jfr.im git - irc/unrealircd/unrealircd-webpanel.git/commitdiff
Make toast notifications stack
authorValerie Pond <redacted>
Thu, 13 Apr 2023 20:31:54 +0000 (21:31 +0100)
committerValerie Pond <redacted>
Thu, 13 Apr 2023 20:31:54 +0000 (21:31 +0100)
header.php
js/unrealircd-admin.js

index b8b631111bf759a3194e6b59aecad58cdda8da61..1d9ccb2579a94916f0c8c299ae495326876bace2 100644 (file)
@@ -27,7 +27,11 @@ $arr = []; Hook::run(HOOKTYPE_PRE_HEADER, $arr); ?>
 <link rel="icon" type="image/x-icon" href="<?php echo get_config("base_url"); ?>img/favicon.ico">
 </head>
 <body role="document">
-
+<div aria-live="polite" aria-atomic="true">
+  <div id="toaster" style="right: 0; bottom: 50px; z-index: 5;" class="position-fixed bottom-0 right-0 p-4">
+       <!-- insert your javascript bread in here to make toast -->
+  </div>
+</div>
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
@@ -46,6 +50,7 @@ $arr = []; Hook::run(HOOKTYPE_PRE_HEADER, $arr); ?>
                        xhttp.open("GET", BASE_URL + "api/timeout.php", true);
                        xhttp.send();
                }
+
                timeoutCheck();
                StartStreamNotifs(BASE_URL + "api/notification.php");
                setInterval(timeoutCheck, 15000);
@@ -184,5 +189,5 @@ if ($user)
        </nav><br>
 </div>
 
-<div id="main_contain" class="container-fluid" style="padding-left: 210px" role="main">
+<div id="main_contain" class="container-fluid" style="padding-left: 180px" role="main">
 
index 8c7ee0c867cfd89f893602a1f24777bf88e2b4c2..ee370b12b74866239fcb3813b36ad9398458f666 100644 (file)
@@ -71,18 +71,12 @@ function generate_notif(title, body)
     const id = Math.floor(Math.random() * (max - min + 1)) + min;
 
     const toast = document.createElement('div');
-    toast.classList.add('position-fixed', 'bottom-0', 'right-0', 'p-4');
-    toast.style.right = 0;
-    toast.style.zIndex = 5;
-    toast.style.bottom = "50px";
-
-    const inner = document.createElement('div');
-    inner.classList.add('toast', 'hide');
-    inner.id = 'toast' + id;
-    inner.role = 'alert';
-    inner.ariaLive = 'assertive';
-    inner.ariaAtomic = 'true';
-    inner.setAttribute('data-delay', '5000');
+    toast.classList.add('toast', 'hide');
+    toast.id = 'toast' + id;
+    toast.role = 'alert';
+    toast.ariaLive = 'assertive';
+    toast.ariaAtomic = 'true';
+    toast.setAttribute('data-delay', '5000');
 
     const header = document.createElement('div');
     header.classList.add('toast-header');
@@ -114,13 +108,13 @@ function generate_notif(title, body)
     header.appendChild(theTitle);
     header.appendChild(notiftime);
     header.appendChild(closebutton);
-    inner.appendChild(header);
-    inner.appendChild(toastbody);
-    toast.appendChild(inner);
+    toast.appendChild(header);
+    toast.appendChild(toastbody);
+    document.getElementById('toaster').append(toast);
 
-    document.body.appendChild(toast);
-    $('#' + inner.id).toast('show');
+    $('#' + toast.id).toast('show');
 }
+
 $("#myModal").on('shown.bs.modal', function(){
     $("#CloseButton").focus();
 });