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

## Общая информация <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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/confirm.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
