segmentio · jedrzejchalubek · Oct 21, 2019 · Oct 15, 2019 · Oct 21, 2019 · Oct 21, 2019
diff --git a/js/anchors-indicator/index.js b/js/anchors-indicator/index.js
@@ -1,19 +1,49 @@
-import MenuSpy from 'menuspy'
+
 const COMPONENT_SELECTOR = '[data-anchors-indicator]'
 const ACTIVE_CLASS = 'data-active-class'
+const SECTION_ATTR= 'data-sections'
+const options = {
+  rootMargin: 50
+}
 
-const OPTIONS = {
-  enableLocationHash: false
+const throttle = (fn, wait) => {
+  var time = Date.now();
+  return function() {
+    if ((time + wait - Date.now()) < 0) {
+      fn();
+      time = Date.now();
+    }
+  }
 }
 
-export default function () {
+export default () => {
   const components = document.querySelectorAll(COMPONENT_SELECTOR)
 
   components.forEach(component => {
+    const sectionSelector = component.getAttribute(SECTION_ATTR)
     const activeClass = component.getAttribute(ACTIVE_CLASS)
+    const sections = document.querySelectorAll(`${sectionSelector}`)
+    const allLinks = component.querySelectorAll("a");
+
+    function scrollspy() {
+      sections.forEach(current => {
+        let currentElementOffset = current.offsetTop;
+        let scrollPosition =
+          document.documentElement.scrollTop || document.body.scrollTop;
+        if (currentElementOffset <= scrollPosition + options.rootMargin) {
+          allLinks.forEach(currentLink => {
+            currentLink.classList.remove(activeClass);
+          });
+          const currentID = current.getAttribute("id");
 
-    new MenuSpy(component, Object.assign({
-      activeClass: activeClass
-    }, OPTIONS))
+          if ( currentID ) {
+            component
+            .querySelector(`a[href="#${currentID}"]`)
+            .classList.add(activeClass);
+          }
+        }
+      });
+    }
+    window.addEventListener("scroll", throttle(scrollspy, 200))
   })
 }
diff --git a/js/dropdown-menu/index.js b/js/dropdown-menu/index.js
@@ -4,7 +4,6 @@ const DROPDOWN_HEAD_INNER = '[data-ref="dropdown-menu[head-inner]"]'
 const DROPDOWN_BODY = '[data-ref="dropdown-menu[body]"]'
 const DROPDOWN_LINK = '[data-ref="dropdown-menu[link]"]'
 const ACTIVE_CLASS_ATTR = 'data-active-class'
-const ANCHOR = '[data-ref="dropdown-menu[item]"]'
 
 export default function () {
   const components = document.querySelectorAll(COMPONENT_SELECTOR)
@@ -40,9 +39,11 @@ export default function () {
     })
 
     window.addEventListener('scroll', () => {
-      const currentActiveIndicator = document.querySelector(`${ANCHOR}.${itemActiveClass} a`)
+      const currentActiveIndicator = document.querySelector(`${DROPDOWN_LINK}.${itemActiveClass}`)
 
-      updateValue(currentActiveIndicator)
+      if (currentActiveIndicator) {
+        updateValue(currentActiveIndicator)
+      }
     })
   })
 }
diff --git a/package.json b/package.json
@@ -18,6 +18,5 @@
     "webpack-cli": "3.3.9"
   },
   "dependencies": {
-    "menuspy": "1.3.0"
   }
 }
diff --git a/src/_includes/sidebar/destinations-menu-mobile.html b/src/_includes/sidebar/destinations-menu-mobile.html
@@ -1,6 +1,6 @@
 {% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %}
 
-<div class="destination-menu-mobile" data-dropdown-menu data-anchors-indicator data-active-class="destination-menu-mobile__item--active">
+<div class="destination-menu-mobile" data-dropdown-menu data-anchors-indicator data-sections=".destinations-catalog__section" data-active-class="destination-menu-mobile__item--active">
   <div class="destination-menu-mobile__select" data-ref="dropdown-menu[head]" data-active-class="destination-menu-mobile__select--active">
     <div class="destination-menu-mobile__select-inner">
       <span class="flex flex--middle" data-ref="dropdown-menu[head-inner]">
@@ -18,7 +18,7 @@
       {% assign category_name_size = category.name | size %}
       {% if category_name_size != 0 %}
         {% assign category_icon = category.name | slugify %}
-        <li class="destination-menu-mobile__item" data-ref="dropdown-menu[item]">
+        <li class="destination-menu-mobile__item">
           <a class="destination-menu-mobile__link" href="#{{ category.name | slugify }}" title="{{ category.name }}" data-ref="dropdown-menu[link]" >
             <span class="destination-menu-mobile__icon">
               {% include icons/destinations-catalog/{{ category_icon }}.svg %}

diff --git a/src/_includes/sidebar/destinations-menu.html b/src/_includes/sidebar/destinations-menu.html
@@ -1,8 +1,8 @@
 {% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %}
 
-<div class="destination-menu" data-anchors-indicator data-active-class="destination-menu__item--active">
+<div class="destination-menu" data-anchors-indicator data-sections=".destinations-catalog__section" data-active-class="destination-menu__link--active">
   <ul class="destination-menu__list list list--unstyle">
-      {% for category in destination_categories %}
+    {% for category in destination_categories %}
       {% assign category_name_size = category.name | size %}
       {% if category_name_size != 0 %}
         {% assign category_icon = category.name | slugify %}

diff --git a/src/_layouts/integration.html b/src/_layouts/integration.html
@@ -56,7 +56,7 @@ <h1 id="{{ page.title | downcase }}" class="page__heading">
 
       <div class="sidebar sidebar--sticky">
         {%- unless page.hide_toc -%}
-          <div data-anchors-indicator data-active-class="menu-side__item--active">
+          <div data-anchors-indicator data-sections="h2" data-active-class="menu-side__link--active">
             {% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
           </div>
         {%- endunless -%}

diff --git a/src/_layouts/main.html b/src/_layouts/main.html
@@ -29,7 +29,7 @@
 
       <div class="sidebar sidebar--sticky">
         {%- unless page.hide_toc -%}
-          <div data-anchors-indicator data-active-class="menu-side__item--active">
+          <div data-anchors-indicator data-sections="h2" data-active-class="menu-side__link--active">
             {% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
           </div>
         {%- endunless -%}

diff --git a/src/_sass/components/_menu-side.scss b/src/_sass/components/_menu-side.scss
@@ -8,15 +8,6 @@
     margin-top: 12px;
   }
 
-  &__item {
-    &--active {
-      #{$this}__link {
-        font-weight: 500;
-        color: color(secondary-dark);
-      }
-    }
-  }
-
   &__link {
     display: block;
     font-size: 14px;
@@ -27,6 +18,11 @@
       text-decoration: none;
       color: color(gray-dark);
     }
+
+    &--active {
+      font-weight: 500;
+      color: color(secondary-dark);
+    }
   }
 
   & {

diff --git a/yarn.lock b/yarn.lock
@@ -2131,6 +2131,11 @@ interpret@1.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
+intersection-observer@0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.7.0.tgz#ee16bee978db53516ead2f0a8154b09b400bbdc9"
+  integrity sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg==
+
 invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"