alt_text_generator-1.0.3/js/alt_text_generator.js

(function ($, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.altTextGenerator = {
    trackedImages: {},
    finishedWorking: (that) => {
      // Untrack the file.
      Drupal.behaviors.altTextGenerator.trackedImages[$(that).data('file-id')] = false;
      // Remove the throbber.
      $(that).parent().find('.ajax-progress').remove();
      // Enable the button.
      $(that).show();
      // Enable the text field.
      $(that).parent('.form-managed-file').find("input[name$='[alt]']").removeAttr('disabled');
    },
    attach: (context) => {
      $('.alt-text-generator-button').off('click').on('click', function (e) {
        // Set that it is being tracked.
        Drupal.behaviors.altTextGenerator.trackedImages[$(this).data('file-id')] = true;
        e.preventDefault();
        
        // Manually add the throbber.
        let throbber = $('<div class="ajax-progress ajax-progress--throbber"><div class="ajax-progress__throbber">&nbsp;</div><div class="ajax-progress__message">' + Drupal.t('Generating alt text...') + '</div></div>');
        $(this).parent().append(throbber);
        $(this).parent('.form-managed-file').find("input[name$='[alt]']").attr('disabled', 'disabled');
        
        // Disable the button.
        $(this).hide();
        
        let that = $(this);
        let fileId = $(this).data('file-id');
        let language = drupalSettings.altTextGenerator.defaultLanguage;

        // Make the API request
        $.ajax({
          url: Drupal.url('api/alt-text-generator/generate'),
          method: 'POST',
          data: {
            fid: fileId,
            language: language
          },
          success: function (response) {
            if (response.success && response.altText) {
              // Remove any quotes from the response
              const altText = response.altText.replace(/^"|"$/g, '');
              $(that).parents('.form-managed-file').find("input[name$='[alt]']").val(altText);
            }
            Drupal.behaviors.altTextGenerator.finishedWorking(that);
          },
          error: function (xhr) {
            let messenger = new Drupal.Message();
            if (xhr.responseJSON && xhr.responseJSON.error) {
              messenger.add('Error: ' + xhr.responseJSON.error, { type: 'warning' });
            }
            else {
              messenger.add(Drupal.t('Could not generate alt text. Please try again later.'), { type: 'warning' });
            }
            Drupal.behaviors.altTextGenerator.finishedWorking(that);
          }
        });
      });

      // Handle file upload changes
      $(context).find('input[type="file"].js-form-file').once('alt-text-generator-file').on('change', function() {
        var $wrapper = $(this).closest('.js-form-managed-file');
        var $button = $wrapper.find('.alt-text-generator-button');
        // Hide button until file is uploaded
        if ($button.length) {
          $button.hide();
        }
      });

      // Handle AJAX complete for file upload
      $(document).ajaxComplete(function(event, xhr, settings) {
        if (settings.url && settings.url.indexOf('/file/ajax/field_') !== -1) {
          var $wrapper = $('.js-form-managed-file');
          var $button = $wrapper.find('.alt-text-generator-button');
          var $hiddenFid = $wrapper.find('input[type="hidden"][name$="[fids]"]');
          
          // Show button if we have a file ID
          if ($hiddenFid.val() && $button.length) {
            $button.show();
            $button.attr('data-file-id', $hiddenFid.val());
          }
        }
      });
    }
  };
})(jQuery, Drupal, drupalSettings);