https://front.stockoption.cloud/assets/controllers/reaction_contro…ba2bf420c966eea76f640e8e542b166c8fe2aa3e.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["heart", "counter", "count"]
5  static values = { url: String, reacted: Boolean, count: Number }
6
7  toggle() {
8    if (this.busy) return
9    this.busy = true
10
11    fetch(this.urlValue, {
12      method: 'POST',
13      headers: {
14        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
15        'Accept': 'application/json'
16      }
17    })
18      .then(r => r.json())
19      .then(data => {
20        this.reactedValue = data.reacted
21        this.countValue = data.count
22        this.updateHeart(data.reacted)
23        this.animateCount(data.count, data.reacted)
24        this.busy = false
25      })
26      .catch(() => { this.busy = false })
27  }
28
29  updateHeart(reacted) {
30    this.heartTarget.classList.toggle('-reacted', reacted)
31    if (reacted) {
32      this.heartTarget.style.animation = 'none'
33      this.heartTarget.offsetHeight
34      this.heartTarget.style.animation = 'heart-pop 0.3s ease'
35    }
36  }
37
38  animateCount(newCount, reacted) {
39    const container = this.countTarget
40    const counter = this.counterTarget
41    const direction = reacted ? 'up' : 'down'
42
43    // Snapshot current content into a span for exit animation
44    const currentText = container.textContent.trim()
45    container.textContent = ''
46
47    if (currentText) {
48      const oldEl = document.createElement('span')
49      oldEl.textContent = currentText
50      oldEl.className = `thanksboard-count-exiting-${direction}`
51      container.appendChild(oldEl)
52      oldEl.addEventListener('animationend', () => oldEl.remove(), { once: true })
53    }
54
55    if (newCount > 0) {
56      counter.classList.add('-visible')
57      const newEl = document.createElement('span')
58      newEl.textContent = newCount
59      newEl.className = `thanksboard-count-entering-${direction}`
60      container.appendChild(newEl)
61      newEl.addEventListener('animationend', () => { newEl.className = '' }, { once: true })
62    } else {
63      const onDone = () => { counter.classList.remove('-visible') }
64      if (currentText) {
65        setTimeout(onDone, 250)
66      } else {
67        onDone()
68      }
69    }
70  }
71};