https://www.shokuna.com/assets/controllers/nav_inversion_controller-a286622e.js

1import { Controller } from "@hotwired/stimulus"
2
3// Inverts the nav (light text on dark background) when its midpoint passes
4// over a "dark section" — used on the landing page for the chapter break
5// and the Torii starry band. Sections opt in via the configured class
6// (default: "nav-dark-section").
7//
8// Usage in markup:
9//   <div data-controller="nav-inversion"
10//        data-nav-inversion-dark-section-class="nav-dark-section">
11//     <nav data-nav-inversion-target="nav">...</nav>
12//     <section class="nav-dark-section">...</section>
13//   </div>
14export default class extends Controller {
15  static targets = ["nav"]
16  static values = {
17    darkSectionClass: { type: String, default: "nav-dark-section" },
18    invertedClass:    { type: String, default: "nav--inverted" }
19  }
20
21  connect() {
22    this.darkSections = Array.from(
23      this.element.querySelectorAll("." + this.darkSectionClassValue)
24    )
25    if (!this.hasNavTarget || this.darkSections.length === 0) return
26
27    this.boundUpdate = this.update.bind(this)
28    this.update()
29    window.addEventListener("scroll", this.boundUpdate, { passive: true })
30    window.addEventListener("resize", this.boundUpdate)
31  }
32
33  disconnect() {
34    if (this.boundUpdate) {
35      window.removeEventListener("scroll", this.boundUpdate)
36      window.removeEventListener("resize", this.boundUpdate)
37    }
38  }
39
40  update() {
41    const navRect = this.navTarget.getBoundingClientRect()
42    const sample = (navRect.top + navRect.bottom) / 2
43    let inverted = false
44    for (const section of this.darkSections) {
45      const rect = section.getBoundingClientRect()
46      if (rect.top <= sample && rect.bottom >= sample) {
47        inverted = true
48        break
49      }
50    }
51    this.navTarget.classList.toggle(this.invertedClassValue, inverted)
52  }
53}