Fixed Avatar Editor - avatar resets after move + cancel

Jon W

Well-known member
Noticed a very annoying bug (cost me several hours of work because I thought it was me being slow) when editing avatars.

To replicate:
  1. Open the Avatar Editor (i.e., go to Account > Personal Details > Avatar);
  2. If you avatar is perfectly square, upload an avatar that is not perfectly square and click the 'Close' button;
    OR
    If your avatar is not perfectly square, drag the avatar to any position other than the top-left.
  3. Without refreshing the page, load the Avatar Editor again -- the avatar will have moved from the position you dragged it to.
This is due to the following pieces of code in avatar_editor.js:
In the __construct method:
Code:
this.cropX = this.$outputX.val();
this.cropY = this.$outputY.val();

In the updateEditor method:
Code:
// reset the crop position
this.cropX = ajaxData.cropX * -1;
this.cropY = ajaxData.cropY * -1;
this.$outputX.val(ajaxData.cropX);
this.$outputY.val(ajaxData.cropY);
Note that in the former this.cropX and this.cropY are the same values as this.$outputX.val and this.$outputY.val, respectively, whereas in the latter the values are inverted.
As a result, in the updateEditor function the setPosition method is called without inverting the values:
Code:
this.setPosition(this.cropX, this.cropY, false);
However, in the resetForm method, the inverse values are used:
Code:
this.setPosition(this.cropX * -1, this.cropY * -1, false);
... and this produces the above bug.
To fix, replace the code in the __construct method with:
Code:
this.cropX = this.$outputX.val() * -1;
this.cropY = this.$outputY.val() * -1;
and the code in the resetForm method with:
Code:
this.setPosition(this.cropX, this.cropY, false);
Note that the above fix will be included in my Avatar Essentials add-on that I will be releasing shortly...
 
Top Bottom