Skip to content

Instantly share code, notes, and snippets.

@neovea
Created October 6, 2017 09:13
Show Gist options
  • Save neovea/1b7865247cef5a0a1a5ef128f7060ae5 to your computer and use it in GitHub Desktop.
Save neovea/1b7865247cef5a0a1a5ef128f7060ae5 to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment