Компоненты
Модальные окна
Модальные окна полностью переписаны, сейчас используется делегирование как при открытии так и в самом модальном окне. Как следствие отсутствуют проблемы с динамическим добавлением элементов: кнопок вызова и самих модальных окон
В файле init-modals.js создаётся экземпляр класса Modals который записывается в переменную modals, им вы можете пользоваться по проекту при необходимости, так же он записывается в window.modals.
Используйте в разработке экспортируемую переменную modals, window сделан для бэкэнда
Модальные окна состоят из следующих файлов: ios-checker.js, focus-lock.js, scroll-lock.js, modals.js, init-modals.js, и modal.scss все файлы обязательны к переносу в проект! Так же у вас в проекте должно находится два утилитарных класса для блокировки страницы:
.scroll-lock-ios {
position: fixed;
overflow: hidden;
}
.scroll-lock {
overflow: hidden;
}
Обязательные data атрибуты
data-open-modal="Имя модального окна" |
Устанавливается на кнопке вызова модального окна |
---|---|
data-modal="Имя модального окна" |
Устанавливается на модальном окне |
data-close-modal |
Устанавливается на элементе который должен закрыть модальное окно, по умолчанию установлен на оверлее и на кнопки закрытия, может добавлятся на любые элементы в модальном окне. |
Не обязательные data атрибуты
data-focus |
Устанавливается на том элементе который при открытии модального окна должен попасть в фокус, если не установить то в фокус попадёт первый интерактивный элемент в модальном окне. Данный data атрибут не относится к модулю модальных окон, он относится к модулю блокировки фокуса внутри модального окна |
---|---|
data-close-modal="back" |
Устанавливается на элементе который должен вернуть к ранее закрытому модальному окну |
Настройки
При создании экземпляра класса передаются настройки в формате ключ - "Имя модального окна" значение - объект
По умолчанию работают настройки по умолчанию. На всех ссылках и кнопках по умолчанию стоит preventDefault
stopPlay |
Остановка проигрывание стандартных HTML элементов video и audio, по умолчанию true |
---|---|
lockFocus |
Блокировка фокуса внутри модального окна, по умолчанию true. Если внутри модального окна нет фокусируемых элементов то при нажатии на клавишу tab или сочетание shift + tab действие по умолчанию будет отменено. Если внутри модального окна есть только один фокусируемый элемент то при нажатии на клавишу tab или сочетание shift + tab фокус с него уходить не будет. |
startFocus |
Блокировка фокуса внутри модального окна, по умолчанию true. Если поставить false то при открытии ни один из элементов модального окна не попадёт в фокус |
focusBack |
При закрытии модального окна возвращает фокус на тот элемент который находился в фокусе перед открытием модального окна, по умолчанию true |
eventTimeout |
Таймаут который отрабатывает при разблокировке скрола при закрытии, по умолчанию 400мс, добавлен для того что бы сгладить появление полосы прокрутки, убрать дёрганье модального окна + через данный таймаут снимаются и вешаются обработчики на модальное окно и документ это сделано для того что бы убрать баги связанные с добавлением лока фокуса внутри модального окна так как при зажатой клавише enter и при фокусе кнопки закрытия в модальном окне оно начинает открываться и закрываться что приводит к багам с появлением полосы прокрутки и тд |
resetScrollPos |
Сбрасывает положение прокрутки модалки при повторном открытии |
openCallback |
Callback при открытии, по умолчанию false |
closeCallback |
Callback при закрытии, по умолчанию false |
const settings = {
'default': {
preventDefault: true,
stopPlay: true,
lockFocus: true,
resetScrollPos: false,
eventTimeout: 400,
openCallback: false,
closeCallback: false,
},
// modal-1 добавлен исключительно для примера при добавлении на проект ключ и обект записанный в нём нужно удалить
'modal-1': {
openCallback: () => console.log('Я отработаю при открытии modal-1'),
closeCallback: () => console.log('Я отработаю при закрытии modal-1'),
},
};
Методы
modals.open("Имя модального окна") |
Открывает переданное модальное окно |
---|---|
modals.close("Имя модального окна") |
Закрывает переданное модальное окно |
Дополнения
Так же в файле инициализации есть закомментированный код. Он добавлен для открытия нового модального окна из колбэка закрытия. Судьба его пока не известна, так как кейс крайне редкий и все случаи которые пока были на практике перекрывает метод modals.open('Имя модального окна'), например показ модального окна с сообщением об успешной отправки формы в случае если сама форма находилась в модальном окне
// Здесь реализован пример открытия модалки через колбэк закрытия
// const openModalInCloseCallback = (name, context = this) => {
// context._enableScrolling = false;
// context._setSettings('default');
// modals.open(name);
// };
// closeCallback() {
// openModalInCloseCallback('modal-5');
// },
Добавление Youtube видео
Добавлена автоматическая остановка воспроизведения Youtube видео и при необходимости автозапуск воспроизведения при открытии
Для корректной работы iframe должен быть обёрнут в div с дата атрибутом data-iframe.
Важно!!! в src iframe в конце должно быть дописано ?enablejsapi=1.
Полный пример src: src="https://www.youtube.com/embed/FmzHq3U0UFE?enablejsapi=1". Примеры в модальных окнах 4 и 5
Для автовоспроизведения div нужно добавить дата атрибут data-auto-play. Пример в модальном окне 5
example-1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
example-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
example-3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
example-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
example-5
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
example-6
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
example-7
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel doloremque asperiores amet neque quam architecto sequi voluptatum odio laudantium earum sit voluptas ipsam eius praesentium, rem, aliquam dolores porro. Tenetur.
example-8
Можно вызвать начальную модалку, история переходов так же будет сохранена, работает по принципу стека, первым зашел - последним вышел.
При закрытии модалки через data-open-modal или по оверлею, история переходов сбрасывается
История всегда записывается при открытии любой модалки и последний элемент в стеке это активная модалка