# Подтверждения действий

## Общая информация <a href="#general-information" id="general-information"></a>

Как известно, стандартные методы Javascript не позволяют кастомизировать метод confirm(), по этому мы решили добавить такую возможность в наш фреймворк.

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

## Создание через атрибуты <a href="#make-via-attributes" id="make-via-attributes"></a>

Для создания подтверждения через атрибуты, необходимо добавить инициатору события вызова атрибут <mark style="color:orange;">`data-confirm`</mark>. Опции подтверждения можно задать\
через атрибуты <mark style="color:orange;">`data-confirm-{NAME}`</mark>.

```html
<button class="btn" data-confirm data-confirm-title="Welcome" data-confirm-text="Hello world!" data-confirm-confirm="myCallback">Open Confirm!</button>

<script>function myCallback(){ console.log('Confirmed!'); }</script>
```

{% embed url="<https://codepen.io/pipui/pen/XWBLGxZ>" %}
Пример работы кода выше
{% endembed %}

### Поддерживаемые атрибуты <a href="#supported-attributes" id="supported-attributes"></a>

<pre><code><strong>// Текст подтверждения
</strong>data-confirm-text

// Название подтверждения
data-confirm-title

// Местоположение появления подтверждения
data-confirm-placement

// Кол-во миллисекунд, через которое оповещение будет закрыто. По умолчанию 0 (бесконечно)
data-confirm-autoclose

// Будет ли отображен оверлей. Принимает значения true или false. По умолчанию true
data-confirm-overlay

// Имя функции, вызываемой при подтверждении
data-confirm-confirm

// Имя функции, вызываемой при отмене. Данная функция не будет вызвана,
// если сработало автозакрытие.
data-confirm-cancel

// Имя кнопки подтверждения
data-confirm-confirm-btn

// Имя кнопки отмены
data-confirm-cancel-btn
</code></pre>

## Создание через Javascript <a href="#make-via-javascript" id="make-via-javascript"></a>

Для создания подтверждения через javascript, необходимо создать экземпляр класса PipUI.Confirm и передать в него один параметр опций. Важнейшим свойством объекта опций является text и title, которые задают текст и название окна соответственно. При желании эти свойства могут быть опущены.

Для обработки события нажатия на одну из кнопок, можно использовать параметры объекта опций confirm и/или cancel, передав в них функции обратного вызова.

```javascript
new PipUI.Confirm({text: 'Hello world!', title: 'Welcome', confirm: () => { console.log('Hello') }})
```

{% embed url="<https://codepen.io/pipui/pen/GRBbLOj>" %}
Пример работы кода выше
{% endembed %}

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
debug: false

// Текст подтверждения
text: ''

// Название подтверждения
title: ''

// Функция обратного вызова при нажатии на кнопку подтверждения
confirm: undefined

// Функция обратного вызова при нажатии на кнопку отмены. Не выполняется при
// срабатываении автозакрытия
cancel: undefined

// Местоположение появления подтверждения
placement: 'top-center'

// Отображать ли оверлей. Если хоть у одного открытого окна задан данный параметр,
// то оверлей будет отображаться до тех пор, пока такие подтверждения открыты
overlay: true

// Автозакрытие подтверждения. Если задано 0, то подтверждения
// не будет закрываться автоматически. По умолчанию 0.
autoclose: 0

// Класс открытого подтверждения
openedClass: 'confirm-active'

// Текст внутри кнопки подтверждения
confirmBtn: ''

// Текст внутри кнопки отмены
cancelBtn: ''

// Функция обратного вызова при начале открытия подтверждения
openCallback: undefined

// Функция обратного вызова при закрытияе открытия подтверждения
closeCallback: undefined

// Функция обратного вызова при окончании открытия подтверждения
openedCallback: undefined

// Функция обратного вызова при окончании закрытия подтверждения
closedCallback: undefined

// Настройки шаблонов
templates: {
	// Шаблон окна подтверждения
	confirm: '...'
}
```

### Методы <a href="#methods" id="methods"></a>

```javascript
let confirm = new PipUI.Confirm();

confirm.getID() // Вернет уникальный идентификатор подтверждения

confirm.setOptions(object) // Изменить опции подтверждения. DOM не будет изменен
// до вызова метода confirm.update()

confirm.getOptions() // Получить опции подтверждения

confirm.update() // Отрендерит окно заново

confirm.isOpen() // Открыто ли подтверждение

confirm.confirm() // Выполнить функцию подтверждения.
// Аналог нажатия на кнопку подтвердить

confirm.cancel() // Выполнить функцию отмены.
// Аналог нажатия на кнопку отменить.

confirm.close(callback) // Закрыть подтверждение. Дальнейшая работа с ним будет невозможна
// Параметр callback является приоритетной функцией обратного
// вызова при завершении закрытия, если она задана и через опции

confirm.open(callback) // Отобразить подтверждение
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
```

| Триггер               | Описание                                          | Инициатор |
| --------------------- | ------------------------------------------------- | --------- |
| open-confirm-pipui    | Срабатывает при начале открытия подтверждения     | .modal    |
| opened-confirm-pipui  | Срабатывает при завершении открытия подтверждения | .modal    |
| close-confirm-pipui   | Срабатывает при начале закрытия подтверждения     | .modal    |
| closed-confirm-pipui  | Срабатывает при завершении закрытия подтверждения | .modal    |
| confirm-confirm-pipui | Срабатывает при подтверждающем действии           | .modal    |
| cancel-confirm-pipui  | Срабатывает при отмене                            | .modal    |

## Дополнительная информация <a href="#more-info" id="more-info"></a>

Положения появления подтверждения задаются в формате **{VERTICAL}-{HORIZONTAL}**

Поддерживаемые положения по вертикали: top, center, bottom

Поддерживаемые положения по горизонтали: left, center, right