https://indiexpo.net/assets/controllers/comments_controller-ccc10787.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="comments"
4export default class extends Controller {
5  static targets = ["replyForm"]
6
7  connect() {
8    // Add click event listeners to all spoiler elements within this controller's scope
9    this.element.addEventListener('click', this.handleSpoilerClick.bind(this))
10  }
11
12  toggleReplyForm(event) {
13    event.preventDefault()
14    const commentId = event.currentTarget.dataset.commentId
15    const replyForm = document.getElementById(`reply_form_${commentId}`)
16
17    if (replyForm) {
18      // Hide all other reply forms
19      this.hideAllReplyForms()
20      // Toggle this reply form
21      replyForm.classList.toggle("hidden")
22      if (!replyForm.classList.contains("hidden")) {
23        const textarea = replyForm.querySelector("textarea")
24        if (textarea) textarea.focus()
25      }
26    }
27  }
28
29  hideAllReplyForms() {
30    const replyForms = document.querySelectorAll('[id^="reply_form_"]')
31    replyForms.forEach(form => {
32      form.classList.add("hidden")
33      const textarea = form.querySelector("textarea")
34      if (textarea) textarea.value = ""
35    })
36  }
37
38  handleSpoilerClick(event) {
39    // Check if the clicked element or its parent is a spoiler
40    const spoilerElement = event.target.closest('.spoiler')
41    
42    if (spoilerElement && !spoilerElement.classList.contains('revealed')) {
43      event.preventDefault()
44      event.stopPropagation()
45      
46      // Reveal the spoiler by adding the 'revealed' class
47      spoilerElement.classList.add('revealed')
48      
49      // Remove the click-to-reveal tooltip
50      spoilerElement.removeAttribute('title')
51      
52      // Add a visual indicator that it's been revealed
53      spoilerElement.title = 'Spoiler revealed'
54    }
55  }
56}