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

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);
+ }
+ });
  }
 }