From 945c5ff337aaed2552bc172dc13988042ac35342 Mon Sep 17 00:00:00 2001 From: David-Muhasa Date: Sun, 21 Jul 2024 12:23:15 +0200 Subject: [PATCH] As part of, or after Bootstrap 5: Cypht: Add a spinner at least until some messages are shown --- modules/core/output_modules.php | 8 +++- modules/core/site.css | 16 ++++++++ modules/core/site.js | 66 +++++++++++++++++---------------- modules/feeds/site.js | 5 ++- modules/github/site.js | 2 +- modules/imap/site.js | 7 ++-- modules/nasa/site.js | 4 +- modules/nux/site.js | 4 +- modules/saved_searches/site.js | 4 +- modules/smtp/site.js | 49 ++++++++++++------------ 10 files changed, 100 insertions(+), 65 deletions(-) diff --git a/modules/core/output_modules.php b/modules/core/output_modules.php index aa65f9e136..da151c0168 100644 --- a/modules/core/output_modules.php +++ b/modules/core/output_modules.php @@ -650,7 +650,13 @@ class Hm_Output_loading_icon extends Hm_Output_Module { * Sort of ugly loading icon animated with js/css */ protected function output() { - return '
'; + return ' +
+ '; } } diff --git a/modules/core/site.css b/modules/core/site.css index 0f0cfb08ba..d3cea9f077 100644 --- a/modules/core/site.css +++ b/modules/core/site.css @@ -255,6 +255,22 @@ td { height: 6px; z-index: 1001; } +.loading_spinner { + background-color: rgba(0, 0, 0, 0.6); + text-align: center; + display: none; + position: fixed; + right: 0px; + top: 0px; + left: 12%; + z-index: 1001; + min-height: 100%; + padding-top: 20%; + color: #ccc; + width: 100%; + z-index: 1001; +} + .logout { margin: 2px; margin-left: 5px; diff --git a/modules/core/site.js b/modules/core/site.js index a195f14244..fcd42f9e05 100644 --- a/modules/core/site.js +++ b/modules/core/site.js @@ -99,7 +99,7 @@ var Hm_Ajax = { return; }, - request: function(args, callback, extra, no_icon, batch_callback, on_failure) { + request: function(args, callback, extra, on_loading = false, batch_callback, on_failure) { var bcb = false; if (typeof batch_callback != 'undefined' && $.inArray(batch_callback, this.batch_callbacks) === -1) { bcb = batch_callback.toString(); @@ -111,34 +111,27 @@ var Hm_Ajax = { Hm_Ajax.batch_callbacks[bcb] = 1; } } - var name = Hm_Ajax.get_ajax_hook_name(args); + var name = Hm_Ajax.get_ajax_hook_name(args) var ajax = new Hm_Ajax_Request(); - if (!no_icon) { - Hm_Ajax.show_loading_icon(); - $('body').addClass('wait'); - } Hm_Ajax.active_reqs++; - return ajax.make_request(args, callback, extra, name, on_failure, batch_callback); + return ajax.make_request(args, callback, extra, name, on_failure, batch_callback, on_loading); }, show_loading_icon: function() { - if (Hm_Ajax.icon_loading_id !== false) { - return; - } - var hm_loading_pos = $('.loading_icon').width()/40; - $('.loading_icon').show(); - function move_background_image() { - hm_loading_pos = hm_loading_pos + 50; - $('.loading_icon').css('background-position', hm_loading_pos+'px 0'); - Hm_Ajax.icon_loading_id = setTimeout(move_background_image, 100); - } - move_background_image(); + Hm_Ajax.icon_loading_id = true; + $('.loading_bar').show(); + $('.loading_spinner').show(); + $('body').addClass('wait'); + let width_nav_folder_cell= $('nav[class="folder_cell"]').css('width'); + $('.loading_spinner').css('left', width_nav_folder_cell); + }, stop_loading_icon : function(loading_id) { - clearTimeout(loading_id); - $('.loading_icon').hide(); Hm_Ajax.icon_loading_id = false; + $('.loading_bar').hide(); + $('.loading_spinner').hide(); + $('body').removeClass('wait'); }, process_callback_hooks: function(name, res) { @@ -172,27 +165,36 @@ var Hm_Ajax_Request = function() { return { on_failure: false, start_time: 0, - xhr_fetch: function(config) { + xhr_fetch: function(config, on_loading) { var xhr = new XMLHttpRequest(); var data = ''; if (config.data) { data = this.format_xhr_data(config.data); } xhr.open('POST', window.location.href) + Hm_Ajax.stop_loading_icon(); + xhr.addEventListener('loadstart', function () { + if (!on_loading) { + Hm_Ajax.show_loading_icon(); + } + }); xhr.addEventListener('load', function() { config.callback.done(Hm_Utils.json_decode(xhr.response, true), xhr); config.callback.always(Hm_Utils.json_decode(xhr.response, true)); }); xhr.addEventListener('error', function() { - Hm_Ajax.stop_loading_icon(Hm_Ajax.icon_loading_id); + Hm_Ajax.stop_loading_icon(); config.callback.fail(xhr); config.callback.always(Hm_Utils.json_decode(xhr.response, true)); }); xhr.addEventListener('abort', function() { - Hm_Ajax.stop_loading_icon(Hm_Ajax.icon_loading_id); + Hm_Ajax.stop_loading_icon(); config.callback.always(Hm_Utils.json_decode(xhr.response, true)); }); + xhr.addEventListener('loadend',function () { + Hm_Ajax.stop_loading_icon(); + }); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('X-Requested-with', 'xmlhttprequest'); xhr.send(data); @@ -206,7 +208,7 @@ var Hm_Ajax_Request = function() { return { return res.join('&'); }, - make_request: function(args, callback, extra, request_name, on_failure, batch_callback) { + make_request: function(args, callback, extra, request_name, on_failure, batch_callback, on_loading) { var name; var arg; this.batch_callback = batch_callback; @@ -232,7 +234,7 @@ var Hm_Ajax_Request = function() { return { } var dt = new Date(); this.start_time = dt.getTime(); - this.xhr_fetch({url: '', data: args, callback: this}); + this.xhr_fetch({url: '', data: args, callback: this},on_loading); return false; }, @@ -297,7 +299,7 @@ var Hm_Ajax_Request = function() { return { if (this.batch_callback) { if (typeof Hm_Ajax.batch_callbacks[this.batch_callback.toString()] != 'undefined') { batch_count = --Hm_Ajax.batch_callbacks[this.batch_callback.toString()]; - } + } } Hm_Message_List.set_row_events(); if (batch_count === 0) { @@ -306,11 +308,11 @@ var Hm_Ajax_Request = function() { return { Hm_Ajax.p_callbacks = []; this.batch_callback(res); this.batch_callback = false; - Hm_Ajax.stop_loading_icon(Hm_Ajax.icon_loading_id); + Hm_Ajax.stop_loading_icon(); $('body').removeClass('wait'); } if (Hm_Ajax.active_reqs == 0) { - Hm_Ajax.stop_loading_icon(Hm_Ajax.icon_loading_id); + Hm_Ajax.stop_loading_icon(); $('body').removeClass('wait'); } res = null; @@ -1321,7 +1323,9 @@ var Hm_Folders = { $('.search_terms').val(hm_search_terms()); } $('.search_terms').on('search', function() { - Hm_Ajax.request([{'name': 'hm_ajax_hook', 'value': 'ajax_reset_search'}]); + Hm_Ajax.request([{'name': 'hm_ajax_hook', 'value': 'ajax_reset_search'}],function () { + + },[],true); }); }, @@ -1673,7 +1677,7 @@ var Hm_Utils = { $('.offline').hide(); Hm_Ajax.request( [{'name': 'hm_ajax_hook', 'value': 'ajax_test'}], - false, [], false, false, false); + false, [], true, false, false); }, is_element_visible: function (elem) { @@ -2535,7 +2539,7 @@ function getServiceDetails(providerKey){ } }, [], - false + true ); } } diff --git a/modules/feeds/site.js b/modules/feeds/site.js index 89f8fe5cf6..ca0e8cfaca 100644 --- a/modules/feeds/site.js +++ b/modules/feeds/site.js @@ -7,7 +7,8 @@ var feed_test_action = function(event) { Hm_Ajax.request( form.serializeArray(), function() {}, - {'feed_connect': 1} + {'feed_connect': 1}, + true ); }; @@ -40,7 +41,7 @@ var feeds_search_page_content = function(id) { {'name': 'feed_server_ids', 'value': id}], display_feeds_search_result, [], - false, + true, Hm_Message_List.set_search_state ); } diff --git a/modules/github/site.js b/modules/github/site.js index 8a3154fa41..c1b560a877 100644 --- a/modules/github/site.js +++ b/modules/github/site.js @@ -16,7 +16,7 @@ var load_github_data = function(id) { }; var load_github_data_background = function(id) { - Hm_Ajax.request([{'name': 'hm_ajax_hook', 'value': 'ajax_github_data'}, {'name': 'github_unread', 'value': 1}, {'name': 'github_repo', 'value': id}], display_github_data_background); + Hm_Ajax.request([{'name': 'hm_ajax_hook', 'value': 'ajax_github_data'}, {'name': 'github_unread', 'value': 1}, {'name': 'github_repo', 'value': id}], display_github_data_background,[],true); }; var display_github_data_background = function(res) { diff --git a/modules/imap/site.js b/modules/imap/site.js index 711c36b530..d18ea34ad9 100644 --- a/modules/imap/site.js +++ b/modules/imap/site.js @@ -37,7 +37,7 @@ var imap_hide_action = function(form, server_id, hide) { $('.hide_imap_connection', form).show(); } Hm_Folders.reload_folders(true); - } + },[],true ); }; @@ -110,7 +110,8 @@ var imap_test_action = function(event) { Hm_Ajax.request( form.serializeArray(), false, - {'imap_connect': 1} + {'imap_connect': 1}, + true ); } @@ -1037,7 +1038,7 @@ var imap_background_unread_content = function(id, folder) { {'name': 'imap_server_ids', 'value': id}], imap_background_unread_content_result, [], - false, + true, function() { var cache = $('').append($(Hm_Utils.get_from_local_storage('formatted_unread_data'))); Hm_Message_List.adjust_unread_total($('tr', cache).length, true); diff --git a/modules/nasa/site.js b/modules/nasa/site.js index 17aa7cb9ac..5635c277a4 100644 --- a/modules/nasa/site.js +++ b/modules/nasa/site.js @@ -20,7 +20,9 @@ var nasa_connect = function(event) { Hm_Ajax.request( [{'name': 'hm_ajax_hook', 'value': 'ajax_nasa_connect'}, {'name': 'api_key', 'value': key}], - nasa_connect_result + nasa_connect_result, + [], + true ); } return false; diff --git a/modules/nux/site.js b/modules/nux/site.js index 91b29dcedc..57de06a566 100644 --- a/modules/nux/site.js +++ b/modules/nux/site.js @@ -54,7 +54,9 @@ var display_final_nux_step = function(res) { {'name': 'imap_service_name', value: res.nux_service_name}], function () { Hm_Utils.redirect(); - } + }, + [], + true ); } else { Hm_Utils.redirect(); diff --git a/modules/saved_searches/site.js b/modules/saved_searches/site.js index d2a323f295..179275e1ec 100644 --- a/modules/saved_searches/site.js +++ b/modules/saved_searches/site.js @@ -25,7 +25,7 @@ var delete_search = function(event) { Hm_Ajax.request( [{'name': 'hm_ajax_hook', 'value': 'ajax_delete_search'}, {'name': 'search_name', 'value': name}], - search_delete_results + search_delete_results,[],true ); } return false; @@ -55,7 +55,7 @@ var update_save_search_label = function(event) { {'name': 'search_terms_label', 'value': $('.search_terms_label').val()}, {'name': 'old_search_terms_label', 'value': $('.old_search_terms_label').val()}, {'name': 'search_name', 'value': $('.search_terms').val()}], - update_save_search_label_results + update_save_search_label_results, [], true ); } return false; diff --git a/modules/smtp/site.js b/modules/smtp/site.js index e08c0df92b..85a199fe3d 100644 --- a/modules/smtp/site.js +++ b/modules/smtp/site.js @@ -1,6 +1,6 @@ 'use strict'; -var get_smtp_profile = function(profile_value) { +var get_smtp_profile = function(profile_value, on_loading=true) { if (typeof profile_value === "undefined" || profile_value == "0" || profile_value == "") { Hm_Notices.show([err_msg('Please create a profile for saving sent messages option')]); } @@ -9,7 +9,8 @@ var get_smtp_profile = function(profile_value) { [{'name': 'hm_ajax_hook', 'value': 'ajax_profiles_status'}, {'name': 'profile_value', 'value': profile_value}], function(res) { - } + }, + [], on_loading ); } }; @@ -18,18 +19,19 @@ var check_attachment_dir_access = function() { Hm_Notices.show([err_msg('Attachment storage unavailable, please contact your site administrator')]); }; -var smtp_test_action = function(event) { +var smtp_test_action = function(event, on_loading = true) { event.preventDefault(); var form = $(this).closest('.smtp_connect'); Hm_Notices.hide(true); Hm_Ajax.request( form.serializeArray(), false, - {'smtp_connect': 1} + {'smtp_connect': 1}, + on_loading ); }; -var smtp_save_action = function(event) { +var smtp_save_action = function(event, on_loading = true) { event.preventDefault(); var form = $(this).closest('.smtp_connect'); var btnContainer = $(this).parent(); @@ -48,11 +50,12 @@ var smtp_save_action = function(event) { Hm_Folders.reload_folders(true); } }, - {'smtp_save': 1} + {'smtp_save': 1}, + on_loading ); }; -var smtp_forget_action = function(event) { +var smtp_forget_action = function(event, on_loading = true) { event.preventDefault(); var form = $(this).closest('.smtp_connect'); var btnContainer = $(this).parent(); @@ -70,11 +73,12 @@ var smtp_forget_action = function(event) { Hm_Folders.reload_folders(true); } }, - {'smtp_forget': 1} + {'smtp_forget': 1}, + on_loading ); }; -var smtp_delete_action = function(event) { +var smtp_delete_action = function(event,on_loading = true) { if (!hm_delete_prompt()) { return false; } @@ -91,11 +95,12 @@ var smtp_delete_action = function(event) { decrease_servers('smtp'); } }, - {'smtp_delete': 1} + {'smtp_delete': 1}, + on_loading ); }; -var smtp_delete_draft = function(id) { +var smtp_delete_draft = function(i,on_loading = true) { Hm_Ajax.request( [{'name': 'hm_ajax_hook', 'value': 'ajax_smtp_delete_draft'}, {'name': 'draft_id', 'value': id}], @@ -104,7 +109,7 @@ var smtp_delete_draft = function(id) { $('.draft_'+id).remove(); $('.draft_list').toggle(); } - } + }, [], on_loading ); }; @@ -113,11 +118,7 @@ var send_archive = function() { document.getElementsByClassName("smtp_send_placeholder")[0].click(); } -var save_compose_state = function(no_files, notice) { - var no_icon = true; - if (notice) { - no_icon = false; - } +var save_compose_state = function(no_files, notice, on_loading = true) { var uploaded_files = $("input[name='uploaded_files[]']").map(function(){return $(this).val();}).get(); var body = $('.compose_body').val(); var subject = $('.compose_subject').val(); @@ -163,7 +164,7 @@ var save_compose_state = function(no_files, notice) { } }, [], - no_icon + on_loading ); }; @@ -384,7 +385,10 @@ var is_valid_recipient = function(recipient) { return recipient.match(valid_regex); }; -var process_compose_form = function(){ +var process_compose_form = function(on_loading = true){ + if (!on_loading) { + Hm_Ajax.show_loading_icon(); + } var msg_uid = hm_msg_uid(); var detail = Hm_Utils.parse_folder_path(hm_list_path(), 'imap'); var class_name = 'imap_' + detail.server_id + '_' + msg_uid + '_' + detail.folder; @@ -393,11 +397,10 @@ var process_compose_form = function(){ if (next_message) { $('.compose_next_email_data').val(next_message); - } + } var uploaded_files = $("input[name='uploaded_files[]']").map(function () { return $(this).val(); }).get(); $('#send_uploaded_files').val(uploaded_files); - Hm_Ajax.show_loading_icon(); $('.smtp_send_placeholder').addClass('disabled_input'); $('.smtp_send_archive').addClass('disabled_input'); $('.smtp_send').on("click", function () { return false; }); @@ -431,7 +434,7 @@ $(function () { function(res) { }, - [] + [], true ); }); } @@ -561,7 +564,7 @@ $(function () { } }); $('.compose_form').on('submit', function() { - process_compose_form(); + process_compose_form(false); }); if ($('.compose_cc').val() || $('.compose_bcc').val()) { toggle_recip_flds();