Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jshamble merged 52 commits into from
Feb 2, 2022
Merged

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

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
eccc65a
added shopping tag flip on specific position
jshamble Dec 13, 2021
9e8731a
removed a few console logs, added better code flow with less varaible…
jshamble Dec 13, 2021
5a17827
added calls to measure and mutate elemetn
jshamble Dec 14, 2021
dfac763
resolved merge conflict
jshamble Jan 7, 2022
2e2c0b7
added rtl fix
jshamble Jan 7, 2022
ae7caf2
fixed a few typos
jshamble Jan 7, 2022
0655d49
Merge branch 'main' into shoptagposition
jshamble Jan 12, 2022
0426ef9
added tag flip working for non rtl order
jshamble Jan 13, 2022
e2da174
rmeoved gitignore file
jshamble Jan 14, 2022
c622b38
added tag flip and onresize callback for tag flip, added helper funct…
jshamble Jan 14, 2022
128c4d0
added tag flip fix
jshamble Jan 14, 2022
f426d8c
using page size to determine, might need to fix page size bug to not …
jshamble Jan 18, 2022
ee3c407
Merge branch 'main' into shoptagposition
jshamble Jan 18, 2022
b32d1f0
added refactor of measure element
jshamble Jan 19, 2022
ba110ee
added getlyaoutbox
jshamble Jan 19, 2022
828b623
added get layout box calculation adn page size
jshamble Jan 19, 2022
3bb9156
fixed merge conflicts
jshamble Jan 20, 2022
86aeb86
Merge branch 'main' into shoptagposition
jshamble Jan 21, 2022
bc89057
added correct measurements for transforms, added correct placement fo…
jshamble Jan 24, 2022
ed6af3c
removed space
jshamble Jan 24, 2022
6f48eab
added main files
jshamble Jan 25, 2022
2d9a3d1
removed trailing whitespace
jshamble Jan 25, 2022
4d67d41
added proper rtl test
jshamble Jan 27, 2022
de65f8b
fixed allto initialize and rtl visual diff test
jshamble Jan 27, 2022
45da724
fixed store service page size dimensions for unit test
jshamble Jan 27, 2022
5762255
fixed mutatelement for shopping tag flip
jshamble Jan 27, 2022
7354224
migrated resize code to another PR
jshamble Jan 29, 2022
878bf67
resolved mrege conflicts
jshamble Jan 29, 2022
b3b6570
Merge branch 'main' into shoptagposition
jshamble Jan 31, 2022
85acd92
fixed settings
jshamble Jan 31, 2022
a604cfa
added space
jshamble Jan 31, 2022
d9d801a
removed space
jshamble Jan 31, 2022
b8158e1
fixed merge conflict
jshamble Feb 1, 2022
46ab9b8
added shopping tag position
jshamble Feb 1, 2022
20e168a
added iamphtml to classes
jshamble Feb 1, 2022
b45a992
added fix for double measure ele,metn callback
jshamble Feb 1, 2022
3a6e823
Merge branch 'main' into shoptagposition
jshamble Feb 1, 2022
1f8711c
Merge branch 'main' into shoptagposition
jshamble Feb 1, 2022
a2c35d7
added page 1 visual diff test
jshamble Feb 2, 2022
3877e03
added rtl to visual test file
jshamble Feb 2, 2022
3193a15
added RTL direction
jshamble Feb 2, 2022
609cec8
removed non rtl exampel form story
jshamble Feb 2, 2022
6c4997c
removed trl exmaples
jshamble Feb 2, 2022
9ad13f5
removed trl exmaples
jshamble Feb 2, 2022
599cc42
removed non rtl exampel from story
jshamble Feb 2, 2022
02dd8da
removed non rtl exampel from story
jshamble Feb 2, 2022
69b204b
added back in interactive tests
jshamble Feb 2, 2022
98a2809
added back in interactive tests
jshamble Feb 2, 2022
fd3cc81
added back in interactive tests
jshamble Feb 2, 2022
fced266
added back in interactive tests
jshamble Feb 2, 2022
b2e6548
added back in interactive tests
jshamble Feb 2, 2022
6a58fcd
resolved merge conflict
jshamble Feb 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions examples/amp-story/amp-story-shopping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@
}
[data-tag-id="backpack"] {
top: 33%;
left: 80%;
left: 73%;
}
[data-tag-id=city-pop] {
top: 33%;
left: 7%;
}
[data-tag-id="hat-rtl"] {
top: 33%;
left: 7%;
left: 0%;
}
[data-tag-id="sunglasses-rtl"] {
top: 28%;
Expand Down Expand Up @@ -59,21 +59,21 @@
{
"product-tag-id": "hat",
"product-title": "Hootenanny Hat",
"product-price": "799.00",
"product-price": 799.00,
"product-price-currency": "USD",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"
},
{
"product-tag-id": "sunglasses",
"product-title": "Spectacular Spectacles",
"product-price": "400.00",
"product-price": 400.00,
"product-price-currency": "INR",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png"
},
{
"product-tag-id": "backpack",
"product-title": "Beastly Backpack",
"product-price": "1000.00",
"product-price": 1000.00,
"product-price-currency": "BRL",
"product-tag-text": "Beastly Backpack",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png"
Expand Down Expand Up @@ -105,8 +105,8 @@
{
"product-tag-id": "city-pop",
"product-title": "Plastic Love",
"product-price": "19",
"product-price-currency": "JPY"
"product-price": 19,
"product-price-currency": "JPY",
}
]
}
Expand Down Expand Up @@ -159,7 +159,7 @@
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
<amp-story-page id="inline-light-theme-two" dir="rtl">
<amp-story-page id="inline-light-theme-two">
<!--
RTL example
-->
Expand All @@ -170,21 +170,21 @@
{
"product-tag-id": "hat-rtl",
"product-title": "Hootenanny Hat",
"product-price": "799",
"product-price": 799.00,
"product-tag-text": " حبا حبا حبا سعادةا سعادة",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"
},
{
"product-tag-id": "sunglasses-rtl",
"product-title": "Spectacular Spectacles",
"product-price": "400",
"product-price": 400.00,
"product-tag-text": "حبا حب سعادة قط حبا حب سعادة قط ",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png"
},
{
"product-tag-id": "backpack-rtl",
"product-title": "Beastly Backpack",
"product-price": "500",
"product-price": 500.00,
"product-tag-text": "حبا",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png"
}
Expand Down
207 changes: 207 additions & 0 deletions examples/visual-tests/amp-story/amp-story-shopping-rtl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
<!doctype html>
Comment thread
jshamble marked this conversation as resolved.
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Shopping</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async custom-element="amp-story-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script>
<style amp-custom>
[data-tag-id="hat"] {
top: 33%;
left: 7%;
}
[data-tag-id="sunglasses"] {
top: 28%;
left: 43%;
}
[data-tag-id="backpack"] {
top: 33%;
left: 73%;
}
[data-tag-id=city-pop] {
top: 33%;
left: 7%;
}
[data-tag-id="hat-rtl"] {
top: 33%;
left: 7%;
}
[data-tag-id="sunglasses-rtl"] {
top: 28%;
left: 43%;
}
[data-tag-id="backpack-rtl"] {
top: 33%;
left: 80%;
}
</style>
</head>
<body>
<amp-story
standalone
title="Story Shopping Component"
publisher="AMP Story Shopping"
publisher-logo-src="example.com/logo.png"
poster-portrait-src="example.com/poster.jpg">
<amp-story-page id="inline-light-theme">
<!--
Example of
Inline config.
Multiple product tags with icon defined.
-->
<amp-story-shopping-config layout="nodisplay">
<script type="application/json">
{
"items" : [
{
"product-tag-id": "hat",
"product-title": "Hootenanny Hat",
"product-price": 799.00,
"product-price-currency": "USD",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"
},
{
"product-tag-id": "sunglasses",
"product-title": "Spectacular Spectacles",
"product-price": 400.00,
"product-price-currency": "INR",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png"
},
{
"product-tag-id": "backpack",
"product-title": "Beastly Backpack",
"product-price": 1000.00,
"product-price-currency": "BRL",
"product-tag-text": "Beastly Backpack",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png"
}
]
}
</script>
</amp-story-shopping-config>
<amp-story-grid-layer template="fill">
<amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-tag-id="hat" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-tag-id="sunglasses" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-tag-id="backpack" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
<amp-story-page id="remote-dark-theme">
<!--
Example of:
Remote JSON with inline fallback.
Single product tag without icon.
-->
<amp-story-shopping-config layout="nodisplay" src="/examples/amp-story/shopping/remote.json" >
<script type="application/json">
{
"items" : [
{
"product-tag-id": "city-pop",
"product-title": "Plastic Love",
"product-price": 19,
"product-price-currency": "JPY",
}
]
}
</script>
</amp-story-shopping-config>
<amp-story-grid-layer template="fill">
<amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-tag-id="city-pop" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
<amp-story-page id="inline-no-product">
<!--
Example of:
CTA Button not rendering due to no product tags.
-->
<amp-story-shopping-config layout="nodisplay">
<script type="application/json">
{
"items" : []
}
</script>
</amp-story-shopping-config>
<amp-story-grid-layer template="fill">
<amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
<amp-story-page id="remote-with-product">
<!--
Example of:
CTA Button rendering due to remote product tag existing, but no inline.
-->
<amp-story-shopping-config layout="nodisplay" src="/examples/amp-story/shopping/remote.json" >
<script type="application/json">
{
"items" : []
}
</script>
</amp-story-shopping-config>
<amp-story-grid-layer template="fill">
<amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-tag-id="city-pop" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
<amp-story-page id="inline-light-theme-two">
<!--
RTL example
-->
<amp-story-shopping-config layout="nodisplay">
<script type="application/json">
{
"items" : [
{
"product-tag-id": "hat-rtl",
"product-title": "Hootenanny Hat",
"product-price": 799.00,
"product-tag-text": " حبا حبا حبا سعادةا سعادة",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"
},
{
"product-tag-id": "sunglasses-rtl",
"product-title": "Spectacular Spectacles",
"product-price": 400.00,
"product-tag-text": "حبا حب سعادة قط حبا حب سعادة قط ",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png"
},
{
"product-tag-id": "backpack-rtl",
"product-title": "Beastly Backpack",
"product-price": 500.00,
"product-tag-text": "حبا",
"product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png"
}
]
}
</script>
</amp-story-shopping-config>
<amp-story-grid-layer template="fill">
<amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-tag-id="hat-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-tag-id="sunglasses-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-tag-id="backpack-rtl" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
</amp-story>
</body>
</html>
4 changes: 2 additions & 2 deletions examples/visual-tests/amp-story/amp-story-shopping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}
[data-tag-id="backpack"] {
top: 33%;
left: 80%;
left: 73%;
}
[data-tag-id=city-pop] {
top: 33%;
Expand Down Expand Up @@ -105,7 +105,7 @@
{
"product-tag-id": "city-pop",
"product-title": "Plastic Love",
"product-price": 19.00,
"product-price": 19,
"product-price-currency": "JPY",
}
]
Expand Down
9 changes: 9 additions & 0 deletions extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,15 @@ amp-story-shopping-tag {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: row !important;
Comment thread
jshamble marked this conversation as resolved.
Outdated
}

.amp-story-shopping-tag-inner-flipped {
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
Comment thread
jshamble marked this conversation as resolved.
Outdated
flex-direction: row-reverse !important;
}

.amp-story-shopping-tag-dot {
Expand Down
44 changes: 35 additions & 9 deletions extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const FONTS_TO_LOAD = [
src: "url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2')",
},
];

export class AmpStoryShoppingTag extends AMP.BaseElement {
/** @param {!AmpElement} element */
constructor(element) {
Expand Down Expand Up @@ -149,16 +150,41 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
return;
}

this.shoppingTagEl_ = this.renderShoppingTagTemplate_();
this.onRtlStateUpdate_(this.storeService_.get(StateProperty.RTL_STATE));
this.mutateElement(() => {
createShadowRootWithStyle(
this.element,
this.shoppingTagEl_,
shoppingTagCSS
);
this.hasAppendedInnerShoppingTagEl_ = true;
});

this.measureMutateElement(
() => {
this.shoppingTagEl_ = this.renderShoppingTagTemplate_();
Comment thread
jshamble marked this conversation as resolved.
Outdated
},
() => {
createShadowRootWithStyle(
Comment thread
jshamble marked this conversation as resolved.
this.element,
this.shoppingTagEl_,
shoppingTagCSS
);
this.hasAppendedInnerShoppingTagEl_ = true;

const edgeOfScreentoTagDistance =
document.getElementsByTagName('amp-story-shopping-attachment')[0]
./*OK*/ clientWidth *
0.5 -
this.element./*OK*/ offsetLeft -
this.element./*OK*/ offsetWidth * 0.5;
Comment thread
jshamble marked this conversation as resolved.
Outdated

const shoppingTagInner = this.element.shadowRoot.querySelector(
'.amp-story-shopping-tag-inner'
);
if ( (edgeOfScreentoTagDistance < -160 && this.shoppingTagEl_.getAttribute('dir') !== 'rtl')
|| (edgeOfScreentoTagDistance > 145 && this.shoppingTagEl_.getAttribute('dir') === 'rtl')
) {
shoppingTagInner?.classList.add('amp-story-shopping-tag-inner-flipped');
shoppingTagInner?.classList.remove('.amp-story-shopping-tag-inner');
} else {
shoppingTagInner?.classList.add('amp-story-shopping-tag-inner-flipped');
shoppingTagInner?.classList.remove('amp-story-shopping-tag-inner-flipped');
Comment thread
jshamble marked this conversation as resolved.
Outdated
}
}
);
}

/** @private */
Expand Down