( extensionId: string, preferredImageUrl?: string, trigger?: HTMLElement )
| 164 | } |
| 165 | |
| 166 | function openDetailsModal( |
| 167 | extensionId: string, |
| 168 | preferredImageUrl?: string, |
| 169 | trigger?: HTMLElement |
| 170 | ): void { |
| 171 | const item = extensionById.get(extensionId); |
| 172 | if (!item) { |
| 173 | return; |
| 174 | } |
| 175 | |
| 176 | const keywordHtml = (item.keywords || []) |
| 177 | .map((keyword) => `<span class="keyword-tag">${escapeHtml(keyword)}</span>`) |
| 178 | .join(""); |
| 179 | const metaParts: string[] = []; |
| 180 | if (item.external) { |
| 181 | metaParts.push('<span class="resource-tag">External</span>'); |
| 182 | } |
| 183 | if (item.author?.name) { |
| 184 | const authorName = item.author.name; |
| 185 | const authorUrl = item.author.url; |
| 186 | const authorHandle = authorUrl |
| 187 | ? getGitHubHandle(authorUrl, authorName) |
| 188 | : authorName; |
| 189 | metaParts.push( |
| 190 | authorUrl |
| 191 | ? `<span class="resource-author">by <a href="${escapeHtml( |
| 192 | sanitizeUrl(authorUrl) |
| 193 | )}" target="_blank" rel="noopener noreferrer" title="${escapeHtml( |
| 194 | authorName |
| 195 | )}">${escapeHtml(authorHandle)}</a></span>` |
| 196 | : `<span class="resource-author">by ${escapeHtml( |
| 197 | authorName |
| 198 | )}</span>` |
| 199 | ); |
| 200 | } |
| 201 | if (item.lastUpdated) { |
| 202 | metaParts.push( |
| 203 | `<span class="last-updated">Updated ${escapeHtml( |
| 204 | formatRelativeTime(item.lastUpdated) |
| 205 | )}</span>` |
| 206 | ); |
| 207 | } |
| 208 | |
| 209 | const installUrl = getInstallUrl(item); |
| 210 | const sourceUrl = getSourceUrl(item); |
| 211 | const detailsHtml = ` |
| 212 | <div class="extension-details-body"> |
| 213 | <div class="extension-details-main"> |
| 214 | <img id="extension-details-image" class="extension-preview-image extension-details-image" src="" alt="" /> |
| 215 | <div id="extension-details-gallery" class="extension-details-gallery" role="list"></div> |
| 216 | </div> |
| 217 | <div class="extension-details-content"> |
| 218 | <p id="extension-details-description" class="extension-details-description">${escapeHtml( |
| 219 | item.description || "Canvas extension" |
| 220 | )}</p> |
| 221 | <div id="extension-details-keywords" class="resource-keywords extension-details-keywords">${keywordHtml}</div> |
| 222 | <div id="extension-details-meta" class="resource-meta extension-details-meta">${metaParts.join( |
| 223 | "" |
no test coverage detected