image_overlay_controller.js

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ['overlay']
  static values = {
    hidden: Boolean
  }
  static classes = ['hidden', 'shown']

  toggle () {
    this.hiddenValue = !this.hiddenValue
  }

  show () {
    this.hiddenValue = false
  }

  hide () {
    this.hiddenValue = true
  }

  hiddenValueChanged () {
    if (this.hiddenValue) {
      this.shownClass.split(' ').forEach(klass => {
        this.overlayTarget.classList.remove(klass)
      })
      this.hiddenClass.split(' ').forEach(klass => {
        this.overlayTarget.classList.add(klass)
      })
    } else {
      this.hiddenClass.split(' ').forEach(klass => {
        this.overlayTarget.classList.remove(klass)
      })
      this.shownClass.split(' ').forEach(klass => {
        this.overlayTarget.classList.add(klass)
      })
    }
  }
}