dropdowns--simple_controller.js

import { Controller } from "stimulus"

import animateCSS from 'lib/utils'

export default class extends Controller {
  static targets = [ "menu" ]
  static values = { invisible: Boolean }

  connect() {
    this.hide()
  }

  toggle(event) {
    event.preventDefault()
    this.changeBit()
    this.run()
  }

  hide() {
    this.menuTarget.classList.toggle('opacity-0')
    this.menuTarget.classList.toggle('hidden')
  }

  run() {
    let state = []
    if (this.invisibleValue) {
      state.push('dropOut', 'speed-400')
      //state.push('animated', 'fadeOut', 'speed-400')
    } else {
      this.hide()
      state.push('dropIn', 'speed-200')
      //state.push('animated', 'fadeIn', 'speed-200')
    }
    animateCSS({ element: this.menuTarget, classes: state, callback: () => {
      if (this.invisibleValue) {
       this.hide()
      }
    }})
  }

  changeBit() {
    this.invisibleValue = !this.invisibleValue
  }

  clickedAway(event) {
    if (this.element.contains(event.target) === false && this.invisibleValue === false) {
      this.changeBit()
      this.run()
    }
  }
}