SwG Release Nov. 19, 2020 (#31266)

ampproject · Nov 25, 2020 · 2924009 · 2924009
1 parent 61ead87
commit 2924009
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 15 deletions.
diff --git a/third_party/subscriptions-project/config.js b/third_party/subscriptions-project/config.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/** Version: 0.1.22.131 */
+/** Version: 0.1.22.133 */
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *

diff --git a/third_party/subscriptions-project/swg.js b/third_party/subscriptions-project/swg.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/** Version: 0.1.22.131 */
+/** Version: 0.1.22.133 */
 /**
  * Copyright 2018 The Subscribe with Google Authors. All Rights Reserved.
  *
@@ -6079,7 +6079,7 @@ function feCached(url) {
  */
 function feArgs(args) {
   return Object.assign(args, {
-    '_client': 'SwG 0.1.22.131',
+    '_client': 'SwG 0.1.22.133',
   });
 }
 
@@ -7198,7 +7198,7 @@ class ActivityPorts$1 {
         'analyticsContext': context.toArray(),
         'publicationId': pageConfig.getPublicationId(),
         'productId': pageConfig.getProductId(),
-        '_client': 'SwG 0.1.22.131',
+        '_client': 'SwG 0.1.22.133',
         'supportsEventManager': true,
       },
       args || {}
@@ -8047,7 +8047,7 @@ class AnalyticsService {
       context.setTransactionId(getUuid());
     }
     context.setReferringOrigin(parseUrl$1(this.getReferrer_()).origin);
-    context.setClientVersion('SwG 0.1.22.131');
+    context.setClientVersion('SwG 0.1.22.133');
     context.setUrl(getCanonicalUrl(this.doc_));
 
     const utmParams = parseQueryString$1(this.getQueryString_());
@@ -10410,6 +10410,13 @@ class DialogManager {
     }
   }
 
+  /**
+   * @returns {?Dialog}
+   */
+  getDialog() {
+    return this.dialog_;
+  }
+
   /** @private */
   close_() {
     this.dialog_.close();
@@ -10478,6 +10485,9 @@ const MeterClientTypes = {
  * limitations under the License.
  */
 
+const IFRAME_BOX_SHADOW =
+  'rgba(60, 64, 67, .3) 0 -2px 5px, rgba(60, 64, 67, .15) 0 -5px 5px';
+
 class MeterToastApi {
   /**
    * @param {!./deps.DepsDef} deps
@@ -10495,13 +10505,6 @@ class MeterToastApi {
     /** @private @const {!../components/dialog-manager.DialogManager} */
     this.dialogManager_ = deps.dialogManager();
 
-    /** @private @const {!function()} */
-    this.sendCloseRequestFunction_ = () => {
-      const closeRequest = new ToastCloseRequest();
-      closeRequest.setClose(true);
-      this.activityIframeView_.execute(closeRequest);
-    };
-
     /** @private @const {!ActivityIframeView} */
     this.activityIframeView_ = new ActivityIframeView(
       this.win_,
@@ -10514,6 +10517,13 @@ class MeterToastApi {
       }),
       /* shouldFadeBody */ false
     );
+
+    /** @private @const {!function()} */
+    this.sendCloseRequestFunction_ = () => {
+      const closeRequest = new ToastCloseRequest();
+      closeRequest.setClose(true);
+      this.activityIframeView_.execute(closeRequest);
+    };
   }
 
   /**
@@ -10524,12 +10534,22 @@ class MeterToastApi {
     this.deps_
       .callbacks()
       .triggerFlowStarted(SubscriptionFlows.SHOW_METER_TOAST);
-    this.win_.addEventListener('click', this.sendCloseRequestFunction_);
     this.activityIframeView_.on(
       ViewSubscriptionsResponse,
       this.startNativeFlow_.bind(this)
     );
-    return this.dialogManager_.openView(this.activityIframeView_);
+    return this.dialogManager_.openView(this.activityIframeView_).then(() => {
+      this.setDialogBoxShadow_();
+      // Allow closing of the iframe with any scroll or click event.
+      this.win_.addEventListener('click', this.sendCloseRequestFunction_);
+      this.win_.addEventListener('touchstart', this.sendCloseRequestFunction_);
+      this.win_.addEventListener('mousedown', this.sendCloseRequestFunction_);
+      this.win_.addEventListener('wheel', this.sendCloseRequestFunction_);
+      // Making body's overflow property 'hidden' to prevent scrolling
+      // while swiping on the iframe.
+      const $body = this.win_.document.body;
+      setStyle($body, 'overflow', 'hidden');
+    });
   }
 
   /**
@@ -10541,10 +10561,33 @@ class MeterToastApi {
   }
 
   /**
-   * Removes the event listener that closes the iframe.
+   * Removes the event listeners that close the iframe and make the body visible.
    */
   removeCloseEventListener() {
     this.win_.removeEventListener('click', this.sendCloseRequestFunction_);
+    this.win_.removeEventListener('touchstart', this.sendCloseRequestFunction_);
+    this.win_.removeEventListener('mousedown', this.sendCloseRequestFunction_);
+    this.win_.removeEventListener('wheel', this.sendCloseRequestFunction_);
+    const $body = this.win_.document.body;
+    setStyle($body, 'overflow', 'visible');
+  }
+
+  /**
+   * Changes the iframe box shadow to match desired specifications on mobile.
+   */
+  setDialogBoxShadow_() {
+    const mq = this.win_.matchMedia('(max-width: 640px), (max-height: 640px)');
+    const element = this.dialogManager_.getDialog().getElement();
+    if (mq.matches) {
+      setImportantStyles(element, {'box-shadow': IFRAME_BOX_SHADOW});
+    }
+    mq.addListener((changed) => {
+      if (changed.matches) {
+        setImportantStyles(element, {'box-shadow': IFRAME_BOX_SHADOW});
+      } else {
+        setImportantStyles(element, {'box-shadow': ''});
+      }
+    });
   }
 
   /**