crop avatar bug #8449

Closed
SirbitoX opened this Issue Jun 10, 2015 · 11 comments

Comments

Projects
None yet
4 participants
@SirbitoX

Hi,

Follow these steps:

  • go to edit avatar
  • upload a new picture
  • use avatar cropping tool
  • try to move the selected area

you can see that the selected area doesn't move! Perhaps, the reason is because of loading the relevant js files in header before loading the image file.

@juho-jaakkola

This comment has been minimized.

Show comment
Hide comment
@juho-jaakkola

juho-jaakkola Jun 10, 2015

Member

Which Elgg version?

Member

juho-jaakkola commented Jun 10, 2015

Which Elgg version?

@SirbitoX

This comment has been minimized.

Show comment
Hide comment
@SirbitoX

SirbitoX Jun 10, 2015

I'm developing on last version of Elgg (1.11.2). I tested this issue on https://community.elgg.org and it didn't work correctly, either.

I'm developing on last version of Elgg (1.11.2). I tested this issue on https://community.elgg.org and it didn't work correctly, either.

@juho-jaakkola

This comment has been minimized.

Show comment
Hide comment
@juho-jaakkola

juho-jaakkola Jun 10, 2015

Member

I'm not able to reproduce the bug. I tested both with Firefox and Chrome.

Member

juho-jaakkola commented Jun 10, 2015

I'm not able to reproduce the bug. I tested both with Firefox and Chrome.

@mrclay

This comment has been minimized.

Show comment
Hide comment
@mrclay

mrclay Jun 10, 2015

Member

@SirbitoX what browser/version/OS were you using?

Member

mrclay commented Jun 10, 2015

@SirbitoX what browser/version/OS were you using?

@SirbitoX

This comment has been minimized.

Show comment
Hide comment
@SirbitoX

SirbitoX Jun 11, 2015

@mrclay :
Chrome/Version 43.0.2357.124 m/Windows 7
Firefox/Version 38.0.5/Windows 7

@juho-jaakkola I emphasize that just for the first time you upload an image this bug appears. and if you refresh the page every thing would work correct.

@mrclay :
Chrome/Version 43.0.2357.124 m/Windows 7
Firefox/Version 38.0.5/Windows 7

@juho-jaakkola I emphasize that just for the first time you upload an image this bug appears. and if you refresh the page every thing would work correct.

@saeedsq

This comment has been minimized.

Show comment
Hide comment
@saeedsq

saeedsq Jun 11, 2015

I encountered the same issue. Chrome Version 43.0.2357.124 m, Windows 7

saeedsq commented Jun 11, 2015

I encountered the same issue. Chrome Version 43.0.2357.124 m, Windows 7

@mrclay

This comment has been minimized.

Show comment
Hide comment
@mrclay

mrclay Jun 11, 2015

Member

This working on page refresh suggests to me a race condition with JS loading.

Are there any JS/network errors in the devtools console?

Member

mrclay commented Jun 11, 2015

This working on page refresh suggests to me a race condition with JS loading.

Are there any JS/network errors in the devtools console?

@SirbitoX

This comment has been minimized.

Show comment
Hide comment
@SirbitoX

SirbitoX Jun 13, 2015

@mrclay
No, there isn't any error in the console.
I think the JS relevant to cropping the image loads before loading the image completely and the JS could not detect dimensions of the image so it breaks. And on page refresh it works fine because the image has been cached by the browser (i.e. it loads immediately).

@mrclay
No, there isn't any error in the console.
I think the JS relevant to cropping the image loads before loading the image completely and the JS could not detect dimensions of the image so it breaks. And on page refresh it works fine because the image has been cached by the browser (i.e. it loads immediately).

@SirbitoX

This comment has been minimized.

Show comment
Hide comment
@SirbitoX

SirbitoX Jun 20, 2015

@juho-jaakkola @mrclay
Do you have any idea how to fix this?

@juho-jaakkola @mrclay
Do you have any idea how to fix this?

@SirbitoX

This comment has been minimized.

Show comment
Hide comment
@SirbitoX

SirbitoX Jun 20, 2015

@juho-jaakkola @mrclay
This issue will be fixed if the following codes in \js\lib\ui.avatar_cropper.js be wrapped by $(window).load(function () { ... });:

$('#user-avatar-cropper').imgAreaSelect(params);

if ($('input[name=x2]').val()) {
    var ias = $('#user-avatar-cropper').imgAreaSelect({instance: true});
    var selection = ias.getSelection();
    elgg.avatarCropper.preview($('#user-avatar-cropper'), selection);
}

the result should be something like this:

$(window).load(function () {
        $('#user-avatar-cropper').imgAreaSelect(params);

        if ($('input[name=x2]').val()) {
            var ias = $('#user-avatar-cropper').imgAreaSelect({instance: true});
            var selection = ias.getSelection();
            elgg.avatarCropper.preview($('#user-avatar-cropper'), selection);
        }
    }
);

@juho-jaakkola @mrclay
This issue will be fixed if the following codes in \js\lib\ui.avatar_cropper.js be wrapped by $(window).load(function () { ... });:

$('#user-avatar-cropper').imgAreaSelect(params);

if ($('input[name=x2]').val()) {
    var ias = $('#user-avatar-cropper').imgAreaSelect({instance: true});
    var selection = ias.getSelection();
    elgg.avatarCropper.preview($('#user-avatar-cropper'), selection);
}

the result should be something like this:

$(window).load(function () {
        $('#user-avatar-cropper').imgAreaSelect(params);

        if ($('input[name=x2]').val()) {
            var ias = $('#user-avatar-cropper').imgAreaSelect({instance: true});
            var selection = ias.getSelection();
            elgg.avatarCropper.preview($('#user-avatar-cropper'), selection);
        }
    }
);
@mrclay

This comment has been minimized.

Show comment
Hide comment
Member

mrclay commented Jun 20, 2015

PR #8541

@mrclay mrclay closed this in d8cf51b Jul 6, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment