Скрипты и стили
Информация
Стили - компонент не использует своих стилей, кроме тех, что идут в комплекте с библиотекой показа уведомлений IziToast.
Информация
Скрипты JavaScript - компонент использует JS написанный в формате модуля по стандарту ES6. Это означает, что скрипты подключаются вне основного потока и оказывают минимальное влияние на общую скорость загрузки всей страницы. А формат модуля даёт вам широкие возможности по кастомизации скриптов. Далее рассмотрим возможные варианты работы с JS данного компонента.
Обработка результатов отправки формы
Для этого существует событие afl_complete
document.addEventListener('afl_complete', e => {
console.log(e.detail.response); // ответ сервера
console.log(e.detail.form); // текущая форма
});
e.detail.response
содержит параметры success
(true или false); message
- сообщение об ошибке или успехе из параметров вызова сниппета successMessage
или validationErrorMessage
, если иное не задано в хуках; data
- массив данных с сервера, при этом в data.errors
- список ошибок валидации, data.redirectUrl
- ссылка на страницу переадресации, data.redirectTimeout
- задержка перед переадресацией; так же в e.detail.response.data
будут те параметры, которые вы передадите в вызове через transmittedParams
. Обнулив значение в data.redirectUrl
вы можете отменить переадресацию. Обнулив значение в e.detail.response.message
вы можете отменить показ стандартного уведомления и показать своё.
Обработка результатов инициализации всех форм
После инициализации всех форм на странице вызывается событие afl_init
в котором нет параметров. Поймать его можно так
document.addEventListener('afl_init', e => {
console.log(window.aflForms); // список всех инициализированных форм
});
Обработка загрузки файлов
По умолчанию обрабатывается один файл. Обработка производится тремя методами onUploadProgress
, onUploadFinished
, onUploadError
. Каждый из них принимает на вход объект события и форму. Вы можете переопределить все или некоторые из этих методов, расширив класс AjaxFormitLogin
и создав новый файл подключения, вместо стандартного assets/components/ajaxformitlogin/js/default.js
.
Использование библиотеки IziToast
Для этого необязательно использовать сниппеты входящие в состав пакета, как того требует AjaxForm. Предположим, что ваш JS лежит в assets/js/add_scripts.js. Тогда внутри этого файла нужно вставить следующий код
import AflIziToast from './../components/ajaxformitlogin/js/modules/aflizitoast.class.js';
const Notify = new AflIziToast({
"jsPath": "assets/components/ajaxformitlogin/js/lib/izitoast/iziToast.min.js",
"cssPath": "assets/components/ajaxformitlogin/css/lib/izitoast/iziToast.min.css",
"handlerClassName": "iziToast",
"handlerOptions": {
"timeout": 2000,
"position": "topCenter"
}
});
// далее вам будут доступны три метода показа уведомлений
Notify.success('Сообщение об успехе!');
Notify.error('Сообщение о неудаче.');
Notify.info('Информационное сообщение.');
При подключении своих скриптов укажите тегу script атрибут type="module"
.
Подключение своей библиотеки уведомлений
- Создайте свой JS класс расширяющий стандартный класс
AflNotify
, пример расширения можно посмотреть в файлеassets/components/ajaxformitlogin/js/modules/aflizitoast.class.js
. - Затем нужно изменить системные настройки
ajaxformitlogin_notify_classname
- указать имя созданного класса,ajaxformitlogin_notify_classname
- указать путь к файлу класса относительно файла основного класса компонентаassets/components/ajaxformitlogin/js/modules/ajaxformitlogin.class.js
. - Добавьте в файл
assets/components/ajaxformitlogin/js/message_settings.json
настройки своего класса уведомлений. Если настроек нет - укажите пустой объект.