diff --git a/js/comparison.js b/js/comparison.js index 1a1ad97..f091166 100644 --- a/js/comparison.js +++ b/js/comparison.js @@ -164,7 +164,7 @@ function createComparisonViewer(baseSrc) { const infoText = document.createElement("span"); infoText.textContent = isBaseVideo ? "Video playback. Press Esc to close." - : "Reference loaded. Click another card image in the sidebar to compare."; + : "Reference loaded. Click to replace | Shift+Click another card image to compare."; header.appendChild(infoText); container.appendChild(header); @@ -186,6 +186,19 @@ function createComparisonViewer(baseSrc) { }); container.appendChild(wrapper); + // Muted bottom tooltip helper + const hintPrompt = document.createElement("div"); + Object.assign(hintPrompt.style, { + position: "absolute", bottom: "16px", zIndex: "30", + color: "#555", fontSize: "10px", fontFamily: "sans-serif", + pointerEvents: "none" + }); + hintPrompt.innerHTML = 'Tip: Hold Shift while clicking sidebar cards to compare outputs side-by-side.'; + if (isBaseVideo) { + hintPrompt.style.display = "none"; + } + container.appendChild(hintPrompt); + container.onclick = (e) => { if (e.target === container) { destroy(); @@ -285,7 +298,6 @@ function createComparisonViewer(baseSrc) { } }; - // Assign to our module-scoped tracker and register globalKeydownHandler = handleKeys; document.addEventListener("keydown", globalKeydownHandler); @@ -296,12 +308,12 @@ function createComparisonViewer(baseSrc) { } return { - loadTarget(targetSrc) { + loadTarget(targetSrc, isShiftClick) { const isTargetVideo = isVideoFormat(targetSrc); if (isBaseVideo) { destroy(); - showFullscreenPreview([targetSrc]); + showFullscreenPreview([targetSrc], isShiftClick); return; } @@ -309,24 +321,36 @@ function createComparisonViewer(baseSrc) { return; } - if (mediaB) mediaB.remove(); + if (isShiftClick) { + // Shift+Click: Sideload target image B for comparison split + if (mediaB) mediaB.remove(); - mediaB = createMediaElement(targetSrc, false); - mediaB.style.pointerEvents = "none"; - wrapper.appendChild(mediaB); + mediaB = createMediaElement(targetSrc, false); + mediaB.style.pointerEvents = "none"; + wrapper.appendChild(mediaB); - slider.style.display = "block"; - infoText.textContent = "Drag the slider to compare. Click other card images to update target | Esc to close."; - updateSliderPosition(50); + slider.style.display = "block"; + infoText.textContent = "Drag the slider to compare. Shift+Click other card images to update target | Esc to close."; + updateSliderPosition(50); + } else { + // Standard Click: Replace the main base reference image entirely + if (mediaB) { + mediaB.remove(); + mediaB = null; + } + slider.style.display = "none"; + mediaA.src = targetSrc; + infoText.textContent = "Reference loaded. Click to replace | Shift+Click another card image to compare."; + } } }; } -export function showFullscreenPreview(imgSrcs) { +export function showFullscreenPreview(imgSrcs, isShiftClick = false) { if (!imgSrcs || imgSrcs.length === 0) return; if (activeComparisonViewer) { - activeComparisonViewer.loadTarget(imgSrcs[0]); + activeComparisonViewer.loadTarget(imgSrcs[0], isShiftClick); return; } diff --git a/js/ui.js b/js/ui.js index bb07251..30aad48 100644 --- a/js/ui.js +++ b/js/ui.js @@ -319,10 +319,10 @@ function renderCardImages(cardObj, state, keepAspect) { cardObj.firstImgElement = mediaEl; - // Binds interactive event listeners + // Binds interactive event listeners. Passes shiftKey context natively to support split side-loading mediaEl.onclick = (ev) => { ev.stopPropagation(); - showFullscreenPreview([src]); + showFullscreenPreview([src], ev.shiftKey); }; // Shared dimensions layout compiler @@ -512,7 +512,6 @@ export function renderDOM() { const headerSearchIcon = State.sidebarContainer.querySelector(".pi-search"); const headerActions = State.sidebarContainer.querySelector(".pi-eraser")?.parentNode; - // Shared action buttons styling helper const styleActionBtn = (btn) => { Object.assign(btn.style, { display: "inline-flex", @@ -605,7 +604,7 @@ export function renderDOM() { const btnFocus = document.createElement("span"); btnFocus.className = "pi pi-eye"; - btnFocus.title = "Show Node"; + btnFocus.title = "Show Node"; // Renamed styleActionBtn(btnFocus); leftHoverPanel.appendChild(btnFocus); @@ -741,7 +740,7 @@ export function renderDOM() { const btnFocus = document.createElement("span"); btnFocus.className = "pi pi-eye"; - btnFocus.title = "Focus Node"; + btnFocus.title = "Show Node"; // Renamed styleActionBtn(btnFocus); leftHoverPanel.appendChild(btnFocus); @@ -866,7 +865,7 @@ export function renderDOM() { const btnFocus = document.createElement("span"); btnFocus.className = "pi pi-eye"; - btnFocus.title = "Focus Node"; + btnFocus.title = "Show Node"; // Renamed styleActionBtn(btnFocus); const leftHoverBtn = document.createElement("span");