Компоненты

Модальные окна

Модальные окна полностью переписаны, сейчас используется делегирование как при открытии так и в самом модальном окне. Как следствие отсутствуют проблемы с динамическим добавлением элементов: кнопок вызова и самих модальных окон

В файле 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"	Устанавливается на элементе который должен вернуть к ранее закрытому модальному окну

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

Компоненты

Модальные окна

Обязательные data атрибуты

Не обязательные data атрибуты

Настройки

Методы

Дополнения

Добавление Youtube видео

example-1

example-2

example-3

example-4

example-5

example-6

example-7

example-8