summaryrefslogtreecommitdiffstats
path: root/web_src/js/modules/toast.js
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-10-11 10:27:00 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-10-11 10:27:00 +0000
commit65aa53fc52ff15efe54df4147564828d535837f8 (patch)
tree31c51dad04fdcca80e6d3043c8bd49d2f1a51f83 /web_src/js/modules/toast.js
parentInitial commit. (diff)
downloadforgejo-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.js55
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);
+}