update: alert popup

eliseekn · Sep 18, 2021 · f5bdb6b · f5bdb6b
1 parent 864d4c8
commit f5bdb6b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 24 deletions.
diff --git a/resources/scripts/components/alert-toast.js b/resources/scripts/components/alert-toast.js
@@ -8,26 +8,17 @@ class AlertToast extends HTMLElement {
     constructor() {
         super()
         this.icon = this.icon.bind(this)
-        this.message = this.message.bind(this)
     }
 
     icon() {
         switch(this.getAttribute('type')) {
-            case 'primary':
-                return '<i class="fa fa-info-circle text-primary"></i>'
-            case 'danger':
-                return '<i class="fa fa-times-circle text-danger"></i>'
-            case 'warning':
-                return '<i class="fa fa-exclamation-triangle text-warning"></i>'
-            default:
-                return '<i class="fa fa-check-circle text-success"></i>'
+            case 'primary': return '<i class="fa fs-4 fa-info-circle text-primary"></i>'
+            case 'danger': return '<i class="fa fs-4 fa-times-circle text-danger"></i>'
+            case 'warning': return '<i class="fa fs-4 fa-exclamation-triangle text-warning"></i>'
+            default: return '<i class="fa fs-4 fa-check-circle text-success"></i>'
         }
     }
 
-    message() {
-        return this.getAttribute('message')
-    }
-
     connectedCallback() {
         let element = document.createElement('div')
         element.id = 'alert-toast'
@@ -39,34 +30,33 @@ class AlertToast extends HTMLElement {
                         ${this.icon()}
 
                         <div class="d-flex flex-column px-2">
-                            <p class="modal-title mb-0">${this.message()}</p>
+                            <p class="modal-title mb-0">${this.getAttribute('message')}</p>
                         </div>
 
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                 </div>
             </div>
         `
 
         document.body.appendChild(element)
 
-        $('#alert-toast').modal({
+        let alert = new bootstrap.Modal(element, {
             backdrop: false,
             keyboard: false,
-            show: true
         })
 
-        $('#alert-toast').on('shown.bs.modal', function () {
-            window.setTimeout(function () {
-                $('#alert-toast').modal('hide');
-            }, 4000)
+        element.addEventListener('shown.bs.modal', () => {
+            window.setTimeout(() => {
+                alert.hide()
+            }, 3500)
         })
 
-        $('#alert-toast').on('hidden.bs.modal', function () {
+        element.addEventListener('hidden.bs.modal', () => {
             document.body.removeChild(element)
         })
+
+        alert.show()
     }
 }
 

diff --git a/resources/scripts/index.js b/resources/scripts/index.js
@@ -1,3 +1,4 @@
+import '../vendor/bootstrap-5.1.1-dist/bootstrap.bundle.min.js'
 import './components/spinner-button'
 import './components/password-toggler'
 import AlertToast from './components/alert-toast'