mirrors/compiler-explorer
1
0
Fork 0
mirror of https://github.com/compiler-explorer/compiler-explorer.git synced 2025-12-27 10:33:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Decouple Site Template images from template name (#7883)

Browse Source
This commit is contained in:
woruyu
2025-07-04 14:01:20 +08:00
committed by GitHub
parent b43080b1bb
commit 42cf30d7a6
59 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
static/widgets/site-templates-widget.ts
View File

@@ -26,7 +26,7 @@ import $ from 'jquery';
import GoldenLayout from 'golden-layout';
import {escapeHTML} from '../../shared/common-utils.js';
import {SiteTemplateResponse, UserSiteTemplate} from '../../types/features/site-templates.interfaces.js';
import {SiteTemplateConfiguration, UserSiteTemplate} from '../../types/features/site-templates.interfaces.js';
import {assert, unwrap, unwrapString} from '../assert.js';
import * as BootstrapUtils from '../bootstrap-utils.js';
import {localStorage} from '../local.js';
@@ -39,7 +39,7 @@ class SiteTemplatesWidget {
private readonly modal: JQuery;
private readonly img: HTMLImageElement;
private readonly alertSystem: Alert;
private templatesConfig: null | SiteTemplateResponse = null;
private templatesConfig: null | SiteTemplateConfiguration = null;
private populated = false;
constructor(private readonly layout: GoldenLayout) {
this.modal = $('#site-template-loader');
@@ -74,7 +74,7 @@ class SiteTemplatesWidget {
}
async getTemplates() {
if (this.templatesConfig === null) {
this.templatesConfig = await new Promise<SiteTemplateResponse>((resolve, reject) => {
this.templatesConfig = await new Promise<SiteTemplateConfiguration>((resolve, reject) => {
$.getJSON(window.location.origin + window.httpRoot + 'api/siteTemplates', resolve);
});
}
@@ -102,7 +102,7 @@ class SiteTemplatesWidget {
}
async setDefaultPreview() {
const templatesConfig = await this.getTemplates(); // by the time this is called it will be cached
const first = Object.entries(templatesConfig.templates)[0][0]; // preview the first entry
const first = templatesConfig.templates[0].id; // preview the first entry
this.img.src = this.getAsset(first) ?? this.getDefaultAsset();
}
populateUserTemplates() {
@@ -134,11 +134,11 @@ class SiteTemplatesWidget {
const templatesConfig = await this.getTemplates();
const siteTemplatesList = $('#site-templates-list');
siteTemplatesList.empty();
for (const [name, data] of Object.entries(templatesConfig.templates)) {
for (const {name, id, reference} of templatesConfig.templates) {
// Note: Trusting the server-provided data attribute
siteTemplatesList.append(
'<li>' +
`<div class="title" data-data="${data}" data-name="${name}">${escapeHTML(name)}</div>` +
`<div class="title" data-id="${id}" data-data="${reference}" data-name="${name}">${escapeHTML(name)}</div>` +
'</li>',
);
}
@@ -147,9 +147,8 @@ class SiteTemplatesWidget {
titleDiv.addEventListener(
'mouseover',
() => {
const name = titleDivCopy.getAttribute('data-name');
this.img.src =
name !== null ? (this.getAsset(name) ?? this.getDefaultAsset()) : this.getDefaultAsset();
const id = titleDivCopy.getAttribute('data-id');
this.img.src = id !== null ? (this.getAsset(id) ?? this.getDefaultAsset()) : this.getDefaultAsset();
},
false,
);