X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/4a872012c5568c59aec7dc9825bee28902ce3431..refs/pull/1626/head:/resources/assets/js/components/toggle-switch.js diff --git a/resources/assets/js/components/toggle-switch.js b/resources/assets/js/components/toggle-switch.js index 957a41642..b9b96afc5 100644 --- a/resources/assets/js/components/toggle-switch.js +++ b/resources/assets/js/components/toggle-switch.js @@ -3,15 +3,19 @@ class ToggleSwitch { constructor(elem) { this.elem = elem; - this.input = elem.querySelector('input'); + this.input = elem.querySelector('input[type=hidden]'); + this.checkbox = elem.querySelector('input[type=checkbox]'); - this.elem.onclick = this.onClick.bind(this); + this.checkbox.addEventListener('change', this.stateChange.bind(this)); } - onClick(event) { - let checked = this.input.value !== 'true'; - this.input.value = checked ? 'true' : 'false'; - checked ? this.elem.classList.add('active') : this.elem.classList.remove('active'); + stateChange() { + this.input.value = (this.checkbox.checked ? 'true' : 'false'); + + // Dispatch change event from hidden input so they can be listened to + // like a normal checkbox. + const changeEvent = new Event('change'); + this.input.dispatchEvent(changeEvent); } }