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

[redissx 239]

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

Плюсы тоста:

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

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

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

 

Установка:
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 613]

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

[redissx 239]

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

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

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

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

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

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

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

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

[kamensk 83]

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

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

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

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

[redissx 239]

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

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

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

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

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

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

[celsoft 5 986]

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

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

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

[redissx 239]

Цитата

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

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

В маин.тпл в конец и неавторизованным пользователям будет показывать сообщение с стилем "информация" и таймером 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 83]

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

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

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

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

[bykino 1]

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

[igorek-art 28]

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

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

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

[redissx 239]

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

.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 1]

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 28]

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

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

Отлично!

 

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