nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Make toast support preventDuplicates (#31501)

Browse source 
make preventDuplicates default to true, users get a clear UI feedback
and know that "a new message appears".

Fixes: https://github.com/go-gitea/gitea/issues/26651

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2024-06-27 21:58:38 +08:00 • committed by GitHub
parent 9bc5552c11
commit c1fe6fbcc3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 86 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web_src/js/modules/toast.js
View file

@ -1,5 +1,6 @@
import {htmlEscape} from 'escape-goat';
import {svg} from '../svg.js';
import {animateOnce, showElem} from '../utils/dom.js';
import Toastify from 'toastify-js'; // don't use "async import", because when network error occurs, the "async import" also fails and nothing is shown
const levels = {
@ -21,13 +22,28 @@ const levels = {
};
// See https://github.com/apvarun/toastify-js#api for options
function showToast(message, level, {gravity, position, duration, useHtmlBody, ...other} = {}) {
function showToast(message, level, {gravity, position, duration, useHtmlBody, preventDuplicates = true, ...other} = {}) {
const body = useHtmlBody ? String(message) : htmlEscape(message);
const key = `${level}-${body}`;
// prevent showing duplicate toasts with same level and message, and give a visual feedback for end users
if (preventDuplicates) {
const toastEl = document.querySelector(`.toastify[data-toast-unique-key="${CSS.escape(key)}"]`);
if (toastEl) {
const toastDupNumEl = toastEl.querySelector('.toast-duplicate-number');
showElem(toastDupNumEl);
toastDupNumEl.textContent = String(Number(toastDupNumEl.textContent) + 1);
animateOnce(toastDupNumEl, 'pulse-1p5-200');
return;
}
}
const {icon, background, duration: levelDuration} = levels[level ?? 'info'];
const toast = Toastify({
text: `
<div class='toast-icon'>${svg(icon)}</div>
<div class='toast-body'>${useHtmlBody ? message : htmlEscape(message)}</div>
<button class='toast-close'>${svg('octicon-x')}</button>
<div class='toast-body'><span class="toast-duplicate-number tw-hidden">1</span>${body}</div>
<button class='btn toast-close'>${svg('octicon-x')}</button>
`,
escapeMarkup: false,
gravity: gravity ?? 'top',
@ -39,6 +55,7 @@ function showToast(message, level, {gravity, position, duration, useHtmlBody, ..
toast.showToast();
toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast());
toast.toastElement.setAttribute('data-toast-unique-key', key);
return toast;
}