✨ Enable branching outlinks that point to another page in the same st…

…ory (#39556) * Fix branching animation by not opening the drawer * Add comments for private vars * Fix null checker in the getter method * Fix comments
ampproject · Oct 23, 2023 · 713596c · 713596c
1 parent 7d41974
commit 713596c
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 22 deletions.
diff --git a/examples/amp-story/animations-presets.html b/examples/amp-story/animations-presets.html
@@ -105,6 +105,10 @@ <h1 animate-in="fly-in-left">fly-in-left</h1>
           <h1 animate-in="fly-in-right">fly-in-right</h1>
         </div>
       </amp-story-grid-layer>
+      <amp-story-page-outlink
+          layout="nodisplay">
+          <a href="http://localhost:8000/examples/amp-story/animations-presets.html#page=fly-in-left-page" title="Link Description"></a>
+        </amp-story-page-outlink>
     </amp-story-page>
 
     <amp-story-page id="fly-in-top-page">
@@ -121,6 +125,14 @@ <h1 animate-in="fly-in-top">fly-in-top</h1>
           <h1 animate-in="fly-in-bottom">fly-in-bottom</h1>
         </div>
       </amp-story-grid-layer>
+      <amp-story-page-attachment
+          title="Link Description"
+          data-title="Data-Title"
+          href="http://localhost:8000/examples/amp-story/animations-presets.html#page=fly-in-top-page"
+          cta-text="Shop at Forbes"
+          data-cta-text="Data-CTA-Text"
+          layout="nodisplay">
+        </amp-story-page-attachment>
     </amp-story-page>
 
     <amp-story-page id="rotate-in-left-page">

diff --git a/examples/amp-story/attachment.html b/examples/amp-story/attachment.html
@@ -247,6 +247,21 @@
         </amp-story-page-outlink>
       </amp-story-page>
 
+      <amp-story-page id="outlink-default-hash-navigation">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Outlink linking to another page in the same story.</span></br></br>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-outlink
+          layout="nodisplay">
+          <a href="http://localhost:8000/examples/amp-story/attachment.html#page=outlink-default" title="Link Description"></a>
+        </amp-story-page-outlink>
+      </amp-story-page>
+
       <amp-story-page id="outlink-custom-icon-custom-text">
         <amp-story-grid-layer template="fill">
           <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
@@ -386,6 +401,25 @@
         </amp-story-page-attachment>
       </amp-story-page>
 
+      <amp-story-page id="legacy-attachment-hash-navigation">
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="center">
+          <p>
+            <span data-text-background-color="crimson">Page attachment linking to another page in the same story.</span></br></br>
+          </p>
+        </amp-story-grid-layer>
+        <amp-story-page-attachment
+          title="Link Description"
+          data-title="Data-Title"
+          href="http://localhost:8000/examples/amp-story/attachment.html#page=legacy-attachment"
+          cta-text="Shop at Forbes"
+          data-cta-text="Data-CTA-Text"
+          layout="nodisplay">
+        </amp-story-page-attachment>
+      </amp-story-page>
+
       <amp-story-page id="last-page-no-cta">
         <amp-story-grid-layer template="fill">
           <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img>

diff --git a/extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js b/extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js
@@ -91,6 +91,12 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
 
     /** @private {?AttachmentType} */
     this.type_ = null;
+
+    /** @private {?Element} */
+    this.outlinkEl_ = null;
+
+    /** @private {?Element} */
+    this.legacyOutlinkEl_ = null;
   }
 
   /**
@@ -394,10 +400,89 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
     );
   }
 
+  /**
+   * Get outlink element.
+   * @return {?Element}
+   * @private
+   */
+  getOutlinkEl_() {
+    if (!this.outlinkEl_) {
+      this.outlinkEl_ = this.element.parentElement
+        .querySelector('amp-story-page-outlink')
+        ?.querySelector('a');
+    }
+    return this.outlinkEl_;
+  }
+
+  /**
+   * Get legacy outlink element.
+   * @return {?Element}
+   * @private
+   */
+  getLegacyOutlinkEl_() {
+    if (!this.legacyOutlinkEl_) {
+      this.legacyOutlinkEl_ = this.element.parentElement
+        .querySelector('.i-amphtml-story-page-open-attachment-host')
+        ?.shadowRoot?.querySelector('a.i-amphtml-story-page-open-attachment');
+    }
+    return this.legacyOutlinkEl_;
+  }
+
+  /**
+   * Check if two URLs have the same origin and path but different hashes at the end.
+   * @param {string} url1
+   * @param {string} url2
+   * @return {boolean}
+   * @private
+   */
+  urlsHaveSameOriginAndPath_(url1, url2) {
+    if (!url1 || !url2) {
+      return false;
+    }
+
+    const url1WithoutHash = url1.split('#')[0];
+    const url2WithoutHash = url2.split('#')[0];
+
+    return url1WithoutHash === url2WithoutHash;
+  }
+
+  /**
+   * If the element is an amp-story-page-outlink the click target is its anchor element child.
+   * This is for SEO and analytics optimisation.
+   * Otherwise the element is the legacy version, amp-story-page-attachment with an href,
+   * and a click target is the button built by the component.
+   * @private
+   */
+  programmaticallyClickOnOutlink_() {
+    const pageOutlinkChild = this.getOutlinkEl_();
+    const pageAttachmentChild = this.getLegacyOutlinkEl_();
+    if (pageOutlinkChild) {
+      pageOutlinkChild.click();
+    } else if (pageAttachmentChild) {
+      triggerClickFromLightDom(pageAttachmentChild, this.element);
+    }
+  }
+
   /**
    * @override
    */
   open(shouldAnimate = true) {
+    // If the target is a branching link, redirect immediately without opening the drawer.
+    const outlinkEl = this.getOutlinkEl_() || this.getLegacyOutlinkEl_();
+    if (
+      this.urlsHaveSameOriginAndPath_(window.location.href, outlinkEl?.href) &&
+      outlinkEl?.href.includes('#page=')
+    ) {
+      if (window.location.href === outlinkEl.href) {
+        // Should hard reload if the starting URL is the same as the target URL, otherwise
+        // the page wouldn't do hash navigation at all.
+        window.location.reload(true);
+      } else {
+        this.programmaticallyClickOnOutlink_();
+      }
+      return;
+    }
+
     if (this.state === DrawerState.OPEN) {
       return;
     }
@@ -442,34 +527,14 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
    * @private
    */
   openRemote_() {
-    // If the element is an amp-story-page-outlink the click target is its anchor element child.
-    // This is for SEO and analytics optimisation.
-    // Otherwise the element is the legacy version, amp-story-page-attachment with an href,
-    // and a click target is the button built by the component.
-    const programaticallyClickOnTarget = () => {
-      const pageOutlinkChild = this.element.parentElement
-        .querySelector('amp-story-page-outlink')
-        ?.querySelector('a');
-
-      const pageAttachmentChild = this.element.parentElement
-        ?.querySelector('.i-amphtml-story-page-open-attachment-host')
-        .shadowRoot?.querySelector('a.i-amphtml-story-page-open-attachment');
-
-      if (pageOutlinkChild) {
-        pageOutlinkChild.click();
-      } else if (pageAttachmentChild) {
-        triggerClickFromLightDom(pageAttachmentChild, this.element);
-      }
-    };
-
     const isMobileUI =
       this.storeService.get(StateProperty.UI_STATE) === UIType_Enum.MOBILE;
     if (!isMobileUI) {
-      programaticallyClickOnTarget();
+      this.programmaticallyClickOnOutlink_();
     } else {
       // Timeout to shows post-tap animation on mobile only.
       Services.timerFor(this.win).delay(() => {
-        programaticallyClickOnTarget();
+        this.programmaticallyClickOnOutlink_();
       }, POST_TAP_ANIMATION_DURATION);
     }
   }