redissx 248 Опубликовано: 1 декабря 2023 Рассказать Опубликовано: 1 декабря 2023 (изменено) Данный хак заменяет стандартное информационное окошко 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 2 2 3 Цитата Ссылка на сообщение Поделиться на других сайтах
Captain 621 Опубликовано: 1 декабря 2023 Рассказать Опубликовано: 1 декабря 2023 И чем это привлечёт пользователя? Цитата Ссылка на сообщение Поделиться на других сайтах
redissx 248 Опубликовано: 1 декабря 2023 Рассказать Опубликовано: 1 декабря 2023 (изменено) Автор 51 минуту назад, Captain сказал: И чем это привлечёт пользователя? 1. А разве где-то написано что ставилась задача привлечь пользователя? 2. Если окошко просто информационное, которое о чём-то уведомляет, совсем не обязательно пользователя заставлять нажимать кнопку OK. Посмотрите сайты, так уже давно не делают. Тенденция к тому чтобы пользователя не утруждать лишними кликами. Сравните окошко посередине экрана, который не уберётся пока не нажмёшь кнопку, и сообщение в углу экрана, которое автоматически исчезнет с красивой анимацией. В админке мы можем редактировать шаблон. При сохранении там не появляется окошко посередине экрана с кнопкой OK, там появляется небольшое сообщение справа вверху. И это хорошо, это удобно. Представьте что пришлось бы каждый раз нажимать кнопку OK при сохранении. Совсем забыл, а ведь когда то так и было. А теперь идём на сайт, при добавлении в закладки появляется окошко где нужно нажать OK чтобы она ушло. Хотя в какой в этом смысл? Пользователю нужно уведомить, а не заставлять нажимать лишние кнопки. Это банально вопрос удобства. 3. Это не только для того чтобы заменить окошки в движке. Это для разработчика, например когда модуль о чём-то уведомляет можно делать разные сообщения. Собственно я для себя это написал и решил поделиться. Недавно сделал плеер, плеер уведомляет о различных действиях, добавить в плейлист, убрать из плейлиста, зациклить трек, перемешать плейлист, трек уже есть в плейлисте - обо всём этом плеер ненавязчиво сообщает пользователю этими тостами с различным оформлением. Вот вам живой пример использования. Я абсолютно уверен, в какой-нибудь новой версии ДЛЕ что-то типа этого появится. А пока можете пользоваться этим) Изменено 1 декабря 2023 пользователем redissx Цитата Ссылка на сообщение Поделиться на других сайтах
kamensk 85 Опубликовано: 1 декабря 2023 Рассказать Опубликовано: 1 декабря 2023 51 минуту назад, redissx сказал: Я абсолютно уверен, в какой-нибудь новой версии ДЛЕ что-то типа этого появится. Как говорится - это надо было сделать еще вчера. А также уже давно требуется морально обновить верстку, функционал пллеров - добавить функций... Цитата Ссылка на сообщение Поделиться на других сайтах
redissx 248 Опубликовано: 1 декабря 2023 Рассказать Опубликовано: 1 декабря 2023 (изменено) Автор 55 минут назад, kamensk сказал: Как говорится - это надо было сделать еще вчера. А также уже давно требуется морально обновить верстку, функционал пллеров - добавить функций... Если открыть dlejs.js то мы увидим кучу этих уведомлений. И что главное различного характера. Есть уведомления, что действие выполнено (успех), есть уведомления что действие уже было совершено и отмена повторного действия (предупреждение) и так далее. На мой взгляд, было бы классно помечать различный характер уведомлений различным оформлением и конечно делать это ненавязчиво, не закрывая обзор экрана и не заставляя нажимать кнопку. А вы знали, что человек намного быстрее воспринимает цветовую информацию, чем текстовую?) Кстати говоря, в пожеланиях к новой версии периодически всплывает пожелание сделать различные оформления в зависимости от характера сообщения для {info} в шаблоне. Изменено 1 декабря 2023 пользователем redissx Цитата Ссылка на сообщение Поделиться на других сайтах
celsoft 6 056 Опубликовано: 1 декабря 2023 Рассказать Опубликовано: 1 декабря 2023 2 часа назад, redissx сказал: Я абсолютно уверен, в какой-нибудь новой версии ДЛЕ что-то типа этого появится. А пока можете пользоваться этим) Даже запланировано давно. Поэтому рано или поздно руки точно дойдут. Я согласен, это давно имеет смысл обновить. 4 Цитата Ссылка на сообщение Поделиться на других сайтах
redissx 248 Опубликовано: 3 декабря 2023 Рассказать Опубликовано: 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 1 Цитата Ссылка на сообщение Поделиться на других сайтах
kamensk 85 Опубликовано: 3 декабря 2023 Рассказать Опубликовано: 3 декабря 2023 3 часа назад, redissx сказал: пользователям будет показывать сообщение с стилем "информация" Информацию "Задонать червонец, по братски!")) Несколько лет назад, после того, как владелец ок.ру сменился - на протяжении длительного времени при заходе на сайт, постоянно всплывало окно - "КУПИ ОКи!" Цитата Ссылка на сообщение Поделиться на других сайтах
bykino 1 Опубликовано: 27 марта Рассказать Опубликовано: 27 марта Скажите, пожалуйста, как можно внедрить на DLE 17.1 вместо DLE push (или заменить) Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 27 марта Рассказать Опубликовано: 27 марта 1 час назад, bykino сказал: Скажите, пожалуйста, как можно внедрить на DLE 17.1 вместо DLE push (или заменить) А зачем? Это ведь в 17.1 это и сделано но полноценно! А то что в начале топика не на все разделы работает. Зачем менять? Цитата Ссылка на сообщение Поделиться на других сайтах
redissx 248 Опубликовано: 27 марта Рассказать Опубликовано: 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 1 Опубликовано: 31 марта Рассказать Опубликовано: 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 33 Опубликовано: 31 марта Рассказать Опубликовано: 31 марта 2 часа назад, bykino сказал: Скажите, пожалуйста, где изменить время выполнение скрипта? Отлично! Я не знаю где это сделано в дле 17, но в этом который изначально в теме этой, файл toast.js если память не изменяет, там всего пару файликов которые в шаблон льются, посмотрите, помню там цифра 5000 (это милисекундах) вот эту циферку меняй.. Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.