Copy paste parts from RailsConf Workshop

01_declaring_controller.html

# app/views/schedule/show.html.erb:29-30
<section class="day-body"
  id="day-body-<%= schedule_day.day.by_example("2006-01-02") %>"
  data-controller="toggle">

02_initial_controller.js

# app/javascript/controllers/toggle_controller.js

import { Controller } from "stimulus"

export default class extends Controller {

  connect() {
    console.log("The Controller is Connected")
  }

}

03_add_action.html

# app/views/schedule/show.html.erb:34

<div class="button is-primary"
  data-action="click->toggle#toggle">

04_update_controller_with_action.js

# in the class in app/javascript/controllers/toggle_controller.rb

toggle() {
  console.log("click")
}

05_add_target.html

# app/views/schedule/show.html.erb:39

<section data-target="toggle.thingToHide">

06_register_target.js

# in the class in app/javascript/controllers/toggle_controller.rb

static targets = ["thingToHide"]

07_action_that_works.js

# in the class in app/javascript/controllers/toggle_controller.rb

toggle() {
  this.thingToHideTarget.classList.toggle("is-hidden")
}

08_data_maps.html

# in app/views/schedule/show.html.haml

<section class="day-body"
  id="day-body-<%= schedule_day.day.by_example("2006-01-02") %>"
  data-controller="toggle"
  data-toggle-hidden="false">

09_another_target.html

<span data-target="toggle.text">Hide</span>

10_toggling_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["text", "thingToHide"]

  isHidden() { return this.data.get("hidden") === "true" }

  flip() { this.data.set("hidden", this.isHidden() ? "false" : "true") }

  toggle() {
    this.flip()
    this.thingToHideTarget.classList.toggle("is-hidden", this.isHidden())
    this.textTarget.innerText = this.isHidden() ? "Show" : "Hide"
  }

}