@sidsbrmnn/scrollspy - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

dist/scrollspy.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.scrollSpy=e():t.scrollSpy=e()}(window,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){t.exports=function(t,e={}){const n=new(o(1))(t,e);return window.onload=function(){n.onScroll()},window.addEventListener("scroll",()=>{n.onScroll()}),n}},function(t,e){t.exports=class{constructor(t="#navMain",e={}){if(!t)throw new Error("First argument cannot be empty");if(!("string"==typeof t||t instanceof HTMLElement))throw new TypeError("menu can be either string or an instance of HTMLElement");if("object"!=typeof e)throw new TypeError("options can only be of type object");this.menuList=t instanceof HTMLElement?t:document.querySelector(t),this.options=Object.assign({},{sectionSelector:"section",targetSelector:"a",offset:0,hrefAttribute:"href",activeClass:"active"},e),this.sections=document.querySelectorAll(this.options.sectionSelector)}onScroll(){const t=this.getCurrentSection(),e=this.getCurrentMenuItem(t);e&&(this.removeCurrentActive({ignore:e}),this.setActive(e))}getCurrentSection(){for(let t=0;t<this.sections.length;t++){const e=this.sections[t],o=e.offsetTop,n=o+e.offsetHeight,r=(document.documentElement.scrollTop||document.body.scrollTop)+this.options.offset;if(r>=o&&r<n)return e}}getCurrentMenuItem(t){if(!t)return;const e=t.getAttribute("id");return this.menuList.querySelector(`[${this.options.hrefAttribute}="#${e}"]`)}setActive(t){if(!t.classList.contains(this.options.activeClass)){this.options.activeClass.trim().split(" ").forEach(e=>t.classList.add(e))}}removeCurrentActive(t={ignore:null}){const{hrefAttribute:e,targetSelector:o}=this.options;this.menuList.querySelectorAll(`${o}:not([${e}="${t.ignore.getAttribute(e)}"])`).forEach(t=>{this.options.activeClass.trim().split(" ").forEach(e=>t.classList.remove(e))})}}}])}));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.scrollSpy=e():t.scrollSpy=e()}(window,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){t.exports=function(t,e={}){const n=new(o(1))(t,e);return window.onload=function(){n.onScroll()},window.addEventListener("scroll",()=>{n.onScroll()}),n}},function(t,e){t.exports=class{constructor(t="#navMain",e={}){if(!t)throw new Error("First argument cannot be empty");if(!("string"==typeof t||t instanceof HTMLElement))throw new TypeError("menu can be either string or an instance of HTMLElement");if("object"!=typeof e)throw new TypeError("options can only be of type object");this.menuList=t instanceof HTMLElement?t:document.querySelector(t),this.options={sectionSelector:e.sectionSelector||"section",targetSelector:e.targetSelector||"a",offset:e.offset||0,hrefAttribute:e.hrefAttribute||"href",activeClass:e.activeClass.trim().split(" ")||["active"],onActive:e.onActive||null},this.sections=document.querySelectorAll(this.options.sectionSelector)}onScroll(){const t=this.getCurrentSection(),e=this.getCurrentMenuItem(t);e&&(this.removeCurrentActive({ignore:e}),this.setActive(e,t))}getCurrentSection(){for(let t=0;t<this.sections.length;t++){const e=this.sections[t],o=e.offsetTop,n=o+e.offsetHeight,r=(document.documentElement.scrollTop||document.body.scrollTop)+this.options.offset;if(r>=o&&r<n)return e}}getCurrentMenuItem(t){if(!t)return;const e=t.getAttribute("id");return this.menuList.querySelector(`[${this.options.hrefAttribute}="#${e}"]`)}setActive(t,e){this.options.activeClass.every(e=>t.classList.contains(e))||(t.classList.add(...this.options.activeClass),"function"==typeof this.options.onActive&&this.options.onActive(t,e))}removeCurrentActive(t={ignore:null}){const{hrefAttribute:e,targetSelector:o}=this.options;this.menuList.querySelectorAll(`${o}:not([${e}="${t.ignore.getAttribute(e)}"])`).forEach(t=>t.classList.remove(...this.options.activeClass))}}}])}));

package.json

 {
   "name": "@sidsbrmnn/scrollspy",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "A simple lightweight JavaScript library without jQuery or any other dependencies to handle scroll spying on static webpages.",
@@ -5,0 +5,0 @@ "main": "dist/scrollspy.min.js",

README.md

 # @sidsbrmnn/scrollspy
 
+[![npm version](https://badge.fury.io/js/@sidsbrmnn%2Fscrollspy.svg)](https://badge.fury.io/js/@sidsbrmnn%2Fscrollspy)
+
 A simple lightweight JavaScript library without jQuery or any other dependencies to handle scroll spying on static webpages.
@@ -18,3 +20,3 @@
     ```html
-    <script src="https://unpkg.com/@sidsbrmnn/scrollspy@1.0.4/dist/scrollspy.min.js"></script>
+    <script src="https://unpkg.com/@sidsbrmnn/scrollspy@1.x/dist/scrollspy.min.js"></script>
     ```
@@ -50,9 +52,10 @@
 
-| Name               | Type     | Default       | Description                                              |
-|--------------------|:---------|:--------------|:---------------------------------------------------------|
-| `sectionSelector`  | string   | `section`     | Query selector to your sections                          |
-| `targetSelector`   | string   | `a`           | Element will be added active class                       |
-| `offset`           | Number   | 0             | Offset number                                            |
-| `hrefAttribute`    | string   | `href`        | The menu item's attribute name which contains section ID |
-| `activeClass`      | string   | `active`      | Active class name will be added into `targetSelector`    |
+| Name               | Type     | Default       | Description                                                           |
+|--------------------|:---------|:--------------|:----------------------------------------------------------------------|
+| `sectionSelector`  | string   | `section`     | Query selector to your sections                                       |
+| `targetSelector`   | string   | `a`           | Element will be added active class                                    |
+| `offset`           | number   | 0             | Offset number                                                         |
+| `hrefAttribute`    | string   | `href`        | The menu item's attribute name which contains section ID              |
+| `activeClass`      | string   | `active`      | Active class name will be added into `targetSelector`                 |
+| `isActive`         | function | null          | A callback method that's called with the current menuItem and section |
 
@@ -59,0 +62,0 @@ ### ES6

src/ScrollSpy.js

@@ -7,7 +7,8 @@ class ScrollSpy {
      * @param {{
-     *  sectionSelector: string;
-     *  targetSelector: string;
-     *  offset: number;
-     *  hrefAttribute: string;
-     *  activeClass: string;
+     *  sectionSelector?: string;
+     *  targetSelector?: string;
+     *  offset?: number;
+     *  hrefAttribute?: string;
+     *  activeClass?: string;
+     *  onActive?: (menuItem: HTMLAnchorElement, section: HTMLElement) => void;
      * }} options - Options
@@ -29,13 +30,12 @@ */
 
-        let defaultOptions = {
-            sectionSelector: 'section',
-            targetSelector: 'a',
-            offset: 0,
-            hrefAttribute: 'href',
-            activeClass: 'active',
-        };
-
         this.menuList =
             menu instanceof HTMLElement ? menu : document.querySelector(menu);
-        this.options = Object.assign({}, defaultOptions, options);
+        this.options = {
+            sectionSelector: options.sectionSelector || 'section',
+            targetSelector: options.targetSelector || 'a',
+            offset: options.offset || 0,
+            hrefAttribute: options.hrefAttribute || 'href',
+            activeClass: options.activeClass.trim().split(' ') || ['active'],
+            onActive: options.onActive || null,
+        };
         this.sections = document.querySelectorAll(this.options.sectionSelector);
@@ -56,3 +56,3 @@ }
             this.removeCurrentActive({ ignore: menuItem });
-            this.setActive(menuItem);
+            this.setActive(menuItem, section);
         }
@@ -108,11 +108,14 @@ }
      * @param {HTMLAnchorElement} menuItem - Menu item of current section.
+     * @param {HTMLElement} section - The current section
      * @returns {void}
      */
-    setActive(menuItem) {
-        const isActive = menuItem.classList.contains(this.options.activeClass);
+    setActive(menuItem, section) {
+        const isActive = this.options.activeClass.every((value) =>
+            menuItem.classList.contains(value)
+        );
         if (!isActive) {
-            const activeClasses = this.options.activeClass.trim().split(' ');
-            activeClasses.forEach((activeClass) =>
-                menuItem.classList.add(activeClass)
-            );
+            menuItem.classList.add(...this.options.activeClass);
+            if (typeof this.options.onActive === 'function') {
+                this.options.onActive(menuItem, section);
+            }
         }
@@ -126,3 +129,3 @@ }
      * @param {{
-     *  ignore: HTMLAnchorElement
+     *  ignore: HTMLAnchorElement | null
      * }} options
@@ -139,8 +142,5 @@ * @returns {void}
 
-        menuItems.forEach((item) => {
-            const activeClasses = this.options.activeClass.trim().split(' ');
-            activeClasses.forEach((activeClass) =>
-                item.classList.remove(activeClass)
-            );
-        });
+        menuItems.forEach((item) =>
+            item.classList.remove(...this.options.activeClass)
+        );
     }
@@ -147,0 +147,0 @@ }

Fixed alerts

Copyleft License

License

(Experimental) Copyleft license information was found

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13373

increased by6.38%

Number of package files

7

increased by16.67%

Number of low license alerts

0

decreased by-100%

Lines of code

154

increased by0.65%

Number of lines in readme file

97

increased by3.19%

No dependency changes