-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🖍 Added shopping tag flip on too far position to the right (#37195)
* added shopping tag flip on specific position * removed a few console logs, added better code flow with less varaible names * added calls to measure and mutate elemetn * added rtl fix * fixed a few typos * added tag flip working for non rtl order * rmeoved gitignore file * added tag flip and onresize callback for tag flip, added helper function for tag flip * added tag flip fix * using page size to determine, might need to fix page size bug to not tuse the window of the whoel apge and intead use the window of the mobile regtangle in a separate pr * added refactor of measure element * added getlyaoutbox * added get layout box calculation adn page size * added correct measurements for transforms, added correct placement for page_resize callback initilaization * removed space * removed trailing whitespace * added proper rtl test * fixed allto initialize and rtl visual diff test * fixed store service page size dimensions for unit test * fixed mutatelement for shopping tag flip * migrated resize code to another PR * fixed settings * added space * removed space * added shopping tag position * added iamphtml to classes * added fix for double measure ele,metn callback * added page 1 visual diff test * added rtl to visual test file * added RTL direction * removed non rtl exampel form story * removed trl exmaples * removed trl exmaples * removed non rtl exampel from story * removed non rtl exampel from story * added back in interactive tests * added back in interactive tests * added back in interactive tests * added back in interactive tests * added back in interactive tests
- Loading branch information
Showing
8 changed files
with
273 additions
and
218 deletions.
There are no files selected for viewing
This file contains 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 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 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.