File size: 6,798 Bytes
4689c2b | 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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | function() {
console.log("[WanGP] main JS initialized");
window.updateAndTrigger = function(action) {
const hiddenTextbox = document.querySelector('#queue_action_input textarea');
const hiddenButton = document.querySelector('#queue_action_trigger');
if (hiddenTextbox && hiddenButton) {
hiddenTextbox.value = action;
hiddenTextbox.dispatchEvent(new Event('input', { bubbles: true }));
hiddenButton.click();
} else {
console.error("Could not find hidden queue action elements.");
}
};
window.scrollToQueueTop = function() {
const container = document.querySelector('#queue-scroll-container');
if (container) container.scrollTop = 0;
};
window.scrollToQueueBottom = function() {
const container = document.querySelector('#queue-scroll-container');
if (container) container.scrollTop = container.scrollHeight;
};
window.showImageModal = function(action) {
const hiddenTextbox = document.querySelector('#modal_action_input textarea');
const hiddenButton = document.querySelector('#modal_action_trigger');
if (hiddenTextbox && hiddenButton) {
hiddenTextbox.value = action;
hiddenTextbox.dispatchEvent(new Event('input', { bubbles: true }));
hiddenButton.click();
}
};
window.closeImageModal = function() {
const closeButton = document.querySelector('#modal_close_trigger_btn');
if (closeButton) closeButton.click();
};
let lastSelectedVideoTime = null;
let selectedVideoTimeTimer = null;
function pushSelectedVideoTime(currentTime) {
const hiddenTextbox = document.querySelector('#selected_video_time_input textarea, #selected_video_time_input input');
if (!hiddenTextbox) return;
hiddenTextbox.value = String(currentTime);
hiddenTextbox.dispatchEvent(new Event('input', { bubbles: true }));
hiddenTextbox.dispatchEvent(new Event('change', { bubbles: true }));
}
function scheduleSelectedVideoTimeUpdate(video, immediate = false) {
if (!(video instanceof HTMLVideoElement) || !video.closest('#gallery')) return;
const currentTime = Math.max(0, Math.round(Number(video.currentTime || 0) * 1000) / 1000);
if (!Number.isFinite(currentTime)) return;
const commit = () => {
if (lastSelectedVideoTime === currentTime) return;
lastSelectedVideoTime = currentTime;
pushSelectedVideoTime(currentTime);
};
if (immediate) {
clearTimeout(selectedVideoTimeTimer);
commit();
return;
}
clearTimeout(selectedVideoTimeTimer);
selectedVideoTimeTimer = setTimeout(commit, 180);
}
function handleGalleryVideoEvent(event, immediate = false) {
const video = event?.target;
if (!(video instanceof HTMLVideoElement) || !video.closest('#gallery')) return;
scheduleSelectedVideoTimeUpdate(video, immediate);
}
let draggedItem = null;
function attachDelegatedDragAndDrop(container) {
if (container.dataset.dndDelegated) return; // Listeners already attached
container.dataset.dndDelegated = 'true';
container.addEventListener('dragstart', (e) => {
const row = e.target.closest('.draggable-row');
if (!row || e.target.closest('.action-button') || e.target.closest('.hover-image')) {
if (row) e.preventDefault(); // Prevent dragging if it's on a button/image
return;
}
draggedItem = row;
setTimeout(() => draggedItem.classList.add('dragging'), 0);
});
container.addEventListener('dragend', () => {
if (draggedItem) {
draggedItem.classList.remove('dragging');
}
draggedItem = null;
document.querySelectorAll('.drag-over-top, .drag-over-bottom').forEach(el => {
el.classList.remove('drag-over-top', 'drag-over-bottom');
});
});
container.addEventListener('dragover', (e) => {
e.preventDefault();
const targetRow = e.target.closest('.draggable-row');
document.querySelectorAll('.drag-over-top, .drag-over-bottom').forEach(el => {
el.classList.remove('drag-over-top', 'drag-over-bottom');
});
if (targetRow && draggedItem && targetRow !== draggedItem) {
const rect = targetRow.getBoundingClientRect();
const midpoint = rect.top + rect.height / 2;
if (e.clientY < midpoint) {
targetRow.classList.add('drag-over-top');
} else {
targetRow.classList.add('drag-over-bottom');
}
}
});
container.addEventListener('drop', (e) => {
e.preventDefault();
const targetRow = e.target.closest('.draggable-row');
if (!draggedItem || !targetRow || targetRow === draggedItem) return;
const oldIndex = draggedItem.dataset.index;
let newIndex = parseInt(targetRow.dataset.index);
if (targetRow.classList.contains('drag-over-bottom')) {
newIndex++;
}
if (oldIndex != newIndex) {
const action = `move_${oldIndex}_to_${newIndex}`;
window.updateAndTrigger(action);
}
});
}
const observer = new MutationObserver((mutations, obs) => {
const container = document.querySelector('#queue_html_container');
if (container) {
attachDelegatedDragAndDrop(container);
obs.disconnect();
}
});
const targetNode = document.querySelector('gradio-app');
if (targetNode) {
observer.observe(targetNode, { childList: true, subtree: true });
['loadedmetadata', 'seeked', 'pause', 'click'].forEach((eventName) => {
document.addEventListener(eventName, (event) => handleGalleryVideoEvent(event, true), true);
});
document.addEventListener('timeupdate', (event) => handleGalleryVideoEvent(event, false), true);
}
const hit = n => n?.id === "img_editor" || n?.classList?.contains("wheel-pass");
addEventListener("wheel", e => {
const path = e.composedPath?.() || (() => { let a=[],n=e.target; for(;n;n=n.parentNode||n.host) a.push(n); return a; })();
if (path.some(hit)) e.stopImmediatePropagation();
}, { capture: true, passive: true });
|