Замена уведомлений DLEalert на Toast

Скрипт заменяет стандартное информационное окно DLE на красивый и современный Toast, окошко, похожее на пуш уведомление. Оно появляется справа вверху и исчезает само, требует от юзера дополнительных действий. В DLE используются такие окна с кнопкой «ОК» и требует от юзера клика по кнопке. Окошки появляются, например, при добавлении в закладки или повторном голосовании. Эти окошки можно вызвать и самому для своих модулей.

Плюсы тоста:

• Делаем только шаблоном, файлы движка не трогаем.
• Есть прогресс бар, когда тост исчезнет. Тост исчезнет сам, но мы можем и принудительно убрать его кликнув на крестик.
• Можно вызвать сколько угодно тостов одновременно.
• Можно указать оформление тоста (информация, успех, ошибка, предупреждение), время исчезновения, текст и заголовок.

DLE окна вшитые в файлы движка, по умолчанию имеют стиль «информация» и таймер 5 секунд. Можно изменить поведение по умолчанию, но нельзя изменить каждое окно, так как они в файлах движка, а мы их трогать не будем. Зато окна, которые мы вызываем сами, мы можем настраивать как угодно!

Установка:

1. Скачайте ниже архив с JS файлом. В этом файле весь код тоста, который следует разместить в папке JS шаблона. Внутри можно изменить html, например иконки. В файле прописан набор иконок от Font Awesome.
2. В main.tpl перед </body> добавить:
   

   <script src="{THEME}/js/toast.js" defer></script>

3. Добавить в CSS стили:
   

   .flex-grow-1 {flex: 1 1 0; max-width: 100%; min-width: 50px;}
   .toasts {position: fixed; right: 10px; top: 20px; z-index: 990; display: grid; gap: 20px;}
   .toast {background-color: #fff; color: #000; border-radius: 6px; overflow: hidden;
   	position: relative; width: 400px; display: flex; align-items: center; gap: 20px; 
   	padding: 16px 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); --accent: #00a2ff; 
   	animation: showToast 0.5s ease forwards; max-width: calc(100vw - 40px);}
   .toast__icon {font-size: 28px; color: var(--accent);}
   .toast__title {font-weight: 700;}
   .toast__text {font-size: 14px;}
   .toast__close {font-size: 18px; margin: 0 -10px; display: grid; place-items: center; 
   	cursor: pointer; opacity: 0.6; width: 40px; height: 40px;}
   .toast::after {content: ''; width: 100%; height: 3px; background-color: var(--accent); 
   	position: absolute; left: 0; bottom: 0; animation: progressToast var(--toast-timer) linear forwards}
   .toast--success {--accent: #41b92f;}
   .toast--warning {--accent: #f4bd00;}
   .toast--error {--accent: #dd3954;}
   .toast--is-hiding {animation: hideToast 0.5s ease forwards;}
   @keyframes progressToast {
   	100% {width: 0}
   }
   @keyframes showToast {
   	0% {transform: translateX(calc(100% + 20px));}
   	40% {transform: translateX(-5%);}
   	80% {transform: translateX(0%);}
   	100% {transform: translateX(-10px);}
   }
   @keyframes hideToast {
   	0% {transform: translateX(-10px);}
   	40% {transform: translateX(0%);}
   	80% {transform: translateX(-5%);}
   	100% {transform: translateX(calc(100% + 20px));}
   }

Как использовать:

Все DLE alert окна уже заменились. Попробуйте проголосовать повторно в любой новости и увидите.

Для своих нужд окно вызывается JS кодом:

DLEalert('Все круто',  'Тестим успех', 'success', 5000);

Например, вызвать тост можно по клику на кнопку:

<a href="#" onclick="DLEalert('Все круто', 'Тестим успех','success');return false;">вызовем с стилем успех</a>

Для вывода используются 4 параметра, первые 2 обязательны:

• Текст.
• Заголовок.
• Стиль. (доступны: info, success, error, warning).
• Таймер в миллисекундах.

Если в main.tpl добавить следующий код, то неавторизованным посетителям будет выводиться сообщение со стилем «информация» и таймером 6 секунд:

[group=5]
<script>
    window.addEventListener('load', ()=> {
    const uw = sessionStorage.getItem('userwelcome');
    if (!uw) DLEalert('Войдите на сайт и вы сможете комментировать, оценивать новости и скачивать файлы',  'Вы не авторизованы', 'info', 6000);
    sessionStorage.setItem('userwelcome',1);
    });
</script>
[/group]

Автор кода: webramdo 🔗 (сайт не доступен)
Источник: 🔗

PS лично сам код не проверял в работе. Но т. к. сайт webrambo не доступен, решил что код в блоге лишним на будущее не будет…