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

## Общая информация <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 |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/alert-block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.