https://assets.scansail.com/frontend-assets/master/sf-assets/contr…/filter-modal-scroll_controller-p2si6e3.js

1/* stimulusFetch: 'lazy' */
2import { Controller } from "@hotwired/stimulus";
3
4/**
5 * Filter Modal Scroll Controller
6 *
7 * Opens the filters modal and scrolls to a specific filter section.
8 *
9 * Usage:
10 *   <button
11 *     data-controller="filter-modal-scroll"
12 *     data-filter-modal-scroll-dialog-outlet="#filters-dialog"
13 *     data-filter-modal-scroll-target-value="#duration-filter"
14 *     data-action="click->filter-modal-scroll#openAndScroll"
15 *   >
16 *     Duration
17 *   </button>
18 */
19export default class extends Controller {
20  static outlets = ["dialog"];
21  static values = {
22    target: String,
23  };
24
25  openAndScroll() {
26    if (this.hasDialogOutlet) {
27      this.dialogOutlet.open();
28
29      // Wait for the dialog to be fully opened before scrolling
30      requestAnimationFrame(() => {
31        this.#scrollToTarget();
32      });
33    }
34  }
35
36  #scrollToTarget() {
37    if (!this.targetValue) return;
38
39    const targetElement = document.querySelector(this.targetValue);
40    if (targetElement) {
41      // Find the scrollable container (the overflow-y-auto element inside the dialog)
42      const scrollContainer = targetElement.closest(".overflow-y-auto");
43      if (scrollContainer) {
44        // Calculate offset within the scroll container
45        const containerRect = scrollContainer.getBoundingClientRect();
46        const targetRect = targetElement.getBoundingClientRect();
47        const offset =
48          targetRect.top - containerRect.top + scrollContainer.scrollTop;
49
50        scrollContainer.scrollTo({
51          top: offset,
52          behavior: "smooth",
53        });
54      } else {
55        // Fallback: scroll element into view
56        targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
57      }
58    }
59  }
60}