Настройка в TypeScript-проектах

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

Установка библиотеки в проект

Для начала работы с BasicLightbox необходимо установить саму библиотеку. В TypeScript-проекте это делается с помощью менеджера пакетов npm или yarn.

npm install basiclightbox

Или с использованием yarn:

yarn add basiclightbox

После установки можно приступить к настройке и использованию библиотеки.

Подключение BasicLightbox в TypeScript

Чтобы интегрировать BasicLightbox в TypeScript, нужно импортировать её в файл с кодом. Существует несколько вариантов импорта, в зависимости от структуры вашего проекта.

  1. ES6-импорт:

    import * as basicLightbox from 'basiclightbox';

  2. CommonJS-импорт:

    const basicLightbox = require('basiclightbox');

Типы для работы с библиотекой в TypeScript

TypeScript поддерживает строгую типизацию, поэтому важно удостовериться, что все объекты, с которыми работает BasicLightbox, имеют корректные типы. В отличие от JavaScript, в TypeScript необходимо использовать декларации типов для библиотек, которые их не предоставляют напрямую.

Для BasicLightbox нужно либо использовать встроенные типы, либо дополнительно установить файл типов, если он доступен. На момент написания данной статьи, библиотека BasicLightbox не предоставляет типы по умолчанию, поэтому можно использовать либо обобщения, либо написать собственные типы.

Если типы не подключены, можно создать кастомные декларации типов в проекте. Например, можно создать файл basiclightbox.d.ts в директории с типами и описать интерфейс:

declare module 'basiclightbox' {
  export interface Lightbox {
    show(): void;
    close(): void;
  }

  export function create(content: string | HTMLElement): Lightbox;
}

Теперь можно использовать библиотеку в TypeScript с типами. Если вы используете JavaScript и TypeScript в одном проекте, вы также можете создать файл декларации типов, чтобы избежать ошибок при компиляции.

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

Основная задача библиотеки — это создание и отображение модальных окон. Для этого используется функция create, которая принимает контент для модального окна (HTML-строку или элемент).

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

import * as basicLightbox from 'basiclightbox';

const lightbox = basicLightbox.create(`
  <img src="path_to_image.jpg" width="800" height="600">
`);

lightbox.show();

В этом примере создаётся модальное окно с изображением. Метод show() инициирует отображение модального окна на странице. Также существует метод close(), который скрывает окно.

Интеграция с элементами DOM

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

Пример:

const image = document.querySelector('img');

image?.addEventListener('click', () => {
  const lightbox = basicLightbox.create(`
    <img src="${image.src}" width="1200" height="900">
  `);

  lightbox.show();
});

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

Типизация контента модального окна

BasicLightbox позволяет использовать как строковый контент, так и элементы DOM для создания модальных окон. Если в качестве контента используется HTML-код, он должен быть типизирован как строка. Если используется DOM-элемент, необходимо убедиться, что передаваемый элемент имеет правильный тип.

Пример с использованием DOM-элемента:

const div = document.createElement('div');
div.innerHTML = '<p>Текст внутри модального окна</p>';

const lightbox = basicLightbox.create(div);
lightbox.show();

Здесь создаётся div с вложенным текстом, который используется как контент для модального окна.

Управление состоянием модального окна

Модальное окно может быть закрыто вручную с помощью метода close(), а также автоматически при клике вне его области. Чтобы гарантировать корректную работу в TypeScript, важно учитывать, что библиотека не предоставляет явной типизации для событий, связанных с закрытием окна. Однако можно обеспечить типизацию закрытия, используя методы класса Lightbox.

Пример:

const lightbox = basicLightbox.create('<img src="image.jpg">');

lightbox.show();

// Закрытие модального окна через 5 секунд
setTimeout(() => {
  lightbox.close();
}, 5000);

Этот код создаёт окно с изображением, которое автоматически закрывается через 5 секунд.

Работа с клавишами и событиями

BasicLightbox поддерживает взаимодействие с клавишами, например, закрытие окна при нажатии клавиши Escape. Для этого можно добавить обработчик событий в проект.

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    lightbox.close();
  }
});

Такой обработчик позволяет закрыть модальное окно при нажатии на клавишу Escape, обеспечивая удобное взаимодействие с пользователем.

Настройка стилей модального окна

Хотя библиотека BasicLightbox предоставляет стандартные стили для отображения модальных окон, иногда требуется их кастомизация. Это можно сделать через добавление пользовательских CSS-правил.

Пример кастомизации стилей:

.basicLightbox .basicLightbox__content {
  border: 5px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.7);
}

Этот CSS-код изменяет внешний вид модального окна, добавляя белую рамку, тень и изменяя фон.

Заключение

Использование библиотеки BasicLightbox в TypeScript требует учёта специфики типизации и взаимодействия с DOM. Типизация контента, управление состоянием окна, обработка событий и кастомизация стилей — все эти моменты необходимо учитывать при разработке. Благодаря гибкости библиотеки и мощным инструментам TypeScript, можно легко создавать элегантные и функциональные модальные окна для различных целей на сайте.

Оглавление