// interactiveUI.js
const toggleLeftBtn = document.getElementById('toggle-left');
const leftCol = document.getElementById('left-col');
const toggleRightBtn = document.getElementById('toggle-right');
const rightCol = document.getElementById('right-col');
const controlsDiv = document.getElementById('quick-controls');
const sideWorkflowControls = document.getElementById('side-workflow-controls');
const classesToMoveLeft = ['seeder-container', 'stepper-container'];
const idsToMoveRight = ['history'];
const leftElementPlaceholders = new Map();
const rightElementPlaceholders = new Map();
let moveElementsOnMinimize = true;
let moveHistoryOnMinimize = true;
function getElementsToMoveByClass(container, classesToMove) {
const selectors = classesToMove.map(className => `.${className}`).join(',');
return container.querySelectorAll(selectors);
}
function getElementsToMoveById(container, idsToMove) {
return idsToMove.map(id => container.querySelector(`#${id}`)).filter(el => el !== null);
}
function moveLeftElementsToControls() {
const elementsLeft = getElementsToMoveByClass(sideWorkflowControls, classesToMoveLeft);
elementsLeft.forEach(element => {
if (element.id && !leftElementPlaceholders.has(element.id)) {
const placeholder = document.createElement('div');
placeholder.className = 'element-placeholder';
placeholder.dataset.elementId = element.id;
sideWorkflowControls.replaceChild(placeholder, element);
leftElementPlaceholders.set(element.id, { placeholder, parent: sideWorkflowControls });
controlsDiv.appendChild(element);
console.log(`Moved "${element.id}" to #controls.`);
// updateElementsWithIcons("controls", iconList, true, "add");
}
});
}
function moveLeftElementsBack() {
leftElementPlaceholders.forEach(({ placeholder, parent }, elementId) => {
const element = document.getElementById(elementId);
if (element) {
parent.replaceChild(element, placeholder);
console.log(`Moved "${elementId}" back to its original parent.`);
// updateElementsWithIcons("side-workflow-controls", iconList, true, "add");
} else {
console.warn(`Element with ID "${elementId}" not found.`);
}
});
leftElementPlaceholders.clear();
}
function moveRightElementsToControls() {
console.log("rightCol", rightCol); //Need to fix
// const elementsRight = getElementsToMoveById(rightCol, idsToMoveRight);
// elementsRight.forEach(element => {
// if (element.id && !rightElementPlaceholders.has(element.id)) {
// // Create a placeholder
// const placeholder = document.createElement('div');
// placeholder.className = 'element-placeholder';
// placeholder.dataset.elementId = element.id;
// // Replace the element with the placeholder
// rightCol.replaceChild(placeholder, element);
// // Store the placeholder and parent in the map
// rightElementPlaceholders.set(element.id, { placeholder, parent: rightCol });
// // Append the element to controlsDiv
// controlsDiv.appendChild(element);
// console.log(`Moved "${element.id}" to #controls.`);
// }
// });
}
function moveRightElementsBack() {
rightElementPlaceholders.forEach(({ placeholder, parent }, elementId) => {
const element = document.getElementById(elementId);
if (element) {
parent.replaceChild(element, placeholder);
console.log(`Moved "${elementId}" back to its original parent.`);
} else {
console.warn(`Element with ID "${elementId}" not found.`);
}
});
rightElementPlaceholders.clear();
}
function handleLeftColumnToggle() {
leftCol.classList.toggle('minimized');
toggleLeftBtn.classList.toggle('active');
const isMinimized = leftCol.classList.contains('minimized');
if (isMinimized) {
if (moveElementsOnMinimize) {
moveLeftElementsToControls();
}
} else {
if (moveElementsOnMinimize) {
moveLeftElementsBack();
}
}
}
function handleRightColumnToggle() {
rightCol.classList.toggle('minimized');
toggleRightBtn.classList.toggle('active');
const isMinimized = rightCol.classList.contains('minimized');
if (isMinimized) {
if (moveHistoryOnMinimize) {
moveRightElementsToControls();
}
} else {
if (moveHistoryOnMinimize) {
moveRightElementsBack();
}
}
}
export function initialize(
moveElementsOnMinimizeParam = true,
minimizeOnStart = false,
rememberStateOnLoad = false,
moveHistoryOnMinimizeParam = true
) {
moveElementsOnMinimize = moveElementsOnMinimizeParam;
moveHistoryOnMinimize = moveHistoryOnMinimizeParam;
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('minimized')) {
minimizeOnStart = urlParams.get('minimized') === 'true';
}
let isLeftMinimized = minimizeOnStart;
let isRightMinimized = minimizeOnStart;
if (rememberStateOnLoad) {
const savedLeftState = localStorage.getItem('leftColMinimized');
if (savedLeftState !== null) {
isLeftMinimized = savedLeftState === 'true';
}
const savedRightState = localStorage.getItem('rightColMinimized');
if (savedRightState !== null) {
isRightMinimized = savedRightState === 'true';
}
}
if (isLeftMinimized) {
leftCol.classList.add('minimized');
toggleLeftBtn.classList.add('active');
if (moveElementsOnMinimize) {
moveLeftElementsToControls();
}
}
if (isRightMinimized) {
rightCol.classList.add('minimized');
toggleRightBtn.classList.add('active');
if (moveHistoryOnMinimize) {
moveRightElementsToControls();
}
}
toggleLeftBtn.addEventListener('click', () => {
handleLeftColumnToggle();
if (rememberStateOnLoad) {
const isMinimizedNow = leftCol.classList.contains('minimized');
localStorage.setItem('leftColMinimized', isMinimizedNow);
}
});
toggleRightBtn.addEventListener('click', () => {
handleRightColumnToggle();
if (rememberStateOnLoad) {
const isMinimizedNow = rightCol.classList.contains('minimized');
localStorage.setItem('rightColMinimized', isMinimizedNow);
}
});
const mediaQuery = window.matchMedia('(max-width: 576px)');
function handleMediaQueryChange(e) {
if (e.matches) {
if (!leftCol.classList.contains('minimized')) {
leftCol.classList.add('minimized');
toggleLeftBtn.classList.add('active');
if (moveElementsOnMinimize) {
moveLeftElementsToControls();
}
}
console.log("rightCol", rightCol);
console.log("rightCol.classList.contains('minimized')", rightCol.classList.contains('minimized'));
console.log("moveHistoryOnMinimize", moveHistoryOnMinimize);
if (!rightCol.classList.contains('minimized')) {
rightCol.classList.add('minimized');
toggleRightBtn.classList.add('active');
if (moveHistoryOnMinimize) {
moveRightElementsToControls();
}
}
} else {
if (leftCol.classList.contains('minimized') && !isLeftMinimized) {
leftCol.classList.remove('minimized');
toggleLeftBtn.classList.remove('active');
if (moveElementsOnMinimize) {
moveLeftElementsBack();
}
}
if (rightCol.classList.contains('minimized') && !isRightMinimized) {
rightCol.classList.remove('minimized');
toggleRightBtn.classList.remove('active');
if (moveHistoryOnMinimize) {
moveRightElementsBack();
}
}
}
}
handleMediaQueryChange(mediaQuery);
mediaQuery.addEventListener('change', handleMediaQueryChange);
}
initialize(false, false, false, false);
const iconList = {
"CFG": `
`,
"Steps": `
`,
"Seed": `
`,
"Batch Size": `
`,
"Denoise": `
`,
};
function updateElementsWithIcons(containerId, iconList, addIcon = true, mode = "replace") {
const validModes = ["add", "replace"];
if (!validModes.includes(mode)) {
console.error(`Invalid mode "${mode}". Expected "add" or "replace".`);
return;
}
const container = document.getElementById(containerId);
if (!container) {
console.warn(`Container with id "${containerId}" not found.`);
return;
}
const childDivs = container.querySelectorAll("div");
const idSet = new Set();
childDivs.forEach(div => {
if (div.id) {
if (idSet.has(div.id)) {
console.warn(`Duplicate ID "${div.id}" found within the container. IDs should be unique.`);
} else {
idSet.add(div.id);
}
}
});
childDivs.forEach(function(div) {
const labelOrSpan = div.querySelector("label, span");
if (labelOrSpan) {
const text = labelOrSpan.textContent.trim();
if (iconList[text]) {
if (addIcon) {
if (mode.toLowerCase() === "add") {
const iconTextContainer = document.createElement("span");
iconTextContainer.classList.add("icon-text");
const iconSpan = document.createElement("span");
iconSpan.innerHTML = iconList[text];
iconSpan.classList.add("icon");
iconSpan.setAttribute('aria-hidden', 'true');
const textSpan = document.createElement("span");
textSpan.textContent = text;
iconTextContainer.appendChild(iconSpan);
iconTextContainer.appendChild(textSpan);
labelOrSpan.innerHTML = '';
labelOrSpan.appendChild(iconTextContainer);
labelOrSpan.setAttribute('aria-label', text);
} else if (mode.toLowerCase() === "replace") {
labelOrSpan.innerHTML = iconList[text];
labelOrSpan.setAttribute('aria-label', text);
}
} else {
}
}
}
});
}