add "fade up?!" animation to disappearing notifications

src/UI/UINotification.js

@@ -29,7 +29,7 @@ function UINotification(options){
     h += `<div id="ui-notification__${window.global_element_id}" data-el-id="${window.global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`;
         h += `<img class="notification-close" src="${html_encode(window.icons['close.svg'])}">`;
         h += `<div class="notification-icon">`;
-            h += `<img src="${html_encode(options.icon)}">`;
+            h += `<img src="${html_encode(options.icon ?? window.icons['bell.svg'])}">`;
         h += `</div>`;
         h += `<div class="notification-content">`;
             h += `<div class="notification-title">${html_encode(options.title)}</div>`;
@@ -42,6 +42,9 @@ function UINotification(options){
 
     const el_notification = document.getElementById(`ui-notification__${window.global_element_id}`);
 
+    // now wrap it in a div
+    $(el_notification).wrap('<div class="notification-wrapper"></div>');
+
     $(el_notification).show(0, function(e){
         // options.onAppend()
         if(options.onAppend && typeof options.onAppend === 'function'){
@@ -50,6 +53,12 @@ function UINotification(options){
     })
 
     $(el_notification).on('click', function(e){
+        // close button clicked
+        if($(e.target).hasClass('notification-close')){
+            return;
+        }
+
+        // click event
         if(options.click && typeof options.click === 'function'){
             options.click(options.value);
         }
@@ -62,10 +71,6 @@ function UINotification(options){
 
 $(document).on('click', '.notification', function(e){
     if($(e.target).hasClass('notification')){
-        // TODO: options isn't available here
-        // if(options.click && typeof options.click === 'function'){
-        //     options.click(e);
-        // }
         window.close_notification(e.target);
     }else{
         window.close_notification($(e.target).closest('.notification'));
@@ -74,15 +79,22 @@ $(document).on('click', '.notification', function(e){
 
 $(document).on('click', '.notification-close', function(e){
     window.close_notification($(e.target).closest('.notification'));
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
 });
 
 
 window.close_notification = function(el_notification){
+    $(el_notification).closest('.notification-wrapper').animate({
+        height: 0,
+        opacity: 0
+    }, 200);
     $(el_notification).addClass('animate__fadeOutRight');
 
-
     // remove notification
     setTimeout(function(){
+        $(el_notification).closest('.notification-wrapper').remove();
         $(el_notification).remove();
     }, 300);
 }

src/css/style.css

@@ -2432,8 +2432,10 @@ label {
 /*****************************************************
  * Notification
  *****************************************************/
-.notification {
+.notification, .notification-wrapper{
     width: 320px;
+}
+.notification {
     min-height: 54px;
     background: #ffffffcd;
     backdrop-filter: blur(5px);

src/icons/bell.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="59px" height="59px" stroke-width="0.5" viewBox="0 0 24 24" fill="none"
+    xmlns="http://www.w3.org/2000/svg" color="#49525b">
+    <path
+        d="M18 8.4C18 6.70261 17.3679 5.07475 16.2426 3.87452C15.1174 2.67428 13.5913 2 12 2C10.4087 2 8.88258 2.67428 7.75736 3.87452C6.63214 5.07475 6 6.70261 6 8.4C6 15.8667 3 18 3 18H21C21 18 18 15.8667 18 8.4Z"
+        stroke="#49525b" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path
+        d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21"
+        stroke="#49525b" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>