Skip to content

Instantly share code, notes, and snippets.

@AnandPilania
Last active April 2, 2024 11:16
Show Gist options
  • Save AnandPilania/6228ddf1ce4aef0bb5c6f4b45333a22c to your computer and use it in GitHub Desktop.
Save AnandPilania/6228ddf1ce4aef0bb5c6f4b45333a22c to your computer and use it in GitHub Desktop.
Enhance Your Website Notifications with JavaScript Toasts
function blank(value) {
if(Array.isArray(value)) {
return value.length === 0;
}
if(value instanceof Date) {
return false;
}
if(typeof value === 'object' && value !== null) {
return Object.keys(value).length === 0;
}
return ['', null, undefined].includes(value);
}
<div style="z-index: 9999999">
<div
id="toastr"
class="toast-container position-fixed bottom-0 end-0 p-3"
></div>
<template id="toastTemplate">
<div
class="toast toast-__CLASS"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-auto-hide="true"
>
<div class="toast-body">__BODY</div>
</div>
</template>
<script>
let getToastClass = function (type) {
switch (type) {
case 'error':
case 'warning':
return 'danger';
case 'info':
return 'info';
case 'success':
default:
return 'success';
}
};
$(function () {
$(document).on(
'click',
'#toastr .toast[data-auto-hide="true"]',
function (e) {
e.stopImmediatePropagation();
$(this).remove();
},
);
});
function toast(
status,
message,
autoHide = 5000,
) {
const toastContainer = $('#toastr');
let toastr = $('#toastTemplate').html();
if (!autoHide) {
toastr = toastr.replace('data-auto-hide="true"', '');
}
toastContainer.append(
toastr
.replace('__CLASS', getToastClass(status) + ' show')
.replace('__BODY', message),
);
if (autoHide && (toastr = $('#toastr .toast')).length > 0) {
setTimeout(() => {
toastr.remove();
}, autoHide);
}
}
$.ajaxSetup({
global: true,
beforeSend: function (x) {},
complete: function (x, s) {
if (x.responseJSON) {
const json = x.responseJSON;
if ((errors = json.errors ?? undefined) !== undefined) {
$.each(errors, function (k, v) {
toast(getToastClass('error'), v.message ?? v);
});
}
if (
(json.error ?? undefined) !== undefined &&
!blank(json.error)
) {
toast('error', json.error);
}
if (
(notify = json.notify ?? undefined) !== undefined &&
!blank(notify.message)
) {
toast(
getToastClass(
notify.class ??
(x.status === 200 ? 'success' : 'error'),
),
notify.message,
);
}
if (
!blank(json.scrollTo) &&
(focusElement = $(`#${json.scrollTo}`)).length > 0
) {
$('html, body').animate(
{
scrollTop: focusElement.offset().top,
},
2000,
);
}
}
},
success: function (r, s, x) {},
error: function (x, s, e) {
$(document).trigger('loader:hide');
},
});
</script>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment