Оповещения

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

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

Данный компонент спроектирован исключительно для работы через 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

Last updated