2021-11-22 17:51:50 +00:00
|
|
|
import { Controller } from "stimulus";
|
2020-11-12 20:29:12 +00:00
|
|
|
|
|
|
|
export default class extends Controller {
|
2021-11-22 17:51:50 +00:00
|
|
|
static targets = ["item"];
|
2020-11-12 20:29:12 +00:00
|
|
|
|
2021-11-22 17:51:50 +00:00
|
|
|
connect() {
|
|
|
|
window.addEventListener("scroll:section", (event) =>
|
|
|
|
this.update(event.detail.id)
|
|
|
|
);
|
2020-11-12 20:29:12 +00:00
|
|
|
}
|
|
|
|
|
2021-11-22 17:51:50 +00:00
|
|
|
get items() {
|
2020-11-12 20:29:12 +00:00
|
|
|
if (!this._items) {
|
2021-11-22 17:51:50 +00:00
|
|
|
this._items = {};
|
2020-11-12 20:29:12 +00:00
|
|
|
|
|
|
|
for (const item of this.itemTargets) {
|
2021-11-22 17:51:50 +00:00
|
|
|
this._items[item.href.split("#")[1]] = item;
|
2020-11-12 20:29:12 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-11-22 17:51:50 +00:00
|
|
|
return this._items;
|
2020-11-12 20:29:12 +00:00
|
|
|
}
|
|
|
|
|
2021-11-22 17:51:50 +00:00
|
|
|
update(id) {
|
2020-11-12 20:29:12 +00:00
|
|
|
for (const item of Object.values(this.items)) {
|
2021-11-22 17:51:50 +00:00
|
|
|
item.classList.remove("active");
|
2020-11-12 20:29:12 +00:00
|
|
|
}
|
|
|
|
|
2021-11-22 17:51:50 +00:00
|
|
|
if (this.items[id]) this.items[id].classList.add("active");
|
2020-11-12 20:29:12 +00:00
|
|
|
}
|
|
|
|
}
|