feat: the function of automatically updating the hash value of browse…

…r address bar when the page scrolling
parksben · Dec 30, 2019 · bac0746 · bac0746
1 parent 0df3729
commit bac0746
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -3,12 +3,13 @@
 ![npm](https://img.shields.io/npm/l/markdown-navbar.svg)
 ![npm](https://img.shields.io/npm/dt/markdown-navbar.svg)
 ![npm](https://img.shields.io/npm/v/markdown-navbar/latest.svg)
+![GitHub file size in bytes](https://img.shields.io/github/size/parksben/markdown-navbar/src/index.js)
 
 Best markdown navbar component for React. With this component, you can:
 
-* Display article directory for readers
-* Click on the anchor point in the directory to jump to the corresponding article content
-* Share url with anchor hash value to reader
+- Display article directory for readers
+- Click on the anchor point in the directory to jump to the corresponding article content
+- Share url with anchor hash value to reader
 
 ## Screenshots
 
@@ -25,6 +26,7 @@ This UI component needs to be used in **conjunction** with your article content.
 ```
 yarn add markdown-navbar
 ```
+
 or
 
 ```
@@ -39,23 +41,20 @@ import 'markdown-navbar/dist/navbar.css';
 
 const content = '## Heading One...\n\n## Heading Two...\n';
 
-<MarkNav
-  className="article-menu"
-  source={content}
-  headingTopOffset={80}
-/>
+<MarkNav className="article-menu" source={content} headingTopOffset={80} />;
 ```
 
 ## Options
 
-|Property|Data Type|Default Value|Description|
-|:-:|:-:|:-:|:-:|
-|className|string|""|The className that defines the outermost container of navbar|
-|source|string|""|Markdown text content|
-|headingTopOffset|number|0|Anchor displacement relative to the top of the window (for the anchor jump)|
-|declarative|boolean|false|Use the text of the title from Markdown content as the hash value for the anchor if true|
-|ordered|boolean|true|Whether the title contains a numerical prefix, such as: `1. 2. 2.2`|
+|     Property     | Data Type | Default Value |                                         Description                                          |
+| :--------------: | :-------: | :-----------: | :------------------------------------------------------------------------------------------: |
+|    className     |  string   |      ""       |                 The className that defines the outermost container of navbar                 |
+|      source      |  string   |      ""       |                                    Markdown text content                                     |
+| headingTopOffset |  number   |       0       |         Anchor displacement relative to the top of the window (for the anchor jump)          |
+|  updateHashAuto  |  boolean  |     true      | Automatically update the hash value of the browser's address bar when page scrolling if true |
+|   declarative    |  boolean  |     false     |   Use the text of the title from Markdown content as the hash value for the anchor if true   |
+|     ordered      |  boolean  |     true      |             Whether the title contains a numerical prefix, such as: `1. 2. 2.2`              |
 
 ## License
 
-`Markdown-Navbar` is released under the MIT license.
+[MIT license](./LICENSE)
diff --git a/src/index.js b/src/index.js
@@ -7,6 +7,7 @@ export class MarkdownNavbar extends Component {
     source: PropTypes.string,
     ordered: PropTypes.bool,
     headingTopOffset: PropTypes.number,
+    updateHashAuto: PropTypes.bool,
     declarative: PropTypes.bool,
     className: PropTypes.string,
   };
@@ -15,6 +16,7 @@ export class MarkdownNavbar extends Component {
     source: '',
     ordered: true,
     headingTopOffset: 0,
+    updateHashAuto: true,
     declarative: false,
     className: '',
   };
@@ -193,6 +195,9 @@ export class MarkdownNavbar extends Component {
       h => h.distanceToTop === minDistance
     );
 
+    if (this.props.updateHashAuto) {
+      window.location.hash = curHeading.dataId;
+    }
     this.setState({
       currentListNo: curHeading.listNo,
     });
@@ -205,11 +210,13 @@ export class MarkdownNavbar extends Component {
       }`;
 
       return (
-        <a
+        <div
           className={cls}
-          href={this.props.declarative ? `#${t.text}` : `#heading-${t.index}`}
           onClick={evt => {
             evt.preventDefault();
+            window.location.hash = this.props.declarative
+              ? t.text
+              : `heading-${t.index}`;
             this._scrollToTarget(
               this.props.declarative ? t.text : `heading-${t.index}`
             );
@@ -222,7 +229,7 @@ export class MarkdownNavbar extends Component {
             .substring(2)}`}>
           {this.props.ordered ? <small>{t.listNo}</small> : null}
           {t.text}
-        </a>
+        </div>
       );
     });
 

diff --git a/src/navbar.css b/src/navbar.css
@@ -13,6 +13,7 @@
   font-weight: lighter;
   line-height: 2em;
   padding-right: 1.8em;
+  cursor: pointer;
 }
 
 .markdown-navigation .title-anchor:hover,