Merge pull request #327 from StephenMcConnel/BL-13879-ClickHandles-da…

…ta-href

feat: Make images and text follow data-href when touched (BL-13879) (#327)

src/bloom-player-core.tsx

@@ -21,6 +21,7 @@ import { LocalizationManager } from "./l10n/localizationManager";
 import {
     reportAnalytics,
     reportPlaybackComplete,
+    sendMessageToHost,
     setAmbientAnalyticsProperties,
     updateBookProgressReport
 } from "./externalContext";
@@ -314,6 +315,14 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
         document.addEventListener("keydown", e =>
             this.handleDocumentLevelKeyDown(e)
         );
+
+        // Clicking on any element that has a data-href attribute will be treated as a link.
+        // This is the simplest way to handle such links that may be scattered on different
+        // types of elements throughout the book.  See BL-13879.
+        document.addEventListener("click", e =>
+            this.handleDocumentLevelClick(e)
+        );
+
         // March 2020 - Andrew/JohnH got confused about this line because 1) we don't actually *know* the
         // previous props & state, so it's a bit bogus (but it does work), and 2) when we remove it
         // everything still works (but there could well be some state that we didn't test). So we're leaving
@@ -331,6 +340,41 @@ export class BloomPlayerCore extends React.Component<IProps, IState> {
         }
     }
 
+    handleDocumentLevelClick(e: any) {
+        const targetElement = (e.target as HTMLElement).closest(
+            "[data-href]"
+        ) as HTMLElement;
+        if (targetElement && targetElement.attributes["data-href"]) {
+            const href = targetElement.attributes["data-href"].value as string;
+            if (href) {
+                if (href.startsWith("#")) {
+                    // This is a link to a page in the book.  We can handle going there.
+                    const pageId = href.substring(1);
+                    const pageIndex = this.state.pageIdToIndexMap[pageId];
+                    if (pageIndex !== undefined) {
+                        this.swiperInstance?.slideTo(pageIndex);
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
+                } else if (href.startsWith("bloomnav://")) {
+                    // This is a link to a page in another book. We need to send a message to the host.
+                    sendMessageToHost({ messageType: "bloomnav", href: href });
+                    e.preventDefault();
+                    e.stopPropagation();
+                } else if (
+                    href.startsWith("http://") ||
+                    href.startsWith("https://")
+                ) {
+                    // This is a generic external link. We open it in a new window or tab.
+                    // (The host possibly could intercept this and open a browser to handle it.)
+                    window.open(href, "_blank", "noreferrer");
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }
+        }
+    }
+
     private handleWindowFocus() {
         const readDuration = localStorage.getItem(kLocalStorageDurationKey);
         const savedBookUrl = localStorage.getItem(kLocalStorageBookUrlKey);

testBooks/Testing Away Again/index.htm

@@ -127,15 +127,15 @@
                 <div class="bloom-editable bloom-nodefaultstylerule Title-On-Cover-style bloom-padForOverflow" lang="z" data-book="bookTitle"></div>
 
                 <div class="bloom-editable bloom-nodefaultstylerule Title-On-Cover-style bloom-padForOverflow bloom-content1 bloom-visibility-code-on" lang="en" data-book="bookTitle">
-                    <p>Testing Away Again</p>
+                    <p data-href="https://bloomlibrary.org">Testing Away Again</p>
                 </div>
 
                 <div class="bloom-editable bloom-nodefaultstylerule Title-On-Cover-style bloom-padForOverflow bloom-content2 bloom-contentNational1 bloom-visibility-code-on" lang="fr" data-book="bookTitle"></div>
 
                 <div class="bloom-editable bloom-nodefaultstylerule Title-On-Cover-style bloom-padForOverflow bloom-contentNational2" lang="es" data-book="bookTitle"></div>
             </div>
 
-            <div class="bloom-imageContainer bloom-backgroundImage" style="background-image:url('SteveAndMaladGorge-1600x1200.jpg')" data-book="coverImage" data-copyright="Copyright © 2010, Stephen McConnel" data-creator="Stephen McConnel" data-license="cc-by">
+            <div class="bloom-imageContainer bloom-backgroundImage" style="background-image:url('SteveAndMaladGorge-1600x1200.jpg')" data-book="coverImage" data-copyright="Copyright © 2010, Stephen McConnel" data-creator="Stephen McConnel" data-license="cc-by" data-href="#68cf35f9-3aac-47c7-8361-9fe994219bab">
                 <div class="bloom-translationGroup bloom-imageDescription bloom-trailingElement" data-default-languages="auto">
                     <div class="bloom-editable ImageDescriptionEdit-style" lang="z" data-book="coverImageDescription"></div>
 
@@ -196,11 +196,11 @@
                             </div>
 
                             <div class="bloom-editable normal-style bloom-content1 bloom-visibility-code-on" style="min-height: 24px;" data-languagetipcontent="English" lang="en">
-                                <p>This is a test.</p>
+                                <p data-href="#a31cec63-e9c5-455a-8e53-87f516ef27ea">This is a test.</p>
                             </div>
 
                             <div class="bloom-editable normal-style bloom-content2 bloom-contentNational1 bloom-visibility-code-on" style="min-height: 24px;" data-languagetipcontent="français" lang="fr">
-                                <p>C'est un essai.</p>
+                                <p data-href="bloomnav://book/b39de500-7430-4247-95b8-07f8e84b1dd7?page=93d941b2-ff05-423e-9b08-35ef36e88352">C'est un essai.</p>
                             </div>
 
                             <div class="bloom-editable normal-style bloom-contentNational2" style="" lang="es"></div>