https://indiexpo.net/assets/controllers/star_rating_controller-3f3c2e69.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="star-rating"
4export default class extends Controller {
5  static targets = ["hiddenField"]
6  static values = { current: Number }
7
8  connect() {
9    if (this.currentValue > 0) {
10      this.hiddenFieldTarget.value = this.currentValue
11    }
12
13    this.updateStars(this.currentValue)
14  }
15
16  setRating(event) {
17    event.preventDefault()
18    const rating = parseInt(event.currentTarget.dataset.rating)
19    this.hiddenFieldTarget.value = rating
20    this.updateStars(rating)
21
22    const form = this.element.closest('form')
23    if (form) {
24      form.requestSubmit()
25    }
26  }
27
28  updateStars(rating) {
29    const stars = this.element.querySelectorAll('.star-icon')
30    stars.forEach((star, index) => {
31      const button = star.closest('.star-button')
32      if (index < rating) {
33        // Active Stars
34        star.classList.add('text-yellow-400')
35        star.style.opacity = "0.8"
36        button.classList.add('selected')
37      } else {
38        // Inactive Stars
39        star.classList.remove('text-yellow-400')
40        star.style.opacity = "0"
41        button.classList.remove('selected')
42      }
43    })
44  }
45
46  // Hover effects
47  hoverStar(event) {
48    const rating = parseInt(event.currentTarget.dataset.rating)
49    this.updateStars(rating)
50  }
51
52  leaveStar(event) {
53    const currentRating = parseInt(this.hiddenFieldTarget.value) || this.currentValue
54    this.updateStars(currentRating)
55  }
56}