feat(TDP-1577): key moments links (newsuk#2911)

lili2311 · Apr 11, 2022 · 82774c5 · 82774c5
1 parent ebd0314
commit 82774c5
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 35 deletions.
diff --git a/packages/key-facts/package.json b/packages/key-facts/package.json
@@ -62,6 +62,7 @@
     "@times-components/responsive": "0.7.8",
     "@times-components/styleguide": "3.38.30",
     "@times-components/ts-components": "1.30.1",
+    "@times-components/utils": "6.6.0",
     "prop-types": "15.7.2",
     "styled-components": "4.3.2"
   },

diff --git a/packages/key-facts/src/key-facts-text.js b/packages/key-facts/src/key-facts-text.js
@@ -1,6 +1,11 @@
 import React from "react";
 import { renderTree } from "@times-components/markup-forest";
 import coreRenderers from "@times-components/markup";
+import {
+  handleOnClickScrollTo,
+  handleHrefScrollTo
+} from "@times-components/utils";
+
 import props from "./key-facts-text-prop-types";
 import { Text, KeyFactTextLink, BulletContainer, Bullet } from "./styles";
 
@@ -12,35 +17,6 @@ const getTitle = data => {
   return title.length > 0 ? title : " ";
 };
 
-const handleClickEventScrollTo = (event, url) => {
-  if (url.charAt(0) === "#") {
-    event.preventDefault();
-
-    const target = document.getElementById(url.substring(1));
-    if (target) {
-      const article = target.parentElement.parentElement;
-      const container = article.parentElement;
-
-      let menuOffset = 50;
-      if (window.innerWidth < 1320) {
-        menuOffset = 100;
-      }
-      if (window.innerWidth < 1024) {
-        menuOffset = 110;
-      }
-
-      window.scroll({
-        top:
-          container.offsetTop +
-          article.offsetTop +
-          target.offsetTop -
-          menuOffset,
-        behavior: "smooth"
-      });
-    }
-  }
-};
-
 const handleClickEventAnalytics = (fireAnalyticsEvent, title, articleFlag) => {
   if (fireAnalyticsEvent) {
     fireAnalyticsEvent({
@@ -77,14 +53,14 @@ const KeyFactsText = ({
                 <KeyFactTextLink
                   key={key}
                   onClick={event => {
+                    handleOnClickScrollTo(event, url);
                     handleClickEventAnalytics(
                       fireAnalyticsEvent,
                       title,
                       articleFlag
                     );
-                    handleClickEventScrollTo(event, url);
                   }}
-                  href={url.charAt(0) === "#" ? null : url}
+                  href={handleHrefScrollTo(url)}
                 >
                   {renderedChildren}
                 </KeyFactTextLink>

diff --git a/packages/provider-test-tools/fixtures/article.json b/packages/provider-test-tools/fixtures/article.json
@@ -568,7 +568,7 @@
                 {
                   "name": "link",
                   "attributes": {
-                    "href": "#123456789101112131415",
+                    "href": "#U123456789101112131415",
                     "type": "article"
                   },
                   "children": [
@@ -589,7 +589,7 @@
                 {
                   "name": "link",
                   "attributes": {
-                    "href": "#234567891011121314151",
+                    "href": "#U234567891011121314151",
                     "type": "article"
                   },
                   "children": [
@@ -657,7 +657,7 @@
     {
       "name": "paragraph",
       "attributes": {
-        "id": "123456789101112131415"
+        "id": "U123456789101112131415"
       },
       "children": [
         {
@@ -825,7 +825,7 @@
     {
       "name": "paragraph",
       "attributes": {
-        "id": "234567891011121314151"
+        "id": "U234567891011121314151"
       },
       "children": [
         {

diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js
@@ -1,6 +1,7 @@
 export * from "./screen";
 export * from "./strings";
 export * from "./dimensions-util";
+export * from "./scroll-to-element-id";
 
 export { default as clean } from "./props";
 export { default as addMissingProtocol } from "./add-missing-protocol";

diff --git a/packages/utils/src/scroll-to-element-id.js b/packages/utils/src/scroll-to-element-id.js
@@ -0,0 +1,29 @@
+const getMenuOffset = () => {
+  const sectionBar = document.querySelector(".OrientationBar");
+  const sectionBarHeight = sectionBar ? sectionBar.offHeight : 0;
+
+  if (window.innerWidth < 1024) {
+    return 110;
+  }
+  if (window.innerWidth < 1320) {
+    return 100 + sectionBarHeight;
+  }
+
+  return 50 + sectionBarHeight;
+};
+
+export const handleOnClickScrollTo = (event, url) => {
+  if (url.charAt(0) === "#") {
+    event.preventDefault();
+
+    const element = document.getElementById(url.substring(1));
+    if (element) {
+      const offset = element.getBoundingClientRect().top;
+      const top = offset + window.pageYOffset - getMenuOffset();
+
+      window.scrollTo({ top, behavior: "smooth" });
+    }
+  }
+};
+
+export const handleHrefScrollTo = url => (url.charAt(0) === "#" ? null : url);