bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: harden toast rendering

Browse Source
This commit is contained in:
a.tolmachev
2026-05-02 12:19:21 +00:00
parent 62b092cac7
commit 26db91facf
1 changed files with 47 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/js/ui-feedback.js
+47 -12
View File
@@ -25,22 +25,57 @@
var config = options || {};
var duration = config.duration === 0 ? 0 : (config.duration || 3600);
var toast = document.createElement('div');
var copy = document.createElement('div');
var close = document.createElement('button');
var closeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var lineA = document.createElementNS('http://www.w3.org/2000/svg', 'line');
var lineB = document.createElementNS('http://www.w3.org/2000/svg', 'line');
toast.id = 'toast_' + (++nextToastId);
toast.className = 'toast-card toast-' + (config.type || 'info');
toast.innerHTML =
'<div class="toast-copy">' +
(config.title ? '<div class="toast-title">' + config.title + '</div>' : '') +
(config.message ? '<div class="toast-message">' + config.message + '</div>' : '') +
'</div>' +
'<button class="toast-close" type="button" aria-label="Dismiss">' +
'<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">' +
'<line x1="1" y1="1" x2="11" y2="11"></line>' +
'<line x1="11" y1="1" x2="1" y2="11"></line>' +
'</svg>' +
'</button>';
copy.className = 'toast-copy';
if (config.title) {
var title = document.createElement('div');
title.className = 'toast-title';
title.textContent = config.title;
copy.appendChild(title);
}
if (config.message) {
var message = document.createElement('div');
message.className = 'toast-message';
message.textContent = config.message;
copy.appendChild(message);
}
toast.querySelector('.toast-close').addEventListener('click', function() {
close.className = 'toast-close';
close.type = 'button';
close.setAttribute('aria-label', 'Dismiss');
closeIcon.setAttribute('width', '12');
closeIcon.setAttribute('height', '12');
closeIcon.setAttribute('viewBox', '0 0 12 12');
closeIcon.setAttribute('fill', 'none');
closeIcon.setAttribute('stroke', 'currentColor');
closeIcon.setAttribute('stroke-width', '1.8');
closeIcon.setAttribute('stroke-linecap', 'round');
lineA.setAttribute('x1', '1');
lineA.setAttribute('y1', '1');
lineA.setAttribute('x2', '11');
lineA.setAttribute('y2', '11');
lineB.setAttribute('x1', '11');
lineB.setAttribute('y1', '1');
lineB.setAttribute('x2', '1');
lineB.setAttribute('y2', '11');
closeIcon.appendChild(lineA);
closeIcon.appendChild(lineB);
close.appendChild(closeIcon);
toast.appendChild(copy);
toast.appendChild(close);
close.addEventListener('click', function() {
dismiss(toast);
});