Обработка событий

Библиотека BasicLightbox предоставляет простой и эффективный способ создания модальных окон для отображения изображений или другого контента. Одним из ключевых аспектов взаимодействия с пользователем является обработка событий, которые могут происходить во время работы с модальными окнами. В этой главе рассмотрены основные события, связанные с открытием, закрытием и взаимодействием с окнами в BasicLightbox.

Событие открытия модального окна

Открытие модального окна — это первичное событие, которое запускает весь процесс взаимодействия. Когда окно открывается, необходимо управлять его состоянием и действиями, которые происходят в этот момент. В BasicLightbox это событие происходит при вызове метода show().

Пример кода для открытия окна:

const lightbox = basicLightbox.create(`
  <img src="image.jpg" alt="Описание изображения">
`);
lightbox.show();

После вызова метода show() можно добавить обработчик события открытия модального окна, если необходимо выполнить дополнительные действия. Для этого используется событие onShow, которое можно назначить через объект настроек при создании окна:

const lightbox = basicLightbox.create(`
  <img src="image.jpg" alt="Описание изображения">
`, {
  onShow: (instance) => {
    console.log('Модальное окно открылось');
  }
});
lightbox.show();

Событие закрытия модального окна

Закрытие модального окна происходит при вызове метода close(). Однако можно также добавить обработчик события закрытия, используя опцию onClose. Это событие срабатывает, когда окно закрывается как результат действий пользователя (например, при клике по фону или кнопке закрытия), а также при вызове метода close() через JavaScript.

Пример с событием onClose:

const lightbox = basicLightbox.create(`
  <img src="image.jpg" alt="Описание изображения">
`, {
  onClose: () => {
    console.log('Модальное окно закрыто');
  }
});
lightbox.show();

// Закрытие модального окна
lightbox.close();

Обработка кликов по фону

Одним из стандартных поведений модальных окон является возможность закрытия окна при клике на его фон. Библиотека BasicLightbox по умолчанию включает это поведение. Однако можно управлять его активацией через опцию closable. По умолчанию фон является кликабельным для закрытия окна, но при установке closable: false это поведение можно отключить.

Пример с отключением клика по фону:

const lightbox = basicLightbox.create(`
  <img src="image.jpg" alt="Описание изображения">
`, {
  closable: false
});
lightbox.show();

События при взаимодействии с клавишами

Модальные окна BasicLightbox также поддерживают управление через клавиатуру. Например, при нажатии клавиши Esc окно автоматически закрывается. Это поведение встроено по умолчанию, и его можно изменить, отключив или настроив через соответствующие параметры.

Пример отключения закрытия окна клавишей Esc:

const lightbox = basicLightbox.create(`
  <img src="image.jpg" alt="Описание изображения">
`, {
  closable: false,  // отключение закрытия кликом по фону
  escapeClose: false  // отключение закрытия по клавише Esc
});
lightbox.show();

Интерактивность с контентом внутри окна

Библиотека поддерживает любые виды контента, включая изображения, видео и текст. Важно, что для работы с элементами внутри модального окна можно добавлять обработчики событий на эти элементы.

Пример добавления обработчика на изображение внутри модального окна:

const lightbox = basicLightbox.create(`
  <img src="image.jpg" alt="Описание изображения">
`, {
  onShow: (instance) => {
    const image = instance.element().querySelector('img');
    image.addEventListener('click', () => {
      console.log('Изображение было кликнуто');
    });
  }
});
lightbox.show();

В этом примере при клике на изображение внутри модального окна будет вызвана функция, которая выведет сообщение в консоль.

Динамическая работа с окнами

В BasicLightbox также возможно динамическое обновление контента внутри модального окна. Для этого можно использовать метод element(), который возвращает доступ к DOM-элементу окна. С помощью этого метода можно менять содержимое окна, а также добавлять или удалять события.

Пример динамической замены содержимого:

const lightbox = basicLightbox.create(`
  <img src="image1.jpg" alt="Изображение 1">
`);
lightbox.show();

// Динамическое изменение контента
setTimeout(() => {
  const image = lightbox.element().querySelector('img');
  image.src = 'image2.jpg';
  image.alt = 'Изображение 2';
}, 2000);

Использование событий для управления окнами

Иногда необходимо управлять поведением нескольких окон одновременно. Для этого можно создать несколько экземпляров модальных окон и использовать общие события для их синхронизации.

Пример работы с несколькими окнами:

const lightbox1 = basicLightbox.create(`
  <img src="image1.jpg" alt="Изображение 1">
`);
const lightbox2 = basicLightbox.create(`
  <img src="image2.jpg" alt="Изображение 2">
`);

lightbox1.show();
setTimeout(() => {
  lightbox2.show();
}, 1000);

setTimeout(() => {
  lightbox1.close();
  lightbox2.close();
}, 5000);

Этот код показывает два окна, где первое окно открывается, затем через секунду появляется второе. После пяти секунд оба окна закрываются.

Настройка событий для кастомных действий

Для более сложных сценариев можно использовать различные кастомные действия, основанные на событиях, чтобы создать уникальное поведение. В этом случае можно добавить дополнительные слушатели событий на instance.element(), например, для обработки пользовательских событий, таких как прокрутка, изменение размера окна и другие действия.

Пример добавления кастомного события:

const lightbox = basicLightbox.create(`
  <div class="custom-content">
    <p>Нажмите для выполнения действия</p>
  </div>
`, {
  onShow: (instance) => {
    const content = instance.element().querySelector('.custom-content');
    content.addEventListener('click', () => {
      alert('Клик по кастомному контенту!');
    });
  }
});
lightbox.show();

Этот код создает модальное окно с кастомным контентом, который реагирует на клики.

Итоги работы с событиями

Обработка событий в BasicLightbox предоставляет широкий спектр возможностей для настройки поведения модальных окон, как на уровне взаимодействия с пользователем, так и на уровне внутренней логики работы приложения. Учитывая простоту API и возможности настройки, библиотека предоставляет мощные инструменты для реализации динамичных и интерактивных модальных окон, способных удовлетворить различные требования интерфейсов.

Оглавление