🖍 Added shopping tag flip on too far position to the right

[jshamble]

Added the ability to have a shopping tag auto-change it's pill position to the left of the dot if it is too far to the right of the screen.

Also flips the dot to align with the correct spot for RTL languages.

Fixes #37028

Normal LTR	Flipped LTR

Normal RTL	Flipped RTL

[amp-owners-bot]

Hey @gmajoulet! These files were changed:

extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js

[coreymasanto]

Could you add a screenshot of a story that includes both normal and flipped shopping tags?

[processprocess]

There's another piece to this concept that needs to be worked into this PR.
The element needs to be transformed so that the indicator dot is in the same place as it was before the flip. This ensures that the tag will be on screen.

An approach:
If the element is off-screen on the right:
translateX by -100% + the size of the dot.
If off-screen on the left, a flipped version of the same equation can be used.

We will need to make this check on window resize:

Jan-14-2022.10-46-01.mp4

[processprocess]

We need to hide the button until the calculation is made and the element is flipped. Otherwise we see it flash on one side then flip to the other:

This could be accomplished by setting opacity to 0 initially and setting it to 1 after the check and positioning is done.

Also the margin between the button and pill is gone.
Please bring that back.

Jan-14-2022.11-39-53.mp4

[processprocess]

Looks awesome!

[processprocess]

The margins are broken in RTL. Please take a look into this: