feat: allow showing multiple snackbar messages at the same time

razonyang · Jan 20, 2023 · 5e341d6 · 5e341d6
1 parent c84d08b
commit 5e341d6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/assets/js/snackbar/index.ts b/assets/js/snackbar/index.ts
@@ -1,26 +1,21 @@
 class Snackbar {
-  element: HTMLElement;
+  container: HTMLElement;
 
   constructor() {
-    const e = document.createElement('div');
-    e.className =
-      'snackbar opacity-0 position-fixed w-100 d-flex justify-content-center';
-    document.body.appendChild(e);
-    this.element = e;
+    const container = document.createElement('div');
+    container.className = 'snackbar-container position-fixed d-flex justify-content-center align-items-center top-50 start-50 flex-column';
+    document.body.appendChild(container);
+    this.container = container;
   }
 
   show(body: string, duration = 2000) {
-    this.element.innerHTML =
-      '<div class="snackbar-body text-bg-secondary rounded px-3 py-2">' +
-      body +
-      '</div>';
-    this.element.classList.add('show');
+    const ele = document.createElement('div')
+    ele.className = 'snackbar text-bg-secondary rounded px-3 py-2 my-1'
+    ele.innerText = body
+    this.container.appendChild(ele)
     setTimeout(() => {
-      this.element.classList.remove('show');
-      setTimeout(() => {
-        this.element.innerHTML = '';
-      }, 1000)
-    }, duration);
+      ele.remove()
+    }, duration)
   }
 }
 

diff --git a/purgecss.config.js b/purgecss.config.js
@@ -21,16 +21,16 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       'col-xxl-10',
       'd-flex',
       'end-0',
-      'fs-lg', 'fs-sm', 'fs-xl', 'fs-xs', 'fst-italic',
+      'flex-column', 'fs-lg', 'fs-sm', 'fs-xl', 'fs-xs', 'fst-italic',
       'justify-content-center',
-      'm-1', 'mb-0', 'mb-1', 'my-2', 'mx-2', 'mb-2',
+      'm-1', 'mb-0', 'mb-1', 'my-1', 'my-2', 'mx-2', 'mb-2',
       'list-unstyled',
       'offcanvas-backdrop',
       'opacity-0', 'opacity-50', 'opacity-100', 'overflow-hidden',
       'p-1', 'pb-0', 'pe-3', 'pt-0', 'pt-1', 'px-2', 'py-1', 'px-3', 'py-2', 'p-2', 'position-absolute', 'position-fixed', 'position-relative', 'position-sticky',
       'rounded', 'rounded-top',
-      'show',
-      'text-nowrap', 'text-pre-wrap', 'text-uppercase', 'text-white', 'top-0', 'text-bg-secondary', 'text-success', 'text-truncate',
+      'show', 'start-50',
+      'text-nowrap', 'text-pre-wrap', 'text-uppercase', 'text-white', 'top-0', 'top-50', 'text-bg-secondary', 'text-success', 'text-truncate',
       'user-select-all',
       'w-100',
       'was-validated',