From cdb81d02e5c24113d7eaf4aa18aaa520c5f65134 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Thu, 12 Nov 2020 17:29:12 -0300
Subject: [PATCH] =?UTF-8?q?actualizar=20el=20men=C3=BA=20a=20medida=20que?=
 =?UTF-8?q?=20se=20pasan=20secciones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _includes/navbar.html                   |  4 +--
 _layouts/default.html                   |  2 +-
 _packs/controllers/menu_controller.js   | 32 ++++++++++++++++++
 _packs/controllers/scroll_controller.js | 43 +++++++++++++++++++++++++
 4 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 _packs/controllers/menu_controller.js
 create mode 100644 _packs/controllers/scroll_controller.js

diff --git a/_includes/navbar.html b/_includes/navbar.html
index 2323b3f..b39ec0c 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -3,7 +3,7 @@
     {% include_cached logo.svg %}
   </a>
 
-  <ul class="navbar-nav d-print-none">
+  <ul class="navbar-nav d-print-none" data-controller="menu">
     {%- for item in site.i18n.menu.items -%}
       {% comment %}
       Algunos items del menú tienen layouts para indicar que
@@ -22,7 +22,7 @@
       {%- assign href = post.url | default: item.href -%}
       {%- assign active = include.active_cache_key | equals: href -%}
       <li class="nav-item">
-        <a class="nav-link {{ active | ternary: 'active', '' }}" href="{{ href }}">
+        <a data-target="menu.item" class="nav-link {{ active | ternary: 'active', '' }}" href="{{ href }}">
           {{ item.title }}
 
           {%- if active -%}
diff --git a/_layouts/default.html b/_layouts/default.html
index 09343ce..9766097 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -34,7 +34,7 @@
     {%- assign active_cache_key = page.url | menu_active_item | default: 'none' -%}
     {%- include_cached navbar.html active_cache_key=active_cache_key %}
 
-    <main>
+    <main data-controller="scroll">
       {{ content }}
     </main>
 
diff --git a/_packs/controllers/menu_controller.js b/_packs/controllers/menu_controller.js
new file mode 100644
index 0000000..7a79a3b
--- /dev/null
+++ b/_packs/controllers/menu_controller.js
@@ -0,0 +1,32 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = [ 'item' ]
+
+  connect () {
+    window.addEventListener('scroll:section', event => this.update(event.detail.id))
+  }
+
+  get items () {
+    if (!this._items) {
+      this._items = {}
+
+      for (const item of this.itemTargets) {
+        this._items[item.href.split('#')[1]] = item
+      }
+    }
+
+    return this._items
+  }
+
+  update (id) {
+    console.log(id)
+    for (const item of Object.values(this.items)) {
+      item.classList.remove('active')
+    }
+
+    if (this.items[id]) this.items[id].classList.add('active')
+  }
+}
diff --git a/_packs/controllers/scroll_controller.js b/_packs/controllers/scroll_controller.js
new file mode 100644
index 0000000..5b168a5
--- /dev/null
+++ b/_packs/controllers/scroll_controller.js
@@ -0,0 +1,43 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+import { Controller } from 'stimulus'
+
+/*
+ * Al navegar por el sitio y llegar a ciertas secciones, se van
+ * activando ítems del menú.
+ *
+ * Para eso configuramos un IntersectionObserver en todo el documento y
+ * a medida que van apareciendo secciones actualizamos el menú.
+ */
+export default class extends Controller {
+  static targets = [ 'section' ]
+
+  connect () {
+    for (const section of this.sectionTargets) {
+      this.observer.observe(section)
+    }
+  }
+
+  /*
+   * Solo nos interesa la primera
+   */
+  get observer () {
+    if (!this._observer) this._observer = new IntersectionObserver((entries, observer) => this.update(entries), this.options)
+
+    return this._observer
+  }
+
+  get options () {
+    if (!this._options) this._options = { threshold: 0, rootMargin: '0px' }
+
+    return this._options
+  }
+
+  update (entries) {
+    const section = entries.find(x => x.isIntersecting)
+
+    if (!section) return
+
+    window.dispatchEvent(new CustomEvent('scroll:section', { detail: { id: section.target.id }}))
+  }
+}