https://bikeindex.org/assets/controllers/org/bikes_table_overflow_…fe42b5dc694e0995a640d60d0c3783dcd996986c.js

1import { Controller } from '@hotwired/stimulus'
2
3/* global ResizeObserver */
4
5// Connects to data-controller='org--bikes-table-overflow'
6// Flags data-overflowing while the table is wider than its scroll container, which is what
7// the frozen view column's shadow keys off, and data-scrolled-end once it's scrolled all the way,
8// which drops the right edge's. Toggling columns resizes the table, so it's observed too.
9export default class extends Controller {
10  connect () {
11    this.table = this.element.querySelector('table')
12    if (!this.table) return
13
14    this.scroller = this.table.parentElement
15    this.boundSync = () => this.#sync()
16    this.scroller.addEventListener('scroll', this.boundSync, { passive: true })
17    this.resizeObserver = new ResizeObserver(this.boundSync)
18    this.resizeObserver.observe(this.scroller)
19    this.resizeObserver.observe(this.table)
20  }
21
22  disconnect () {
23    this.resizeObserver?.disconnect()
24    this.scroller?.removeEventListener('scroll', this.boundSync)
25  }
26
27  #sync () {
28    const { scrollWidth, clientWidth, scrollLeft } = this.scroller
29    const overflowing = scrollWidth > clientWidth
30    this.element.toggleAttribute('data-overflowing', overflowing)
31    // Scroll positions come back fractional, so within a pixel counts as the end
32    this.element.toggleAttribute('data-scrolled-end', overflowing && scrollLeft + clientWidth >= scrollWidth - 1)
33  }
34};