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

redissx · 1 декабря 2023

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

Плюсы тоста:

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

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

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

1701418759_firefox_screenshot_2023-12-01

Установка:
1. Скачайте файл. В этом файле весь код тоста, можете изменить html, например иконки. Я использую для иконок набор Font Awesome.
https://webrambo.ru/index.php?do=download&id=23

Содержимое этого файла, можете не скачивать, а создать сами

Скрытый текст





const toastDetails = {
	info: {
		icon: 'fa-info-circle',
		classmod: 'toast--info'
	},
	success: {
		icon: 'fa-check-circle',
		classmod: 'toast--success'
	},
	warning: {
		icon: 'fa-exclamation-triangle',
		classmod: 'toast--warning'
	},
	error: {
		icon: 'fa-times-circle',
		classmod: 'toast--error'
	},
};

const removeToast = (toast)=> {
	toast.classList.add('toast--is-hiding');
	if (toast.timeoutId) clearTimeout(toast.timeoutId);
	setTimeout( ()=> toast.remove(),600);
};

const createToast = (message, title, style, timer)=> {
	let toasts = document.querySelector('.toasts'); 
	if (!toasts) {
		toasts = document.createElement('div');
		toasts.classList.add('toasts');
		document.querySelector('body').appendChild(toasts);
	};
	const { icon,classmod } = toastDetails[style];
	const toast = document.createElement('div');
	toast.className = `toast ${classmod}`;
	toast.style.setProperty('--toast-timer',timer+'ms');
	toast.innerHTML = ` <div class="toast__icon fas ${icon}"></div>
						<div class="toast__descr flex-grow-1">
							<div class="toast__title">${title}</div>
							<div class="toast__text">${message}</div>
						</div>
						<div class="toast__close fal fa-times" onclick="removeToast(this.parentElement)"></div>`;
	toasts.appendChild(toast);	
	toast.timeoutId = setTimeout( ()=> removeToast(toast),timer);		
};

function DLEalert(message, title, style = 'info', timer = 5000){
	createToast(message, title, style, timer);
};

2. Подключаем этот файл, впишите свой верный путь к файлу, у меня он в папке js шаблона

<script src="{THEME}/js/toast.js?v={cache-id}" defer></script>

Подключаем перед

</body>

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);

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

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

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

Спасибо за внимание. Источник https://webrambo.ru/220-zamena-okoshka-dlealert-na-tost-toast.html

Изменено 1 декабря 2023 пользователем redissx

Captain · 1 декабря 2023

И чем это привлечёт пользователя?

redissx · 1 декабря 2023

51 минуту назад, Captain сказал:

И чем это привлечёт пользователя?

1. А разве где-то написано что ставилась задача привлечь пользователя?

2. Если окошко просто информационное, которое о чём-то уведомляет, совсем не обязательно пользователя заставлять нажимать кнопку OK. Посмотрите сайты, так уже давно не делают. Тенденция к тому чтобы пользователя не утруждать лишними кликами. Сравните окошко посередине экрана, который не уберётся пока не нажмёшь кнопку, и сообщение в углу экрана, которое автоматически исчезнет с красивой анимацией.

В админке мы можем редактировать шаблон. При сохранении там не появляется окошко посередине экрана с кнопкой OK, там появляется небольшое сообщение справа вверху. И это хорошо, это удобно. Представьте что пришлось бы каждый раз нажимать кнопку OK при сохранении. Совсем забыл, а ведь когда то так и было. А теперь идём на сайт, при добавлении в закладки появляется окошко где нужно нажать OK чтобы она ушло. Хотя в какой в этом смысл? Пользователю нужно уведомить, а не заставлять нажимать лишние кнопки. Это банально вопрос удобства.

3. Это не только для того чтобы заменить окошки в движке. Это для разработчика, например когда модуль о чём-то уведомляет можно делать разные сообщения. Собственно я для себя это написал и решил поделиться. Недавно сделал плеер, плеер уведомляет о различных действиях, добавить в плейлист, убрать из плейлиста, зациклить трек, перемешать плейлист, трек уже есть в плейлисте - обо всём этом плеер ненавязчиво сообщает пользователю этими тостами с различным оформлением. Вот вам живой пример использования.

Я абсолютно уверен, в какой-нибудь новой версии ДЛЕ что-то типа этого появится. А пока можете пользоваться этим)

Изменено 1 декабря 2023 пользователем redissx

kamensk · 1 декабря 2023

51 минуту назад, redissx сказал:

Я абсолютно уверен, в какой-нибудь новой версии ДЛЕ что-то типа этого появится.

Как говорится - это надо было сделать еще вчера.

А также уже давно требуется морально обновить верстку, функционал пллеров - добавить функций...

redissx · 1 декабря 2023

55 минут назад, kamensk сказал:

Как говорится - это надо было сделать еще вчера.

А также уже давно требуется морально обновить верстку, функционал пллеров - добавить функций...

Если открыть dlejs.js то мы увидим кучу этих уведомлений. И что главное различного характера. Есть уведомления, что действие выполнено (успех), есть уведомления что действие уже было совершено и отмена повторного действия (предупреждение) и так далее. На мой взгляд, было бы классно помечать различный характер уведомлений различным оформлением и конечно делать это ненавязчиво, не закрывая обзор экрана и не заставляя нажимать кнопку. А вы знали, что человек намного быстрее воспринимает цветовую информацию, чем текстовую?)

Кстати говоря, в пожеланиях к новой версии периодически всплывает пожелание сделать различные оформления в зависимости от характера сообщения для {info} в шаблоне.

Изменено 1 декабря 2023 пользователем redissx

celsoft · 1 декабря 2023

2 часа назад, redissx сказал:

Я абсолютно уверен, в какой-нибудь новой версии ДЛЕ что-то типа этого появится. А пока можете пользоваться этим)

Даже запланировано давно. Поэтому рано или поздно руки точно дойдут. Я согласен, это давно имеет смысл обновить.

redissx · 3 декабря 2023

Цитата

И чем это привлечёт пользователя?

Меня осенило!)

В маин.тпл в конец и неавторизованным пользователям будет показывать сообщение с стилем "информация" и таймером 6 секунд.


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

Изменено 3 декабря 2023 пользователем redissx

kamensk · 3 декабря 2023

3 часа назад, redissx сказал:

пользователям будет показывать сообщение с стилем "информация"

Информацию "Задонать червонец, по братски!"))

Несколько лет назад, после того, как владелец ок.ру сменился - на протяжении длительного времени при заходе на сайт, постоянно всплывало окно - "КУПИ ОКи!"

bykino · 27 марта

Скажите, пожалуйста, как можно внедрить на DLE 17.1 вместо DLE push (или заменить)

igorek-art · 27 марта

1 час назад, bykino сказал:

Скажите, пожалуйста, как можно внедрить на DLE 17.1 вместо DLE push (или заменить)

А зачем? Это ведь в 17.1 это и сделано но полноценно! А то что в начале топика не на все разделы работает. Зачем менять?

redissx · 27 марта

Я тоже не понимаю зачем, ведь пуши фактически то же самое теперь. Оформление делается в шаблоне. Вот оформление от меня, немного получше На мой взгляд

.DLEPush {z-index: 1000; position: fixed; right: 20px; top: 20px;}

@keyframes DLEPush-show {

 0% {transform: translateY(100%); opacity: 0;}

 100% {transform: translateY(0); opacity: 1;}

}

.DLEPush-notification.wrapper {animation-name: DLEPush-show; animation-duration: 0.3s; position: relative;

 display: grid; gap: 10px; margin-bottom: 10px; width: 400px; max-width: calc(100vw - 40px); 

 color: #333; background-color: hsl(var(--hue,174), 41%, 91%); box-shadow: 0 10px 15px rgb(0 0 0 / 15%); 

 border-radius: 6px; padding: 15px 30px 15px 60px; overflow: hidden;}

.DLEPush-notification .DLEPush-icon {display: grid; place-items: center; position: absolute; left: 0; top: 0; 

 color: #fff; background-color: hsl(var(--hue,174), 100%, 27%); width: 45px; height: 100%;}

.DLEPush-notification .DLEPush-icon svg {scale: 0.8;}

.DLEPush-notification .DLEPush-header {font-weight: bold; font-size: 1.1em;}

.DLEPush-notification .DLEPush-header:empty {display: none;}

.DLEPush-notification .DLEPush-close {position: absolute; top: 50%; right: 10px; background: none;

 border: 0; padding: 0; color: inherit; font-size: 1.4em; transform: translateY(-50%);}

.DLEPush-notification.wrapper.push-success {--hue: 174;}

.DLEPush-notification.wrapper.push-warning {--hue: 36;}

.DLEPush-notification.wrapper.push-error {--hue: 14;}

Изменено 27 марта пользователем redissx

bykino · 31 марта

27.03.2024 в 15:46, igorek-art сказал:

А зачем? Это ведь в 17.1 это и сделано но полноценно! А то что в начале топика не на все разделы работает. Зачем менять?

Скажите, пожалуйста, где изменить время выполнение скрипта?

27.03.2024 в 16:36, redissx сказал:

Я тоже не понимаю зачем, ведь пуши фактически то же самое теперь. Оформление делается в шаблоне. Вот оформление от меня, немного получше На мой взгляд


.DLEPush {z-index: 1000; position: fixed; right: 20px; top: 20px;}

@keyframes DLEPush-show {

 0% {transform: translateY(100%); opacity: 0;}

 100% {transform: translateY(0); opacity: 1;}

}

.DLEPush-notification.wrapper {animation-name: DLEPush-show; animation-duration: 0.3s; position: relative;

 display: grid; gap: 10px; margin-bottom: 10px; width: 400px; max-width: calc(100vw - 40px); 

 color: #333; background-color: hsl(var(--hue,174), 41%, 91%); box-shadow: 0 10px 15px rgb(0 0 0 / 15%); 

 border-radius: 6px; padding: 15px 30px 15px 60px; overflow: hidden;}

.DLEPush-notification .DLEPush-icon {display: grid; place-items: center; position: absolute; left: 0; top: 0; 

 color: #fff; background-color: hsl(var(--hue,174), 100%, 27%); width: 45px; height: 100%;}

.DLEPush-notification .DLEPush-icon svg {scale: 0.8;}

.DLEPush-notification .DLEPush-header {font-weight: bold; font-size: 1.1em;}

.DLEPush-notification .DLEPush-header:empty {display: none;}

.DLEPush-notification .DLEPush-close {position: absolute; top: 50%; right: 10px; background: none;

 border: 0; padding: 0; color: inherit; font-size: 1.4em; transform: translateY(-50%);}

.DLEPush-notification.wrapper.push-success {--hue: 174;}

.DLEPush-notification.wrapper.push-warning {--hue: 36;}

.DLEPush-notification.wrapper.push-error {--hue: 14;}

Отлично!

igorek-art · 31 марта

2 часа назад, bykino сказал:

Скажите, пожалуйста, где изменить время выполнение скрипта?

Отлично!

Я не знаю где это сделано в дле 17, но в этом который изначально в теме этой, файл toast.js если память не изменяет, там всего пару файликов которые в шаблон льются, посмотрите, помню там цифра 5000 (это милисекундах) вот эту циферку меняй..

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

Рекомендованные сообщения

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

Captain 623

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

kamensk 86

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 076

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

kamensk 86

Ссылка на сообщение

Поделиться на других сайтах

bykino 1

Ссылка на сообщение

Поделиться на других сайтах

igorek-art 33

Ссылка на сообщение

Поделиться на других сайтах

redissx 251

Ссылка на сообщение

Поделиться на других сайтах

bykino 1

Ссылка на сообщение

Поделиться на других сайтах

igorek-art 33

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению