Implement sticky ad bottom type ad

ampproject · Dec 16, 2020 · 7b8fe35 · 7b8fe35
1 parent 37dc08b
commit 7b8fe35
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 14 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,32 @@ 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) {
+    if (newHeight) {
+      setStyle(element, 'height', newHeight, 'px');
+    }
+    if (newWidth) {
+      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
@@ -52,6 +52,12 @@ amp-embed iframe {
 
 amp-ad[sticky] {
   visibility: hidden;
+  align-items: center;
+}
+
+amp-ad[amp-story] iframe {
+  width: 100%;
+  height: 100%;
 }
 
 amp-ad[type='adsense'],
@@ -116,12 +122,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'] {

diff --git a/extensions/amp-ad/0.1/test/test-amp-ad-ui.js b/extensions/amp-ad/0.1/test/test-amp-ad-ui.js
@@ -245,6 +245,7 @@ describes.realWin(
             height: '50px',
           });
           env.win.document.body.appendChild(adElement);
+          env.sandbox.stub(uiHandler, 'setSize_');
           env.sandbox
             .stub(adImpl, 'attemptChangeSize')
             .callsFake((height, width) => {
@@ -262,6 +263,7 @@ describes.realWin(
         });
 
         it('should tolerate string input', () => {
+          env.sandbox.stub(uiHandler, 'setSize_');
           env.sandbox
             .stub(adImpl, 'attemptChangeSize')
             .callsFake((height, width) => {

diff --git a/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css b/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
- .i-amphtml-story-desktop-panels amp-story-page[i-amphtml-loading][ad] {
+.i-amphtml-story-desktop-panels amp-story-page[i-amphtml-loading][ad] {
   /* Move below viewport so that ad preloads */
-  transform: scale(1.0) translateX(-100%) translateY(200%) !important;
+  transform: scale(1) translateX(-100%) translateY(200%) !important;
 }
 
 .i-amphtml-cta-container {
@@ -43,21 +43,23 @@ amp-story-page[xdomain-ad] .i-amphtml-glass-pane {
 }
 
 /* TODO(ccordry): refactor centering logic in amp-ad.css and remove this hack.  */
-amp-story-page amp-ad[data-a4a-upgrade-type="amp-ad-network-doubleclick-impl"] > iframe,
-amp-story-page amp-ad[type="adsense"] > iframe {
+amp-story-page amp-ad[data-a4a-upgrade-type='amp-ad-network-doubleclick-impl'],
+amp-story-page amp-ad[type='adsense'] {
   top: 0 !important;
   left: 0 !important;
   transform: translate(0) !important;
 }
 
 /* TODO(ccordry) allow advertisers to opt-in to fullscreen ads. */
-.i-amphtml-story-desktop-fullbleed .i-amphtml-story-grid-template-fill > amp-ad > iframe {
+.i-amphtml-story-desktop-fullbleed
+  .i-amphtml-story-grid-template-fill
+  > amp-ad {
   left: 50% !important;
   right: auto !important;
   margin: auto !important;
   min-height: 75vh !important;
   max-height: 75vh !important;
-  min-width: calc(3/5 * 75vh) !important;
-  max-width: calc(3/5 * 75vh) !important;
+  min-width: calc(3 / 5 * 75vh) !important;
+  max-width: calc(3 / 5 * 75vh) !important;
   transform: translateX(-50%) !important;
 }