Как известно, стандартные методы Javascript не позволяют кастомизировать метод confirm(), по этому мы решили добавить такую возможность в наш фреймворк.
Данный компонент спроектирован исключительно для работы через Javascript, однако при большом желании, HTML код подтверждения можно сформировать и вручную.
Создание через атрибуты
Для создания подтверждения через атрибуты, необходимо добавить инициатору события вызова атрибут data-confirm. Опции подтверждения можно задать
через атрибуты data-confirm-{NAME}.
// Текст подтверждения
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, передав в них функции обратного вызова.
// Выводить в консоль отладку
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 =newPipUI.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 является приоритетной функцией обратного// вызова при завершении отображения, если она задана и через опции
Дополнительная информация
Положения появления подтверждения задаются в формате {VERTICAL}-{HORIZONTAL}
Поддерживаемые положения по вертикали: top, center, bottom
Поддерживаемые положения по горизонтали: left, center, right
