From f81babd3302609379ac551fd11e46c544268af6b Mon Sep 17 00:00:00 2001 From: pythonSmall-Q Date: Sat, 7 Mar 2026 09:07:48 +0800 Subject: [PATCH 01/14] Add ImageEnlarger feature with modal viewer Introduce an ImageEnlarger utility: add a toggle option to the feature list and implement a modal image viewer with CSS, toolbar (zoom in/out, reset, save), keyboard shortcuts, and click-to-open behavior. Images are annotated with a preview class and the feature ignores gravatar/cravatar sources; it applies to existing and dynamically added images via a MutationObserver. Errors are logged and surface a DebugMode alert when enabled. --- XMOJ.user.js | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 271 insertions(+) diff --git a/XMOJ.user.js b/XMOJ.user.js index 4c9d072c..d9eb2e9e 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -2121,6 +2121,8 @@ async function main() { }, {"ID": "CompareSource", "Type": "A", "Name": "比较代码"}, { "ID": "BBSPopup", "Type": "A", "Name": "讨论提醒" }, {"ID": "MessagePopup", "Type": "A", "Name": "短消息提醒"}, { + "ID": "ImageEnlarger", "Type": "A", "Name": "图片放大功能" + }, { "ID": "DebugMode", "Type": "A", "Name": "调试模式（仅供开发者使用）" }, { "ID": "SuperDebug", "Type": "A", "Name": "本地调试模式（仅供开发者使用) (未经授权的擅自开启将导致大部分功能不可用！)" @@ -5572,6 +5574,275 @@ int main() } } } + + // Image Enlargement Feature + if (UtilityEnabled("ImageEnlarger")) { + try { + // Add CSS styles for the enlarger + let EnlargerStyle = document.createElement("style"); + EnlargerStyle.textContent = ` + .xmoj-image-preview { + cursor: pointer; + } + + .xmoj-image-preview:hover { + opacity: 0.8; + transition: opacity 0.2s ease; + } + + .xmoj-image-preview::after { + content: "点击放大"; + position: absolute; + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 5px 10px; + border-radius: 3px; + font-size: 12px; + white-space: nowrap; + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .xmoj-image-preview:hover::after { + opacity: 1; + } + + .xmoj-image-modal { + display: none; + position: fixed; + z-index: 2000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + } + + .xmoj-image-modal.show { + display: flex; + flex-direction: column; + } + + .xmoj-image-modal-content { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + overflow: auto; + } + + .xmoj-image-modal-image { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + + .xmoj-image-modal-toolbar { + display: flex; + justify-content: center; + gap: 10px; + padding: 15px; + background-color: rgba(0, 0, 0, 0.5); + flex-wrap: wrap; + } + + .xmoj-image-modal-toolbar button { + padding: 8px 16px; + background-color: #0d6efd; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 14px; + transition: background-color 0.2s ease; + } + + .xmoj-image-modal-toolbar button:hover { + background-color: #0b5ed7; + } + + .xmoj-image-modal-toolbar button:active { + background-color: #0a58ca; + } + + .xmoj-image-modal-close { + position: absolute; + top: 20px; + right: 30px; + color: white; + font-size: 40px; + font-weight: bold; + cursor: pointer; + transition: color 0.2s ease; + } + + .xmoj-image-modal-close:hover { + color: #ccc; + } + `; + document.head.appendChild(EnlargerStyle); + + // Create modal element + let ImageModal = document.createElement("div"); + ImageModal.className = "xmoj-image-modal"; + ImageModal.id = "xmoj-image-modal"; + + let CloseButton = document.createElement("span"); + CloseButton.className = "xmoj-image-modal-close"; + CloseButton.innerHTML = "×"; + ImageModal.appendChild(CloseButton); + + let ModalContent = document.createElement("div"); + ModalContent.className = "xmoj-image-modal-content"; + let ModalImage = document.createElement("img"); + ModalImage.className = "xmoj-image-modal-image"; + ModalContent.appendChild(ModalImage); + ImageModal.appendChild(ModalContent); + + let Toolbar = document.createElement("div"); + Toolbar.className = "xmoj-image-modal-toolbar"; + + let ZoomInBtn = document.createElement("button"); + ZoomInBtn.innerHTML = "放大 (+)"; + ZoomInBtn.type = "button"; + Toolbar.appendChild(ZoomInBtn); + + let ZoomOutBtn = document.createElement("button"); + ZoomOutBtn.innerHTML = "缩小 (-)"; + ZoomOutBtn.type = "button"; + Toolbar.appendChild(ZoomOutBtn); + + let ResetZoomBtn = document.createElement("button"); + ResetZoomBtn.innerHTML = "重置大小"; + ResetZoomBtn.type = "button"; + Toolbar.appendChild(ResetZoomBtn); + + let SaveBtn = document.createElement("button"); + SaveBtn.innerHTML = "保存图片"; + SaveBtn.type = "button"; + Toolbar.appendChild(SaveBtn); + + ImageModal.appendChild(Toolbar); + document.body.appendChild(ImageModal); + + // Zoom level state + let CurrentZoom = 1; + const ZoomStep = 0.1; + const MinZoom = 0.1; + const MaxZoom = 5; + + // Function to update image size + let UpdateImageSize = () => { + ModalImage.style.transform = `scale(${CurrentZoom})`; + ModalImage.style.transition = "transform 0.2s ease"; + }; + + // Function to open modal + let OpenImageModal = (imgSrc) => { + CurrentZoom = 1; + ModalImage.src = imgSrc; + ImageModal.classList.add("show"); + UpdateImageSize(); + }; + + // Function to close modal + let CloseImageModal = () => { + ImageModal.classList.remove("show"); + }; + + // Close button click + CloseButton.addEventListener("click", CloseImageModal); + + // Close when clicking outside the image + ImageModal.addEventListener("click", (e) => { + if (e.target === ImageModal || e.target === ModalContent) { + CloseImageModal(); + } + }); + + // Keyboard shortcuts + document.addEventListener("keydown", (e) => { + if (ImageModal.classList.contains("show")) { + if (e.key === "Escape") { + CloseImageModal(); + } else if (e.key === "+") { + ZoomInBtn.click(); + } else if (e.key === "-") { + ZoomOutBtn.click(); + } + } + }); + + // Zoom controls + ZoomInBtn.addEventListener("click", () => { + CurrentZoom = Math.min(CurrentZoom + ZoomStep, MaxZoom); + UpdateImageSize(); + }); + + ZoomOutBtn.addEventListener("click", () => { + CurrentZoom = Math.max(CurrentZoom - ZoomStep, MinZoom); + UpdateImageSize(); + }); + + ResetZoomBtn.addEventListener("click", () => { + CurrentZoom = 1; + UpdateImageSize(); + }); + + // Save/Download image + SaveBtn.addEventListener("click", () => { + let Link = document.createElement("a"); + Link.href = ModalImage.src; + Link.download = ModalImage.src.split("/").pop() || "image.png"; + document.body.appendChild(Link); + Link.click(); + document.body.removeChild(Link); + }); + + // Apply to all images on the page + let ApplyEnlargerToImages = () => { + let Images = document.querySelectorAll("img"); + Images.forEach((img) => { + if (!img.classList.contains("xmoj-image-preview") && + !img.parentElement.classList.contains("xmoj-image-modal") && + img.src && + !img.src.includes("gravatar") && + !img.src.includes("cravatar")) { + + img.classList.add("xmoj-image-preview"); + img.style.position = "relative"; + img.addEventListener("click", (e) => { + e.stopPropagation(); + OpenImageModal(img.src); + }); + } + }); + }; + + // Apply to existing images + ApplyEnlargerToImages(); + + // Apply to dynamically added images + let Observer = new MutationObserver((mutations) => { + ApplyEnlargerToImages(); + }); + + Observer.observe(document.body, { + childList: true, + subtree: true + }); + + } catch (e) { + console.error(e); + if (UtilityEnabled("DebugMode")) { + SmartAlert("XMOJ-Script internal error!\n\n" + e + "\n\n" + "If you see this message, please report it to the developer.\nDon't forget to include console logs and a way to reproduce the error!\n\nDon't want to see this message? Disable DebugMode."); + } + } + } } catch (e) { console.error(e); if (UtilityEnabled("DebugMode")) { From a13e96430c18d9075b23e221fe6c1cb0531f3b53 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 7 Mar 2026 01:09:17 +0000 Subject: [PATCH 02/14] 3.3.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 33385212..9ffb1aa4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xmoj-script", - "version": "3.3.0", + "version": "3.3.1", "description": "an improvement script for xmoj.tech", "main": "AddonScript.js", "scripts": { From 35a234617139641c63b81dd533e119e90e8a7db6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 7 Mar 2026 01:09:23 +0000 Subject: [PATCH 03/14] Update version info to 3.3.1 --- Update.json | 11 +++++++++++ XMOJ.user.js | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/Update.json b/Update.json index 38e5a669..6964284d 100644 --- a/Update.json +++ b/Update.json @@ -3422,6 +3422,17 @@ } ], "Notes": "Bug 修复
\n- 修复了暗色模式下比赛排名表（contestrank-oi.php 和 contestrank-correct.php）颜色显示异常的问题（#916）
\n- 修复了 WebSocket 弹窗通知未遵循各功能独立弹窗开关（BBSPopup/MessagePopup）的问题（#919）" + }, + "3.3.1": { + "UpdateDate": 1772845758104, + "Prerelease": true, + "UpdateContents": [ + { + "PR": 924, + "Description": "Add ImageEnlarger feature with modal viewer" + } + ], + "Notes": "No release notes were provided for this release." } } } \ No newline at end of file diff --git a/XMOJ.user.js b/XMOJ.user.js index d9eb2e9e..b2f990ed 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -1,6 +1,6 @@ // ==UserScript== // @name XMOJ -// @version 3.3.0 +// @version 3.3.1 // @description XMOJ增强脚本 // @author @XMOJ-Script-dev, @langningchen and the community // @namespace https://github/langningchen From e6653cc6d5ec49a64341460c72b3db35ac80f415 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Mar 2026 01:19:08 +0000 Subject: [PATCH 04/14] Initial plan From c1e52467a9728ae044e41145b86ae07d71ff1646 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Mar 2026 01:22:23 +0000 Subject: [PATCH 05/14] Address review feedback: fix accessibility, modal exclusion, currentSrc, and MutationObserver performance Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com> --- XMOJ.user.js | 69 +++++++++++++++++++++++----------------------------- 1 file changed, 31 insertions(+), 38 deletions(-) diff --git a/XMOJ.user.js b/XMOJ.user.js index b2f990ed..b4dfc714 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -5590,26 +5590,6 @@ int main() transition: opacity 0.2s ease; } - .xmoj-image-preview::after { - content: "点击放大"; - position: absolute; - background-color: rgba(0, 0, 0, 0.7); - color: white; - padding: 5px 10px; - border-radius: 3px; - font-size: 12px; - white-space: nowrap; - pointer-events: none; - opacity: 0; - transition: opacity 0.2s ease; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - .xmoj-image-preview:hover::after { - opacity: 1; - } .xmoj-image-modal { display: none; @@ -5691,8 +5671,11 @@ int main() ImageModal.className = "xmoj-image-modal"; ImageModal.id = "xmoj-image-modal"; - let CloseButton = document.createElement("span"); + let CloseButton = document.createElement("button"); CloseButton.className = "xmoj-image-modal-close"; + CloseButton.type = "button"; + CloseButton.setAttribute("aria-label", "关闭图片"); + CloseButton.title = "关闭图片"; CloseButton.innerHTML = "×"; ImageModal.appendChild(CloseButton); @@ -5804,23 +5787,24 @@ int main() }); // Apply to all images on the page + let ApplyEnlargerToImage = (img) => { + if (!img.classList.contains("xmoj-image-preview") && + !img.closest(".xmoj-image-modal") && + img.src && + !img.src.includes("gravatar") && + !img.src.includes("cravatar")) { + + img.classList.add("xmoj-image-preview"); + img.title = "点击放大"; + img.addEventListener("click", (e) => { + e.stopPropagation(); + OpenImageModal(img.currentSrc || img.src); + }); + } + }; + let ApplyEnlargerToImages = () => { - let Images = document.querySelectorAll("img"); - Images.forEach((img) => { - if (!img.classList.contains("xmoj-image-preview") && - !img.parentElement.classList.contains("xmoj-image-modal") && - img.src && - !img.src.includes("gravatar") && - !img.src.includes("cravatar")) { - - img.classList.add("xmoj-image-preview"); - img.style.position = "relative"; - img.addEventListener("click", (e) => { - e.stopPropagation(); - OpenImageModal(img.src); - }); - } - }); + document.querySelectorAll("img").forEach(ApplyEnlargerToImage); }; // Apply to existing images @@ -5828,7 +5812,16 @@ int main() // Apply to dynamically added images let Observer = new MutationObserver((mutations) => { - ApplyEnlargerToImages(); + mutations.forEach((mutation) => { + mutation.addedNodes.forEach((node) => { + if (node.nodeType !== Node.ELEMENT_NODE) return; + if (node.tagName === "IMG") { + ApplyEnlargerToImage(node); + } else { + node.querySelectorAll("img").forEach(ApplyEnlargerToImage); + } + }); + }); }); Observer.observe(document.body, { From 9b68c78f59c4dc775badfe5894ebad2383ba6398 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Mar 2026 01:26:34 +0000 Subject: [PATCH 06/14] Fix close button background: reset browser default button styles Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com> --- XMOJ.user.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/XMOJ.user.js b/XMOJ.user.js index b4dfc714..b5f9d6a5 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -5654,6 +5654,10 @@ int main() top: 20px; right: 30px; color: white; + background: none; + border: none; + padding: 0; + line-height: 1; font-size: 40px; font-weight: bold; cursor: pointer; From 2b8330db5800892ec2ffb23818020c2914a5238c Mon Sep 17 00:00:00 2001 From: Shan Wenxiao Date: Sat, 7 Mar 2026 09:35:05 +0800 Subject: [PATCH 07/14] Update XMOJ.user.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Shan Wenxiao --- XMOJ.user.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/XMOJ.user.js b/XMOJ.user.js index b5f9d6a5..203b627e 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -5792,17 +5792,18 @@ int main() // Apply to all images on the page let ApplyEnlargerToImage = (img) => { - if (!img.classList.contains("xmoj-image-preview") && + const effectiveSrc = img.currentSrc || img.src; + if (!img.classList.contains("xmoj-image-preview") && !img.closest(".xmoj-image-modal") && - img.src && - !img.src.includes("gravatar") && - !img.src.includes("cravatar")) { - + effectiveSrc && + !effectiveSrc.includes("gravatar") && + !effectiveSrc.includes("cravatar")) { + img.classList.add("xmoj-image-preview"); img.title = "点击放大"; img.addEventListener("click", (e) => { e.stopPropagation(); - OpenImageModal(img.currentSrc || img.src); + OpenImageModal(effectiveSrc); }); } }; From 259cc7ae833c8c3f31f5a0fd9ae22785ce23c623 Mon Sep 17 00:00:00 2001 From: Shan Wenxiao Date: Sat, 7 Mar 2026 09:35:20 +0800 Subject: [PATCH 08/14] Update XMOJ.user.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Shan Wenxiao --- XMOJ.user.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/XMOJ.user.js b/XMOJ.user.js index 203b627e..f4459add 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -5800,7 +5800,9 @@ int main() !effectiveSrc.includes("cravatar")) { img.classList.add("xmoj-image-preview"); - img.title = "点击放大"; + if (!img.title) { + img.title = "点击放大"; + } img.addEventListener("click", (e) => { e.stopPropagation(); OpenImageModal(effectiveSrc); From 7f74188ab051766fa0fbaa883ad6050a9e3923f6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 7 Mar 2026 01:35:56 +0000 Subject: [PATCH 09/14] Update time and description of 3.3.1 --- Update.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Update.json b/Update.json index 6964284d..171a1fb4 100644 --- a/Update.json +++ b/Update.json @@ -3424,7 +3424,7 @@ "Notes": "Bug 修复
\n- 修复了暗色模式下比赛排名表（contestrank-oi.php 和 contestrank-correct.php）颜色显示异常的问题（#916）
\n- 修复了 WebSocket 弹窗通知未遵循各功能独立弹窗开关（BBSPopup/MessagePopup）的问题（#919）" }, "3.3.1": { - "UpdateDate": 1772845758104, + "UpdateDate": 1772847350873, "Prerelease": true, "UpdateContents": [ { From 5c6daab8ad7ba732cfb5eab1abb3c05e5ec3458f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 8 Mar 2026 14:20:52 +0000 Subject: [PATCH 10/14] Initial plan From b5945cfd2ffab7ed43818570f050ce8dd046b11a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 8 Mar 2026 14:27:11 +0000 Subject: [PATCH 11/14] Plan: add pan support to ImageEnlarger Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com> --- XMOJ.user.js | 160 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 148 insertions(+), 12 deletions(-) diff --git a/XMOJ.user.js b/XMOJ.user.js index f4459add..f0b4a62b 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -5613,6 +5613,7 @@ int main() align-items: center; justify-content: center; overflow: auto; + position: relative; } .xmoj-image-modal-image { @@ -5662,11 +5663,46 @@ int main() font-weight: bold; cursor: pointer; transition: color 0.2s ease; + z-index: 1; } .xmoj-image-modal-close:hover { color: #ccc; } + + .xmoj-image-modal-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(0, 0, 0, 0.5); + color: white; + border: none; + padding: 20px 12px; + cursor: pointer; + font-size: 28px; + transition: background-color 0.2s ease; + user-select: none; + -webkit-user-select: none; + } + + .xmoj-image-modal-nav:hover { + background: rgba(0, 0, 0, 0.8); + } + + .xmoj-image-modal-nav:disabled { + opacity: 0.3; + cursor: default; + } + + .xmoj-image-modal-nav-prev { + left: 0; + border-radius: 0 4px 4px 0; + } + + .xmoj-image-modal-nav-next { + right: 0; + border-radius: 4px 0 0 4px; + } `; document.head.appendChild(EnlargerStyle); @@ -5685,6 +5721,21 @@ int main() let ModalContent = document.createElement("div"); ModalContent.className = "xmoj-image-modal-content"; + + let PrevBtn = document.createElement("button"); + PrevBtn.className = "xmoj-image-modal-nav xmoj-image-modal-nav-prev"; + PrevBtn.type = "button"; + PrevBtn.setAttribute("aria-label", "上一张"); + PrevBtn.innerHTML = "❮"; + ModalContent.appendChild(PrevBtn); + + let NextBtn = document.createElement("button"); + NextBtn.className = "xmoj-image-modal-nav xmoj-image-modal-nav-next"; + NextBtn.type = "button"; + NextBtn.setAttribute("aria-label", "下一张"); + NextBtn.innerHTML = "❯"; + ModalContent.appendChild(NextBtn); + let ModalImage = document.createElement("img"); ModalImage.className = "xmoj-image-modal-image"; ModalContent.appendChild(ModalImage); @@ -5716,11 +5767,15 @@ int main() ImageModal.appendChild(Toolbar); document.body.appendChild(ImageModal); - // Zoom level state + // Zoom level and navigation state let CurrentZoom = 1; const ZoomStep = 0.1; const MinZoom = 0.1; const MaxZoom = 5; + let ImageList = []; + let CurrentImageIndex = -1; + let TouchStartX = 0; + let TouchStartY = 0; // Function to update image size let UpdateImageSize = () => { @@ -5728,11 +5783,38 @@ int main() ModalImage.style.transition = "transform 0.2s ease"; }; + // Function to update prev/next button state + let UpdateNavButtons = () => { + let HasMultiple = ImageList.length > 1; + PrevBtn.style.display = HasMultiple ? "" : "none"; + NextBtn.style.display = HasMultiple ? "" : "none"; + PrevBtn.disabled = CurrentImageIndex <= 0; + NextBtn.disabled = CurrentImageIndex >= ImageList.length - 1; + }; + + // Function to navigate to a specific image by index + let NavigateTo = (index) => { + if (index < 0 || index >= ImageList.length) return; + CurrentImageIndex = index; + CurrentZoom = 1; + ModalImage.src = ImageList[CurrentImageIndex]; + UpdateNavButtons(); + UpdateImageSize(); + }; + // Function to open modal - let OpenImageModal = (imgSrc) => { + let OpenImageModal = (imgElement) => { + let PreviewImages = [...document.querySelectorAll("img.xmoj-image-preview")]; + ImageList = PreviewImages.map(img => img.currentSrc || img.src).filter(src => src); + CurrentImageIndex = PreviewImages.indexOf(imgElement); + if (CurrentImageIndex === -1) { + ImageList = [(imgElement.currentSrc || imgElement.src)]; + CurrentImageIndex = 0; + } CurrentZoom = 1; - ModalImage.src = imgSrc; + ModalImage.src = ImageList[CurrentImageIndex]; ImageModal.classList.add("show"); + UpdateNavButtons(); UpdateImageSize(); }; @@ -5760,8 +5842,44 @@ int main() ZoomInBtn.click(); } else if (e.key === "-") { ZoomOutBtn.click(); + } else if (e.key === "ArrowLeft") { + NavigateTo(CurrentImageIndex - 1); + } else if (e.key === "ArrowRight") { + NavigateTo(CurrentImageIndex + 1); + } + } + }); + + // Touch swipe for image navigation + ModalContent.addEventListener("touchstart", (e) => { + TouchStartX = e.changedTouches[0].screenX; + TouchStartY = e.changedTouches[0].screenY; + }, { passive: true }); + + ModalContent.addEventListener("touchend", (e) => { + let TouchEndX = e.changedTouches[0].screenX; + let TouchEndY = e.changedTouches[0].screenY; + let DeltaX = TouchEndX - TouchStartX; + let DeltaY = TouchEndY - TouchStartY; + const SwipeThreshold = 50; + if (Math.abs(DeltaX) > SwipeThreshold && Math.abs(DeltaX) > Math.abs(DeltaY)) { + if (DeltaX < 0) { + NavigateTo(CurrentImageIndex + 1); + } else { + NavigateTo(CurrentImageIndex - 1); } } + }, { passive: true }); + + // Navigation button clicks + PrevBtn.addEventListener("click", (e) => { + e.stopPropagation(); + NavigateTo(CurrentImageIndex - 1); + }); + + NextBtn.addEventListener("click", (e) => { + e.stopPropagation(); + NavigateTo(CurrentImageIndex + 1); }); // Zoom controls @@ -5780,14 +5898,32 @@ int main() UpdateImageSize(); }); - // Save/Download image - SaveBtn.addEventListener("click", () => { - let Link = document.createElement("a"); - Link.href = ModalImage.src; - Link.download = ModalImage.src.split("/").pop() || "image.png"; - document.body.appendChild(Link); - Link.click(); - document.body.removeChild(Link); + // Save/Download image using fetch to trigger actual download instead of redirecting + SaveBtn.addEventListener("click", async () => { + let src = ModalImage.src; + let filename = src.split("/").pop().split("?")[0] || "image.png"; + try { + let response = await fetch(src); + let blob = await response.blob(); + saveAs(blob, filename); + } catch (e) { + GM_xmlhttpRequest({ + method: "GET", + url: src, + responseType: "blob", + onload: (resp) => { + saveAs(resp.response, filename); + }, + onerror: () => { + let Link = document.createElement("a"); + Link.href = src; + Link.download = filename; + document.body.appendChild(Link); + Link.click(); + document.body.removeChild(Link); + } + }); + } }); // Apply to all images on the page @@ -5805,7 +5941,7 @@ int main() } img.addEventListener("click", (e) => { e.stopPropagation(); - OpenImageModal(effectiveSrc); + OpenImageModal(img); }); } }; From 279dada58511ef0d1e44a1a994f177c34087a1cd Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 8 Mar 2026 14:29:40 +0000 Subject: [PATCH 12/14] Add drag-to-pan for zoomed images in ImageEnlarger modal Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com> --- XMOJ.user.js | 85 +++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 75 insertions(+), 10 deletions(-) diff --git a/XMOJ.user.js b/XMOJ.user.js index f0b4a62b..599daeef 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -5612,7 +5612,7 @@ int main() display: flex; align-items: center; justify-content: center; - overflow: auto; + overflow: hidden; position: relative; } @@ -5774,13 +5774,24 @@ int main() const MaxZoom = 5; let ImageList = []; let CurrentImageIndex = -1; + let PanX = 0; + let PanY = 0; + let IsDragging = false; + let DragStartX = 0; + let DragStartY = 0; + let DragStartPanX = 0; + let DragStartPanY = 0; + let IsTouchPanning = false; let TouchStartX = 0; let TouchStartY = 0; + let TouchPanStartPanX = 0; + let TouchPanStartPanY = 0; - // Function to update image size + // Function to update image transform (zoom + pan) let UpdateImageSize = () => { - ModalImage.style.transform = `scale(${CurrentZoom})`; - ModalImage.style.transition = "transform 0.2s ease"; + ModalImage.style.transform = `translate(${PanX}px, ${PanY}px) scale(${CurrentZoom})`; + ModalImage.style.transition = IsDragging ? "none" : "transform 0.2s ease"; + ModalImage.style.cursor = CurrentZoom > 1 ? "grab" : ""; }; // Function to update prev/next button state @@ -5797,6 +5808,8 @@ int main() if (index < 0 || index >= ImageList.length) return; CurrentImageIndex = index; CurrentZoom = 1; + PanX = 0; + PanY = 0; ModalImage.src = ImageList[CurrentImageIndex]; UpdateNavButtons(); UpdateImageSize(); @@ -5812,6 +5825,8 @@ int main() CurrentImageIndex = 0; } CurrentZoom = 1; + PanX = 0; + PanY = 0; ModalImage.src = ImageList[CurrentImageIndex]; ImageModal.classList.add("show"); UpdateNavButtons(); @@ -5850,15 +5865,35 @@ int main() } }); - // Touch swipe for image navigation + // Touch events: pan when zoomed, swipe to navigate when at zoom level 1 ModalContent.addEventListener("touchstart", (e) => { - TouchStartX = e.changedTouches[0].screenX; - TouchStartY = e.changedTouches[0].screenY; + if (e.touches.length !== 1) return; + TouchStartX = e.touches[0].clientX; + TouchStartY = e.touches[0].clientY; + if (CurrentZoom > 1) { + IsTouchPanning = true; + TouchPanStartPanX = PanX; + TouchPanStartPanY = PanY; + } else { + IsTouchPanning = false; + } }, { passive: true }); + ModalContent.addEventListener("touchmove", (e) => { + if (!IsTouchPanning || e.touches.length !== 1) return; + PanX = TouchPanStartPanX + (e.touches[0].clientX - TouchStartX); + PanY = TouchPanStartPanY + (e.touches[0].clientY - TouchStartY); + UpdateImageSize(); + e.preventDefault(); + }, { passive: false }); + ModalContent.addEventListener("touchend", (e) => { - let TouchEndX = e.changedTouches[0].screenX; - let TouchEndY = e.changedTouches[0].screenY; + if (IsTouchPanning) { + IsTouchPanning = false; + return; + } + let TouchEndX = e.changedTouches[0].clientX; + let TouchEndY = e.changedTouches[0].clientY; let DeltaX = TouchEndX - TouchStartX; let DeltaY = TouchEndY - TouchStartY; const SwipeThreshold = 50; @@ -5871,6 +5906,32 @@ int main() } }, { passive: true }); + // Mouse drag to pan when zoomed + ModalImage.addEventListener("mousedown", (e) => { + if (CurrentZoom <= 1) return; + IsDragging = true; + DragStartX = e.clientX; + DragStartY = e.clientY; + DragStartPanX = PanX; + DragStartPanY = PanY; + ModalImage.style.cursor = "grabbing"; + e.preventDefault(); + }); + + document.addEventListener("mousemove", (e) => { + if (!IsDragging) return; + PanX = DragStartPanX + (e.clientX - DragStartX); + PanY = DragStartPanY + (e.clientY - DragStartY); + UpdateImageSize(); + }); + + document.addEventListener("mouseup", () => { + if (IsDragging) { + IsDragging = false; + ModalImage.style.cursor = CurrentZoom > 1 ? "grab" : ""; + } + }); + // Navigation button clicks PrevBtn.addEventListener("click", (e) => { e.stopPropagation(); @@ -5895,15 +5956,19 @@ int main() ResetZoomBtn.addEventListener("click", () => { CurrentZoom = 1; + PanX = 0; + PanY = 0; UpdateImageSize(); }); // Save/Download image using fetch to trigger actual download instead of redirecting SaveBtn.addEventListener("click", async () => { let src = ModalImage.src; - let filename = src.split("/").pop().split("?")[0] || "image.png"; + let urlPath = src.split("?")[0]; + let filename = urlPath.split("/").pop() || "image.png"; try { let response = await fetch(src); + if (!response.ok) throw new Error("Failed to fetch image"); let blob = await response.blob(); saveAs(blob, filename); } catch (e) { From 6f310f392574e215b87df20312c0fc038e2f0242 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 8 Mar 2026 14:40:43 +0000 Subject: [PATCH 13/14] Fix image viewer: drag/pan, mouse wheel zoom, and download Co-authored-by: PythonSmall-Q <106425289+PythonSmall-Q@users.noreply.github.com> --- XMOJ.user.js | 71 +++++++++++++++++++++++++++++++--------------------- 1 file changed, 43 insertions(+), 28 deletions(-) diff --git a/XMOJ.user.js b/XMOJ.user.js index 599daeef..49538eed 100644 --- a/XMOJ.user.js +++ b/XMOJ.user.js @@ -5791,7 +5791,9 @@ int main() let UpdateImageSize = () => { ModalImage.style.transform = `translate(${PanX}px, ${PanY}px) scale(${CurrentZoom})`; ModalImage.style.transition = IsDragging ? "none" : "transform 0.2s ease"; - ModalImage.style.cursor = CurrentZoom > 1 ? "grab" : ""; + let CursorStyle = CurrentZoom > 1 ? "grab" : ""; + ModalImage.style.cursor = CursorStyle; + ModalContent.style.cursor = CursorStyle; }; // Function to update prev/next button state @@ -5907,14 +5909,16 @@ int main() }, { passive: true }); // Mouse drag to pan when zoomed - ModalImage.addEventListener("mousedown", (e) => { + ModalContent.addEventListener("mousedown", (e) => { if (CurrentZoom <= 1) return; + if (e.target.tagName.toUpperCase() === "BUTTON") return; IsDragging = true; DragStartX = e.clientX; DragStartY = e.clientY; DragStartPanX = PanX; DragStartPanY = PanY; ModalImage.style.cursor = "grabbing"; + ModalContent.style.cursor = "grabbing"; e.preventDefault(); }); @@ -5928,10 +5932,20 @@ int main() document.addEventListener("mouseup", () => { if (IsDragging) { IsDragging = false; - ModalImage.style.cursor = CurrentZoom > 1 ? "grab" : ""; + let CursorStyle = CurrentZoom > 1 ? "grab" : ""; + ModalImage.style.cursor = CursorStyle; + ModalContent.style.cursor = CursorStyle; } }); + // Mouse wheel to zoom in/out + ModalContent.addEventListener("wheel", (e) => { + e.preventDefault(); + let ZoomDelta = e.deltaY > 0 ? -ZoomStep : ZoomStep; + CurrentZoom = Math.max(MinZoom, Math.min(MaxZoom, CurrentZoom + ZoomDelta)); + UpdateImageSize(); + }, { passive: false }); + // Navigation button clicks PrevBtn.addEventListener("click", (e) => { e.stopPropagation(); @@ -5961,34 +5975,35 @@ int main() UpdateImageSize(); }); - // Save/Download image using fetch to trigger actual download instead of redirecting - SaveBtn.addEventListener("click", async () => { + // Save/Download image: fetch via GM_xmlhttpRequest to bypass CORS, then use blob URL for reliable download + SaveBtn.addEventListener("click", () => { let src = ModalImage.src; let urlPath = src.split("?")[0]; let filename = urlPath.split("/").pop() || "image.png"; - try { - let response = await fetch(src); - if (!response.ok) throw new Error("Failed to fetch image"); - let blob = await response.blob(); - saveAs(blob, filename); - } catch (e) { - GM_xmlhttpRequest({ - method: "GET", - url: src, - responseType: "blob", - onload: (resp) => { - saveAs(resp.response, filename); - }, - onerror: () => { - let Link = document.createElement("a"); - Link.href = src; - Link.download = filename; - document.body.appendChild(Link); - Link.click(); - document.body.removeChild(Link); - } - }); - } + GM_xmlhttpRequest({ + method: "GET", + url: src, + responseType: "blob", + onload: (resp) => { + let BlobUrl = URL.createObjectURL(resp.response); + let Link = document.createElement("a"); + Link.href = BlobUrl; + Link.download = filename; + document.body.appendChild(Link); + Link.click(); + document.body.removeChild(Link); + setTimeout(() => URL.revokeObjectURL(BlobUrl), 100); + }, + onerror: () => { + let Link = document.createElement("a"); + Link.href = src; + Link.download = filename; + Link.target = "_blank"; + document.body.appendChild(Link); + Link.click(); + document.body.removeChild(Link); + } + }); }); // Apply to all images on the page From 9dba4034390b91bf526ee08e7ac0413f05eef0fb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 8 Mar 2026 14:50:19 +0000 Subject: [PATCH 14/14] Update time and description of 3.3.1 --- Update.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Update.json b/Update.json index 171a1fb4..e12d6229 100644 --- a/Update.json +++ b/Update.json @@ -3424,7 +3424,7 @@ "Notes": "Bug 修复
\n- 修复了暗色模式下比赛排名表（contestrank-oi.php 和 contestrank-correct.php）颜色显示异常的问题（#916）
\n- 修复了 WebSocket 弹窗通知未遵循各功能独立弹窗开关（BBSPopup/MessagePopup）的问题（#919）" }, "3.3.1": { - "UpdateDate": 1772847350873, + "UpdateDate": 1772981411290, "Prerelease": true, "UpdateContents": [ {