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

Общая информация

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

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

Создание через атрибуты

Для создания подтверждения через атрибуты, необходимо добавить инициатору события вызова атрибут data-confirm. Опции подтверждения можно задать через атрибуты data-confirm-{NAME}.

<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>

Пример работы кода выше

Поддерживаемые атрибуты

// Текст подтверждения
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

Создание через Javascript

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

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

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

Пример работы кода выше

Опции

// Выводить в консоль отладку
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: '...'
}

Методы

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

Дополнительная информация

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

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

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