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
ampproject · jshamble · Feb 2, 2022 · Dec 13, 2021 · Dec 13, 2021 · Dec 14, 2021
commit f426d8cfeb3f7093407a5a69e0d7c3ec6f6252a7
diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.css
@@ -14,7 +14,7 @@ amp-story-shopping-tag {
   --i-amphtml-shopping-tag-backdrop-filter: blur(20px);
 }
 
-.amp-story-shopping-product-tag-text {
+.i-amphtml-amp-story-shopping-product-tag-text {
   font-weight: 600 !important;
   font-size: 11px !important;
   line-height: 15.4px !important;
@@ -23,15 +23,15 @@ amp-story-shopping-tag {
 }
 
 /* Maintains the dot position in RTL mode */
-[dir=rtl].amp-story-shopping-tag-inner {
+[dir=rtl].i-amphtml-amp-story-shopping-tag-inner {
   flex-flow: row-reverse !important;
 }
 
-[dir=rtl] .amp-story-shopping-tag-dot {
+[dir=rtl] .i-amphtml-amp-story-shopping-tag-dot {
   margin-inline-start: 4px !important;
 }
 
-.amp-story-shopping-tag-inner {
+.i-amphtml-amp-story-shopping-tag-inner {
   height: 36px !important;
   display: flex !important;
   align-items: center !important;
@@ -40,17 +40,21 @@ amp-story-shopping-tag {
   opacity: 0 !important;
 }
 
-.amp-story-shopping-tag-visible { 
+.i-amphtml-amp-story-shopping-tag-visible { 
   opacity: 1 !important;
 }
 
-.amp-story-shopping-tag-inner-flipped {
+.i-amphtml-amp-story-shopping-tag-inner-flipped {
   flex-direction: row-reverse !important;
   transform: translate(-80%) !important;
   margin-inline-start: 4px !important;
 }
 
-.amp-story-shopping-tag-dot {
+.i-amphtml-amp-story-shopping-tag-dot-flipped {
+  margin-inline-start: 4px !important;
+}
+
+.i-amphtml-amp-story-shopping-tag-dot {
   width: 16px !important;
   height: 16px !important;
   border-radius: 100% !important;
@@ -62,10 +66,9 @@ amp-story-shopping-tag {
   margin-inline-end: 4px !important;
   flex-shrink: 0 !important;
   backdrop-filter: var(--i-amphtml-shopping-tag-backdrop-filter) !important;
-
 }
 
-.amp-story-shopping-tag-dot:before {
+.i-amphtml-amp-story-shopping-tag-dot:before {
   border-radius: 100% !important;
   content: '' !important;
   width: 8px !important;
@@ -74,7 +77,7 @@ amp-story-shopping-tag {
   box-shadow: 0px 2px 8px var(--i-amphtml-shopping-tag-bg-color) !important;
 }
 
-.amp-story-shopping-tag-pill {
+.i-amphtml-amp-story-shopping-tag-pill {
   display: flex !important;
   align-items: center !important;
   border-radius: 18px !important;
@@ -84,7 +87,7 @@ amp-story-shopping-tag {
   backdrop-filter: var(--i-amphtml-shopping-tag-backdrop-filter) !important;
 }
 
-.amp-story-shopping-tag-pill-image {
+.i-amphtml-amp-story-shopping-tag-pill-image {
   width: 24px !important;
   height: 24px !important;
   display: flex !important;
@@ -98,7 +101,7 @@ amp-story-shopping-tag {
   background-position: center !important;
 }
 
-.amp-story-shopping-tag-pill-text {
+.i-amphtml-amp-story-shopping-tag-pill-text {
   font-size: 14px !important;
   padding: 0 6px 0 4px !important;
 }
diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
@@ -69,44 +69,48 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
       this.onRtlStateUpdate_(rtlState);
     });
 
-    this.storeService_.subscribe(StateProperty.PAGE_SIZE, () => {
-      this.onPageSizeStateUpdate_();
+    this.storeService_.subscribe(StateProperty.PAGE_SIZE, (pageSizeState) => {
+      this.shouldTagFlip_(pageSizeState);
     });
   }
 
   /**
    * Helper function to check if the shopping tag should flip if it's too far to the right.
+   * @param {!Object} pageSize
    * @private
    */
-  shoudTagFlip_() {
-    const {offsetLeft, offsetWidth} = this.element;
+  shouldTagFlip_(pageSize) {
     this.measureElement(() => {
       /* We only check the right hand side, as resizing only expands the border to the right. */
+      const {offsetLeft, offsetWidth} = this.element;
 
-      const storyPageWidth =
-        this.element.closest('amp-story-page')./*OK*/ offsetWidth;
-      const shouldFlip = offsetLeft + offsetWidth > storyPageWidth;
+      const storyPageWidth = pageSize.width;
 
-      this.shoppingTagEl_.classList.toggle(
-        'amp-story-shopping-tag-inner-flipped',
-        shouldFlip
-      );
+      const shouldFlip = offsetLeft + offsetWidth > storyPageWidth;
 
-      this.shoppingTagEl_.classList.toggle(
-        'amp-story-shopping-tag-visible',
-        true
-      );
+      this.mutateElement(() => {
+        this.shoppingTagEl_.classList.toggle(
+          'i-amphtml-amp-story-shopping-tag-inner-flipped',
+          shouldFlip
+        );
+
+        const dotEl = this.shoppingTagEl_.querySelector(
+          '.i-amphtml-amp-story-shopping-tag-dot'
+        );
+
+        dotEl.classList.toggle(
+          'i-amphtml-amp-story-shopping-tag-dot-flipped',
+          shouldFlip
+        );
+
+        this.shoppingTagEl_.classList.toggle(
+          'i-amphtml-amp-story-shopping-tag-visible',
+          true
+        );
+      });
     });
   }
 
-  /**
-   * Reacts to PageSize state updates and triggers the UI for PageSize.
-   * @private
-   */
-  onPageSizeStateUpdate_() {
-    this.shoudTagFlip_();
-  }
-
   /**
    * Reacts to RTL state updates and triggers the UI for RTL.
    * @param {boolean} rtlState
@@ -140,14 +144,14 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
   renderShoppingTagTemplate_() {
     return (
       <div
-        class="amp-story-shopping-tag-inner"
+        class="i-amphtml-amp-story-shopping-tag-inner"
         role="button"
         onClick={() => this.onClick_()}
       >
-        <span class="amp-story-shopping-tag-dot"></span>
-        <span class="amp-story-shopping-tag-pill">
+        <span class="i-amphtml-amp-story-shopping-tag-dot"></span>
+        <span class="i-amphtml-amp-story-shopping-tag-pill">
           <span
-            class="amp-story-shopping-tag-pill-image"
+            class="i-amphtml-amp-story-shopping-tag-pill-image"
             style={
               this.tagData_['product-icon'] && {
                 backgroundImage:
@@ -156,9 +160,9 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
               }
             }
           ></span>
-          <span class="amp-story-shopping-tag-pill-text">
+          <span class="i-amphtml-amp-story-shopping-tag-pill-text">
             {(this.tagData_['product-tag-text'] && (
-              <span class="amp-story-shopping-product-tag-text">
+              <span class="i-amphtml-amp-story-shopping-product-tag-text">
                 {this.tagData_['product-tag-text']}
               </span>
             )) ||
@@ -198,7 +202,7 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
       );
       this.hasAppendedInnerShoppingTagEl_ = true;
 
-      this.shoudTagFlip_();
+      this.shouldTagFlip_(this.storeService_.get(StateProperty.PAGE_SIZE));
     });
   }