desirelabs
10/6/2017 - 9:13 AM

Switch button

Switch button


class SwitchButton {
  constructor () {
    this.switchButton = null
  }

  init (button) {
    this.switchButton = button
    this.switchInput = this.switchButton.getElementsByTagName('input')
    this.blockBasic = document.querySelectorAll('.basic-display')
    this.blockAdvanced = document.querySelectorAll('.advanced-display')
    if (this.blockBasic && this.blockAdvanced) {
      this.setVisible(this.blockBasic)
      this.setHidden(this.blockAdvanced)
      this.switchInput[0].addEventListener('change', (e) => {
        this.handleSwitch(e.target.checked)
      })
    }
  }

  setVisible (target) {
    target.forEach(el => {
      el.style.display = 'block'
    })
  }

  setHidden (target) {
    target.forEach(el => {
      el.style.display = 'none'
    })
  }

  handleSwitch (checked) {
    switch (checked) {
      case true:
        this.setVisible(this.blockAdvanced)
        this.setHidden(this.blockBasic)
        break
      default:
        this.setVisible(this.blockBasic)
        this.setHidden(this.blockAdvanced)
    }
  }
}

export default SwitchButton