Not working with JQuery 3

[robertgarrigos]

This module is not working with JQuery 3. It does with JQuery 1. Editing a node with an image field which uses focal point triggers this error:

jquery.js?v=3.7.1:2 Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at ce.fn.load (jquery.js?v=3.7.1:2:82864)
    at HTMLImageElement.<anonymous> (focal_point.js:44:23)
    at Function.each (jquery.js?v=3.7.1:2:3129)
    at ce.fn.init.each (jquery.js?v=3.7.1:2:1594)
    at focal_point.js:42:14

[laryn]

I think this is working on the latest code -- please reopen if not.

[robertgarrigos]

Still, I'm getting this error in the web console with jQuery 3 and the latest code.

With jQuery 3 the cross in the image always appears in the top-left corner of the image. Only when I switch to jquery 1 the cross appears where you left it the last time.

[robertgarrigos]

I think I've found the problem here: https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/

I've fixed this problem by changing this code:

setTimeout(function() {
          $img.one('load', function(){
            focalPointSetIndicator($indicator, $(this), $field);
          }).each(function() {
            if (this.complete) {
              $(this).load();
            }
          });
        }, 0);

to this:

setTimeout(function () {
          $img.one('load', function () {
            focalPointSetIndicator($indicator, $(this), $field);
          }).each(function () {
            if (this.complete) {
              $(this).trigger('load'); // Trigger the load event manually if the image is already loaded
            }
          });
        }, 0);

[robertgarrigos]

Done a PR which addresses this problem.

[laryn]

@robertgarrigos Is this working for you with the latest version? At some point the same change you suggest must have been added -- it doesn't seem like your PR changes anything substantial.

[robertgarrigos]

@laryn yes, latest version works with jQuery 3. Thanks