Методы инициализации

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

Подключение библиотеки

Перед использованием tingle.js необходимо подключить саму библиотеку в проект. Существует несколько способов подключения, включая CDN и локальные файлы.

Подключение через CDN

Для подключения через CDN необходимо добавить следующие строки в раздел <head> HTML-документа:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.css">
<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.js"></script>

Этот способ является самым быстрым и удобным для прототипирования или небольших проектов, так как не требует скачивания файлов на локальную машину.

Локальное подключение

Если необходимо хранить библиотеку локально, следует скачать файлы tingle.js и добавить их в проект. Для этого можно скачать архив с официального репозитория или установить через npm:

npm install tingle.js

Затем подключить CSS и JS файлы в HTML-документ:

<link rel="stylesheet" href="path/to/tingle.min.css">
<script src="path/to/tingle.min.js"></script>

Создание модального окна

Для инициализации модального окна в tingle.js необходимо создать экземпляр модального окна, используя конструктор tingle.modal(). Это основной метод создания модального окна.

Пример базовой инициализации:

var modal = new tingle.modal();

Этот код создаёт пустое модальное окно, которое можно настроить с помощью дополнительных параметров. Если не задать настройки, окно будет иметь стандартное оформление и поведение.

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

Метод tingle.modal() принимает объект с конфигурационными параметрами, позволяя разработчику гибко настроить внешний вид и поведение окна. Все параметры можно разделить на несколько категорий: внешний вид, поведение и контент.

1. Внешний вид

Для настройки внешнего вида модального окна используются следующие параметры:

footer — если нужно добавить нижнюю панель с кнопками, параметр будет выглядеть так:
```
footer: true
```
Если не требуется футер, его можно исключить из конфигурации.
closeLabel — текст на кнопке закрытия модального окна:
```
closeLabel: 'Закрыть'
```
cssClass — добавление пользовательского класса для стилизации модального окна:
```
cssClass: ['my-modal']
```
closeButton — настройка кнопки закрытия окна. По умолчанию кнопка отображается, но её можно скрыть:
```
closeButton: false
```

2. Поведение

Модальное окно может иметь различные поведения, определяемые следующими параметрами:

open — метод, который открывает окно:
```
modal.open();
```
close — метод, который закрывает окно:
```
modal.close();
```
setContent — метод, позволяющий задать содержимое модального окна. Он принимает строку HTML-кода:
```
modal.setContent('<p>Контент модального окна</p>');
```
setTitle — для установки заголовка модального окна:
```
modal.setTitle('Заголовок');
```
addFooterBtn — метод для добавления кнопок в футер модального окна:
```
modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function() {
  modal.close();
});
```

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

3. Контент

Контент модального окна может быть динамически изменён с помощью метода setContent, который принимает HTML-строку. Например:

modal.setContent('<h1>Заголовок модального окна</h1><p>Текст модального окна</p>');

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

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

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

beforeClose — событие, которое срабатывает перед закрытием окна.
afterClose — событие, которое срабатывает после закрытия окна.

Для добавления обработчиков событий используется метод on(), который принимает два параметра: название события и функцию-обработчик. Пример использования:

modal.on('beforeClose', function() {
  console.log('Модальное окно будет закрыто');
});

modal.on('afterClose', function() {
  console.log('Модальное окно закрыто');
});

Открытие модального окна

После создания и настройки модального окна, его можно открыть с помощью метода open(). Открытие окна может быть вызвано после выполнения определённых условий, например, при клике на кнопку или по времени.

Пример:

var modal = new tingle.modal({
  closeButton: true
});
modal.setContent('<h1>Привет!</h1><p>Это модальное окно.</p>');
modal.open();

Закрытие модального окна

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

Пример:

modal.close();

Метод close() закрывает окно, а также вызывает все обработчики событий, связанные с этим действием.

Использование с динамическим контентом

Один из мощных методов работы с tingle.js — это динамическое изменение содержимого модального окна. Для этого используется метод setContent. Он позволяет обновлять контент модального окна без необходимости его пересоздавать. Это полезно, если содержимое окна зависит от пользовательского ввода или асинхронных данных.

Пример:

modal.setContent('<p>Загрузка...</p>');
fetch('/getData')
  .then(response => response.json())
  .then(data => {
    modal.setContent('<p>Данные получены: ' + data.info + '</p>');
  });

Пример комплексной инициализации

Чтобы лучше понять работу библиотеки, рассмотрим пример инициализации модального окна с использованием всех описанных выше параметров.

var modal = new tingle.modal({
  closeButton: true,
  footer: true,
  cssClass: ['custom-modal'],
});

modal.setTitle('Пример модального окна');
modal.setContent('<h2>Заголовок</h2><p>Некоторое содержимое.</p>');

modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function() {
  modal.close();
});

modal.open();

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

Заключение

Методы инициализации tingle.js предоставляют разработчику всё необходимое для гибкого создания и настройки модальных окон. Множество конфигурационных параметров и удобные методы для управления контентом и поведением окна позволяют легко интегрировать библиотеку в любой проект.