diff --git a/extensions-builtin/anapnoe-sd-theme-editor/javascript/ui_theme.js b/extensions-builtin/anapnoe-sd-theme-editor/javascript/ui_theme.js index f671f0b8..eebc2d19 100644 --- a/extensions-builtin/anapnoe-sd-theme-editor/javascript/ui_theme.js +++ b/extensions-builtin/anapnoe-sd-theme-editor/javascript/ui_theme.js @@ -1,24 +1,26 @@ -"use strict"; - function hexToRgb(color) { var hex = color[0] === "#" ? color.slice(1) : color; var c; // expand the short hex by doubling each character, fc0 -> ffcc00 if (hex.length !== 6) { - hex = function () { + hex = (function() { var result = []; - for (var _i = 0, _Array$from = Array.from(hex); _i < _Array$from.length; _i++) { + for ( + var _i = 0, _Array$from = Array.from(hex); + _i < _Array$from.length; + _i++ + ) { c = _Array$from[_i]; result.push("".concat(c).concat(c)); } return result; - }().join(""); + })().join(""); } var colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1); - var rgb = colorStr.map(function (col) { + var rgb = colorStr.map(function(col) { return parseInt(col, 16); }); rgb.push(1); @@ -33,9 +35,15 @@ function rgbToHsl(rgb) { var min = Math.min(r, g, b); var diff = max - min; var add = max + min; - var hue = min === max ? 0 : r === max ? (60 * (g - b) / diff + 360) % 360 : g === max ? 60 * (b - r) / diff + 120 : 60 * (r - g) / diff + 240; + var hue = + min === max + ? 0 + : r === max + ? (60 * (g - b) / diff + 360) % 360 + : g === max ? 60 * (b - r) / diff + 120 : 60 * (r - g) / diff + 240; var lum = 0.5 * add; - var sat = lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add); + var sat = + lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add); var h = Math.round(hue); var s = Math.round(sat * 100); var l = Math.round(lum * 100); @@ -56,7 +64,9 @@ function hslToHex(h, s, l) { var f = function f(n) { var k = (n + h / 30) % 12; var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); - return Math.round(255 * Math.max(0, Math.min(color, 1))).toString(16).padStart(2, "0"); // convert to Hex and prefix "0" if needed + return Math.round(255 * Math.max(0, Math.min(color, 1))) + .toString(16) + .padStart(2, "0"); // convert to Hex and prefix "0" if needed }; return "#".concat(f(0)).concat(f(8)).concat(f(4)); @@ -66,7 +76,10 @@ function hsl2rgb(h, s, l) { var a = s * Math.min(l, 1 - l); var f = function f(n) { - var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12; + var k = + arguments.length > 1 && arguments[1] !== undefined + ? arguments[1] + : (n + h / 30) % 12; return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); }; @@ -78,7 +91,6 @@ function invertColor(hex) { hex = hex.slice(1); } // convert 3-digit hex to 6-digits. - if (hex.length === 3) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } @@ -87,10 +99,9 @@ function invertColor(hex) { throw new Error("Invalid HEX color."); } // invert color components - var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16), - g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16), - b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16); // pad each with zeros and return + g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16), + b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16); // pad each with zeros and return return "#" + padZero(r) + padZero(g) + padZero(b); } @@ -152,7 +163,11 @@ function offsetColorsHSV(ohsl) { var h = (parseInt(hsl[0]) + parseInt(ohsl[0])) % 360; var s = parseInt(hsl[1]) + parseInt(ohsl[1]); var l = parseInt(hsl[2]) + parseInt(ohsl[2]); - var hex = hslToHex(h, Math.min(Math.max(s, 0), 100), Math.min(Math.max(l, 0), 100)); + var hex = hslToHex( + h, + Math.min(Math.max(s, 0), 100), + Math.min(Math.max(l, 0), 100) + ); colcomp.value = hex; hslobj[key] = "hsl(" + h + "deg " + s + "% " + l + "%)"; inner_styles += key + ":" + hslobj[key] + ";"; @@ -165,15 +180,11 @@ function offsetColorsHSV(ohsl) { isColorsInv = false; var preview_styles = document.body.querySelector("#preview-styles"); preview_styles.innerHTML = ":root {" + inner_styles + "}"; - preview_styles.innerHTML += "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}"; + preview_styles.innerHTML += + "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}"; var vars_textarea = document.body.querySelector("#theme_vars textarea"); vars_textarea.value = inner_styles; window.updateInput(vars_textarea); - /* - const inputEvent = new Event("input"); - Object.defineProperty(inputEvent, "target", { value: vars_textarea }); - vars_textarea.dispatchEvent(inputEvent); - */ } function updateTheme(vars) { @@ -185,7 +196,7 @@ function updateTheme(vars) { var val = key[1].trim(); styleobj[id] = val; inner_styles += id + ":" + val + ";"; - document.body.querySelectorAll("#" + id + " input").forEach(function (elem) { + document.body.querySelectorAll("#" + id + " input").forEach(function(elem) { if (val.indexOf("hsl") != -1) { var hsl = toHSLArray(val); var hex = hslToHex(hsl[0], hsl[1], hsl[2]); @@ -204,13 +215,15 @@ function updateTheme(vars) { if (preview_styles) { preview_styles.innerHTML = ":root {" + inner_styles + "}"; - preview_styles.innerHTML += "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}"; + preview_styles.innerHTML += + "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}"; } else { var r = document.body; var style = document.createElement("style"); style.id = "preview-styles"; style.innerHTML = ":root {" + inner_styles + "}"; - style.innerHTML += "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}"; + style.innerHTML += + "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}"; r.appendChild(style); } @@ -219,15 +232,6 @@ function updateTheme(vars) { vars_textarea.value = inner_styles; css_textarea.value = css_textarea.value; //console.log(Object); - /* - const vEvent = new Event("input"); - const cEvent = new Event("input"); - Object.defineProperty(vEvent, "target", { value: vars_textarea }); - Object.defineProperty(cEvent, "target", { value: css_textarea }); - vars_textarea.dispatchEvent(vEvent); - css_textarea.dispatchEvent(cEvent); - */ - window.updateInput(vars_textarea); window.updateInput(css_textarea); } @@ -247,7 +251,10 @@ function initTheme(styles) { var css_textarea = document.body.querySelector("#theme_css textarea"); vars_textarea.value = init_css_vars; var additional_styles = css_styles[1] !== undefined ? css_styles[1] : ""; - css_textarea.value = "/*BREAKPOINT_CSS_CONTENT*/" + additional_styles + "/*BREAKPOINT_CSS_CONTENT*/"; + css_textarea.value = + "/*BREAKPOINT_CSS_CONTENT*/" + + additional_styles + + "/*BREAKPOINT_CSS_CONTENT*/"; updateTheme(vars); var preview_styles = document.body.querySelector("#preview-styles"); @@ -259,65 +266,65 @@ function initTheme(styles) { } var intervalChange; - document.body.querySelectorAll("#ui_theme_settings input").forEach(function (elem) { - elem.addEventListener("input", function (e) { - var celem = e.currentTarget; - var val = e.currentTarget.value; - var curr_val; + document.body + .querySelectorAll("#ui_theme_settings input") + .forEach(function(elem) { + elem.addEventListener("input", function(e) { + var celem = e.currentTarget; + var val = e.currentTarget.value; + var curr_val; - switch (e.currentTarget.type) { - case "range": - celem = celem.parentElement; - val = e.currentTarget.value + "px"; - break; + switch (e.currentTarget.type) { + case "range": + celem = celem.parentElement; + val = e.currentTarget.value + "px"; + break; - case "color": - celem = celem.parentElement.parentElement; - val = e.currentTarget.value; - break; + case "color": + celem = celem.parentElement.parentElement; + val = e.currentTarget.value; + break; - case "number": - celem = celem.parentElement.parentElement.parentElement; - val = e.currentTarget.value + "px"; - break; - } - - if (celem.id === "--ae-input-slider-height") { - val = e.currentTarget.value; - } - - styleobj[celem.id] = val; //console.log(styleobj); - - if (intervalChange != null) clearInterval(intervalChange); - intervalChange = setTimeout(function () { - var inner_styles = ""; - - for (var key in styleobj) { - inner_styles += key + ":" + styleobj[key] + ";"; + case "number": + celem = celem.parentElement.parentElement.parentElement; + val = e.currentTarget.value + "px"; + break; } - vars = inner_styles.split(";"); - preview_styles.innerHTML = ":root {" + inner_styles + "}"; - preview_styles.innerHTML += "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}"; - vars_textarea.value = inner_styles; - window.updateInput(vars_textarea); - /* - const vEvent = new Event("input"); - Object.defineProperty(vEvent, "target", { value: vars_textarea }); - vars_textarea.dispatchEvent(vEvent); - */ + if (celem.id === "--ae-input-slider-height") { + val = e.currentTarget.value; + } - offsetColorsHSV(hsloffset); - }, 1000); + styleobj[celem.id] = val; //console.log(styleobj); + + if (intervalChange != null) clearInterval(intervalChange); + intervalChange = setTimeout(function() { + var inner_styles = ""; + + for (var key in styleobj) { + inner_styles += key + ":" + styleobj[key] + ";"; + } + + vars = inner_styles.split(";"); + preview_styles.innerHTML = ":root {" + inner_styles + "}"; + preview_styles.innerHTML += + "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}"; + vars_textarea.value = inner_styles; + window.updateInput(vars_textarea); + + offsetColorsHSV(hsloffset); + }, 1000); + }); }); - }); var reset_btn = document.getElementById("theme_reset_btn"); - reset_btn.addEventListener("click", function (e) { + reset_btn.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); - document.body.querySelectorAll("#ui_theme_hsv input").forEach(function (elem) { - elem.value = 0; - }); + document.body + .querySelectorAll("#ui_theme_hsv input") + .forEach(function(elem) { + elem.value = 0; + }); hsloffset = [0, 0, 0]; updateTheme(init_vars); }); @@ -335,38 +342,44 @@ function initTheme(styles) { } var drop_down = document.body.querySelector("#themes_drop_down input"); - drop_down.addEventListener("click", function (e) { + drop_down.addEventListener("click", function(e) { if (intervalCheck !== null) clearInterval(intervalCheck); vars_textarea.value = init_css_vars; intervalCheck = setInterval(dropDownOnChange, 500); }); var hsloffset = [0, 0, 0]; - var hue = document.body.querySelectorAll("#theme_hue input").forEach(function (elem) { - elem.addEventListener("change", function (e) { - e.preventDefault(); - e.stopPropagation(); - hsloffset[0] = e.currentTarget.value; - offsetColorsHSV(hsloffset); + var hue = document.body + .querySelectorAll("#theme_hue input") + .forEach(function(elem) { + elem.addEventListener("change", function(e) { + e.preventDefault(); + e.stopPropagation(); + hsloffset[0] = e.currentTarget.value; + offsetColorsHSV(hsloffset); + }); }); - }); - var sat = document.body.querySelectorAll("#theme_sat input").forEach(function (elem) { - elem.addEventListener("change", function (e) { - e.preventDefault(); - e.stopPropagation(); - hsloffset[1] = e.currentTarget.value; - offsetColorsHSV(hsloffset); + var sat = document.body + .querySelectorAll("#theme_sat input") + .forEach(function(elem) { + elem.addEventListener("change", function(e) { + e.preventDefault(); + e.stopPropagation(); + hsloffset[1] = e.currentTarget.value; + offsetColorsHSV(hsloffset); + }); }); - }); - var brt = document.body.querySelectorAll("#theme_brt input").forEach(function (elem) { - elem.addEventListener("change", function (e) { - e.preventDefault(); - e.stopPropagation(); - hsloffset[2] = e.currentTarget.value; - offsetColorsHSV(hsloffset); + var brt = document.body + .querySelectorAll("#theme_brt input") + .forEach(function(elem) { + elem.addEventListener("change", function(e) { + e.preventDefault(); + e.stopPropagation(); + hsloffset[2] = e.currentTarget.value; + offsetColorsHSV(hsloffset); + }); }); - }); var inv_btn = document.getElementById("theme_invert_btn"); - inv_btn.addEventListener("click", function (e) { + inv_btn.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); isColorsInv = !isColorsInv; @@ -375,15 +388,19 @@ function initTheme(styles) { } function observeGradioApp() { - var observer = new MutationObserver(function () { - var css = document.querySelector("[rel=\"stylesheet\"][href*=\"user\"]"); + var observer = new MutationObserver(function() { + var css = document.querySelector('[rel="stylesheet"][href*="user"]'); var block = gradioApp().getElementById("tab_ui_theme"); if (css && block) { observer.disconnect(); - setTimeout(function () { - var rootRules = Array.from(css.sheet.cssRules).filter(function (cssRule) { - return cssRule instanceof CSSStyleRule && cssRule.selectorText === ":root"; + setTimeout(function() { + var rootRules = Array.from(css.sheet.cssRules).filter(function( + cssRule + ) { + return ( + cssRule instanceof CSSStyleRule && cssRule.selectorText === ":root" + ); }); var rootCssText = rootRules[0].cssText; //console.log("Loading theme vars", rootCssText); @@ -397,6 +414,6 @@ function observeGradioApp() { }); } -document.addEventListener("DOMContentLoaded", function () { +document.addEventListener("DOMContentLoaded", function() { observeGradioApp(); -}); \ No newline at end of file +}); diff --git a/extensions-builtin/anapnoe-sd-uiux/style.css b/extensions-builtin/anapnoe-sd-uiux/style.css index 6e08c93f..8e30771d 100644 --- a/extensions-builtin/anapnoe-sd-uiux/style.css +++ b/extensions-builtin/anapnoe-sd-uiux/style.css @@ -39,11 +39,11 @@ --ae-border-size-neg: calc(var(--ae-border-size) * -1); --ae-border-size-x2: calc((var(--ae-border-size) * 2) + 0px); - --ae-group-bg-color: #0c171e; + --ae-group-bg-color: rgba(0, 0, 0, 0.25); --ae-group-padding: 2px; --ae-group-radius: 7px; --ae-group-border-size: 2px; - --ae-group-border-color: #0c171e; + --ae-group-border-color: rgba(0, 0, 0, 0.25); --ae-group-gap: 6px; } diff --git a/screenshot.png b/screenshot.png index 2875b064..5fc248b6 100644 Binary files a/screenshot.png and b/screenshot.png differ