Skip to content

Instantly share code, notes, and snippets.

@noelrappin
Last active August 30, 2019 12:42
Show Gist options
  • Save noelrappin/b87ee470f760d2496d2d03a0187a33f3 to your computer and use it in GitHub Desktop.
Save noelrappin/b87ee470f760d2496d2d03a0187a33f3 to your computer and use it in GitHub Desktop.
Copy paste parts from RailsConf Workshop
# 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">
# app/javascript/controllers/toggle_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
console.log("The Controller is Connected")
}
}
# app/views/schedule/show.html.erb:34
<div class="button is-primary"
data-action="click->toggle#toggle">
# in the class in app/javascript/controllers/toggle_controller.rb
toggle() {
console.log("click")
}
# app/views/schedule/show.html.erb:39
<section data-target="toggle.thingToHide">
# in the class in app/javascript/controllers/toggle_controller.rb
static targets = ["thingToHide"]
# in the class in app/javascript/controllers/toggle_controller.rb
toggle() {
this.thingToHideTarget.classList.toggle("is-hidden")
}
# 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">
<span data-target="toggle.text">Hide</span>
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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment