Собственные методы

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

Основные методы библиотеки

  1. open()

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

const modal = new tingle.modal();
modal.open();

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

  1. close()

Метод close() закрывает текущее модальное окно. Это может быть полезно, например, после того как пользователь завершит взаимодействие с окном или по истечении таймера. Как и метод open(), close() не блокирует выполнение других скриптов, что позволяет гибко управлять поведением интерфейса.

const modal = new tingle.modal();
modal.open();
// После некоторых действий или через некоторое время
modal.close();

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

  1. setContent()

Этот метод позволяет задать содержимое модального окна. Он принимает строку или HTML-контент, который будет вставлен в тело модального окна. Метод полезен, когда необходимо динамически изменять содержимое окна, например, в ответ на действия пользователя.

const modal = new tingle.modal();
modal.setContent('<h1>Заголовок</h1><p>Текст окна.</p>');
modal.open();

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

  1. setFooter()

Метод setFooter() позволяет задать нижний блок в модальном окне. Это может быть полезно для добавления кнопок, ссылок или другой информации в футер модального окна. Этот метод также принимает HTML-строку или DOM-элемент.

const modal = new tingle.modal();
modal.setFooter('<button class="btn-close">Закрыть</button>');
modal.open();

В отличие от метода setContent(), который заменяет всё содержимое, setFooter() изменяет только нижнюю часть модального окна.

  1. addFooterBtn()

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

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

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

  1. setTransition()

Метод setTransition() позволяет настроить анимацию появления и исчезновения модального окна. Библиотека Tingle.js по умолчанию использует CSS-анимации для отображения окон, но при необходимости их можно настроить, задав индивидуальное время и тип анимации.

const modal = new tingle.modal();
modal.setTransition(300); // Задание времени анимации в миллисекундах
modal.open();

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

  1. setCloseTimeout()

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

const modal = new tingle.modal();
modal.open();
modal.setCloseTimeout(5000); // Закрытие через 5 секунд

Метод принимает один параметр — время задержки в миллисекундах, после чего окно будет автоматически закрыто.

  1. onClose()

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

const modal = new tingle.modal();
modal.onClose(function() {
  console.log('Модальное окно закрыто');
});
modal.open();

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

Управление поведением модальных окон

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

  1. setSize()

Метод setSize() позволяет изменять размер модального окна. Он принимает один из нескольких предустановленных вариантов: small, medium, large. Это позволяет гибко настраивать размер окна в зависимости от контекста и содержимого.

const modal = new tingle.modal();
modal.setSize('large');
modal.open();

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

  1. setCloseLabel()

Метод setCloseLabel() позволяет настроить текст на кнопке закрытия окна. Это полезно для локализации и кастомизации интерфейса, например, если требуется изменить стандартный текст «Close» на более понятный.

const modal = new tingle.modal();
modal.setCloseLabel('Закрыть окно');
modal.open();

Этот метод изменяет текст кнопки закрытия, но не влияет на саму функциональность — окно по-прежнему закрывается при клике на кнопку.

  1. disable() и enable()

Методы disable() и enable() позволяют соответственно отключить или включить модальное окно. Это полезно, если необходимо временно скрыть модальное окно или сделать его недоступным для пользователя без закрытия.

const modal = new tingle.modal();
modal.disable();  // Отключение окна
modal.enable();   // Включение окна обратно

Заключение

Библиотека Tingle.js предоставляет мощные инструменты для создания и настройки модальных окон. Собственные методы, такие как open(), close(), setContent(), позволяют гибко управлять поведением окон, их содержимым и взаимодействием с пользователем. Возможности по добавлению кнопок, настройке анимаций и автоматическому закрытию делают Tingle.js удобным инструментом для создания динамичного интерфейса с модальными окнами.

Оглавление