Шаблоны для Datalife Engine

Купить платные адаптивные DLE шаблоны
по приятным ценам.

Время работы: 10.00 - 18.00 (МСК, пн-пт)
Telegram: @vugluskr2023
Техническая поддержка
Корзина 0
Внимание: Обновление шаблонов до 15 и 17.1 версии. Решение проблем с большими краткими новостями, постерами, рейтингом.
Адаптивные dle шаблоны   Советы и новости   Замена окошка DLEalert на тост (Toast)

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

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

Плюсы тоста:


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

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

Зато окна, которые мы вызываем сами, мы можем настраивать как угодно! Давайте посмотрим на результат.
Замена окошка DLEalert на тост (Toast)


Установка:


1. Скачайте файл. В этом файле весь код тоста, можете изменить html, например иконки. Я использую для иконок набор Font Awesome.
toast.js [1,46 Kb] (cкачиваний: 37)

2. Подключаем этот файл, впишите свой верный путь к файлу, у меня он в папке js шаблона
<script src="{THEME}/js/toast.js?v={cache-id}" defer></script>

Подключаем перед
</body>

3. В ваш css файл добавить

.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__descr {flex: 1 1 0; max-width: 100%; min-width: 50px;}
.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);

У нас 4 параметра, первые 2 обязательны. Параметры:
- Текст.
- Заголовок.
- Стиль. Доступны: info, success, error, warning.
- Таймер в милисекундах.

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


Пример 2. Если в 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]
Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
У меня было пять яблок, два яблока я съел. Сколько у меня осталось яблок? Напиши буквой например десять
Отзывов (5)
Burial
Burial Посетители 17 декабря 2023 21:44
Стили конфликтуют с шаблоном). Например с KINOPUSH (меню авторизации с настройками ломается). Хотя, если убрать строку из css .flex-grow-1, то все норм.
webrambo
webrambo Администраторы 17 декабря 2023 21:48
Burial, конфликта быть не должно. Что значит ломается? Гляну завтра. Единственный вариант который приходит на ум - это конфликт иконок, и то конфликт может идти только из иконок подключенных к тосту. В шаблоне KinoPush подключен font awesome 6 free. Если это из-за иконок, надо убирать иконки из подключения тоста и в коде тоста заменить идентификатор иконок на те, что в шаблоне. Но проблема может быть и в другом, на данный момент это просто предположение.

Тогда нужно убрать flex-grow , в шаблоне это есть. А ломать может, потому что код тоста подключен позже, в шаблоне что-нибудь меняется и перебивается заново. Код для других, поэтому об этом не подумал. В моих шаблонах это есть по умолчанию. Завтра обновлю CSS для тоста.

Добавлено: код css немного изменен, теперь конфликта не будет.
Олег
Олег Гости 16 января 2024 21:00
webrambo,
Конфликт на сайтах где подключены стили bootstrap.
Я просто переименовал toast на _toast и toasts на _toasts и все заработало.
Просто в стилях bootstrap есть класс toast, отсюда и был конфликт...
А так, спасибо за алерт!!! Отличная идея...
webrambo
webrambo Администраторы 17 января 2024 08:28
Олег, спасибо за информацию, пригодится.
Wows
Wows Гости 7 февраля 2024 05:21
Рэмбо красавчик. Нет нет а время от времени годные фишки выкладывает 👍

Все работает как нужно, только вызов по ссылке не работает. По всякому пробовал и версию jquery переключал и до скрипта ставил, и после, ничего не помогает. От нажатия на ссылку не вылетает окно.
<a href="#" onclick="DLEalert('Все круто', 'Тестим успех','success');return false;">вызовем с стилем успех</a>


P.S. Все заработало. Так и не понял почему сначала не работало)) Спасибо еще раз