https://www.carwow.de/assets/controllers/chip_dropdown_controller-b79fd8fc.js

1import { Controller } from '@hotwired/stimulus'
2
3export default class extends Controller {
4  static targets = ['dropdown']
5  static values = { eventName: String, interactionElement: String }
6
7  connect () {
8    this.handleOutsideClick = this.handleOutsideClick.bind(this)
9    document.addEventListener('click', this.handleOutsideClick)
10  }
11
12  disconnect () {
13    document.removeEventListener('click', this.handleOutsideClick)
14  }
15
16  toggle (_event) {
17    this.dropdownTarget.classList.toggle('is-hidden')
18    this.trackChipInteraction()
19  }
20
21  handleOutsideClick (event) {
22    if (!this.element.contains(event.target)) {
23      const wasOpen = !this.dropdownTarget.classList.contains('is-hidden')
24      this.dropdownTarget.classList.add('is-hidden')
25
26      if (wasOpen) {
27        // Track the interaction if the dropdown was open and is now closed
28        this.trackChipInteraction()
29      }
30    }
31  }
32
33  trackChipInteraction () {
34    const interactionCategory = this.dropdownTarget.classList.contains('is-hidden') ? 'dropdown_close' : 'dropdown_open'
35    const eventName = this.eventNameValue
36    const interactionElement = this.interactionElementValue
37
38    // Don't track if the event name or interaction element is not set
39    if (!eventName || !interactionElement) return
40
41    const eventData = {
42      eventName,
43      event: 'trackable event',
44      eventParams: {
45        interactionCategory,
46        interactionElement
47      }
48    }
49
50    window.dataLayer.push(eventData)
51  }
52}