🚮 Remove navigation state (ampproject#23110)

* remove navigation state

* fix types

* fix tests

* remove comment about using pageId, check for a pageId instead; use callToInitialize

* pageId

Author: Enriqe

build-system/dep-check-config.js

@@ -255,7 +255,6 @@ exports.rules = [
       'extensions/amp-story/1.0/animation.js->extensions/amp-animation/0.1/web-animation-types.js',
       // Story ads
       'extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js->extensions/amp-story/1.0/amp-story-store-service.js',
-      'extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js->extensions/amp-story/1.0/navigation-state.js',
       // TODO(ccordry): remove this after createShadowRootWithStyle is moved to src
       'extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js->extensions/amp-story/1.0/utils.js',
 

extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js

@@ -22,10 +22,6 @@ import {
   createPseudoLocale,
 } from '../../../src/localized-strings';
 import {Services} from '../../../src/services';
-import {
-  StateChangeEventDef,
-  StateChangeType,
-} from '../../amp-story/1.0/navigation-state';
 import {
   StateProperty,
   UIType,
@@ -195,9 +191,6 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     /** @private {?../../amp-story/1.0/amp-story.AmpStory} */
     this.ampStory_ = null;
 
-    /** @private {?../../amp-story/1.0/navigation-state.NavigationState} */
-    this.navigationState_ = null;
-
     /** @private {number} */
     this.uniquePagesCount_ = 0;
 
@@ -327,11 +320,6 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
       return Promise.resolve();
     }
 
-    // TODO(ccordry): Move all this to use store service. We would like to
-    // eventually deprecate navigationState.
-    this.navigationState_ = this.ampStory_.getNavigationState();
-    this.navigationState_.observe(this.handleStateChange_.bind(this));
-
     return this.ampStory_
       .signals()
       .whenSignal(CommonSignals.INI_LOAD)
@@ -377,6 +365,17 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
       },
       true /** callToInitialize */
     );
+
+    this.storeService_.subscribe(StateProperty.CURRENT_PAGE_ID, pageId => {
+      const pageIndex = this.storeService_.get(
+        StateProperty.CURRENT_PAGE_INDEX
+      );
+
+      this.handleActivePageChange_(
+        dev().assertNumber(pageIndex),
+        dev().assertString(pageId)
+      );
+    });
   }
 
   /**
@@ -710,22 +709,6 @@ export class AmpStoryAutoAds extends AMP.BaseElement {
     return true;
   }
 
-  /**
-   * @param {!StateChangeEventDef} stateChangeEvent
-   * @private
-   */
-  handleStateChange_(stateChangeEvent) {
-    switch (stateChangeEvent.type) {
-      case StateChangeType.ACTIVE_PAGE:
-        const {pageIndex, pageId} = stateChangeEvent.value;
-        this.handleActivePageChange_(
-          dev().assertNumber(pageIndex),
-          dev().assertString(pageId)
-        );
-        break;
-    }
-  }
-
   /**
    * @param {number} pageIndex
    * @param {string} pageId

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

@@ -71,7 +71,6 @@ import {Layout} from '../../../src/layout';
 import {LiveStoryManager} from './live-story-manager';
 import {LocalizationService} from '../../../src/service/localization';
 import {MediaPool, MediaType} from './media-pool';
-import {NavigationState} from './navigation-state';
 import {PaginationButtons} from './pagination-buttons';
 import {Services} from '../../../src/services';
 import {ShareMenu} from './amp-story-share-menu';
@@ -245,12 +244,6 @@ export class AmpStory extends AMP.BaseElement {
       this.storeService_.dispatch(Action.TOGGLE_RTL, true);
     }
 
-    // TODO(#19768): Avoid passing a private function here.
-    /** @private {!NavigationState} */
-    this.navigationState_ = new NavigationState(this.win, () =>
-      this.hasBookend_()
-    );
-
     /** @private {!./story-analytics.StoryAnalyticsService} */
     this.analyticsService_ = getAnalyticsService(this.win, this.element);
 
@@ -434,11 +427,6 @@ export class AmpStory extends AMP.BaseElement {
       this.storeService_.dispatch(Action.TOGGLE_CAN_SHOW_BOOKEND, false);
     }
 
-    this.navigationState_.observe(stateChangeEvent => {
-      this.variableService_.onNavigationStateChange(stateChangeEvent);
-      this.analyticsService_.onNavigationStateChange(stateChangeEvent);
-    });
-
     // Removes title in order to prevent incorrect titles appearing on link
     // hover. (See 17654)
     this.element.removeAttribute('title');
@@ -1449,16 +1437,6 @@ export class AmpStory extends AMP.BaseElement {
           }
         }
 
-        const oldPageId = oldPage ? oldPage.element.id : null;
-        // TODO(alanorozco): check if autoplay
-        this.navigationState_.updateActivePage(
-          pageIndex,
-          this.getPageCount(),
-          targetPage.element.id,
-          oldPageId,
-          targetPage.getNextPageId() === null /* isFinalPage */
-        );
-
         // If first navigation.
         if (!oldPage) {
           this.registerAndPreloadBackgroundAudio_();
@@ -2661,11 +2639,6 @@ export class AmpStory extends AMP.BaseElement {
     });
   }
 
-  /** @return {!NavigationState} */
-  getNavigationState() {
-    return this.navigationState_;
-  }
-
   /**
    * Add page to back of pages_ array
    * @param {!./amp-story-page.AmpStoryPage} page

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import {Services} from '../../../src/services';
-import {StateChangeType} from './navigation-state';
+import {StateProperty, getStoreService} from './amp-story-store-service';
 import {getVariableService} from './variable-service';
 import {registerServiceBuilder} from '../../../src/service';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
@@ -76,26 +76,40 @@ export class StoryAnalyticsService {
 
     /** @const @private {!./variable-service.AmpStoryVariableService} */
     this.variableService_ = getVariableService(win);
+
+    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = getStoreService(win);
+
+    this.initializeListeners_();
   }
 
-  /**
-   * @param {!./navigation-state.StateChangeEventDef} stateChangeEvent
-   */
-  onNavigationStateChange(stateChangeEvent) {
-    switch (stateChangeEvent.type) {
-      case StateChangeType.ACTIVE_PAGE:
+  /** @private */
+  initializeListeners_() {
+    this.storeService_.subscribe(StateProperty.BOOKEND_STATE, isActive => {
+      this.triggerEvent(
+        isActive ? AnalyticsEvent.BOOKEND_ENTER : AnalyticsEvent.BOOKEND_EXIT
+      );
+    });
+
+    this.storeService_.subscribe(
+      StateProperty.CURRENT_PAGE_ID,
+      pageId => {
+        if (!pageId) {
+          return;
+        }
+
         this.triggerEvent(AnalyticsEvent.PAGE_VISIBLE);
-        break;
-      case StateChangeType.BOOKEND_ENTER:
-        this.triggerEvent(AnalyticsEvent.BOOKEND_ENTER);
-        break;
-      case StateChangeType.BOOKEND_EXIT:
-        this.triggerEvent(AnalyticsEvent.BOOKEND_EXIT);
-        break;
-      case StateChangeType.LAST_PAGE:
-        this.triggerEvent(AnalyticsEvent.LAST_PAGE_VISIBLE);
-        break;
-    }
+
+        const pageIds = this.storeService_.get(StateProperty.PAGE_IDS);
+        const pageIndex = this.storeService_.get(
+          StateProperty.CURRENT_PAGE_INDEX
+        );
+        if (pageIndex === pageIds.length - 1) {
+          this.triggerEvent(AnalyticsEvent.LAST_PAGE_VISIBLE);
+        }
+      },
+      true /* callToInitialize */
+    );
   }
 
   /**

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

@@ -165,24 +165,6 @@ describes.realWin(
         });
     });
 
-    it('should update the navigation state when built', () => {
-      const firstPageId = 'cover';
-      const pageCount = 2;
-      createPages(story.element, pageCount, [firstPageId, 'page-1']);
-      const updateActivePageStub = sandbox.stub(
-        story.navigationState_,
-        'updateActivePage'
-      );
-
-      return story.layoutCallback().then(() => {
-        expect(updateActivePageStub).to.have.been.calledWith(
-          0,
-          pageCount,
-          firstPageId
-        );
-      });
-    });
-
     it('should remove text child nodes when built', () => {
       createPages(story.element, 1, ['cover']);
       const textToRemove = 'this should be removed';
@@ -321,10 +303,7 @@ describes.realWin(
       createPages(story.element, 2, ['cover', 'page-1']);
 
       return story.layoutCallback().then(() => {
-        const paginationButtonsStub = {
-          attach: sandbox.spy(),
-          onNavigationStateChange: sandbox.spy(),
-        };
+        const paginationButtonsStub = {attach: sandbox.spy()};
         sandbox
           .stub(PaginationButtons, 'create')
           .returns(paginationButtonsStub);