diff --git a/javascript/state.core.js b/javascript/state.core.js index aab7af8..4fdc215 100644 --- a/javascript/state.core.js +++ b/javascript/state.core.js @@ -88,6 +88,7 @@ state.core = (function () { } handleExtensions(config); + handleSettingsPage(); } function loadUI() { @@ -245,5 +246,52 @@ state.core = (function () { } } + function handleSettingsPage() { + + const page = gradioApp().querySelector('#settings_state'); + state.utils.html.setStyle(page.querySelectorAll('fieldset'), { + 'marginTop': '20px', + 'marginBottom': '10px' + }); + + let buttonsContainer = gradioApp().querySelector('#settings_state_buttons'); + if (buttonsContainer) { + buttonsContainer.parentNode.removeChild(buttonsContainer); + } + buttonsContainer = document.createElement('div'); + buttonsContainer.id = 'settings_state_buttons'; + + let setCheckboxes = function (value, checkFunc) { + checkFunc = checkFunc || function () { return true; }; + Array.from(page.querySelectorAll('input[type="checkbox"]')).forEach(function (el) { + if (checkFunc(el)) { + if (el.checked !== value) { + el.checked = value; + state.utils.triggerEvent(el, 'change'); + } + } else if (el.checked === value) { + el.checked = !value; + state.utils.triggerEvent(el, 'change'); + } + }); + }; + buttonsContainer.appendChild(state.utils.html.createButton('Select All', function () { + setCheckboxes(true); + })); + buttonsContainer.appendChild(state.utils.html.createButton('Select All Except Seeds', function () { + setCheckboxes(true, function (el) { + return el.nextElementSibling.textContent.indexOf('seed') === -1; + }); + })); + buttonsContainer.appendChild(state.utils.html.createButton('Unselect All', function () { + setCheckboxes(false); + })); + state.utils.html.setStyle(buttonsContainer, { + 'marginTop': '20px', + 'marginBottom': '10px' + }); + page.appendChild(buttonsContainer); + } + return { init }; }()); diff --git a/javascript/state.utils.js b/javascript/state.utils.js index 7ce5756..c516842 100644 --- a/javascript/state.utils.js +++ b/javascript/state.utils.js @@ -81,3 +81,33 @@ state.utils = { onUiUpdate(this.callXTimes(function () { setTimeout(func, 10); }, 50)); } }; + +state.utils.html = { + setStyle: function setStyle(elements, style) { + if (elements instanceof NodeList) { + elements = Array.from(elements); + } else if (elements instanceof Node){ + elements = [elements]; + } else { + return; + } + elements.forEach(element => { + for (let key in style) { + if (style.hasOwnProperty(key)) { + element.style[key] = style[key]; + } + } + }); + }, + createButton: function createButton(text, onclick) { + const btn = document.createElement('button'); + btn.innerHTML = text; + btn.onclick = onclick || function () {}; + btn.className = 'gr-button gr-button-lg gr-button-primary'; + this.setStyle(btn, { + 'margin-left': '5px', + 'margin-right': '5px' + }); + return btn; + } +};