Used gumshoe scrollspy script for a better experience. (#2)

README.md

@@ -1,11 +1,16 @@
-# GitBook Plugin: InTopic TOC
+# GitBook plugin: InTopic TOC
 
-This GitBook Plugin adds an inline table of contents (TOC) to each page based on configurable selectors. Inline TOC can be enabled or disabled by default or on individual pages. TOC is placed on the right side and moves to top for smaller devices automatically.
+![Build Status](https://api.travis-ci.org/zanfab/gitbook-plugin-intopic-toc.svg)
+[![npm version](https://img.shields.io/npm/v/gitbook-plugin-intopic-toc/latest.svg)](https://www.npmjs.com/package/gitbook-plugin-intopic-toc)
+
+This GitBook plugin adds an inline table of contents (TOC) to each page based on configurable selectors. Inline TOC can be enabled or disabled by default or on individual pages. TOC is placed on the right side and moves to top for smaller devices automatically.
 
 Inline TOC stays at the top of the page when scrolling using a sticky effect. Current position is highlighted by a scrollspy effect.
 
 ![Inline TOC in desktop and mobile mode](https://user-images.githubusercontent.com/44210522/50728477-ab322680-112a-11e9-92da-4de20e17758d.png)
 
+Plugin uses [gumshoe](https://github.com/cferdinandi/gumshoe) and [anchorjs](https://github.com/bryanbraun/anchorjs) to implement functionality.
+
 ## Installation
 
 ### Step #1 - Update book.json file
@@ -85,12 +90,11 @@ For basic usage, the only thing you have to do is install the plugin. For advanc
 }
 ```
 
-* selector : Selector used to find elements to put anchors on.
-  * Default: .markdown-section h2
-* visible: Defines whether to show the navigation on every page.
-  * Default: true.
-* label: Label which is used as heading for the navigation. Could be a single string or an object for multilingual setups.
-  * Default: In this article
+| Property | Description                                                  | Default value        |
+| -------- | ------------------------------------------------------------ | -------------------- |
+| selector | Selector used to find elements to put anchors on             | .markdown-section h2 |
+| visible  | Defines whether to show the navigation on every page         | true                 |
+| label    | Label which is used as heading for the navigation. Could be a single string or an object for multilingual setups | In this article      |
 
 If `visible` parameter set to true and you want to hide the TOC on a single page, add the front matter item `isTocVisible: false` to the top of the Markdown file like this:
 
@@ -110,4 +114,7 @@ The specific front matter `isTocVisible` overrides the `visible` parameter from
 If inline TOC does not look as expected, check if your `book.json` is valid according to this documentation.
 
 ## Changelog
+
+01/07/2019 - Used [gumshoe scrollspy script](https://github.com/cferdinandi/gumshoe)  for a better experience
+
 01/05/2019 - Initial Release

book/plugin.js

@@ -51,20 +51,27 @@ require(["gitbook", "jQuery"], function(gitbook, $) {
             var section = document.body.querySelector('.page-wrapper');
             section.appendChild(navigation, section.firstChild);
 
-            $(".book-body .body-inner").scroll(onScroll);
+            gumshoe.init({
+                container: $(".book-body .body-inner")[0],
+                offset: 20,
+                scrollDelay: false,
+                activeClass: 'selected'
+            });
         }
     });
 });
 
 function buildNavigation(elements) {
     var navigation = document.createElement('nav');
+    navigation.setAttribute('data-gumshoe-header', '');
     navigation.className = 'intopic-toc';
 
     var heading = document.createElement('h3');
     heading.innerText = label;
     navigation.appendChild(heading);
 
     var container = document.createElement('ol');
+    container.setAttribute('data-gumshoe', '');
     navigation.appendChild(container);
 
     for (var i = 0; i < elements.length; i++) {
@@ -87,29 +94,3 @@ function buildNavigation(elements) {
 
     return navigation;
 }
-
-function onScroll(e) {
-    const currentPosition = $(e.target).scrollTop() + $('.book-header').height();
-
-    for (var i = 0; i < anchors.elements.length; i++) {
-        const section = anchors.elements[i];
-        const isInView = $(section).offset().top < currentPosition;
-
-        if (isInView) {
-            const menuItemID = section.getAttribute('id');
-            const activeItem = $(`.intopic-toc ol li`).has(`a[href="#${menuItemID}"]`);
-
-            if (!activeItem) {
-                return;
-            }
-
-            $('.intopic-toc ol li').each(function() {
-                $(this).attr('data-active', 'false');
-                $(this).removeClass('selected');
-            });
-
-            $(activeItem).attr('data-active', 'true');
-            $(activeItem).addClass('selected');
-        }
-    }
-}

index.js

@@ -3,6 +3,7 @@ module.exports = {
         assets: "./book",
         js: [
             "anchor.min.js",
+            "gumshoe.min.js",
             "plugin.js"
         ],
         css: [

package.json

@@ -1,12 +1,13 @@
 {
   "name": "gitbook-plugin-intopic-toc",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "GitBook Plugin to add inline table of contents (TOC) to each page based on configurable selectors.",
   "keywords": [
     "gitbook",
     "plugin",
     "toc",
-    "anchor"
+    "anchor",
+    "table-of-contents"
   ],
   "author": "Fabian Zankl",
   "license": "MIT",