✨<amp-next-page> v2 default and templated footers (more articles box) (…

…#26610)

* Implements default and templated footers

* Fixes type checking

* Type checking fixes

* Added tests

* Simplifies separator and implements requested changes (1/2)

* Requested changes (2/2)

* Requested changes (2/2)

* Fixes type check

extensions/amp-next-page/1.0/amp-next-page.css

@@ -27,25 +27,6 @@
   overflow: visible;
 }
 
-.amp-next-page-default-separator {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  width: 160px;
-  height: 38px;
-  margin: auto;
-  border-radius: 32px;
-  box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.09);
-  background: black;
-  color: white;
-}
-
 /** Fixes collapsing margins when switching between the visible and hidden states */
 .i-amphtml-next-page-document:before,
 .i-amphtml-next-page-document:after {
@@ -56,3 +37,43 @@
 .i-amphtml-next-page-placeholder {
   background: #eee;
 }
+
+/** Default separator styles */
+.amp-next-page-separator {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+/** Default footer styles */
+.amp-next-page-footer {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin-top: 16px;
+}
+
+.amp-next-page-footer-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.amp-next-page-footer-article {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  display: block;
+  overflow: auto;
+  padding: 10px 0;
+  text-decoration: none;
+}
+
+.amp-next-page-footer-image {
+  width: 72px;
+  height: 72px;
+  float: left;
+  margin: 0 10px;
+  background-size: cover;
+  background-position: center;
+}
+
+.amp-next-page-footer-title {
+  position: relative;
+  margin: 5px 30px 5px 0;
+  color: #3c4043;
+  font-size: 17px;
+}

extensions/amp-next-page/1.0/page.js

@@ -127,37 +127,44 @@ export class Page {
   }
 
   /**
+   * @param {!PageState} state
    * @return {boolean}
    */
-  isVisible() {
-    return this.visibilityState_ === VisibilityState.VISIBLE;
+  is(state) {
+    return this.state_ === state;
   }
 
   /**
    * @return {boolean}
    */
-  isPaused() {
-    return this.state_ === PageState.PAUSED;
+  isLoaded() {
+    return (
+      this.state_ === PageState.LOADED ||
+      this.state_ === PageState.INSERTED ||
+      this.state_ === PageState.PAUSED
+    );
   }
 
   /**
-   * @return {!VisibilityState}
-   * @visibleForTesting
+   * @return {boolean}
    */
-  getVisibilityState() {
-    return this.visibilityState_;
+  isVisible() {
+    return this.isLoaded() && this.visibilityState_ === VisibilityState.VISIBLE;
   }
 
   /**
    * @param {VisibilityState} visibilityState
    */
   setVisibility(visibilityState) {
-    if (visibilityState == this.visibilityState_) {
+    if (!this.isLoaded() || visibilityState == this.visibilityState_) {
       return;
     }
 
     //Reload the page if necessary
-    if (this.isPaused() && visibilityState === VisibilityState.VISIBLE) {
+    if (
+      this.is(PageState.PAUSED) &&
+      visibilityState === VisibilityState.VISIBLE
+    ) {
       this.resume();
     }
 
@@ -189,7 +196,7 @@ export class Page {
       return Promise.resolve();
     }
     return this.shadowDoc_.close().then(() => {
-      this.manager_.closeDocument(this /** page */).then(() => {
+      return this.manager_.closeDocument(this /** page */).then(() => {
         this.shadowDoc_ = null;
         this.visibilityState_ = VisibilityState.HIDDEN;
         this.state_ = PageState.PAUSED;
@@ -200,25 +207,10 @@ export class Page {
   /**
    * Removes the placeholder and re-renders the page after its shadow
    * root has been removed
+   * @return {!Promise}
    */
   resume() {
-    this.attach_();
-  }
-
-  /**
-   * @return {boolean}
-   */
-  isFetching() {
-    return this.state_ === PageState.FETCHING;
-  }
-
-  /**
-   * @return {boolean}
-   */
-  isLoaded() {
-    return (
-      this.state_ === PageState.LOADED || this.state_ === PageState.INSERTED
-    );
+    return this.attach_();
   }
 
   /**
@@ -244,40 +236,40 @@ export class Page {
       .then(content => {
         this.state_ = PageState.LOADED;
         this.content_ = content;
-        return this.manager_.createDocumentContainerForPage(this /** page */);
-      })
-      .then(container => {
-        this.container_ = container;
+        this.container_ = this.manager_.createDocumentContainerForPage(
+          this /** page */
+        );
         // TODO(wassgha): To further optimize, this should ideally
         // be parsed from the service worker instead of stored in memory
-        this.attach_();
+        return this.attach_();
       })
       .catch(() => {
         this.state_ = PageState.FAILED;
-        // TOOD(wassgha): Silently skips this page, should we re-try or show an error state?
-        this.manager_.setLastFetchedPage(this);
       });
   }
 
   /**
    * Inserts the fetched (or cached) HTML as the document's content
+   * @return {!Promise}
    */
   attach_() {
-    const shadowDoc = this.manager_.attachDocumentToPage(
-      this /** page */,
-      /** @type {!Document} */ (devAssert(this.content_)),
-      this.isPaused() /** force */
-    );
-
-    if (shadowDoc) {
-      this.shadowDoc_ = shadowDoc;
-      if (!this.isPaused()) {
-        this.manager_.setLastFetchedPage(this);
-      }
-      this.state_ = PageState.INSERTED;
-    } else {
-      this.state_ = PageState.FAILED;
-    }
+    return this.manager_
+      .attachDocumentToPage(
+        this /** page */,
+        /** @type {!Document} */ (devAssert(this.content_)),
+        this.is(PageState.PAUSED) /** force */
+      )
+      .then(shadowDoc => {
+        if (!shadowDoc) {
+          this.state_ = PageState.FAILED;
+          return;
+        }
+        this.state_ = PageState.INSERTED;
+        this.shadowDoc_ = shadowDoc;
+        if (!this.is(PageState.PAUSED)) {
+          this.manager_.setLastFetchedPage(this);
+        }
+      });
   }
 }