" %}
Пример работы кода выше
{% endembed %}
## Javascript
Для работы с всплывающими блоками необходимо создать экземпляр класса PipUI.Popup.\
По умолчанию инициализация происходит автоматически при клике на элемент\
с атрибутом \[data-popup].
### Инициализация
Конструктор класса PipUI.Popup принимает 2 параметра: HTMLElement и Object
Первый параметр - селектор объекта самого блока всплывающего окна. Может быть пустым.
Второй параметр - объект опций
```javascript
let popup = new PipUI.Popup('#popup-box');
```
### Опции
// Выводить в консоль отладку
debug: false
// Селектор или HTMLElement к которому будет привязан всплывающий блок
target: undefined
// Список триггеров, при нажатии на которые будет появляться/исчезать блок
triggers: []
// Название, выводимое в всплывающем блоке. Если не указано, то появится без названия.
title: ''
// Содержимое, выводимое в всплывающем блоке. Если не указано, то появится без содержимого.
content: ''
// Направление вывода. Поддерживаются: up, down, left, right
direction: 'up'
// Выводить ли оверлей
overlay: false
// Кол-во миллисекунд, через которое блок автоматически закроется
autoclose: 0
// Закрывать всплывающий блок при клике на область вне самого блока
overclose: true
// Класс присваиваемый всплывающему блоку при открытии
openedClass: 'popup-active'
// Класс присваиваемый оверлею при открытии
openedOverlayClass: 'overlay-active'
// Класс присваиваемый триггеру при открытии
openedTriggerClass: 'active'
// Класс элемента к которому привязан всплывающий блок
targetClass: 'popup-target'
// Класс, присваиваемый элементу к которому привязан всплывающий блок, при открытии
targetActiveClass: 'popup-target-active'
// Функция обратного вызова срабатываемая при появлении всплывающего блока
openCallback: undefined
// Функция обратного вызова срабатываемая при исчезании всплывающего блока
closeCallback: undefined
// Функция обратного вызова срабатываемая при обновлении всплывающего блока
updateCallback: undefined
// Функция обратного вызова срабатываемая при изменении позиции всплывающего блока
repositionCallback: undefined
// Шаблоны
templates: {
// Разметка основного блока всплывающего окна
box: '...'
// Разметка блока оверлея
overlay: '...'
}
### Методы
```javascript
let popup = new PipUI.Navbar('#popup');
popup.getID() // Вернет уникальный идентификатор всплывающего блока
popup.setOptions(object) // Изменить опции блока
popup.getOptions() // Получить опции блока
popup.getPosition(name) // Получить актуальную позицию блока(служит для обновления)
// Параметр name является направлением позиции
popup.updatePosition() // Обновить позицию всплывающего блока
popup.update() // Обновить всплывающее окно
popup.hide(callback) // Скрыть панель
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
popup.show(callback) // Показать блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
popup.isOpen() // Текущее состояние блока (открыт или закрыт)
popup.open(callback) // Отобразить блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
popup.close(callback) // Скрыть блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
```
### События
| Триггер | Описание | Инициатор |
|---|
| open-popup-pipui | Срабатывает при открытии всплывающего блока | .popup |
| close-popup-pipui | Срабатывает при закрытии всплывающего блока | .popup |
| update-popup-pipui | Срабатывает при обновлении содержимого всплывающего блока | .popup |
| update-position-popup-pipup | Срабатывает при обновлении позиции всплывающего блока | .popup |