> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/alert-block.md).

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

## Общая информация <a href="#general-information" id="general-information"></a>

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

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

{% embed url="<https://codepen.io/pipui/pen/dyjWVPR>" %}
Пример работы кода выше
{% endembed %}

Вы можете выставить дополнительный контент до и/или после основного текста, который будет гармонировать с основным блоком. Для этого добавьте внутрь <mark style="color:orange;">`.alertblock`</mark> блоки <mark style="color:orange;">`.before`</mark> и <mark style="color:orange;">`.after`</mark> соответственно

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

{% embed url="<https://codepen.io/pipui/pen/OJwmvdX>" %}
Пример работы кода выше
{% endembed %}

## Javascript

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

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

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

### Создание блока <a href="#block-creating" id="block-creating"></a>

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

{% hint style="success" %}
Пустой элемент из первого параметра должен существовать на странице
{% endhint %}

```javascript
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);
```

### Инициализация блока <a href="#block-init" id="block-init"></a>

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

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

### Опции <a href="#options" id="options"></a>

Второй параметр объекта 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: ''
```

### Методы <a href="#methods" id="methods"></a>

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