Параметр oldestFirst

В библиотеке Toastify для JavaScript параметр oldestFirst отвечает за порядок отображения уведомлений (тостов) на экране. По умолчанию новые уведомления появляются сверху контейнера, однако в некоторых сценариях может потребоваться, чтобы новые уведомления добавлялись в конец списка, сохраняя старые сверху. Этот функционал и регулируется с помощью oldestFirst.

Синтаксис

Toastify({
    text: "Пример уведомления",
    duration: 3000,
    oldestFirst: true
}).showToast();

oldestFirst: true – новые уведомления добавляются в конец списка, то есть сначала отображаются старые тосты.
oldestFirst: false (значение по умолчанию) – новые уведомления появляются сверху контейнера.

Влияние на порядок уведомлений

Рассмотрим два сценария:

1. `oldestFirst: false` (по умолчанию)

При этой конфигурации все новые уведомления добавляются в начало контейнера. Порядок отображения выглядит так:

[Новый тост 3]
[Новый тост 2]
[Новый тост 1]

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

2. `oldestFirst: true`

Если установить oldestFirst: true, добавление уведомлений меняет визуальный порядок:

[Старый тост 1]
[Старый тост 2]
[Новый тост 3]

Теперь новые тосты появляются внизу, а старые остаются сверху, что полезно для логов, уведомлений о процессах или событийной истории, где важен хронологический порядок.

Взаимодействие с другими параметрами

oldestFirst работает совместно с большинством ключевых опций Toastify:

duration – задаёт время показа каждого уведомления. Даже если старые уведомления остаются сверху, их таймеры отсчитываются независимо.
gravity – влияет на вертикальное положение контейнера (top или bottom). oldestFirst управляет внутренним порядком внутри выбранной позиции.
position – горизонтальное расположение (left, center, right). Не конфликтует с oldestFirst, порядок меняется только по вертикали.
className / style – оформление уведомлений не зависит от порядка, поэтому можно создавать визуально разные уровни тостов без влияния на oldestFirst.

Практическое использование

Логи действий пользователя

Toastify({
    text: "Данные сохранены",
    duration: 4000,
    oldestFirst: true
}).showToast();

Toastify({
    text: "Файл загружен",
    duration: 4000,
    oldestFirst: true
}).showToast();

В результате на экране будет виден хронологический поток уведомлений, где первые действия остаются сверху.

Системные уведомления

При множественных событиях, таких как ошибки или предупреждения, параметр oldestFirst позволяет проследить порядок событий:

Toastify({
    text: "Ошибка сети",
    duration: 5000,
    backgroundColor: "red",
    oldestFirst: true
}).showToast();

Toastify({
    text: "Ошибка сервера",
    duration: 5000,
    backgroundColor: "red",
    oldestFirst: true
}).showToast();

Старые ошибки остаются в верхней части контейнера, а новые добавляются под ними.

Особенности поведения

При одновременном добавлении нескольких тостов с oldestFirst: true библиотека гарантирует последовательное отображение в том порядке, в котором были вызваны методы showToast().
Если контейнер уведомлений переполняется, старые уведомления могут быть автоматически удалены в соответствии с внутренними настройками Toastify, но визуальный порядок сохраняется.
Параметр oldestFirst не влияет на анимации появления и исчезновения тостов – они применяются так же, как при стандартном порядке.