Оповещения

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

Компонент оповещений позволяет, при срабатывании определенных событий, донести до пользователя важную информацию.

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

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

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

<button class="btn" data-alert data-alert-title="Welcome" data-alert-text="Hello world!">Open Alert!</button>

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

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

// Текст оповещения
data-alert-text

// Название оповещения
data-alert-title

// Местоположение появления оповещения
data-alert-placement

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

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

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

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

new PipUI.Alert({text: 'Hello world!', title: 'Welcome'})

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

Опции

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

// Текст оповещения
text: ''

// Название оповещения
title: ''

// Местоположение появления оповещения
placement: 'bottom-right'

// Иконка оповещения
icon: ''

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

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

// Отображать ли кнопку закрытия внутри оповещения
closeButton: true

// Можно закрыть при нажатии на само оповещение
closeClick: false

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

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

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

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

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

// Настройки шаблонов
templates: {
	// Шаблон окна оповещения
	alert: '...'
	
	// Шаблон кнопки закрытия внутри оповещения
	close: '<button type="button" class="btn btn-transparent" data-alert-close></button>'
}

Методы

let alert = new PipUI.Alert();

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

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

alert.getOptions() // Получить опции оповещения

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

alert.isOpen() // Открыто ли оповещение

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

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

События

Триггер	Описание	Инициатор
open-alert-pipui	Срабатывает при начале открытия оповещения	.modal
opened-alert-pipui	Срабатывает при завершении открытия оповещения	.modal
close-alert-pipui	Срабатывает при начале закрытия оповещения	.modal
closed-alert-pipui	Срабатывает при завершении закрытия оповещения	.modal

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

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

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

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