loading indicator when clicking save button (#2740)

* loading indicator for save button

... should probably find a better place to load the image from. maybe somone on github has an idea

* replace all the buttons

before clicking save: https://i.imgur.com/DKin97B.png
after clicking save:  https://i.imgur.com/UOPsK0p.png

* bundle loading-gif

also made the css selector stricter (but not as strict as #save_button would be..)

the source of the image is the GPLv2-licensed PhpMyAdmin ( https://raw.githubusercontent.com/phpmyadmin/phpmyadmin/7a6d4e68d3f6238f837d92c84c80081436ff02cc/themes/original/img/ajax_clock_small.gif ), strictly speaking i'm not sure if we're actually allowed to bundle the image directly, but if it ever actually becomes a problem (eg the PhpMyAdmin team demand we  remove it) I'm sure finding-or-making a replacement won't be too hard..? I also think that will never actually happen.

* Replace with different spinner

* Remove spinner image again

* Remove some console.log output

* comment Safari render hack

Co-authored-by: Jaap Marcus <9754650+jaapmarcus@users.noreply.github.com>

web/js/events.js

@@ -153,7 +153,6 @@ VE.helpers.createConfirmationDialog = function(elm, dialog_title, confirmed_loca
 
 
     var reference_copied = $(elm[0]).clone();
-    console.log(reference_copied);
     config = $.extend(config, custom_config);
     $(reference_copied).dialog(config);
 
@@ -228,7 +227,6 @@ function updateInterval(){
 }
 
 function stopTimer(){
-  console.log(reloadFunction);
   if(reloadFunction){
     clearInterval(reloadFunction);
     reloadFunction = false;

web/js/init.js

@@ -613,6 +613,17 @@ $(document).ready(function(){
                 $('.l-unit').find('.ch-toggle').prop('checked', false);
                 $('.l-unit.selected').find('.ch-toggle').prop('checked', true);
             });
+            // todo: maybe give the save button id?
+            $(".ui-button[data-id=vstobjects][data-action=submit]").on('click', function(ev){
+              let loadingAnimationEle = document.createElement("div");
+              loadingAnimationEle.innerHTML = '<div class="timer-container" style="float:right;"><div class="timer-button spinner"><div class="spinner-inner"></div><div class="spinner-mask"></div> <div class="spinner-mask-two"></div></div></div>';
+              // this both gives an indication that we've clicked and is loading, also prevents double-clicking/clicking-on-something-else while loading.
+              $(".ui-button[data-id=vstobjects][data-action=submit]").replaceWith(loadingAnimationEle);
+              $(".ui-button").replaceWith('');
+              // workaround a render bug on Safari (loading icon doesn't render without this)
+              ev.preventDefault();
+              $('#vstobjects').submit();
+            });
     });
 
 /**

web/js/pages/add_mail_acc.js

@@ -141,7 +141,6 @@ generate_mail_credentials = function() {
     output=output.replace(/ $/, "");
     output=output.replace(/:\|/g, ": ");
     output=output.replace(/\|/g, "\n");
-    //console.log(output);
     $('#v_credentials').val(output);
 }
 

web/js/pages/add_web.js

@@ -2,7 +2,6 @@
     var prepath = $('input[name="v-custom-doc-root_prepath"]').val();
     var domain = $('select[name="v-custom-doc-domain"]').val();
     var folder = $('input[name="v-custom-doc-folder"]').val();
-    console.log(domain, folder);
     $('.custom_docroot_hint').text(prepath+domain+'/public_html/'+folder);
 }
 App.Listeners.DB.keypress_custom_folder = function() {

web/js/pages/edit_mail_acc.js

@@ -120,7 +120,6 @@ generate_mail_credentials = function() {
     output=output.replace(/ $/, "");
     output=output.replace(/:\|/g, ": ");
     output=output.replace(/\|/g, "\n");
-    //console.log(output);
     $('#v_credentials').val(output);
 }
 

web/js/templates.js

@@ -26,7 +26,6 @@ var Templator = function()
 {
     var init = function()
     {
-        fb.info('Templator work');
         Templator.splitThemAll();
         Templator.freezeTplIndexes();
     };
@@ -36,7 +35,6 @@ var Templator = function()
      * Split the tpl strings into arrays
      */
     Templator.splitThemAll = function(){
-        fb.info('splitting tpls');
         jQuery.each(App.Templates.html, function(o){
             //try{
             var tpls = App.Templates.html[o];
@@ -52,7 +50,6 @@ var Templator = function()
      * Iterates tpls
      */
     Templator.freezeTplIndexes = function(){
-        fb.info('freezing tpl keys');
         jQuery.each(App.Templates.html, Templator.cacheTplIndexes);
     },