-
Notifications
You must be signed in to change notification settings - Fork 4.1k
🖍 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.
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
Merged
Changes from 51 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 9e8731a
removed a few console logs, added better code flow with less varaible…
jshamble 5a17827
added calls to measure and mutate elemetn
jshamble dfac763
resolved merge conflict
jshamble 2e2c0b7
added rtl fix
jshamble ae7caf2
fixed a few typos
jshamble 0655d49
Merge branch 'main' into shoptagposition
jshamble 0426ef9
added tag flip working for non rtl order
jshamble e2da174
rmeoved gitignore file
jshamble c622b38
added tag flip and onresize callback for tag flip, added helper funct…
jshamble 128c4d0
added tag flip fix
jshamble f426d8c
using page size to determine, might need to fix page size bug to not …
jshamble ee3c407
Merge branch 'main' into shoptagposition
jshamble b32d1f0
added refactor of measure element
jshamble ba110ee
added getlyaoutbox
jshamble 828b623
added get layout box calculation adn page size
jshamble 3bb9156
fixed merge conflicts
jshamble 86aeb86
Merge branch 'main' into shoptagposition
jshamble bc89057
added correct measurements for transforms, added correct placement fo…
jshamble ed6af3c
removed space
jshamble 6f48eab
added main files
jshamble 2d9a3d1
removed trailing whitespace
jshamble 4d67d41
added proper rtl test
jshamble de65f8b
fixed allto initialize and rtl visual diff test
jshamble 45da724
fixed store service page size dimensions for unit test
jshamble 5762255
fixed mutatelement for shopping tag flip
jshamble 7354224
migrated resize code to another PR
jshamble 878bf67
resolved mrege conflicts
jshamble b3b6570
Merge branch 'main' into shoptagposition
jshamble 85acd92
fixed settings
jshamble a604cfa
added space
jshamble d9d801a
removed space
jshamble b8158e1
fixed merge conflict
jshamble 46ab9b8
added shopping tag position
jshamble 20e168a
added iamphtml to classes
jshamble b45a992
added fix for double measure ele,metn callback
jshamble 3a6e823
Merge branch 'main' into shoptagposition
jshamble 1f8711c
Merge branch 'main' into shoptagposition
jshamble a2c35d7
added page 1 visual diff test
jshamble 3877e03
added rtl to visual test file
jshamble 3193a15
added RTL direction
jshamble 609cec8
removed non rtl exampel form story
jshamble 6c4997c
removed trl exmaples
jshamble 9ad13f5
removed trl exmaples
jshamble 599cc42
removed non rtl exampel from story
jshamble 02dd8da
removed non rtl exampel from story
jshamble 69b204b
added back in interactive tests
jshamble 98a2809
added back in interactive tests
jshamble fd3cc81
added back in interactive tests
jshamble fced266
added back in interactive tests
jshamble b2e6548
added back in interactive tests
jshamble 6a58fcd
resolved merge conflict
jshamble File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
163 changes: 163 additions & 0 deletions
163
examples/visual-tests/amp-story/amp-story-shopping-rtl.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| <!doctype html> | ||
| <html amp lang="en" dir="rtl"> | ||
| <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-product-id="lamp"] { | ||
| top: 31%; | ||
| left: 1%; | ||
| } | ||
| [data-product-id="art"] { | ||
| top: 15%; | ||
| left: 40%; | ||
| } | ||
| [data-product-id="chair"] { | ||
| top: 53%; | ||
| left: 30%; | ||
| } | ||
| [data-product-id="flowers"] { | ||
| top: 46%; | ||
| left: 83%; | ||
| } | ||
| </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" : [ | ||
| { | ||
| "productId": "lamp", | ||
| "productTitle": "Brass Lamp", | ||
| "productBrand": "Lamp Co", | ||
| "productPrice": 799.00, | ||
| "productPriceCurrency": "USD", | ||
| "productImages": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"] | ||
| }, | ||
| { | ||
| "productId": "art", | ||
| "productTitle": "Abstract Art", | ||
| "productBrand": "V. Artsy", | ||
| "productPrice": 1200.00, | ||
| "productPriceCurrency": "INR", | ||
| "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] | ||
| }, | ||
| { | ||
| "productId": "chair", | ||
| "productTitle": "Yellow chair", | ||
| "productBrand": "Chair Co.", | ||
| "productPrice": 1000.00, | ||
| "productPriceCurrency": "BRL", | ||
| "productTagText": "The perfectly imperfect yellow chair", | ||
| "productImages": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"] | ||
| }, | ||
| { | ||
| "productId": "flowers", | ||
| "productTitle": "Flowers", | ||
| "productBrand": "Very Long Flower Company Name", | ||
| "productPrice": 10.00, | ||
| "productPriceCurrency": "USD", | ||
| "productIcon": "/examples/visual-tests/amp-story/img/shopping/icon.png", | ||
| "productImages": ["https://source.unsplash.com/SavQfLRm4Do/500x500"] | ||
| } | ||
| ] | ||
| } | ||
| </script> | ||
| </amp-story-shopping-config> | ||
| <amp-story-grid-layer template="fill"> | ||
| <amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img> | ||
| </amp-story-grid-layer> | ||
| <amp-story-grid-layer template="vertical"> | ||
| <amp-story-shopping-tag data-product-id="lamp" ></amp-story-shopping-tag> | ||
| <amp-story-shopping-tag data-product-id="art" ></amp-story-shopping-tag> | ||
| <amp-story-shopping-tag data-product-id="chair" ></amp-story-shopping-tag> | ||
| <amp-story-shopping-tag data-product-id="flowers" ></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" : [ | ||
| { | ||
| "productId": "art", | ||
| "productTitle": "Abstract Art", | ||
| "productBrand": "V. Artsy", | ||
| "productPrice": 1200.00, | ||
| "productPriceCurrency": "JPY", | ||
| "productImages": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"] | ||
| }, | ||
| ] | ||
| } | ||
| </script> | ||
| </amp-story-shopping-config> | ||
| <amp-story-grid-layer template="fill"> | ||
|
|
||
| <amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img> | ||
| </amp-story-grid-layer> | ||
| <amp-story-grid-layer template="vertical"> | ||
| <amp-story-shopping-tag data-product-id="art" ></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="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="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img> | ||
| </amp-story-grid-layer> | ||
| <amp-story-grid-layer template="vertical"> | ||
| <amp-story-shopping-tag data-product-id="art" ></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="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img> | ||
| </amp-story-grid-layer> | ||
| <amp-story-shopping-attachment></amp-story-shopping-attachment> | ||
| </amp-story-page> | ||
| </amp-story> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.