fix bug: target is customizable

TheSGJ · Dec 27, 2024 · 063d2bb · 063d2bb
1 parent 461a78d
commit 063d2bb
Showing 1 changed file with 49 additions and 31 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,12 +1,12 @@
-'use client';
+"use client";
 // deno-ts-ignore-file
 // deno-lint-ignore-file
 /* eslint-disable no-var */
 /* eslint-disable max-len */
 /* eslint-disable prefer-const */
-import * as PropTypes from 'prop-types';
-import * as React from 'react';
-import * as NProgress from 'nprogress';
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import * as NProgress from "nprogress";
 
 // @deno-types ="npm:preact@10.19.6"
 
@@ -112,7 +112,7 @@ const NextTopLoader = ({
   showAtBottom = false,
   showForHashAnchor = true,
 }: NextTopLoaderProps): React.JSX.Element => {
-  const defaultColor = '#29d';
+  const defaultColor = "#29d";
   const defaultHeight = 3;
 
   const color = propColor ?? defaultColor;
@@ -121,14 +121,14 @@ const NextTopLoader = ({
   // Any falsy (except undefined) will disable the shadow
   const boxShadow =
     !shadow && shadow !== undefined
-      ? ''
+      ? ""
       : shadow
-        ? `box-shadow:${shadow}`
-        : `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
+      ? `box-shadow:${shadow}`
+      : `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
 
   // Check if to show at bottom
-  const positionStyle = showAtBottom ? 'bottom: 0;' : 'top: 0;';
-  const spinnerPositionStyle = showAtBottom ? 'bottom: 15px;' : 'top: 15px;';
+  const positionStyle = showAtBottom ? "bottom: 0;" : "top: 0;";
+  const spinnerPositionStyle = showAtBottom ? "bottom: 15px;" : "top: 15px;";
 
   /**
    * CSS Styles for the NextTopLoader
@@ -157,7 +157,7 @@ const NextTopLoader = ({
   const isHashAnchor = (currentUrl: string, newUrl: string): boolean => {
     const current = new URL(toAbsoluteURL(currentUrl));
     const next = new URL(toAbsoluteURL(newUrl));
-    return current.href.split('#')[0] === next.href.split('#')[0];
+    return current.href.split("#")[0] === next.href.split("#")[0];
   };
 
   /**
@@ -169,7 +169,10 @@ const NextTopLoader = ({
   const isSameHostName = (currentUrl: string, newUrl: string): boolean => {
     const current = new URL(toAbsoluteURL(currentUrl));
     const next = new URL(toAbsoluteURL(newUrl));
-    return current.hostname.replace(/^www\./, '') === next.hostname.replace(/^www\./, '');
+    return (
+      current.hostname.replace(/^www\./, "") ===
+      next.hostname.replace(/^www\./, "")
+    );
   };
 
   React.useEffect((): ReturnType<React.EffectCallback> => {
@@ -178,7 +181,7 @@ const NextTopLoader = ({
       trickle: crawl ?? true,
       trickleSpeed: crawlSpeed ?? 200,
       minimum: initialPosition ?? 0.08,
-      easing: easing ?? 'ease',
+      easing: easing ?? "ease",
       speed: speed ?? 200,
       template:
         template ??
@@ -204,25 +207,32 @@ const NextTopLoader = ({
         const currentHash = currentUrlObj.hash;
         const newHash = newUrlObj.hash;
         return (
-          currentHash !== newHash && currentUrlObj.href.replace(currentHash, '') === newUrlObj.href.replace(newHash, '')
+          currentHash !== newHash &&
+          currentUrlObj.href.replace(currentHash, "") ===
+            newUrlObj.href.replace(newHash, "")
         );
       }
       return false;
     }
 
     // deno-lint-ignore no-var
-    var nProgressClass: NodeListOf<HTMLHtmlElement> = document.querySelectorAll('html');
+    var nProgressClass: NodeListOf<HTMLHtmlElement> =
+      document.querySelectorAll("html");
 
     const removeNProgressClass = (): void =>
-      nProgressClass.forEach((el: Element) => el.classList.remove('nprogress-busy'));
+      nProgressClass.forEach((el: Element) =>
+        el.classList.remove("nprogress-busy")
+      );
 
     /**
      * Find the closest anchor to trigger
      * @param element {HTMLElement | null}
      * @returns element {Element}
      */
-    function findClosestAnchor(element: HTMLElement | null): HTMLAnchorElement | null {
-      while (element && element.tagName.toLowerCase() !== 'a') {
+    function findClosestAnchor(
+      element: HTMLElement | null
+    ): HTMLAnchorElement | null {
+      while (element && element.tagName.toLowerCase() !== "a") {
         element = element.parentElement;
       }
       return element as HTMLAnchorElement;
@@ -241,20 +251,28 @@ const NextTopLoader = ({
         if (newUrl) {
           const currentUrl = window.location.href;
           // const newUrl = (anchor as HTMLAnchorElement).href;
-          const isExternalLink = (anchor as HTMLAnchorElement).target === '_blank';
+          const isExternalLink = !!(anchor as HTMLAnchorElement).target;
 
           // Check for Special Schemes
-          const isSpecialScheme = ['tel:', 'mailto:', 'sms:', 'blob:', 'download:'].some((scheme) =>
-            newUrl.startsWith(scheme)
-          );
+          const isSpecialScheme = [
+            "tel:",
+            "mailto:",
+            "sms:",
+            "blob:",
+            "download:",
+          ].some((scheme) => newUrl.startsWith(scheme));
 
-          const notSameHost = !isSameHostName(window.location.href, anchor.href);
+          const notSameHost = !isSameHostName(
+            window.location.href,
+            anchor.href
+          );
           if (notSameHost) {
             return;
           }
 
           const isAnchorOrHashAnchor =
-            isAnchorOfCurrentUrl(currentUrl, newUrl) || isHashAnchor(window.location.href, anchor.href);
+            isAnchorOfCurrentUrl(currentUrl, newUrl) ||
+            isHashAnchor(window.location.href, anchor.href);
           if (!showForHashAnchor && isAnchorOrHashAnchor) {
             return;
           }
@@ -268,7 +286,7 @@ const NextTopLoader = ({
             event.metaKey ||
             event.shiftKey ||
             event.altKey ||
-            !toAbsoluteURL(anchor.href).startsWith('http')
+            !toAbsoluteURL(anchor.href).startsWith("http")
           ) {
             NProgress.start();
             NProgress.done();
@@ -327,15 +345,15 @@ const NextTopLoader = ({
     }
 
     // Add the global click event listener
-    window.addEventListener('popstate', handleBackAndForth);
-    document.addEventListener('click', handleClick);
-    window.addEventListener('pagehide', handlePageHide);
+    window.addEventListener("popstate", handleBackAndForth);
+    document.addEventListener("click", handleClick);
+    window.addEventListener("pagehide", handlePageHide);
 
     // Clean up the global click event listener when the component is unmounted
     return (): void => {
-      document.removeEventListener('click', handleClick);
-      window.removeEventListener('pagehide', handlePageHide);
-      window.removeEventListener('popstate', handleBackAndForth);
+      document.removeEventListener("click", handleClick);
+      window.removeEventListener("pagehide", handlePageHide);
+      window.removeEventListener("popstate", handleBackAndForth);
     };
   }, []);