Add proper handling of the close event handler in UINotification

Author: jelveh

src/UI/UIDesktop.js

@@ -117,7 +117,7 @@ async function UIDesktop(options){
             title: notification.title,
             text: notification.text,
             icon: icon,
-            click: async () => {
+            close: async () => {
                 await fetch(`${window.api_origin}/notif/mark-ack`, {
                     method: 'POST',
                     headers: {
@@ -143,7 +143,7 @@ async function UIDesktop(options){
                 icon,
                 title: notification.title,
                 text: notification.text ?? notification.title,
-                click: async () => {
+                close: async () => {
                     await fetch(`${window.api_origin}/notif/mark-ack`, {
                         method: 'POST',
                         headers: {
@@ -1085,6 +1085,28 @@ async function UIDesktop(options){
             }
         })
     }
+
+    // fetch notifications
+    fetch(puter.APIOrigin + "/drivers/call", {
+        "headers": {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${puter.authToken}`,
+        },
+        "body": JSON.stringify({
+            interface: 'puter-notifications',
+            method: 'select',
+            args: {}
+        }),
+        "method": "POST",
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data && data.result && data.result.length > 0){
+            data.data?.forEach(notification => {
+                UINotification(notification);
+            })
+        }
+    })
 }
 
 $(document).on('contextmenu taphold', '.taskbar', function(event){
@@ -1303,7 +1325,7 @@ $(document).on('click', '.user-options-menu-btn', async function(e){
                 }
             },
         ]
-    });    
+    }); 
 })
 
 $(document).on('click', '.fullscreen-btn', async function (e) {

src/UI/UINotification.js

@@ -48,6 +48,7 @@ function UINotification(options){
         }
     })
 
+    // Notification Clicked
     $(el_notification).on('click', function(e){
         // close button clicked
         if($(e.target).hasClass('notification-close')){
@@ -58,8 +59,55 @@ function UINotification(options){
         if(options.click && typeof options.click === 'function'){
             options.click(options.value);
         }
+
+        // close notification
+        close_notification(el_notification);
     })
 
+    // Close Button Clicked
+    $(el_notification).find('.notification-close').on('click', function(e, data){
+        let closingMultiple = false;
+        if(data?.closingAll)
+            closingMultiple = true;
+
+        close_notification(el_notification, closingMultiple);
+        e.stopPropagation();
+        e.preventDefault();
+        return false;    
+    });
+
+    const close_notification = function(el_notification, closingMultiple = false){
+        // hide notification wrapper by animating height and opacity
+        // only if closing one notification and there are multiple notifications
+        // otherwise the animation is not needed
+        if(!closingMultiple && $('.notification').length > 1){
+            $(el_notification).closest('.notification-wrapper').animate({
+                height: 0,
+                opacity: 0
+            }, 300);
+        }
+
+        // hide notification by fading out to the right
+        $(el_notification).addClass('animate__fadeOutRight');
+    
+        // close callback
+        if(options.close && typeof options.close === 'function'){
+            options.close(options.value);
+        }
+
+        // remove notification and wrapper after animation
+        setTimeout(function(){
+            $(el_notification).closest('.notification-wrapper').remove();
+            $(el_notification).remove();
+            // count notifications
+            let count = $('.notification-container').find('.notification-wrapper').length;
+            if(count <= 1){
+                $('.notification-container').removeClass('has-multiple');
+            }else{
+                $('.notification-container').addClass('has-multiple');
+            }
+        }, 500);
+    }
     // Show Notification
     $(el_notification).delay(100).show(0);
 
@@ -74,52 +122,19 @@ function UINotification(options){
     return el_notification;
 }
 
-$(document).on('click', '.notification', function(e){
-    if($(e.target).hasClass('notification')){
-        window.close_notification(e.target);
-    }else{
-        window.close_notification($(e.target).closest('.notification'));
-    }
-});
-
-$(document).on('click', '.notification-close', function(e){
-    window.close_notification($(e.target).closest('.notification'));
-    e.stopPropagation();
-    e.preventDefault();
-    return false;
-});
-
 $(document).on('click', '.notifications-close-all', function(e){
-    $('.notification-container').find('.notification-wrapper').each(function(){
-        window.close_notification(this);
-    });
+    // close all notifications
+    $('.notification-container').find('.notification-close').trigger('click', {closingAll: true});
+    // hide 'Close all' button
     $('.notifications-close-all').animate({
         opacity: 0
     }, 300);
+    // remove the 'has-multiple' class
     $('.notification-container').removeClass('has-multiple');
+    // prevent default
     e.stopPropagation();
     e.preventDefault();
     return false;
 })
-window.close_notification = function(el_notification){
-    $(el_notification).closest('.notification-wrapper').animate({
-        height: 0,
-        opacity: 0
-    }, 300);
-    $(el_notification).addClass('animate__fadeOutRight');
-
-    // remove notification
-    setTimeout(function(){
-        $(el_notification).closest('.notification-wrapper').remove();
-        $(el_notification).remove();
-        // count notifications
-        let count = $('.notification-container').find('.notification-wrapper').length;
-        if(count <= 1){
-            $('.notification-container').removeClass('has-multiple');
-        }else{
-            $('.notification-container').addClass('has-multiple');
-        }
-    }, 500);
-}
 
 export default UINotification;