Блоки оповещений

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

Блок оповещений - стилизованный блок для привлечения внимания пользователей.

<div class="alertblock">
    <div class="alertblock-wrapper">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        A aspernatur dicta dignissimos doloremque, facere illo ipsa molestias provident quasi quis, quos rem.
        Ab, expedita hic magni quidem quisquam reprehenderit suscipit?
    </div>
</div>

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

Вы можете выставить дополнительный контент до и/или после основного текста, который будет гармонировать с основным блоком. Для этого добавьте внутрь .alertblock блоки .before и .after соответственно

<div class="alertblock">
    <div class="before"><i class="fa fa-exclamation-triangle"></i></div>

    <div class="alertblock-wrapper">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        A aspernatur dicta dignissimos doloremque, facere illo ipsa molestias provident quasi quis,
        quos rem. Ab, expedita hic magni quidem quisquam reprehenderit suscipit?
    </div>

    <div class="after"><i class="fa-regular fa-face-smile-wink"></i></div>
</div>

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

Javascript

Управлять блоками можно с помощью Javascript. Для этого необходимо инициализировать соответствующий объект.

let alertblock = new PipUI.Alertblock('#alertblock')

Класс PipUI.Alertblock принимает 3 аргумента: 1. Элемент (String|HTMLElement) 2. Опции(Object) 3. Метод инициализации(Boolean) - true для создания блока

Создание блока

Вы можете полностью создать блок со всем содержимым. Чтобы это сделать, передайте в 3 параметре значение true и задайте опции во 2 параметре.

Пустой элемент из первого параметра должен существовать на странице

let create = new PipUI.Alertblock('#alertblock', {
        message: 'Hello',
        canClose: true,
        before: '<i class="fa-solid fa-cloud"></i>',
        after: '<i class="fa-solid fa-upload"></i>'
    }, true);

Инициализация блока

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

let init = new PipUI.Alertblock('#alertblock');

Опции

Второй параметр объекта PipUI.Alertblock поддерживает следующие параметры

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

// Шаблон враппера
wrapperTemplate: '<div class="alertblock-wrapper"></div>'

// Шаблон кнопки закрытия
closeTemplate: '<a href="#" class="alertblock-close" rel="nofollow">&times;</a>'

// Содержимое выводимое до основного контента
before: ''

// Содержимое выводимое после основного контента
after: ''

// Набор классов через пробел, которые будут добавлены к блоку .alertblock
class: ''

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

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

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

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

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

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

// Класс анимации скрытого блока
hiddenClass: 'alertblock-hidden'

// Класс анимации закрытого блока
closedClass: 'alertblock-closed'

// Класс полного скрытия блока (display: none)
noneClass: 'alertblock-none'

// Может ли блок быть закртываемым(будет отображаться кнопка закрытия)
canClose: false

// Основное сообщение, выводимое в блоке. Можно использовать HTML
message: ''

Методы

let alertblock = new PipUI.Alertblock('#alertblock');

alertblock.getID() // Вернет уникальный идентификатор блока

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

alertblock.getOptions() // Получить опции блока

alertblock.setMessage(string) // Изменить текст основного содержимого

alertblock.hide(callback) // Скрыть блок.
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции

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

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

События

Триггер	Описание	Инициатор
update-alertblock-pipui	Срабатывает при обновлении блока оповещения	.alertblock
show-alertblock-pipui	Срабатывает при начале появления блока	.alertblock
showed-alertblock-pipui	Срабатывает по окончанию появления блока	.alertblock
hide-alertblock-pipui	Срабатывает при начале скрытия блока	.alertblock
hided-alertblock-pipui	Срабатывает по окончанию скрытия блока	.alertblock
close-alertblock-pipui	Срабатывает при начале закрытия блока	.alertblock
closed-alertblock-pipui	Срабатывает по окончанию закрытия блока	.alertblock