| 114 | } |
| 115 | |
| 116 | function renderGalleryThumbnails(images: string[], selectedUrl: string): void { |
| 117 | const gallery = document.getElementById("extension-details-gallery"); |
| 118 | if (!gallery) return; |
| 119 | |
| 120 | gallery.innerHTML = ""; |
| 121 | |
| 122 | images.forEach((url, index) => { |
| 123 | const button = document.createElement("button"); |
| 124 | button.type = "button"; |
| 125 | button.className = "extension-details-thumbnail-btn"; |
| 126 | button.dataset.galleryImageUrl = url; |
| 127 | button.setAttribute("aria-label", `Show image ${index + 1}`); |
| 128 | button.setAttribute("role", "listitem"); |
| 129 | if (url === selectedUrl) { |
| 130 | button.classList.add("active"); |
| 131 | button.setAttribute("aria-current", "true"); |
| 132 | } |
| 133 | |
| 134 | const image = document.createElement("img"); |
| 135 | image.src = url; |
| 136 | image.alt = `Gallery image ${index + 1}`; |
| 137 | image.className = "extension-details-thumbnail"; |
| 138 | image.loading = "lazy"; |
| 139 | |
| 140 | button.appendChild(image); |
| 141 | gallery.appendChild(button); |
| 142 | }); |
| 143 | } |
| 144 | |
| 145 | function setSelectedGalleryImage(url: string, extensionName: string): void { |
| 146 | const image = document.getElementById( |