File size: 2,550 Bytes
44e55b2 98b69f4 44e55b2 98b69f4 44e55b2 98b69f4 44e55b2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
function reparent_flyout() {
//console.log("Attempting to reparent flyout...");
const source = document.getElementById('flyout_panel_source');
const target = document.getElementById('injected_flyout_container');
if (source && target) {
while (source.firstChild) {
target.appendChild(source.firstChild);
}
source.remove();
//console.log("SUCCESS: Flyout panel has been reparented.");
} else {
console.error("ERROR: Reparenting failed. Source or target element not found.");
}
}
function position_flyout(anchorId) {
if (!anchorId) {
return;
}
const anchorElem = document.getElementById(anchorId);
const flyoutElem = document.getElementById('injected_flyout_container');
if (anchorElem && flyoutElem) {
//console.log("JS: Positioning flyout relative to:", anchorId);
const anchorRect = anchorElem.getBoundingClientRect();
const flyoutWidth = flyoutElem.offsetWidth;
const flyoutHeight = flyoutElem.offsetHeight;
let topPosition = anchorRect.top + (anchorRect.height / 2) - (flyoutHeight / 2);
let leftPosition = anchorRect.left + (anchorRect.width / 2) - (flyoutWidth / 2);
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
if (leftPosition < 8) leftPosition = 8;
if (topPosition < 8) topPosition = 8;
if (leftPosition + flyoutWidth > windowWidth) leftPosition = windowWidth - flyoutWidth - 8;
if (topPosition + flyoutHeight > windowHeight) topPosition = windowHeight - flyoutHeight - 8;
flyoutElem.style.top = `${topPosition}px`;
flyoutElem.style.left = `${leftPosition}px`;
}
}
// This is the new main function called by Gradio's .then() event
function update_flyout_from_state(jsonData) {
//console.log("JS: update_flyout_from_state() called with data:", jsonData);
if (!jsonData) return;
const state = JSON.parse(jsonData);
const { isVisible, anchorId } = state;
const flyout = document.getElementById('injected_flyout_container');
if (!flyout) {
console.error("ERROR: Cannot update UI. Flyout container not found.");
return;
}
//console.log("JS: Parsed state:", { isVisible, anchorId });
if (isVisible) {
flyout.style.display = 'flex';
position_flyout(anchorId);
} else {
flyout.style.display = 'none';
}
} |