Premium toast notifications for the browser (single-file build).
npm install artnotisArtNotis — библиотека премиальных toast‑уведомлений для браузера без зависимостей.
Подключается одним файлом и создаёт глобальный объект window.ArtNotis.
- 4 типа уведомлений: success, error, warning, info
- Позиции: 6 пресетов (верх/низ × лево/центр/право)
- Sticky‑режим (duration: 0), кнопка закрытия, прогресс‑бар
- Очередь и лимит видимых уведомлений (maxVisible)
- Кнопки (actions): ссылки или обработчики клика
- Темизация через CSS‑переменные (theme.vars / theme.toastVars)
- Кастомные анимации через WAAPI (Element.animate) [web:91]
- Базовая доступность: live regions (aria-live) и role="alert" для ошибок [web:46][web:36]
---
bash
npm i artnotis
Подключение
Через
Теперь доступно:xml
Если твой dev‑server не раздаёт node_modules, просто скопируй файл dist/artnotis.js в публичную папку проекта (например, /public/vendor/artnotis.js) и подключай оттуда.
Быстрый старт
1) Один тост
js
ArtNotis.show({
type: "info",
title: "Привет",
message: "Это ArtNotis"
});
2) Хелперы по типам
js
ArtNotis.success("Сохранено", { title: "Успех" });
ArtNotis.error("Неверный токен", { title: "Ошибка" });
ArtNotis.warning("Мало места", { title: "Внимание" });
ArtNotis.info("Есть обновления", { title: "Инфо" });
3) Глобальные дефолты
js
ArtNotis.configure({
position: "bottom-right",
duration: 4500,
maxVisible: 4
});
API (таблица)
Метод Сигнатура Возвращает Назначение
ArtNotis.configure (partialDefaults) void Задаёт дефолты для всех следующих уведомлений
ArtNotis.show (options) handle | null Показывает уведомление (может вернуть null, если ушло в очередь)
ArtNotis.success (messageOrOptions, [options]) handle | null Уведомление типа success
ArtNotis.error (messageOrOptions, [options]) handle | null Уведомление типа error
ArtNotis.warning (messageOrOptions, [options]) handle | null Уведомление типа warning
ArtNotis.info (messageOrOptions, [options]) handle | null Уведомление типа info
ArtNotis.clear ([position]) void Удалить активные тосты и очистить очередь
Опции show() (таблица)
Контент
Опция Тип По умолчанию Описание
type "success"|"error"|"warning"|"info" "info" Тип уведомления
title string | null null Заголовок (если null — не показывается)
message string "" Текст
icon string | null null Иконка (emoji/символ). null = иконка по типу
Позиция и очередь
Опция Тип По умолчанию Описание
position "top-left"|"top-center"|"top-right"|"bottom-left"|"bottom-center"|"bottom-right" "top-right" Позиция контейнера
maxVisible number 4 Максимум видимых тостов на позицию
newestOnTop boolean true Новые тосты сверху
Время жизни и поведение
Опция Тип По умолчанию Описание
duration number 5000 Время (мс). 0 = sticky
closable boolean true Кнопка ×
progress boolean true Полоса прогресса (только при duration > 0)
pauseOnHover boolean true Пауза таймера при наведении
pauseOnFocus boolean true Пауза при фокусе внутри
pauseOnHidden boolean true Пауза при скрытой вкладке
Кнопки и эффекты
Опция Тип По умолчанию Описание
actions Action[] [] Кнопки/ссылки
effects object (см. ниже) Визуальные эффекты
Эффекты:
js
effects: {
shimmer: true,
glow: true,
iconFloat: true,
iconOrbit: true
}
A11y
Опция Тип По умолчанию Описание
a11y.enabled boolean true Включить ARIA поведение
a11y.live "polite"|"assertive" "polite" Важность озвучивания (assertive — только для критичных сообщений) [web:46]
a11y.atomic boolean true Озвучивать контент целиком
Action (кнопки)
actions — массив объектов. Каждый элемент создаёт кнопку (
js
actions: [
{ label: "Подтвердить", variant: "primary", onClick: () => console.log("ok") },
{ label: "Отмена", onClick: () => console.log("cancel"), closeOnClick: true },
{ label: "Подробнее", href: "https://example.com", target: "_blank" }
]
Поля Action
Поле Тип По умолчанию Описание
label string — Текст
variant "primary"|"default" "default" Визуальный вариант
onClick (event) => void undefined Обработчик клика
closeOnClick boolean true Закрывать тост после клика
href string undefined Если задано — элемент станет ссылкой
target string "_self" target для ссылки
rel string "noreferrer" rel для ссылки
Темизация (CSS variables)
ArtNotis настраивается через CSS‑переменные. Можно задавать переменные:
глобально: theme.vars (через configure)
точечно: theme.toastVars (в конкретном show)
Пример: глобально изменить размеры/радиус
js
ArtNotis.configure({
theme: { vars: { "--an-radius": "22px", "--an-maxw": "460px" } }
});
Пример: поменять фон у одного тоста
js
ArtNotis.show({
type: "info",
title: "Кастом",
message: "Этот тост с другим фоном",
theme: {
toastVars: {
"--an-bg": "rgba(2, 6, 23, 0.86)",
"--an-bc": "rgba(99, 102, 241, 0.20)"
}
}
});
Основные переменные
Геометрия: --an-minw, --an-maxw, --an-radius, --an-pad
Фон/граница/тень: --an-bg, --an-bc, --an-shadow
Эффекты: --an-blur, --an-sat
Акцент: --an-accent, --an-glow
Прогресс: --an-progress
Primary action: --an-primaryBg, --an-primaryBorder, --an-primaryColor
Анимации (motion)
По умолчанию используется preset "premium".
Можно передать кастомный enter/exit через WAAPI (это параметры для Element.animate). [web:91]
Пример: кастомный motion
js
ArtNotis.show({
type: "success",
title: "WAAPI",
message: "Кастомные keyframes",
motion: {
enabled: true,
enter: {
keyframes: [
{ opacity: 0, transform: "translateY(-10px) scale(.98)" },
{ opacity: 1, transform: "translateY(0) scale(1)" }
],
options: { duration: 360, easing: "cubic-bezier(.16,1,.3,1)", fill: "both" }
},
exit: {
keyframes: [
{ opacity: 1, transform: "translateY(0) scale(1)" },
{ opacity: 0, transform: "translateY(-8px) scale(.98)" }
],
options: { duration: 200, easing: "cubic-bezier(.4,0,1,1)", fill: "forwards" }
}
}
});
Handle (управление уведомлением)
ArtNotis.show() возвращает handle:
Поле/метод Тип Описание
el HTMLElement DOM‑элемент тоста
close() () => void Закрыть уведомление
update(partialOptions) (object) => void Обновить тост (title/message/icon/theme)
Пример: обновляем текст
js
const t = ArtNotis.show({ title: "Загрузка", message: "0%", duration: 0, progress: false });
let p = 0;
const id = setInterval(() => {
p += 10;
t.update({ message:
${p}% }); if (p >= 100) {
clearInterval(id);
t.update({ title: "Готово", message: "Завершено", type: "success" });
}
}, 250);
Доступность (A11y)
ArtNotis использует live‑region подход:
aria-live="polite" подходит для большинства уведомлений. [web:46]
assertive стоит использовать только для действительно критичных сообщений, потому что оно прерывает пользователя. [web:46]
Для ошибок может применяться role="alert" (такое поведение принято для срочных сообщений). [web:36]
Если нужно принудительно:
js
ArtNotis.error("Критично", {
a11y: { enabled: true, live: "assertive", atomic: true }
});
Рецепты
Sticky уведомление без прогресса
js
ArtNotis.show({
type: "warning",
title: "Важно",
message: "Закрой меня вручную",
duration: 0,
progress: false
});
Лимит видимых + очередь
js
ArtNotis.configure({ maxVisible: 2, position: "top-right" });
for (let i = 1; i <= 6; i++) {
ArtNotis.info(
Toast #${i}`);js
console.log(ArtNotis?.version);
Ошибка “MIME type text/html”
Это означает, что по указанному пути сервер вернул HTML (обычно 404‑страницу) вместо JS. Проверь путь к dist/artnotis.js и настройки раздачи статических файлов.