diff --git a/eslint.config.mjs b/eslint.config.mjs index 5c1f338..264f54f 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -52,6 +52,7 @@ const jsConfig = defineConfig([ showContributors: 'readonly', initServerInfo: 'readonly', createButtonsForExtensions: 'readonly', + Split: 'readonly', }, }, }, @@ -109,8 +110,10 @@ const jsConfig = defineConfig([ '@stylistic/max-len': [ 'warn', { - code: 300, + code: 240, tabWidth: 2, + ignoreComments: true, + ignoreUrls: true, }, ], '@stylistic/max-statements-per-line': 'off', @@ -257,7 +260,7 @@ export default defineConfig([ '**/split.js', '**/exifr.js', '**/iframeResizer.min.js', - '**/Vlad-Neomorph.css', + '**/Vlad-Neomorph.css', // Waiting on plugin fix https://github.com/eslint/css/pull/411 ]), ...jsConfig, // ...typescriptConfig, diff --git a/javascript/components.js b/javascript/components.js index f13abc6..f9936df 100644 --- a/javascript/components.js +++ b/javascript/components.js @@ -32,7 +32,7 @@ function initSplitComponents() { // log('splitComponent', ids, initSizes, minSizes, direction, gutterSize); const onDragEnd = (evt) => setStored(`${id}-sizes`, evt); // log('splitSizes', id, initSizes, minSizes, maxSizes); - splitInstances[id] = Split(ids, { // eslint-disable-line no-undef + splitInstances[id] = Split(ids, { sizes: initSizes, minSize: minSizes, maxSize: maxSizes, @@ -155,7 +155,15 @@ function initTabComponents() { const tabGroup = elem.getAttribute('tabGroup'); const tabParent = elem.parentElement; const uid = tabGroup || tabParent?.id; - const siblingTabs = [...(tabGroup ? appUiUx.querySelectorAll(`[tabGroup="${tabGroup}"]`) : tabParent ? tabParent.children : [])].filter((tab) => tab !== elem); // eslint-disable-line no-nested-ternary + let siblingTabs; + if (tabGroup) { + siblingTabs = [...appUiUx.querySelectorAll(`.xtabs-tab[tabGroup="${tabGroup}"]`)]; + } else if (tabParent) { + siblingTabs = [...tabParent.children]; + } else { + siblingTabs = []; + } + siblingTabs = siblingTabs.filter((tab) => tab !== elem); elem.addEventListener('click', () => { if (uid) setStored(`tab-${uid}-current`, elem.id); @@ -303,7 +311,20 @@ async function setupDropdowns() { async function createButtonsForExtensions() { const other_extensions = document.querySelector('#other_extensions'); const other_views = document.querySelector('#split-left'); - const no_button_tabs = ['tab_txt2img', 'tab_img2img', 'tab_control', 'tab_video', 'tab_process', 'tab_caption', 'tab_gallery', 'tab_models', 'tab_extensions', 'tab_system', 'tab_info', 'tab_sdnext_uiux_core']; + const no_button_tabs = [ + 'tab_txt2img', + 'tab_img2img', + 'tab_control', + 'tab_video', + 'tab_process', + 'tab_caption', + 'tab_gallery', + 'tab_models', + 'tab_extensions', + 'tab_system', + 'tab_info', + 'tab_sdnext_uiux_core', + ]; const snakeToCamel = (str) => str.replace(/(_\w)/g, (match) => match[1].toUpperCase()); document.querySelectorAll('#tabs > .tabitem').forEach((c) => { const cid = c.id; diff --git a/javascript/sdnext-modernui.js b/javascript/sdnext-modernui.js index f493f23..c0656c9 100644 --- a/javascript/sdnext-modernui.js +++ b/javascript/sdnext-modernui.js @@ -14,12 +14,10 @@ window.getUICurrentTabContent = () => gradioApp().querySelector('.xtabs-item:not window.getSettingsTabs = () => gradioApp().querySelectorAll('#layout-settings .tabitem'); function functionWaitForFlag(checkFlag) { - return async function () { // eslint-disable-line func-names - return new Promise((resolve) => { - const check = () => (checkFlag() ? resolve() : setTimeout(check)); - check(); - }); - }; + return async () => new Promise((resolve) => { + const check = () => (checkFlag() ? resolve() : setTimeout(check, 50)); + check(); + }); } let uiFlagInitialized = false; @@ -34,7 +32,8 @@ function logPrettyPrint() { let arg; let i; const dt = new Date(); - const ts = `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}.${dt.getMilliseconds().toString().padStart(3, '0')}`; + const [h, m, s, ms] = [dt.getHours().toString(), dt.getMinutes().toString(), dt.getSeconds().toString(), dt.getMilliseconds().toString()]; + const ts = `${h.padStart(2, '0')}:${m.padStart(2, '0')}:${s.padStart(2, '0')}.${ms.padStart(3, '0')}`; output += `
${ts}`; for (i = 0; i < arguments.length; i++) { @@ -254,7 +253,6 @@ async function extraTweaks() { // disable spellchecks document.querySelectorAll('input[type="text"], textarea').forEach((elem) => { elem.setAttribute('spellcheck', 'false'); }); } -extraTweaks = logFn(extraTweaks); // eslint-disable-line no-func-assign async function uiuxOptionSettings() { let el; @@ -324,7 +322,6 @@ async function uiuxOptionSettings() { async function loadAllPortals() { appUiUx.querySelectorAll('.portal').forEach((elem, index, array) => movePortal(elem, 1, index, array.length)); // eslint-disable-line no-use-before-define } -loadAllPortals = logFn(loadAllPortals); // eslint-disable-line no-func-assign function movePortal(portalElem, tries, index, length) { const MAX_TRIES = 3; @@ -504,7 +501,7 @@ async function mainUiUx() { createButtonsForExtensions(); setupAnimationEventListeners(); initSplitComponents(); - await loadAllPortals(); + await logFn(loadAllPortals)(); initTabComponents(); initButtonComponents(); setupToolButtons(); @@ -521,11 +518,10 @@ async function mainUiUx() { showContributors(); switchMobile(); trackAsideFocus(); - extraTweaks(); + logFn(extraTweaks)(); applyAutoHide(); initServerInfo(); uiFlagInitialized = true; } -mainUiUx = logFn(mainUiUx); // eslint-disable-line no-func-assign -onUiReady(mainUiUx); +onUiReady(logFn(mainUiUx)()); diff --git a/package.json b/package.json index 77bb082..e71e782 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "homepage": "https://github.com/BinaryQuantumSoul/sdnext-modernui", "license": "AGPLv3", "engines": { - "node": ">=22.0.0" + "node": "^22.13.0 || >=24" }, "repository": { "type": "git", diff --git a/themes/Default.css b/themes/Default.css index d881497..5e1c661 100644 --- a/themes/Default.css +++ b/themes/Default.css @@ -207,7 +207,7 @@ input[type="checkbox"], input[type="radio"] { } input[type="checkbox"]:hover, input[type="radio"]:hover { - /* Known bug with @eslint/css and @eslint/css-tree. Related to https://github.com/eslint/css/issues/246 */ + /* Known bug causing values to be interpreted as strings. Waiting on https://github.com/eslint/css/pull/411 */ /* eslint-disable-next-line css/no-invalid-properties */ background-color: var(--sd-button-selected-color); } diff --git a/themes/Vlad-Blocks.css b/themes/Vlad-Blocks.css index a23a0f2..e67ca74 100644 --- a/themes/Vlad-Blocks.css +++ b/themes/Vlad-Blocks.css @@ -196,7 +196,7 @@ input[type="checkbox"], input[type="radio"] { } input[type="checkbox"]:hover, input[type="radio"]:hover { - /* Known bug with @eslint/css and @eslint/css-tree. Related to https://github.com/eslint/css/issues/246 */ + /* Known bug causing values to be interpreted as strings. Waiting on https://github.com/eslint/css/pull/411 */ /* eslint-disable-next-line css/no-invalid-properties */ background-color: var(--sd-button-selected-color); }