feat: make possible to use different tags as menu items

Author: eddiemf

README.md

@@ -41,7 +41,7 @@ If you're not running any transpiler like babel, you'll most likely need to inst
 
 ## Usage
 
-You should wrap your menu in a `<scrollactive>` tag (which will be your nav) and add a `.scrollactive-item` class in your `<a>` tags as I show in the example below:
+The primary way to use the plugin is to wrap your menu in a `<scrollactive>` tag (which will be your nav) and add a `.scrollactive-item` class in your `<a>` tags as I show in the example below:
 
 ```html
 <scrollactive class="my-nav">
@@ -54,6 +54,19 @@ You should wrap your menu in a `<scrollactive>` tag (which will be your nav) and
 
 You can follow whatever structure you wish, just make sure to set the `.scrollactive-item` class in the items you want to highlight and set its `href` with a valid element ID that you would like to track while scrolling.
 
+The secondary way to use it is almost the same as the primary but instead of relying on `href` to find your sections you'll need to set a data attribute `data-section-selector` on your elements with the section selector you wish to have.
+
+```html
+<scrollactive class="my-nav">
+  <span data-section-selector="#home" class="scrollactive-item">Home</span>
+  <span data-section-selector=".about-us" class="scrollactive-item">About Us</span>
+  <span data-section-selector=".portfolio div span" class="scrollactive-item">Portfolio</span>
+  <span data-section-selector="#contact" class="scrollactive-item">Contact</span>
+</scrollactive>
+```
+
+As you can see this gives you more freedom to choose different tags and you can use whatever CSS selector you find necessary, but it's important to notice that `data-section-selector` takes precedence over `href`, so if you have a tag `<a href="#section-1" data-section-selector="#another-section">` it will completely ignore the `#section-1` and use `#another-section` instead.
+
 ## Events
 
 Scrollactive will emit an `itemchanged(event, currentItem, lastActiveItem)` event when an active menu item is changed to another. You can catch that event doing as the example below:

src/scrollactive.vue

@@ -1,7 +1,14 @@
 <script>
 import bezierEasing from 'bezier-easing';
 import { ScrollContainer } from './ScrollContainer';
-import { forEach, map, find, getIdFromHash, pushHashToUrl } from './utils';
+import {
+  forEach,
+  find,
+  getIdFromHash,
+  pushHashToUrl,
+  getSectionSelector,
+  getSectionIdFromElement,
+} from './utils';
 
 export default {
   props: {
@@ -200,7 +207,7 @@ export default {
       const items = [];
 
       forEach(elements, (menuElement) => {
-        const section = document.getElementById(getIdFromHash(menuElement.hash));
+        const section = document.querySelector(getSectionSelector(menuElement));
         if (!section) return;
 
         items.push({ section, menuElement });
@@ -265,12 +272,12 @@ export default {
       event.preventDefault();
 
       const menuItem = event.target;
-      const { hash } = menuItem;
-      const section = document.getElementById(getIdFromHash(hash));
+      const sectionSelector = getSectionSelector(menuItem);
+      const section = document.querySelector(sectionSelector);
 
       if (!section) {
         console.warn(
-          `[vue-scrollactive] Element '${hash}' was not found. Make sure it is set in the DOM.`
+          `[vue-scrollactive] Element '${sectionSelector}' was not found. Make sure it is set in the DOM.`
         );
 
         return;
@@ -302,7 +309,7 @@ export default {
       }
 
       if (this.modifyUrl) {
-        pushHashToUrl(hash);
+        pushHashToUrl(getSectionIdFromElement(menuItem));
       }
     },
 

src/utils/getSectionIdFromElement.js

@@ -0,0 +1,7 @@
+export const getSectionIdFromElement = (element) => {
+  if (element.dataset.sectionSelector && element.dataset.sectionSelector.substr(0, 1) === '#') {
+    return element.dataset.sectionSelector;
+  }
+
+  return element.hash;
+};

src/utils/getSectionSelector.js

@@ -0,0 +1,8 @@
+import { getIdFromHash } from './getIdFromHash';
+
+export const getSectionSelector = (element) => {
+  if (element.dataset.sectionSelector) return element.dataset.sectionSelector;
+  if (element.hash) return `#${getIdFromHash(element.hash)}`;
+
+  return '';
+};

src/utils/index.js

@@ -1,5 +1,6 @@
 export { forEach } from './forEach';
-export { map } from './map';
 export { find } from './find';
 export { getIdFromHash } from './getIdFromHash';
 export { pushHashToUrl } from './pushHashToUrl';
+export { getSectionSelector } from './getSectionSelector';
+export { getSectionIdFromElement } from './getSectionIdFromElement';