Squash commits for: tap to next/previous Story. (ampproject#22684)

Author: gmajoulet

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

@@ -374,7 +374,11 @@ export class AmpStoryPage extends AMP.BaseElement {
         this.state_ = state;
         break;
       case PageState.PAUSED:
-        this.advancement_.stop(true /** canResume */);
+        // canResume keeps the time advancement timer if set to true, and resets
+        // it when set to false. If the bookend if open, reset the timer. If
+        // user is long pressing, don't reset it.
+        const canResume = !this.storeService_.get(StateProperty.BOOKEND_STATE);
+        this.advancement_.stop(canResume);
         this.pauseAllMedia_(false /** rewindToBeginning */);
         if (this.animationManager_) {
           this.animationManager_.pauseAll();
@@ -1077,20 +1081,20 @@ export class AmpStoryPage extends AMP.BaseElement {
    * Navigates to the previous page in the story.
    */
   previous() {
-    const targetPageId = this.getPreviousPageId();
+    const pageId = this.getPreviousPageId();
 
-    if (targetPageId === null) {
+    if (pageId === null) {
       dispatch(
         this.win,
         this.element,
-        EventType.SHOW_NO_PREVIOUS_PAGE_HELP,
+        EventType.NO_PREVIOUS_PAGE,
         /* payload */ undefined,
         {bubbles: true}
       );
       return;
     }
 
-    this.switchTo_(targetPageId, NavigationDirection.PREVIOUS);
+    this.switchTo_(pageId, NavigationDirection.PREVIOUS);
   }
 
   /**
@@ -1102,6 +1106,13 @@ export class AmpStoryPage extends AMP.BaseElement {
     const pageId = this.getNextPageId(isAutomaticAdvance);
 
     if (!pageId) {
+      dispatch(
+        this.win,
+        this.element,
+        EventType.NO_NEXT_PAGE,
+        /* payload */ undefined,
+        {bubbles: true}
+      );
       return;
     }
 

extensions/amp-story/1.0/amp-story-store-service.js

@@ -162,6 +162,7 @@ export const Action = {
   TOGGLE_ACCESS: 'toggleAccess',
   TOGGLE_AD: 'toggleAd',
   TOGGLE_BOOKEND: 'toggleBookend',
+  TOGGLE_CAN_SHOW_BOOKEND: 'toggleCanShowBookend',
   TOGGLE_HAS_SIDEBAR: 'toggleHasSidebar',
   TOGGLE_INFO_DIALOG: 'toggleInfoDialog',
   TOGGLE_INTERACTIVE_COMPONENT: 'toggleInteractiveComponent',
@@ -247,6 +248,10 @@ const actions = (state, action, data) => {
         [StateProperty.BOOKEND_STATE]: !!data,
         [StateProperty.PAUSED_STATE]: !!data,
       }));
+    case Action.TOGGLE_CAN_SHOW_BOOKEND:
+      return /** @type {!State} */ (Object.assign({}, state, {
+        [StateProperty.CAN_SHOW_BOOKEND]: !!data,
+      }));
     case Action.TOGGLE_INTERACTIVE_COMPONENT:
       data = /** @type {InteractiveComponentDef} */ (data);
       return /** @type {!State} */ (Object.assign({}, state, {

extensions/amp-story/1.0/amp-story.js

@@ -427,6 +427,11 @@ export class AmpStory extends AMP.BaseElement {
 
     this.storeService_.dispatch(Action.TOGGLE_UI, this.getUIType_());
 
+    // Disables the bookend entirely if the story is within a group of stories.
+    if (this.viewer_.hasCapability('swipe')) {
+      this.storeService_.dispatch(Action.TOGGLE_CAN_SHOW_BOOKEND, false);
+    }
+
     this.navigationState_.observe(stateChangeEvent => {
       this.variableService_.onNavigationStateChange(stateChangeEvent);
       this.analyticsService_.onNavigationStateChange(stateChangeEvent);
@@ -676,10 +681,12 @@ export class AmpStory extends AMP.BaseElement {
       this.replay_();
     });
 
-    this.element.addEventListener(EventType.SHOW_NO_PREVIOUS_PAGE_HELP, () => {
-      if (this.storeService_.get(StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP)) {
-        this.ampStoryHint_.showFirstPageHintOverlay();
-      }
+    this.element.addEventListener(EventType.NO_NEXT_PAGE, () => {
+      this.onNoNextPage_();
+    });
+
+    this.element.addEventListener(EventType.NO_PREVIOUS_PAGE, () => {
+      this.onNoPreviousPage_();
     });
 
     this.advancement_.addOnTapNavigationListener(direction => {
@@ -1223,21 +1230,24 @@ export class AmpStory extends AMP.BaseElement {
       this.activePage_,
       'No active page set when navigating to next page.'
     );
+    activePage.next(opt_isAutomaticAdvance);
+  }
 
-    const lastPage = this.pages_[this.getPageCount() - 1];
-    if (
-      activePage.element.hasAttribute(Attributes.ADVANCE_TO) ||
-      activePage.element.hasAttribute(Attributes.PUBLIC_ADVANCE_TO) ||
-      activePage !== lastPage
-    ) {
-      activePage.next(opt_isAutomaticAdvance);
-    } else {
-      this.hasBookend_().then(hasBookend => {
-        if (hasBookend) {
-          this.showBookend_();
-        }
-      });
+  /**
+   * Handles EventType.NO_NEXT_PAGE events.
+   * @private
+   */
+  onNoNextPage_() {
+    if (this.viewer_.hasCapability('swipe')) {
+      this.viewer_./*OK*/ sendMessage('selectDocument', dict({'next': true}));
+      return;
     }
+
+    this.hasBookend_().then(hasBookend => {
+      if (hasBookend) {
+        this.showBookend_();
+      }
+    });
   }
 
   /**
@@ -1252,6 +1262,24 @@ export class AmpStory extends AMP.BaseElement {
     activePage.previous();
   }
 
+  /**
+   * Handles EventType.NO_PREVIOUS_PAGE events.
+   * @private
+   */
+  onNoPreviousPage_() {
+    if (this.viewer_.hasCapability('swipe')) {
+      this.viewer_./*OK*/ sendMessage(
+        'selectDocument',
+        dict({'previous': true})
+      );
+      return;
+    }
+
+    if (this.storeService_.get(StateProperty.CAN_SHOW_PREVIOUS_PAGE_HELP)) {
+      this.ampStoryHint_.showFirstPageHintOverlay();
+    }
+  }
+
   /**
    * @param {number} direction The direction to navigate.
    * @private
@@ -2253,7 +2281,10 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   maybePreloadBookend_() {
-    if (!this.activePage_) {
+    if (
+      !this.activePage_ ||
+      !this.storeService_.get(StateProperty.CAN_SHOW_BOOKEND)
+    ) {
       return;
     }
 

extensions/amp-story/1.0/events.js

@@ -43,8 +43,11 @@ export const EventType = {
   // warnings or errors).
   DEV_LOG_ENTRIES_AVAILABLE: 'ampstory:devlogentriesavailable',
 
-  // Triggered when user clicks on left 25% of the first page
-  SHOW_NO_PREVIOUS_PAGE_HELP: 'ampstory:shownopreviouspagehelp',
+  // Triggered when user clicks on end 75% of the last page
+  NO_NEXT_PAGE: 'ampstory:nonextpage',
+
+  // Triggered when user clicks on start 25% of the first page
+  NO_PREVIOUS_PAGE: 'ampstory:nopreviouspage',
 
   // Triggered when a story has loaded at least its initial set of pages.
   STORY_LOADED: 'ampstory:load',

extensions/amp-story/1.0/test/test-amp-story.js

@@ -34,6 +34,7 @@ import {PageState} from '../amp-story-page';
 import {PaginationButtons} from '../pagination-buttons';
 import {Services} from '../../../../src/services';
 import {createElementWithAttributes} from '../../../../src/dom';
+import {poll} from '../../../../testing/iframe';
 import {registerServiceBuilder} from '../../../../src/service';
 import {toggleExperiment} from '../../../../src/experiments';
 
@@ -86,10 +87,23 @@ describes.realWin(
       return eventObj;
     }
 
+    function waitFor(callback, errorMessage) {
+      return poll(
+        errorMessage,
+        () => {
+          return callback();
+        },
+        undefined /** opt_onError */,
+        200 /** opt_timeout */
+      );
+    }
+
     beforeEach(() => {
       win = env.win;
 
       replaceStateStub = sandbox.stub(win.history, 'replaceState');
+      // Required by the bookend code.
+      win.document.title = 'Story';
 
       const viewer = Services.viewerForDoc(env.ampdoc);
       sandbox
@@ -1117,6 +1131,96 @@ describes.realWin(
       });
     });
 
+    describe('amp-story NO_NEXT_PAGE', () => {
+      describe('without #cap=swipe', () => {
+        it('should open the bookend when tapping on the last page', () => {
+          createPages(story.element, 1, ['cover']);
+
+          return story.layoutCallback().then(() => {
+            // Click on right side of the screen to trigger page advancement.
+            const clickEvent = new MouseEvent('click', {clientX: 200});
+            story.activePage_.element.dispatchEvent(clickEvent);
+            return waitFor(() => {
+              return !!story.storeService_.get(StateProperty.BOOKEND_STATE);
+            }, 'BOOKEND_STATE should be true');
+          });
+        });
+      });
+
+      describe('with #cap=swipe', () => {
+        before(() => (hasSwipeCapability = true));
+        after(() => (hasSwipeCapability = false));
+
+        it('should send a message when tapping on last page in viewer', () => {
+          createPages(story.element, 1, ['cover']);
+          const sendMessageStub = sandbox.stub(story.viewer_, 'sendMessage');
+
+          return story.layoutCallback().then(() => {
+            // Click on right side of the screen to trigger page advancement.
+            const clickEvent = new MouseEvent('click', {clientX: 200});
+            story.activePage_.element.dispatchEvent(clickEvent);
+            return waitFor(() => {
+              if (sendMessageStub.calledOnce) {
+                expect(sendMessageStub).to.be.calledWithExactly(
+                  'selectDocument',
+                  {next: true}
+                );
+                return true;
+              }
+              return false;
+            }, 'sendMessageStub should be called');
+          });
+        });
+      });
+    });
+
+    describe('amp-story NO_PREVIOUS_PAGE', () => {
+      describe('without #cap=swipe', () => {
+        it('should open the bookend when tapping on the last page', () => {
+          createPages(story.element, 1, ['cover']);
+          const showPageHintStub = sandbox.stub(
+            story.ampStoryHint_,
+            'showFirstPageHintOverlay'
+          );
+
+          return story.layoutCallback().then(() => {
+            // Click on left side of the screen to trigger page advancement.
+            const clickEvent = new MouseEvent('click', {clientX: 10});
+            story.activePage_.element.dispatchEvent(clickEvent);
+            return waitFor(() => {
+              return showPageHintStub.calledOnce;
+            }, 'showPageHintStub should be called');
+          });
+        });
+      });
+
+      describe('with #cap=swipe', () => {
+        before(() => (hasSwipeCapability = true));
+        after(() => (hasSwipeCapability = false));
+
+        it('should send a message when tapping on last page in viewer', () => {
+          createPages(story.element, 1, ['cover']);
+          const sendMessageStub = sandbox.stub(story.viewer_, 'sendMessage');
+
+          return story.layoutCallback().then(() => {
+            // Click on left side of the screen to trigger page advancement.
+            const clickEvent = new MouseEvent('click', {clientX: 10});
+            story.activePage_.element.dispatchEvent(clickEvent);
+            return waitFor(() => {
+              if (sendMessageStub.calledOnce) {
+                expect(sendMessageStub).to.be.calledWithExactly(
+                  'selectDocument',
+                  {previous: true}
+                );
+                return true;
+              }
+              return false;
+            }, 'sendMessageStub should be called');
+          });
+        });
+      });
+    });
+
     describe('amp-story navigation', () => {
       it('should navigate when performing a navigational click', () => {
         createPages(story.element, 4, ['cover', 'page-1', 'page-2', 'page-3']);