diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-10-11 10:27:00 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-10-11 10:27:00 +0000 |
commit | 65aa53fc52ff15efe54df4147564828d535837f8 (patch) | |
tree | 31c51dad04fdcca80e6d3043c8bd49d2f1a51f83 /web_src/js/modules/toast.js | |
parent | Initial commit. (diff) | |
download | forgejo-debian.tar.xz forgejo-debian.zip |
Adding upstream version 8.0.3.HEADupstream/8.0.3upstreamdebian
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'web_src/js/modules/toast.js')
-rw-r--r-- | web_src/js/modules/toast.js | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js new file mode 100644 index 00000000..d12d2037 --- /dev/null +++ b/web_src/js/modules/toast.js @@ -0,0 +1,55 @@ +import {htmlEscape} from 'escape-goat'; +import {svg} from '../svg.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 = { + info: { + icon: 'octicon-check', + background: 'var(--color-green)', + duration: 2500, + }, + warning: { + icon: 'gitea-exclamation', + background: 'var(--color-orange)', + duration: -1, // requires dismissal to hide + }, + error: { + icon: 'gitea-exclamation', + background: 'var(--color-red)', + duration: -1, // requires dismissal to hide + }, +}; + +// See https://github.com/apvarun/toastify-js#api for options +function showToast(message, level, {gravity, position, duration, useHtmlBody, ...other} = {}) { + 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> + `, + escapeMarkup: false, + gravity: gravity ?? 'top', + position: position ?? 'center', + duration: duration ?? levelDuration, + style: {background}, + ...other, + }); + + toast.showToast(); + toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast()); + return toast; +} + +export function showInfoToast(message, opts) { + return showToast(message, 'info', opts); +} + +export function showWarningToast(message, opts) { + return showToast(message, 'warning', opts); +} + +export function showErrorToast(message, opts) { + return showToast(message, 'error', opts); +} |