Ajax throbber pour un téléchargement avec webform

CSS

span.ajax-throbber.icon {
  min-height: 0px;
  min-width: 0px;
  padding-left: 0px;
  position: relative;
}

JS

(function (jQuery, Drupal) {
  jQuery(document).ready(function () {

    // Stocker les observers pour les réinitialiser
    var observer = null;
    var globalObserver = null;

    // Fonction pour activer/désactiver le throbber et le bouton "Next"
    function toggleThrobber(show) {
      var $throbber = jQuery('.ajax-throbber');
      console.log('Nombre de throbber:' + $throbber.length);
      var $buttonNext = jQuery('button.webform-button--next');

      if (show) {
        $buttonNext.each(function () {
          console.log('button next disabled');
          jQuery(this).prop('disabled', true);
        });
        $throbber.each(function () {
          console.log('show throbber');
          jQuery(this).show();
        });
      } else {
        console.log('hide throbber');
        $buttonNext.each(function () {
          console.log('button next enabled');
          jQuery(this).prop('disabled', false);
        });
        $throbber.each(function () {
          console.log('hide throbber');
          jQuery(this).hide();
        });
      }
    }

    // Ajouter dynamiquement le throbber aux wrappers AJAX
    function addThrobberToAjaxWrappers() {
      jQuery('div[id^="ajax-wrapper--"]').each(function () {
        if (!jQuery('body').find('.ajax-throbber').length) {
          console.log('Ajouter ajax-throbber.');
          var $throbber = jQuery('<span class="ajax-throbber glyphicon-spin icon glyphicon glyphicon-refresh" aria-hidden="true"></span>');
          $throbber.hide();
          jQuery(this).append($throbber);
        }
      });
    }

    // Fonction pour vérifier si le bouton "Attachment_upload_button" est présent
    function waitForUploadButton() {
      var intervalId = setInterval(function () {
        if (jQuery('button[name="Attachment_upload_button"]').length) {
          clearInterval(intervalId);
          console.log('Le bouton "Attachment_upload_button" est prêt.');
          addThrobberToAjaxWrappers();
        }
      }, 100);

      setTimeout(function () {
        clearInterval(intervalId);
        console.warn('Le bouton "Attachment_upload_button" n\'a pas été trouvé après 300 secondes.');
      }, 300000); // 5 minutes max
    }

    // Observer les changements pour détecter les fichiers téléchargés
    function observeFileUploads() {
      // Nettoyer l'ancien observer s'il existe
      if (observer) {
        observer.disconnect();
        console.log('Ancien observer arrêté.');
      }
      if (globalObserver) {
        globalObserver.disconnect();
        console.log('Ancien globalObserver arrêté.');
      }

      observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
          if (mutation.type === 'childList') {
            console.log('Changement détecté dans le formulaire.');
            var hasFiles = jQuery('div.form-item.form-type-checkbox').find('input').length > 0;
            console.log(hasFiles ? 'Fichiers détectés' : 'Aucun fichier détecté');
            // toggleThrobber(!hasFiles);
            // L'appel a été déplacé parce que cette approche n'a pas fonctionné.
          }
        });
      });

      jQuery('div[id^="ajax-wrapper--"]').each(function () {
        console.log('Observateur ajouté pour', this.id);
        observer.observe(this, { childList: true, subtree: true });
      });

      // Observer tout le document pour détecter les nouveaux `ajax-wrapper--`
      globalObserver = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
          mutation.addedNodes.forEach(function (node) {
            if (node.nodeType === 1 && node.id && node.id.startsWith('ajax-wrapper--')) {
              console.log('Nouvel ajax-wrapper détecté:', node.id);
              toggleThrobber(false);
              observer.observe(node, { childList: true, subtree: true });
            }
          });
        });
      });

      globalObserver.observe(document.body, { childList: true, subtree: true });
    }

    // Suivre AJAX pour démarrer et arrêter le throbber
    jQuery(document).ajaxSend(function (event, xhr, settings) {
      console.log('ajaxSend. toggleThrobber(true)');
      toggleThrobber(true);
    });

    jQuery(document).ajaxComplete(function (event, xhr, settings) {
      waitForUploadButton();
      addThrobberToAjaxWrappers();
      observeFileUploads(); // Réinitialiser le MutationObserver après chaque AJAX
    });

    // Initialisation
    waitForUploadButton();
    addThrobberToAjaxWrappers();
    observeFileUploads();
  });
})(jQuery, Drupal);