https://railsblocks.com/assets/controllers/text_cycler_controller-…b14cc8fb499cb792117d1808d6748beb735210e7.js

1import { Controller } from "@hotwired/stimulus";
2
3export default class extends Controller {
4  static targets = ["toggleable"];
5  static values = {
6    messages: Array, // Array of messages to cycle through
7    messageCycleIndex: { type: Number, default: -1 }, // Index for cycling through messages
8    clickCount: { type: Number, default: 0 }, // Counter for total clicks
9  };
10
11  connect() {
12    this.messagesValue = [
13      "It's just a button 🤷‍♂️",
14      "Or is it? 🤨",
15      "Nah, it's just a button ☺️",
16      "Wow you're still here? 😂",
17      "I'm impressed 🤩",
18      "Click me again! 🤗",
19      "Congrats! here's a cookie 🍪",
20    ];
21    // Text will be set on the first odd click.
22  }
23
24  toggle() {
25    this.clickCountValue++;
26    if (this.clickCountValue % 2 !== 0) {
27      // Act only on odd clicks (1st, 3rd, 5th, etc.)
28      this.messageCycleIndexValue = (this.messageCycleIndexValue + 1) % this.messagesValue.length;
29      this.updateText();
30    }
31    // On even clicks, this controller does nothing to the text.
32  }
33
34  updateText() {
35    if (this.hasToggleableTarget && this.messageCycleIndexValue >= 0 && this.messagesValue.length > 0) {
36      this.toggleableTarget.textContent = this.messagesValue[this.messageCycleIndexValue];
37    }
38  }
39};