diff --git a/javascript/state.ext.control-net.js b/javascript/state.ext.control-net.js index a83c72b..3194c3b 100644 --- a/javascript/state.ext.control-net.js +++ b/javascript/state.ext.control-net.js @@ -45,11 +45,59 @@ state.extensions['control-net'] = (function () { bindTabEvents(); } + function handleCheckboxes() { + let checkboxes = container.querySelectorAll('input[type="checkbox"]'); + checkboxes.forEach(function (checkbox) { + let label = checkbox.nextElementSibling; + let id = state.utils.txtToId(label.textContent); + let value = store.get(id); + if (value) { + state.utils.setValue(checkbox, value, 'change'); + } + checkbox.addEventListener('change', function () { + store.set(id, this.checked); + }); + }); + } + + function handleSelects() { + let selects = container.querySelectorAll('select'); + selects.forEach(function (select) { + let label = select.previousElementSibling; + let id = state.utils.txtToId(label.textContent); + let value = store.get(id); + if (value) { + state.utils.setValue(select, value, 'change'); + } + select.addEventListener('change', function () { + store.set(id, this.value); + }); + }); + } + + function handleSliders() { + let sliders = container.querySelectorAll('input[type="range"]'); + sliders.forEach(function (slider) { + let label = slider.previousElementSibling.querySelector('label span'); + let id = state.utils.txtToId(label.textContent); + let value = store.get(id); + if (value) { + state.utils.setValue(slider, value, 'change'); + } + slider.addEventListener('change', function () { + store.set(id, this.value); + }); + }); + } + function init() { container = gradioApp().getElementById('controlnet'); store = new state.Store('ext-control-net'); handleToggle(); handleTabs(); + handleCheckboxes(); + handleSelects(); + handleSliders(); } return { init }; diff --git a/javascript/state.utils.js b/javascript/state.utils.js index 6e1a1c7..c66f6d0 100644 --- a/javascript/state.utils.js +++ b/javascript/state.utils.js @@ -26,5 +26,8 @@ state.utils = { element.value = value; this.triggerEvent(element, event); } + }, + txtToId: function txtToId(txt) { + return txt.split(' ').join('-').toLowerCase(); } };