From 07b0b1bb6d6b571873ccd1d6d8b72d0c92c0af65 Mon Sep 17 00:00:00 2001
From: Mauricio Dziedzinski <d.mauriciofarias@gmail.com>
Date: Fri, 15 May 2020 22:24:22 +0200
Subject: [PATCH] feat: make possible to use different tags as menu items

---
 README.md                            | 15 ++++++++++++++-
 src/scrollactive.vue                 | 19 +++++++++++++------
 src/utils/getSectionIdFromElement.js |  7 +++++++
 src/utils/getSectionSelector.js      |  8 ++++++++
 src/utils/index.js                   |  3 ++-
 src/utils/map.js                     |  2 --
 6 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/getSectionIdFromElement.js
 create mode 100644 src/utils/getSectionSelector.js
 delete mode 100644 src/utils/map.js

diff --git a/README.md b/README.md
index 9bf3ec7..4293011 100644
--- a/README.md
+++ b/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:
diff --git a/src/scrollactive.vue b/src/scrollactive.vue
index b7d101f..0f2a89b 100644
--- a/src/scrollactive.vue
+++ b/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));
       }
     },
 
diff --git a/src/utils/getSectionIdFromElement.js b/src/utils/getSectionIdFromElement.js
new file mode 100644
index 0000000..6d39b38
--- /dev/null
+++ b/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;
+};
diff --git a/src/utils/getSectionSelector.js b/src/utils/getSectionSelector.js
new file mode 100644
index 0000000..dc4965d
--- /dev/null
+++ b/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 '';
+};
diff --git a/src/utils/index.js b/src/utils/index.js
index c8a1b8e..f5499b0 100644
--- a/src/utils/index.js
+++ b/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';
diff --git a/src/utils/map.js b/src/utils/map.js
deleted file mode 100644
index d6a49af..0000000
--- a/src/utils/map.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// Must be called with 'call' to prevent bugs on some devices
-export const map = (list, callback) => [].map.call(list, callback);