Замена окошка DLEalert на тост (Toast)

NULLTOP » CMS » DLE » Хаки DLE » Замена окошка DLEalert на тост (Toast)

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

Плюсы тоста:

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

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

Установка:

Скачайте ниже архив с JS файлом. В этом файле весь код тоста, который следует разместить в папке JS шаблона. Внутри можно изменить html, например иконки. В файле прописан набор иконок от Font Awesome.

Найти в main.tpl код:

</body>

Добавить выше:

К стилям 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]

Хаки DLE

Внимание! У Вас нет прав для скачивания файла. Вам необходимо войти или зарегистрироваться. [Attention! You do not have the rights to download the file. You need to log in or register.]

Все материалы, представленные на сайте, носят исключительно ознакомительный (образовательный) характер! * Автор - пользователь, который добавил материал на сайт. Он может не являться разработчиком самого шаблона, скрипта или плагина.

Если ссылка битая, пожалуйста сообщите нам через форму комментариев или в ЛС

хак, dle

Комментарии

Screaming Frog SEO Spider: инструкция, полный гайд 2024

Представляем перевод полного и обновленного гайда по использованию инструмента для SEO-аудита сайта Screaming frog SEO Spider. Ниже вы найдете полный список актуальных на 2021 год рекомендаций о

17 программ для создания логотипа на ПК и телефоне

Лучшие программы для создания логотипов на ПК. Подробно рассмотрим особенности и возможности ТОП-11 программных обеспечений на компьютер, где можно сгенерировать эмблемы. Looka – AI-сервис для

AniPoisk v3.0 - Аниме шаблон DLE

AniPoisk - dashboard v3.0 это удивительный шаблон для DLE, который привлечет внимание, присутствует адаптивное оформление под разные виды устройство, из-за чего ты сможешь удобно смотреть аниме как

DataLife Engine v.17.1 Press Release

Этап разработки версии 17.1 , релиз находится на тестировании и предрелизной подготовке, ну а пока мы предлагаем вам ознакомиться с информацией о том, что ждет вас с выходом новой версии

CRM Perfect 3.1.4 - мощная CRM с открытым исходным кодом + премиум-дополнения

Perfex CRM v3.1.4 (+ADDONS) - система управления клиентами и проектами Новая версия системы для управления проектами и клиентами, что является отличным вариантом для любой компании, фрилансера и

Смотрите также: