diff --git a/src/templates/blog/blogCategoryTemplate.jsx b/src/templates/blog/blogCategoryTemplate.jsx
index f2c8e3808..553a98570 100644
--- a/src/templates/blog/blogCategoryTemplate.jsx
+++ b/src/templates/blog/blogCategoryTemplate.jsx
@@ -1,21 +1,21 @@
-import React, { useState } from "react"
-import kebabCase from "lodash.kebabcase"
-import { graphql } from "gatsby"
-import MenuCategory from "../../components/blog/menuCategory"
-import BlogLayout from "../../components/blog/blogLayout"
-import PropTypes from "prop-types"
-import SEO from "../../components/shared/seo"
-import Bg from "../../images/blog/colorful-world.jpg"
+import React, { useState } from "react";
+import kebabCase from "lodash.kebabcase";
+import { graphql } from "gatsby";
+import MenuCategory from "../../components/blog/menuCategory";
+import BlogLayout from "../../components/blog/blogLayout";
+import PropTypes from "prop-types";
+import SEO from "../../components/shared/seo";
+import Bg from "../../images/blog/colorful-world.jpg";
-const blogCategoryTemplate = ({ data: { allMdx }, pageContext }) => {
- const [tagMenu, toggleTagMenu] = useState(false)
+const BlogCategoryTemplate = ({ data: { allMdx }, pageContext }) => {
+ const [tagMenu, toggleTagMenu] = useState(false);
function handleTagMenu() {
- toggleTagMenu(!tagMenu)
+ toggleTagMenu(!tagMenu);
if (screen.width <= 1280 && tagMenu === false) {
- var element = document.querySelector("#tagMenu")
- element.scrollIntoView()
+ let element = document.querySelector("#tagMenu");
+ element.scrollIntoView();
}
}
@@ -58,15 +58,15 @@ const blogCategoryTemplate = ({ data: { allMdx }, pageContext }) => {
tagMenu={tagMenu}
/>
- )
-}
+ );
+};
-export default blogCategoryTemplate
+export default BlogCategoryTemplate;
-blogCategoryTemplate.propTypes = {
+BlogCategoryTemplate.propTypes = {
pageContext: PropTypes.any,
data: PropTypes.any
-}
+};
export const query = graphql`
query blogCategory($category: String, $skip: Int!, $limit: Int!) {
@@ -91,4 +91,4 @@ export const query = graphql`
}
}
}
-`
+`;
diff --git a/src/templates/blog/blogPostTemplate.jsx b/src/templates/blog/blogPostTemplate.jsx
index aa0df873e..7034f4245 100644
--- a/src/templates/blog/blogPostTemplate.jsx
+++ b/src/templates/blog/blogPostTemplate.jsx
@@ -25,7 +25,7 @@ import Fade from "react-reveal/Fade";
import Pulse from "react-reveal/Pulse";
import trianglify from "trianglify";
-const blogPostTemplate = ({ data: { mdx }, pageContext }) => {
+const BlogPostTemplate = ({ data: { mdx }, pageContext }) => {
const { title, date, author, category, tag, disableTOC } = mdx.frontmatter;
const { prev, next } = pageContext;
@@ -46,7 +46,7 @@ const blogPostTemplate = ({ data: { mdx }, pageContext }) => {
}
// enable/disable table of content
- var tableOfContent;
+ let tableOfContent;
if (disableTOC === true) {
tableOfContent = null;
} else {
@@ -89,9 +89,9 @@ const blogPostTemplate = ({ data: { mdx }, pageContext }) => {
// produce trianglify image
useEffect(() => {
- var element = document.getElementById("headElement");
- var dimensions = element.getClientRects()[0];
- var pattern = trianglify({
+ let element = document.getElementById("headElement");
+ let dimensions = element.getClientRects()[0];
+ let pattern = trianglify({
width: dimensions.width,
height: dimensions.height,
cellSize: 60 + Math.ceil(Math.random() * 100),
@@ -100,7 +100,7 @@ const blogPostTemplate = ({ data: { mdx }, pageContext }) => {
seed: Math.random().toString(5)
}).toCanvas();
- var img = pattern.toDataURL("image/png");
+ let img = pattern.toDataURL("image/png");
element.style["background-image"] =
"linear-gradient(0deg, rgba(0,0,0,0.05) 70%, rgba(0,0,0,0.60) 100%), url(" +
img +
@@ -267,9 +267,9 @@ const blogPostTemplate = ({ data: { mdx }, pageContext }) => {
);
};
-export default blogPostTemplate;
+export default BlogPostTemplate;
-blogPostTemplate.propTypes = {
+BlogPostTemplate.propTypes = {
data: PropTypes.any,
pageContext: PropTypes.any
};
diff --git a/src/templates/blog/blogPostTemplateCustom.jsx b/src/templates/blog/blogPostTemplateCustom.jsx
index fa3f8f6bf..15b7a3885 100644
--- a/src/templates/blog/blogPostTemplateCustom.jsx
+++ b/src/templates/blog/blogPostTemplateCustom.jsx
@@ -1,29 +1,29 @@
-import React from "react"
-import PropTypes from "prop-types"
-import SEO from "../../components/shared/seo"
-import { Helmet } from "react-helmet"
-import { graphql, withPrefix } from "gatsby"
-import PostPagination from "../../components/blog/postPagination"
+import React from "react";
+import PropTypes from "prop-types";
+import SEO from "../../components/shared/seo";
+import { Helmet } from "react-helmet";
+import { graphql, withPrefix } from "gatsby";
+import PostPagination from "../../components/blog/postPagination";
-import CommonMdxProvider from "../../components/shared/commonMdxProvider"
-import "katex/dist/katex.min.css"
+import CommonMdxProvider from "../../components/shared/commonMdxProvider";
+import "katex/dist/katex.min.css";
-import Comment from "../../components/blog/comment"
-import { useScript } from "../../utils/hooks/useScript"
-import { getShareLinks } from "../../utils/shared"
+import Comment from "../../components/blog/comment";
+import { useScript } from "../../utils/hooks/useScript";
+import { getShareLinks } from "../../utils/shared";
-const blogPostTemplateCustom = ({ data: { mdx }, pageContext }) => {
- const { prev, next } = pageContext
- const shareLinks = getShareLinks(mdx)
- const d3 = mdx.frontmatter.d3 || null
+const BlogPostTemplateCustom = ({ data: { mdx }, pageContext }) => {
+ const { prev, next } = pageContext;
+ const shareLinks = getShareLinks(mdx);
+ const d3 = mdx.frontmatter.d3 || null;
// include d3 scripts
- useScript("https://unpkg.com/topojson@3", "", false)
+ useScript("https://unpkg.com/topojson@3", "", false);
{
d3 &&
d3.map((d) => {
- useScript(withPrefix(`d3/${d}`), "", false)
- })
+ useScript(withPrefix(`d3/${d}`), "", false);
+ });
}
return (
@@ -68,15 +68,15 @@ const blogPostTemplateCustom = ({ data: { mdx }, pageContext }) => {
/>
- )
-}
+ );
+};
-export default blogPostTemplateCustom
+export default BlogPostTemplateCustom;
-blogPostTemplateCustom.propTypes = {
+BlogPostTemplateCustom.propTypes = {
data: PropTypes.any,
pageContext: PropTypes.any
-}
+};
export const query = graphql`
query BlogPostQuery_custom($id: String) {
@@ -95,4 +95,4 @@ export const query = graphql`
}
}
}
-`
+`;
diff --git a/src/templates/blog/blogTagTemplate.jsx b/src/templates/blog/blogTagTemplate.jsx
index dc675a6c0..3e3dda317 100644
--- a/src/templates/blog/blogTagTemplate.jsx
+++ b/src/templates/blog/blogTagTemplate.jsx
@@ -1,21 +1,21 @@
-import React, { useState } from "react"
-import { graphql } from "gatsby"
-import MenuCategory from "../../components/blog/menuCategory"
-import PropTypes from "prop-types"
-import BlogLayout from "../../components/blog/blogLayout"
-import SEO from "../../components/shared/seo"
-import kebabCase from "lodash.kebabcase"
-import Bg from "../../images/blog/colorful-world.jpg"
+import React, { useState } from "react";
+import { graphql } from "gatsby";
+import MenuCategory from "../../components/blog/menuCategory";
+import PropTypes from "prop-types";
+import BlogLayout from "../../components/blog/blogLayout";
+import SEO from "../../components/shared/seo";
+import kebabCase from "lodash.kebabcase";
+import Bg from "../../images/blog/colorful-world.jpg";
-const blogTagTemplate = ({ data: { allMdx }, pageContext }) => {
- const [tagMenu, toggleTagMenu] = useState(false)
+const BlogTagTemplate = ({ data: { allMdx }, pageContext }) => {
+ const [tagMenu, toggleTagMenu] = useState(false);
function handleTagMenu() {
- toggleTagMenu(!tagMenu)
+ toggleTagMenu(!tagMenu);
if (screen.width <= 1280 && tagMenu === false) {
- var element = document.querySelector("#tagMenu")
- element.scrollIntoView()
+ let element = document.querySelector("#tagMenu");
+ element.scrollIntoView();
}
}
@@ -58,15 +58,15 @@ const blogTagTemplate = ({ data: { allMdx }, pageContext }) => {
tagMenu={tagMenu}
/>
- )
-}
+ );
+};
-export default blogTagTemplate
+export default BlogTagTemplate;
-blogTagTemplate.propTypes = {
+BlogTagTemplate.propTypes = {
pageContext: PropTypes.any,
data: PropTypes.any
-}
+};
export const query = graphql`
query blogTag($tag: String, $skip: Int!, $limit: Int!) {
@@ -89,4 +89,4 @@ export const query = graphql`
}
}
}
-`
+`;
diff --git a/src/templates/blog/blogTemplate.jsx b/src/templates/blog/blogTemplate.jsx
index 9e48ef04a..19daed39f 100644
--- a/src/templates/blog/blogTemplate.jsx
+++ b/src/templates/blog/blogTemplate.jsx
@@ -7,21 +7,21 @@ import SEO from "../../components/shared/seo";
import Flip from "react-reveal/Flip";
import { GreyButton } from "../../components/style/styleComponent";
import Bg from "../../images/blog/colorful-world.jpg";
-import { backgroundMovement } from "../../utils/hooks/backgroundMovement";
+import { useBackgroundMovement } from "../../utils/hooks/backgroundMovement";
-const blogTemplate = ({ data: { allMdx }, pageContext }) => {
+const BlogTemplate = ({ data: { allMdx }, pageContext }) => {
const [tagMenu, toggleTagMenu] = useState(false);
function handleTagMenu() {
toggleTagMenu(!tagMenu);
if (screen.width <= 1280 && tagMenu === false) {
- var element = document.querySelector("#tagMenu");
+ let element = document.querySelector("#tagMenu");
element.scrollIntoView();
}
}
- backgroundMovement("blogBackground");
+ useBackgroundMovement("blogBackground");
return (
<>
@@ -98,9 +98,9 @@ const blogTemplate = ({ data: { allMdx }, pageContext }) => {
);
};
-export default blogTemplate;
+export default BlogTemplate;
-blogTemplate.propTypes = {
+BlogTemplate.propTypes = {
pageContext: PropTypes.any,
data: PropTypes.any
};
diff --git a/src/templates/docs/docsTemplate.jsx b/src/templates/docs/docsTemplate.jsx
index 9b040b394..454f76cb7 100644
--- a/src/templates/docs/docsTemplate.jsx
+++ b/src/templates/docs/docsTemplate.jsx
@@ -21,7 +21,7 @@ import { trackTableOfContent } from "../../utils/hooks/trackTableOfContent";
import Fade from "react-reveal/Fade";
-const docsTemplate = ({ data: { mdx }, pageContext }) => {
+const DocsTemplate = ({ data: { mdx }, pageContext }) => {
const { title, date, author, disableTOC } = mdx.frontmatter;
const { prev, next } = pageContext;
@@ -39,7 +39,7 @@ const docsTemplate = ({ data: { mdx }, pageContext }) => {
}
// enable/disable table of content
- var tableOfContent;
+ let tableOfContent;
if (disableTOC === true) {
tableOfContent = null;
@@ -204,9 +204,9 @@ const docsTemplate = ({ data: { mdx }, pageContext }) => {
);
};
-export default docsTemplate;
+export default DocsTemplate;
-docsTemplate.propTypes = {
+DocsTemplate.propTypes = {
data: PropTypes.any,
pageContext: PropTypes.any
};
diff --git a/src/templates/docs/docsTemplateCustom.jsx b/src/templates/docs/docsTemplateCustom.jsx
index 8cc2e8c35..b44bcd8b8 100644
--- a/src/templates/docs/docsTemplateCustom.jsx
+++ b/src/templates/docs/docsTemplateCustom.jsx
@@ -1,27 +1,27 @@
-import React from "react"
-import PropTypes from "prop-types"
-import SEO from "../../components/shared/seo"
-import { Helmet } from "react-helmet"
-import { graphql, withPrefix } from "gatsby"
-import PostPagination from "../../components/blog/postPagination"
-import "katex/dist/katex.min.css"
-import Comment from "../../components/blog/comment"
-import { useScript } from "../../utils/hooks/useScript"
-import { getShareLinks } from "../../utils/shared"
-import CommonMdxProvider from "../../components/shared/commonMdxProvider"
+import React from "react";
+import PropTypes from "prop-types";
+import SEO from "../../components/shared/seo";
+import { Helmet } from "react-helmet";
+import { graphql, withPrefix } from "gatsby";
+import PostPagination from "../../components/blog/postPagination";
+import "katex/dist/katex.min.css";
+import Comment from "../../components/blog/comment";
+import { useScript } from "../../utils/hooks/useScript";
+import { getShareLinks } from "../../utils/shared";
+import CommonMdxProvider from "../../components/shared/commonMdxProvider";
-const docsTemplateCustom = ({ data: { mdx }, pageContext }) => {
- const { prev, next } = pageContext
- const shareLinks = getShareLinks(mdx)
- const d3 = mdx.frontmatter.d3 ? mdx.frontmatter.d3 : null
+const DocsTemplateCustom = ({ data: { mdx }, pageContext }) => {
+ const { prev, next } = pageContext;
+ const shareLinks = getShareLinks(mdx);
+ const d3 = mdx.frontmatter.d3 ? mdx.frontmatter.d3 : null;
// include d3 scripts
- useScript("https://unpkg.com/topojson@3", "", false)
+ useScript("https://unpkg.com/topojson@3", "", false);
{
d3 &&
d3.map((d) => {
- useScript(withPrefix(`d3/${d}`), "", false)
- })
+ useScript(withPrefix(`d3/${d}`), "", false);
+ });
}
return (
@@ -67,15 +67,15 @@ const docsTemplateCustom = ({ data: { mdx }, pageContext }) => {
/>
- )
-}
+ );
+};
-export default docsTemplateCustom
+export default DocsTemplateCustom;
-docsTemplateCustom.propTypes = {
+DocsTemplateCustom.propTypes = {
data: PropTypes.any,
pageContext: PropTypes.any
-}
+};
export const docsCustomQuery = graphql`
query docsQuery_custom($id: String) {
@@ -94,4 +94,4 @@ export const docsCustomQuery = graphql`
}
}
}
-`
+`;
diff --git a/src/templates/visualisation/visCategoryTemplate.jsx b/src/templates/visualisation/visCategoryTemplate.jsx
index 9a99d4325..2eca1eb5a 100644
--- a/src/templates/visualisation/visCategoryTemplate.jsx
+++ b/src/templates/visualisation/visCategoryTemplate.jsx
@@ -1,50 +1,55 @@
-import React, { useRef } from "react"
-import { graphql } from "gatsby"
-import PropTypes from "prop-types"
-import { loadMoreVisualisation } from "../../utils/hooks/loadMoreVisualisation"
-import VisLayout from "../../components/visualisation/visLayout"
+import React, { useRef } from "react";
+import { graphql } from "gatsby";
+import PropTypes from "prop-types";
+import { useLoadMoreVisualisation } from "../../utils/hooks/loadMoreVisualisation";
+import VisLayout from "../../components/visualisation/visLayout";
-const visCategoryTemplate = ({ data: {allMdx}, pageContext }) => {
+const VisCategoryTemplate = ({ data: { allMdx }, pageContext }) => {
const nextPageRef = useRef();
- const currentMDXs = loadMoreVisualisation(allMdx.edges, nextPageRef);
+ const currentMDXs = useLoadMoreVisualisation(allMdx.edges, nextPageRef);
- return(
-
- )
-}
+ return (
+
+ );
+};
-export default visCategoryTemplate
+export default VisCategoryTemplate;
-visCategoryTemplate.propTypes = {
+VisCategoryTemplate.propTypes = {
data: PropTypes.any,
-}
-
+ pageContext: PropTypes.any
+};
export const query = graphql`
- query visCategory($category: String) {
- allMdx(
- sort: { fields: [frontmatter___date], order: DESC }
- filter: {
- frontmatter: {
- category: { in: [$category] },
- published: {ne: false },
+ query visCategory($category: String) {
+ allMdx(
+ sort: { fields: [frontmatter___date], order: DESC }
+ filter: {
+ frontmatter: {
+ category: { in: [$category] }
+ published: { ne: false }
type: { eq: "visualisation" }
- }
+ }
}
- ) {
- edges {
- node {
- id
- frontmatter {
- ...MdxFrontmatter
+ ) {
+ edges {
+ node {
+ id
+ frontmatter {
+ ...MdxFrontmatter
rowSpan
columnSpan
- }
- fields {
- ...MdxFields
- }
- }
- }
- }
- }
-`
\ No newline at end of file
+ }
+ fields {
+ ...MdxFields
+ }
+ }
+ }
+ }
+ }
+`;
diff --git a/src/templates/visualisation/visItemTemplate.jsx b/src/templates/visualisation/visItemTemplate.jsx
index d743103e1..941bccfd7 100644
--- a/src/templates/visualisation/visItemTemplate.jsx
+++ b/src/templates/visualisation/visItemTemplate.jsx
@@ -20,7 +20,7 @@ import VisDetail from "../../components/visualisation/visDetail";
import { VisDiv, VisBackBtn, EmbedCode } from "../../components/style/visStyle";
import { AiOutlineRollback, AiOutlineHome } from "react-icons/ai";
-const visItemTemplate = ({ data: { mdx }, pageContext }) => {
+const VisItemTemplate = ({ data: { mdx }, pageContext }) => {
const components = { VisPagination, VisDetail, VisDiv, EmbedCode };
const shareLinks = getShareLinks(mdx);
@@ -112,9 +112,9 @@ const visItemTemplate = ({ data: { mdx }, pageContext }) => {
);
};
-export default visItemTemplate;
+export default VisItemTemplate;
-visItemTemplate.propTypes = {
+VisItemTemplate.propTypes = {
data: PropTypes.any,
pageContext: PropTypes.any
};
diff --git a/src/templates/visualisation/visTagTemplate.jsx b/src/templates/visualisation/visTagTemplate.jsx
index 74c718c3f..cb5b194ff 100644
--- a/src/templates/visualisation/visTagTemplate.jsx
+++ b/src/templates/visualisation/visTagTemplate.jsx
@@ -1,12 +1,12 @@
import React, { useRef } from "react";
import { graphql } from "gatsby";
import PropTypes from "prop-types";
-import { loadMoreVisualisation } from "../../utils/hooks/loadMoreVisualisation";
+import { useLoadMoreVisualisation } from "../../utils/hooks/loadMoreVisualisation";
import VisLayout from "../../components/visualisation/visLayout";
-const visTagTemplate = ({ data: { allMdx }, pageContext }) => {
+const VisTagTemplate = ({ data: { allMdx }, pageContext }) => {
const nextPageRef = useRef();
- const currentMDXs = loadMoreVisualisation(allMdx.edges, nextPageRef);
+ const currentMDXs = useLoadMoreVisualisation(allMdx.edges, nextPageRef);
return (
{
);
};
-export default visTagTemplate;
+export default VisTagTemplate;
-visTagTemplate.propTypes = {
- data: PropTypes.any
+VisTagTemplate.propTypes = {
+ data: PropTypes.any,
+ pageContext: PropTypes.any
};
export const query = graphql`
diff --git a/src/templates/visualisation/visTemplate.jsx b/src/templates/visualisation/visTemplate.jsx
index 02609fd28..0894cd324 100644
--- a/src/templates/visualisation/visTemplate.jsx
+++ b/src/templates/visualisation/visTemplate.jsx
@@ -1,12 +1,12 @@
import React, { useRef } from "react";
import { graphql } from "gatsby";
import PropTypes from "prop-types";
-import { loadMoreVisualisation } from "../../utils/hooks/loadMoreVisualisation";
+import { useLoadMoreVisualisation } from "../../utils/hooks/loadMoreVisualisation";
import VisLayout from "../../components/visualisation/visLayout";
-const visTemplate = ({ data: { allMdx }, pageContext }) => {
+const VisTemplate = ({ data: { allMdx }, pageContext }) => {
const nextPageRef = useRef();
- const currentMDXs = loadMoreVisualisation(allMdx.edges, nextPageRef);
+ const currentMDXs = useLoadMoreVisualisation(allMdx.edges, nextPageRef);
return (
{
);
};
-export default visTemplate;
+export default VisTemplate;
-visTemplate.propTypes = {
- data: PropTypes.any
+VisTemplate.propTypes = {
+ data: PropTypes.any,
+ pageContext: PropTypes.any
};
export const query = graphql`
diff --git a/src/utils/hooks/backgroundMovement.jsx b/src/utils/hooks/backgroundMovement.jsx
index 13239b007..17c580318 100644
--- a/src/utils/hooks/backgroundMovement.jsx
+++ b/src/utils/hooks/backgroundMovement.jsx
@@ -6,7 +6,7 @@ import { useState, useEffect, useCallback } from "react";
* @parent boolean: whether to move background on mouse hovering parent element of 'elementId'
* Make sure to add the style overflow: hidden to parent/element, and add the style transform: scale(1.1) to the element
*/
-export function backgroundMovement(
+export function useBackgroundMovement(
elementId,
parent = true,
xFactor = 0.06,
@@ -50,12 +50,12 @@ export function backgroundMovement(
}px, ${-yFactor * yMove + translateValues.y}px) scale(1.1)`;
};
- var background = document.querySelector(`#${elementId}`);
+ let background = document.querySelector(`#${elementId}`);
if (!background) {
return;
}
background.style.transition = "none";
- var hoverElement = background;
+ let hoverElement = background;
if (parent === true) {
hoverElement = background.parentElement;
diff --git a/src/utils/hooks/loadMoreVisualisation.jsx b/src/utils/hooks/loadMoreVisualisation.jsx
index 12011c389..6cf5241bc 100644
--- a/src/utils/hooks/loadMoreVisualisation.jsx
+++ b/src/utils/hooks/loadMoreVisualisation.jsx
@@ -1,17 +1,24 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
/**
* Hook for load more visualisations
* @param {object} allMdx All visualisation items
- * @param {*} nextPageRef React useRef - referencing load-more div.
+ * @param {*} nextPageRef React useRef - referencing load-more div.
* @param {string} referenceId Element id for load-more div.
- * @param {int} pageLength
+ * @param {int} pageLength
* @returns current list of visualisation
*/
-export function loadMoreVisualisation(allMdx, nextPageRef, referenceId, pageLength) {
+export function useLoadMoreVisualisation(
+ allMdx,
+ nextPageRef,
+ referenceId,
+ pageLength
+) {
const PAGE_LENGTH = pageLength ?? 10;
const refId = referenceId ?? "visualisation-invite";
- const [currentMDXs, setCurrentMDXs] = useState([...allMdx.slice(0, PAGE_LENGTH)]);
+ const [currentMDXs, setCurrentMDXs] = useState([
+ ...allMdx.slice(0, PAGE_LENGTH)
+ ]);
const [loadNextPage, setLoadNextPage] = useState(false);
const [hasNextPage, setHasNextPage] = useState(allMdx.length > PAGE_LENGTH);
@@ -21,7 +28,7 @@ export function loadMoreVisualisation(allMdx, nextPageRef, referenceId, pageLeng
const options = {
root: null,
rootMargin: "300px 0px 0px 0px"
- }
+ };
const refObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
setLoadNextPage(true);
@@ -33,7 +40,6 @@ export function loadMoreVisualisation(allMdx, nextPageRef, referenceId, pageLeng
}
}, []);
-
// Monitor remaining visualisations on update of visualisation objects
useEffect(() => {
const hasNext = allMdx.length > currentMDXs.length;
@@ -41,11 +47,10 @@ export function loadMoreVisualisation(allMdx, nextPageRef, referenceId, pageLeng
if (!hasNext) {
const addMoreVisBox = document.querySelector(`#${refId}`);
- addMoreVisBox.style.visibility = 'visible';
+ addMoreVisBox.style.visibility = "visible";
addMoreVisBox.parentElement.appendChild(addMoreVisBox);
}
- },[currentMDXs])
-
+ }, [currentMDXs]);
// Load more visualisations objects
useEffect(() => {
@@ -56,12 +61,14 @@ export function loadMoreVisualisation(allMdx, nextPageRef, referenceId, pageLeng
// Get next page content
const moreMDX = allMdx.length > currentMDXs.length;
- const nextPageMDX = moreMDX ? allMdx.slice(currentMDXs.length, currentMDXs.length + PAGE_LENGTH) : [];
-
+ const nextPageMDX = moreMDX
+ ? allMdx.slice(currentMDXs.length, currentMDXs.length + PAGE_LENGTH)
+ : [];
+
// Merge into current content
setCurrentMDXs([...currentMDXs, ...nextPageMDX]);
setLoadNextPage(false);
- }, [loadNextPage, hasNextPage])
-
+ }, [loadNextPage, hasNextPage]);
+
return currentMDXs;
-}
\ No newline at end of file
+}
diff --git a/src/utils/hooks/trackScrollPosition.jsx b/src/utils/hooks/trackScrollPosition.jsx
index c33cc2d04..c8a815e13 100644
--- a/src/utils/hooks/trackScrollPosition.jsx
+++ b/src/utils/hooks/trackScrollPosition.jsx
@@ -5,12 +5,12 @@ import { useEffect } from "react";
* @param {*} elementId affected element on scroll
* @param {*} pageOffset position to make the element visible
*/
-export function trackScrollPosition(elementId, pageOffset = 300) {
+export function useTrackScrollPosition(elementId, pageOffset = 300) {
let element;
useEffect(() => {
function scrollAction() {
- var el = document.getElementById(elementId);
+ let el = document.getElementById(elementId);
el.style.opacity = "0";
el.style.visibility = "invisible";
diff --git a/src/utils/hooks/trackTableOfContent.jsx b/src/utils/hooks/trackTableOfContent.jsx
index ecd847a97..637c85400 100644
--- a/src/utils/hooks/trackTableOfContent.jsx
+++ b/src/utils/hooks/trackTableOfContent.jsx
@@ -1,11 +1,11 @@
/* eslint-disable no-unused-vars */
-import { useEffect } from "react"
+import { useEffect } from "react";
/**
- *
- * @param {insert selector for your table of contents elements} tocSelector
- * @param {item are selected in the form of `itemSelector [id]`} itemSelector
- *
+ *
+ * @param {insert selector for your table of contents elements} tocSelector
+ * @param {item are selected in the form of `itemSelector [id]`} itemSelector
+ *
* structure of toc should be :
*
* some heading
@@ -17,44 +17,47 @@ import { useEffect } from "react"
*
*/
export function trackTableOfContent(tocSelector, itemSelector) {
-
- function handleClassList(element, tagName, type="add") {
- if(tagName.substring(0,1) !== "H") return;
- var el = element.parentElement;
- var rm = (type === "remove")
-
- rm ? el.classList.remove('active') : el.classList.add('active');
-
- if(tagName !== "H1") {
- handleClassList(el.parentElement, `H${tagName.substring(1,) - 1}`, rm ? "remove" : "add");
+ function handleClassList(element, tagName, type = "add") {
+ if (tagName.substring(0, 1) !== "H") return;
+ let el = element.parentElement;
+ let rm = type === "remove";
+
+ rm ? el.classList.remove("active") : el.classList.add("active");
+
+ if (tagName !== "H1") {
+ handleClassList(
+ el.parentElement,
+ `H${tagName.substring(1) - 1}`,
+ rm ? "remove" : "add"
+ );
}
}
useEffect(() => {
function handleTOC() {
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => {
- var id = entry.target.getAttribute('id');
- var element = document.querySelector(`${tocSelector}[href="#${id}"]`)
- if(element === null) return;
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ let id = entry.target.getAttribute("id");
+ let element = document.querySelector(`${tocSelector}[href="#${id}"]`);
+ if (element === null) return;
if (entry.intersectionRatio > 0) {
- handleClassList(element, entry.target.tagName)
+ handleClassList(element, entry.target.tagName);
} else {
- handleClassList(element, entry.target.tagName, "remove")
+ handleClassList(element, entry.target.tagName, "remove");
}
});
});
-
+
// Track all items
document.querySelectorAll(`${itemSelector} [id]`).forEach((item) => {
observer.observe(item);
});
}
- document.addEventListener('DOMContentLoaded', handleTOC);
+ document.addEventListener("DOMContentLoaded", handleTOC);
return () => {
- document.removeEventListener('DOMContentLoaded', handleTOC);
- }
- }, [])
-}
\ No newline at end of file
+ document.removeEventListener("DOMContentLoaded", handleTOC);
+ };
+ }, []);
+}