Merge pull request #14 from ilian6806/develop

Select actions added in settings page

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 };
 }());

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;
+    }
+};