Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 23 additions & 15 deletions website/assets/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,6 @@
var xdcgetBase = 'https://apps.testrun.org';
var appMap = {};

function escapeHtml(str) {
var div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}

function extractAuthor(url) {
var m = /(github\.com|codeberg\.org)\/([\w\-_]+)/.exec(url || '');
return m && m.length === 3 ? m[2] : '';
Expand Down Expand Up @@ -94,21 +88,35 @@
else idx++;
}

var html = '';
var templateEl = document.getElementById('carousel-card-template');
shuffled.forEach(function(app) {
appMap[app.app_id] = app;
/** @type {HTMLButtonElement} */
var el = templateEl.cloneNode(true);
el.removeAttribute('id');
var subtitle = (app.description || '').split('\n')[0];
var author = app._author;
var searchText = (app.name + ' ' + (app.description || '') + ' ' + author).toLowerCase();
html += '<button class="carousel-card" data-app-id="' + app.app_id + '" data-search="' + escapeHtml(searchText) + '" aria-label="' + escapeHtml(app.name) + '">'
+ '<img src="' + xdcgetBase + '/' + app.icon_relname + '" alt="' + escapeHtml(app.name) + ' icon" loading="lazy" />'
+ '<span class="carousel-card-name">' + escapeHtml(app.name) + '</span>'
+ '<span class="carousel-card-desc">' + escapeHtml(subtitle) + '</span>'
+ (author ? '<span class="carousel-card-author">' + escapeHtml(author) + '</span>' : '')
+ '</button>';

el.setAttribute('data-app-id', app.app_id);
el.setAttribute('data-search', searchText);
el.ariaLabel = app.name;
var img = el.getElementsByTagName('img')[0];
img.src = xdcgetBase + '/' + app.icon_relname;
img.alt = app.name + ' icon';
el.getElementsByClassName('carousel-card-name')[0].textContent = app.name;
el.getElementsByClassName('carousel-card-desc')[0].textContent = subtitle;
el.getElementsByClassName('carousel-card-author')[0].textContent = author;
if (!author) {
el.getElementsByClassName('carousel-card-author')[0].remove();
}

track.append(el);
});
html += '<div class="carousel-unmatched" id="carousel-unmatched"></div>';
track.innerHTML = html;
var unmatchedEl = document.createElement('div');
unmatchedEl.id = 'carousel-unmatched';
unmatchedEl.classList.add('carousel-unmatched');
track.append(unmatchedEl);

// update search placeholder with app count
var searchEl = document.getElementById('carousel-search-input');
Expand Down
10 changes: 10 additions & 0 deletions website/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,16 @@ <h3 id="messenger-popup-name" class="messenger-popup-name"></h3>
</div>
<button class="carousel-arrow carousel-arrow-right" aria-label="Scroll right"></button>
</div>
<div style="display: none;">
<button id="carousel-card-template" class="carousel-card" >
<!-- `alt` is to be filled with JS -->
<!-- htmlhint-disable-next-line alt-require -->
<img loading="lazy" />
<span class="carousel-card-name"></span>
<span class="carousel-card-desc"></span>
<span class="carousel-card-author"></span>
</button>
</div>
<!-- inline app detail popup with instructions (hidden by default) -->
<div id="app-dialog-inline" class="app-dialog-inline" style="display:none;" role="dialog" aria-label="App details">
<button id="app-dialog-close" class="app-dialog-x" aria-label="Close">&times;</button>
Expand Down