[ticket/13163] Fix responsive link lists

[PayBas]

Rewrote the entire function, because it was incomprehensible spaghetti and a major resource hog (partly my own fault).

https://tracker.phpbb.com/browse/PHPBB3-13163

[PayBas]

@hanakin @prototech @callumacrae could use some help with testing, since this is a blocker

[callumacrae]

Why are you removing the global comment? That causes the code to fail JSHint.

[PayBas]

@callumacrae you can simply set the global in your IDE. Doesn't need to be in the code.

[callumacrae]

I can, but that doesn't make it correct :)

[prototech]

There's a quirk in Chrome and Opera when refreshing at a width where an additional link would fit if a few more pixels were available. The script runs, does all its calculations, and settles on a set of links to display before the avatar loads; once the avatar loads, the link on the farthest right will drop to a second line.

[PayBas]

From my own tests, usually if the avatar isn't loaded yet, the width of the "avatar" is extra wide (because it shows the alt text which is wider than the img). So the script will be extra conservative.

As for the "too conservative" behavior of the refresh... I've noticed this too. But as far as I could tell, this is about 10-20px, which should be within the acceptable limits (since its better to hide too much, rather than too few).

Nevertheless. I'll look into it.

[PayBas]

Added

$linksAll.find('img').each(function() {
    $(this).load(function() {
        check();
    });
});

[nickvergessen]

Looks fine to me now and works as intended now.
@prototech can you quickly review the JS code so we can merge this?