Fix message parts view and the download of attachements

cypht-org · Oct 19, 2024 · fd2d675 · fd2d675
1 parent c39f4f0
commit fd2d675
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 9 deletions.
diff --git a/modules/core/js_modules/utils/loaders.js b/modules/core/js_modules/utils/loaders.js
@@ -0,0 +1,22 @@
+function showLoaderToast(text = 'Loading...') {
+    const uniqueId = Math.random().toString(36).substring(7);
+    const toastHTML = `
+    <div class="position-fixed bottom-0 start-0 p-3" style="z-index: 11">
+        <div class="toast bg-primary text-white" id="${uniqueId}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
+        <div class="toast-body">
+            <div class="d-flex align-items-center">
+                <strong>${text}</strong>
+                <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
+            </div>
+        </div>
+        </div>
+    </div>
+    `
+
+    document.body.insertAdjacentHTML('beforeend', toastHTML)
+
+    const instance = bootstrap.Toast.getOrCreateInstance(document.getElementById(uniqueId));
+    instance.show();    
+
+    return instance;
+}
diff --git a/modules/core/navigation/utils.js b/modules/core/navigation/utils.js
@@ -13,11 +13,11 @@ const toastHTML = `
 document.body.insertAdjacentHTML('beforeend', toastHTML)
 
 function showRoutingToast() {
-    bootstrap.Toast.getOrCreateInstance(document.getElementById('routing-toast')).show()
+    window.routingToast = showLoaderToast('Redirecting...');
 }
 
 function hideRoutingToast() {
-    bootstrap.Toast.getOrCreateInstance(document.getElementById('routing-toast')).hide()
+    window.routingToast.hide();
 }
 
 function getListPathParam() {

diff --git a/modules/core/site.css b/modules/core/site.css
@@ -10,7 +10,6 @@ body {
 .compose_page,
 .message_list,
 .msg_text,
-.selected_part,
 .server_content,
 .profile_content,
 .user_settings,

diff --git a/modules/imap/functions.php b/modules/imap/functions.php
@@ -468,7 +468,7 @@ function format_msg_part_row($id, $vals, $output_mod, $level, $part, $dl_args, $
     if ($mobile) {
         $res .= '<div class="part_size">'.$output_mod->html_safe($size);
         $res .= '</div><div class="part_desc">'.$output_mod->html_safe(decode_fld($desc)).'</div>';
-        $res .= '<div class="download_link"><a href="?'.$dl_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'">'.$output_mod->trans('Download').'</a></div></td>';
+        $res .= '<div class="download_link"><a href="#" data-src="?'.$dl_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'">'.$output_mod->trans('Download').'</a></div></td>';
     }
     else {
         $res .= '</td><td class="part_size">'.$output_mod->html_safe($size);
@@ -477,10 +477,10 @@ function format_msg_part_row($id, $vals, $output_mod, $level, $part, $dl_args, $
                 '</td><td class="part_charset">'.(isset($vals['attributes']['charset']) && trim($vals['attributes']['charset']) ? $output_mod->html_safe(mb_strtolower($vals['attributes']['charset'])) : '');
         }
         $res .= '</td><td class="part_desc">'.$output_mod->html_safe(decode_fld($desc)).'</td>';
-        $res .= '<td class="download_link"><a href="?'.$dl_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'">'.$output_mod->trans('Download').'</a></td>';
+        $res .= '<td class="download_link"><a href="#" data-src="?'.$dl_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'">'.$output_mod->trans('Download').'</a></td>';
     }
     if ($output_mod->get('allow_delete_attachment') && isset($vals['file_attributes']['attachment'])) {
-        $res .= '<td><a href="?'.$at_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'" class="remove_attachment">'.$output_mod->trans('Remove').'</a></td>';
+        $res .= '<td><a href="#" data-src="?'.$at_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'" class="remove_attachment">'.$output_mod->trans('Remove').'</a></td>';
     }
     $res .= '</tr>';
     return $res;
@@ -641,7 +641,7 @@ function format_attachment($struct,  $output_mod, $part, $dl_args, $at_args) {
             $res .= '<tr><td class="part_desc" colspan="4">'.$output_mod->html_safe(decode_fld($desc)).'</td>';
             $res .= '</td><td class="part_size">'.$output_mod->html_safe($size).'</td>';
 
-            $res .= '<td class="download_link"><a href="?'.$dl_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'">'.$output_mod->trans('Download').'</a></td>';
+            $res .= '<td class="download_link"><a href="#" data-src="?'.$dl_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'">'.$output_mod->trans('Download').'</a></td>';
             if ($output_mod->get('allow_delete_attachment') && isset($vals['file_attributes']['attachment'])) {
                 $res .= '<td><a href="?'.$at_args.'&amp;imap_msg_part='.$output_mod->html_safe($id).'" class="remove_attachment">'.$output_mod->trans('Remove').'</a></td></tr>';
             }

diff --git a/modules/imap/js_modules/route_handlers.js b/modules/imap/js_modules/route_handlers.js
@@ -6,6 +6,8 @@ function applyImapMessageListPageHandlers(routeParams) {
     imap_setup_snooze();
     imap_setup_tags();
 
+    Hm_Message_List.set_row_events();
+
     $('.core_msg_control').on("click", function(e) {
         e.preventDefault();
         Hm_Message_List.message_action($(this).data('action')); 

diff --git a/modules/imap/js_modules/utils/attachements.js b/modules/imap/js_modules/utils/attachements.js
@@ -0,0 +1,21 @@
+function handleAttachementDownload() {
+    $('.download_link a').on("click", async function(e) {
+        e.preventDefault();
+        const loaderInstance = showLoaderToast("Downloading attachment...");
+        const href = $(this).data('src');
+        try {
+            await fetch(href).then(res => res.blob()).then(blob => {
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'attachment';
+                a.click();
+                URL.revokeObjectURL(url);
+            });
+        } catch (error) {
+            Hm_Notices.show([`ERR${error.message}`]);
+        } finally {
+            loaderInstance.hide();
+        }
+    });
+}
diff --git a/modules/imap/js_modules/utils/messageParts.js b/modules/imap/js_modules/utils/messageParts.js
@@ -0,0 +1,7 @@
+function handleViewMessagePart() {
+    $('.msg_part_link').on("click", function(e) {
+        e.preventDefault();
+        const messagePart = $(this).data('messagePart');
+        get_message_content(messagePart, getMessageUidParam() ?? inline_msg_uid, getListPathParam());
+    });
+}
diff --git a/modules/imap/site.js b/modules/imap/site.js
@@ -687,7 +687,7 @@ var get_message_content = function(msg_part, uid, list_path, detail, callback, n
             {'name': 'folder', 'value': detail.folder}],
             function(res) {
                 onSuccess(res);
-                if (!noupdate) {
+                if (!noupdate && !msg_part) {
                     Hm_Utils.save_to_local_storage(getMessageStorageKey(uid), JSON.stringify(res));
                 }
             },
@@ -849,6 +849,9 @@ var imap_message_view_finished = function(msg_uid, detail, skip_links) {
         return block_unblock_sender(msg_uid, detail, $(this).data('target'), 'unblock', sender);
     });
     fixLtrInRtl();
+
+    handleAttachementDownload();
+    handleViewMessagePart();
 };
 
 var get_local_message_content = function(msg_uid, path) {

diff --git a/modules/inline_message/site.js b/modules/inline_message/site.js
@@ -125,7 +125,6 @@ var capture_subject_click = function() {
         var inline_msg_loaded_callback = function() {
             $('.header_subject th').append('<i class="bi bi-x-lg close_inline_msg"></i>');
             $('.close_inline_msg').on("click", function() { msg_inline_close(); });
-            $('.msg_part_link').on("click", function() { return get_message_content($(this).data('messagePart'), uid, list_path, details, inline_msg_loaded_callback, false, $(this).data('allowImages')); });
             update_imap_links(uid, details);
         };