Add on-demand textarea setup for accordions

Closes #170
This commit is contained in:
DominikDoom
2023-05-04 12:25:49 +02:00
parent 1e9431faba
commit fc6c1ff579
2 changed files with 89 additions and 36 deletions

View File

@@ -54,7 +54,7 @@ function getTextAreas() {
// Safety check
if (!base) continue;
let allTextAreas = [...base.querySelectorAll("textarea")];
let allTextAreas = [...base.querySelectorAll("textarea, input[type='text']")];
// Filter the text areas where the adjacent label matches one of the selectors
let matchingTextAreas = allTextAreas.filter(ta => [...ta.parentElement.childNodes].some(x => entry.selectors.includes(x.innerText)));
@@ -65,6 +65,54 @@ function getTextAreas() {
return textAreas;
}
function addOnDemandObservers(setupFunction) {
for (const [key, entry] of Object.entries(thirdParty)) {
if (!entry.onDemand) continue;
let base = gradioApp().querySelector(entry.base);
let accordions = [...base.querySelectorAll(".gradio-accordion")];
if (!accordions) continue;
accordions.forEach(acc => {
let accObserver = new MutationObserver((mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
let newChildren = mutation.addedNodes;
if (!newChildren) {
accObserver.disconnect();
continue;
}
newChildren.forEach(child => {
if (child.classList.contains("gradio-accordion") || child.querySelector(".gradio-accordion")) {
let newAccordions = [...child.querySelectorAll(".gradio-accordion")];
newAccordions.forEach(nAcc => accObserver.observe(nAcc, { childList: true }));
}
});
if (entry.hasIds) { // If the entry has proper ids, we can just select them
[...gradioApp().querySelectorAll(entry.selectors.join(", "))].forEach(x => setupFunction(x));
} else { // Otherwise, we have to find the text areas by their adjacent labels
let base = gradioApp().querySelector(entry.base);
// Safety check
if (!base) continue;
let allTextAreas = [...base.querySelectorAll("textarea, input[type='text']")];
// Filter the text areas where the adjacent label matches one of the selectors
let matchingTextAreas = allTextAreas.filter(ta => [...ta.parentElement.childNodes].some(x => entry.selectors.includes(x.innerText)));
matchingTextAreas.forEach(x => setupFunction(x));
}
}
}
});
accObserver.observe(acc, { childList: true });
});
};
}
const thirdPartyIdSet = new Set();
// Get the identifier for the text area to differentiate between positive and negative
function getTextAreaIdentifier(textArea) {