Drupal JS behaviors: Picture mapping helper, hiding focal point information and focusing user on focal point when needed.

pictureMapping.behaviors.js

(function ($) {
  Drupal.behaviors.PictureMapping = {
    attach: function (context, settings) {

      /**
       * Update function which helps to change the states
       * @param selectMapping
       * @param imagePreview
       */
      function updateVisibility(selectMapping, imagePreview) {
        var match = selectMapping.val().match(/cropped/);
        // If we don't have a cropped mapping, hide the focal stuff
        if (match === null) {
          imagePreview.addClass('cropped--hide');
        } else {
          imagePreview.removeClass('cropped--hide');

          // Call to action:
          // Make the indicator visible, zoom up and down.
          $('.focal-point-indicator', imagePreview).animate({ 'font-size': '3rem' }, 'slow', function() {
            $(this).animate({ 'font-size': '1rem' }, 'slow');
          });
        }
      }

      /**
       * Initialize the states and add an on change event handler
       */
      var allParagraphsWithImage = $('.paragraphs-item-type-image-full-width');
      $.each(allParagraphsWithImage, function(){
        var selectMapping = $('.field-name-field-image-display .form-select', $(this));
        var imagePreview = $('.image-preview', $(this));
        // Initially update the visibility state
        updateVisibility(selectMapping, imagePreview);

        // Change the state on change
        selectMapping.on('change', function() {
          updateVisibility(selectMapping, imagePreview);
        });

      });

    }
  };
})(jQuery);