Add link to image title / 增加超链接到镜像标题

Cp0204 · May 2, 2024 · e6f767d · e6f767d
1 parent 8c2f4d1
commit e6f767d
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/app/mod/allow-modify-image/mod.js b/app/mod/allow-modify-image/mod.js
@@ -5,8 +5,23 @@
 (function () {
     const observedAnchor = '.tab-content';
     async function moduleFunction() {
-        const tabContents = document.querySelectorAll(observedAnchor)
+        const tabContents = document.querySelectorAll(observedAnchor);
         tabContents.forEach(tabContent => {
+
+            // 增加超链接
+            const tabPanels = tabContent.querySelectorAll(':scope > div');
+            tabPanels.forEach(tabPanel => {
+                const imageLabel = tabPanel.querySelector('span > div:nth-child(1) > div > div > span.is-flex-grow-1 > div > label');
+                const imageInput = tabPanel.querySelector('span > div:nth-child(1) > div > div > span.is-flex-grow-1 > div > div > input');
+                linkToImage();
+                imageInput.addEventListener('input', () => { linkToImage(); });
+                function linkToImage() {
+                    const imageURL = imageInput.value.includes('.') ? `https://${imageInput.value}` : `https://hub.docker.com/r/${imageInput.value}`;
+                    imageLabel.innerHTML = `<a target="_blank" href="${imageURL}">Docker 镜像 *</a>`;
+                }
+            });
+
+            // 镜像可编辑
             const inputElements = tabContent.querySelectorAll('input[readonly="readonly"]');
             inputElements.forEach(inputElement => {
                 inputElement.removeAttribute('readonly');
@@ -35,5 +50,5 @@
             timeout = setTimeout(() => func.apply(this, args), wait);
         };
     }
-    const debounced = debounce(moduleFunction, 1000);
+    const debounced = debounce(moduleFunction, 500);
 })();