Implement sticky ad bottom type ad

ampproject · Dec 8, 2020 · a025fe5 · a025fe5
1 parent 37dc08b
commit a025fe5
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 7 deletions.
diff --git a/examples/sticky.ads.amp.html b/examples/sticky.ads.amp.html
@@ -208,14 +208,26 @@
   </header>
   <main role="main">
 
+  <amp-user-notification
+          layout=nodisplay
+          id="amp-user-notification6"
+          data-persist-dismissal="false">
+    This notification should ALSO ALWAYS show.
+    <a href="#learn-more">Learn more.</a>
+    <button on="tap:amp-user-notification6.dismiss" role="button" tabindex="5">Dismiss</button>
+  </amp-user-notification>
+
+
+  <amp-sticky-ad layout="nodisplay">
     <amp-ad width=300 height=50
-        sticky=bottom
+        data-consent-notification-id="amp-user-notification6"
         type="_ping_"
         data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
         data-valid='true'
         data-ad-width=300
         data-ad-height=50>
     </amp-ad>
+  </amp-sticky-ad>
     <article>
 
 

diff --git a/extensions/amp-a4a/0.1/amp-a4a.js b/extensions/amp-a4a/0.1/amp-a4a.js
@@ -1714,7 +1714,6 @@ export class AmpA4A extends AMP.BaseElement {
       height,
       width
     );
-    this.applyFillContent(this.iframe);
 
     let body = '';
     // If srcdoc is not supported, streaming is also not supported so we
@@ -1789,7 +1788,6 @@ export class AmpA4A extends AMP.BaseElement {
         'title': this.getIframeTitle(),
       })
     ));
-    this.applyFillContent(this.iframe);
     const fontsArray = [];
     if (creativeMetaData.customStylesheets) {
       creativeMetaData.customStylesheets.forEach((s) => {

diff --git a/extensions/amp-ad/0.1/amp-ad-ui.js b/extensions/amp-ad/0.1/amp-ad-ui.js
@@ -20,6 +20,7 @@ import {
   createElementWithAttributes,
   removeElement,
 } from '../../../src/dom';
+import {devAssert} from '../../../src/log';
 import {dict} from '../../../src/utils/object';
 
 import {getAdContainer} from '../../../src/ad-helper';
@@ -207,6 +208,17 @@ export class AmpAdUIHandler {
   maybeInitStickyAd() {
     if (this.isStickyAd()) {
       setStyle(this.element_, 'visibility', 'visible');
+
+      if (this.stickyAdPosition_ == StickyAdPositions.BOTTOM) {
+        const paddingBar = this.doc_.createElement('amp-ad-sticky-padding');
+        this.element_.insertBefore(
+          paddingBar,
+          devAssert(
+            this.element_.firstChild,
+            'amp-ad should have been expanded.'
+          )
+        );
+      }
     }
   }
 
@@ -312,10 +324,10 @@ export class AmpAdUIHandler {
     }
 
     // Special case: for sticky ads, we enforce 20% size limit and 50% height limit
-    if (this.element_.hasAttribute('sticky')) {
+    if (this.isStickyAd()) {
       const viewport = this.baseInstance_.getViewport();
       if (
-        newHeight * newWidth >
+        height * width >
           STICKY_AD_MAX_SIZE_LIMIT *
             viewport.getHeight() *
             viewport.getWidth() ||
@@ -328,14 +340,28 @@ export class AmpAdUIHandler {
     return this.baseInstance_
       .attemptChangeSize(newHeight, newWidth, event)
       .then(
-        () => resizeInfo,
+        () => {
+          this.setSize_(this.element_.querySelector('iframe'), height, width);
+          return resizeInfo;
+        },
         () => {
           resizeInfo.success = false;
           return resizeInfo;
         }
       );
   }
 
+  /**
+   * Force set the dimensions for an element
+   * @param {Any} element
+   * @param {number} newHeight
+   * @param {number} newWidth
+   */
+  setSize_(element, newHeight, newWidth) {
+    setStyle(element, 'height', newHeight, 'px');
+    setStyle(element, 'width', newWidth, 'px');
+  }
+
   /**
    * Clean up the listeners
    */

diff --git a/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js b/extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js
@@ -100,7 +100,6 @@ export class AmpAdXOriginIframeHandler {
     devAssert(!this.iframe, 'multiple invocations of init without destroy!');
     this.iframe = iframe;
     this.iframe.setAttribute('scrolling', 'no');
-    this.baseInstance_.applyFillContent(this.iframe);
     const timer = Services.timerFor(this.baseInstance_.win);
 
     // Init the legacy observeInterection API service.

diff --git a/extensions/amp-ad/0.1/amp-ad.css b/extensions/amp-ad/0.1/amp-ad.css
@@ -23,6 +23,7 @@ amp-embed iframe {
   border: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
+  position: relative;
 }
 
 .i-amphtml-ad-default-holder {
@@ -52,6 +53,7 @@ amp-embed iframe {
 
 amp-ad[sticky] {
   visibility: hidden;
+  align-items: center;
 }
 
 amp-ad[type='adsense'],
@@ -116,12 +118,26 @@ amp-ad .amp-ad-close-button:before {
   left: 0;
 }
 
+amp-ad-sticky-padding {
+  display: block;
+  width: 100% !important;
+  background: #fff;
+  height: 4px;
+  max-height: 5px !important;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  /** Must be above the dismiss button to cover bottom shadow */
+  z-index: 12;
+}
+
 amp-ad[sticky] {
   z-index: 11;
   position: fixed;
   overflow: visible !important;
   padding-bottom: env(safe-area-inset-bottom, 0px);
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2) !important;
+  display: flex;
+  flex-direction: column;
 }
 
 amp-ad[sticky='top'] {