Навигация с клавиатуры

Библиотека Noty позволяет создавать уведомления с широкими возможностями кастомизации, включая управление через клавиатуру. Для включения навигации с клавиатуры используется параметр keyboard в конфигурации уведомления. По умолчанию клавиатурная навигация выключена (keyboard: false), но её можно включить, задав объект с настройками.

new Noty({
    text: 'Пример уведомления',
    type: 'alert',
    layout: 'topRight',
    theme: 'mint',
    timeout: 5000,
    progressBar: true,
    keyboard: {
        enabled: true,
        enter: true,
        escape: true
    }
}).show();

В этом примере включены клавиши Enter и Escape для взаимодействия с уведомлением:

Enter – выполнение действия по умолчанию (например, закрытие уведомления или выполнение callback-функции).
Escape – мгновенное закрытие уведомления.

Настройка клавиш

Объект keyboard может содержать следующие свойства:

enabled (boolean) – включение или отключение клавиатурной навигации.
enter (boolean) – обработка клавиши Enter.
escape (boolean) – обработка клавиши Escape.
customBindings (object) – объект, где ключи – коды клавиш, а значения – функции-обработчики.

Пример использования customBindings:

new Noty({
    text: 'Нажмите клавишу для действия',
    layout: 'topLeft',
    theme: 'sunset',
    keyboard: {
        enabled: true,
        customBindings: {
            37: function() { console.log('Стрелка влево'); }, // Left arrow
            39: function() { console.log('Стрелка вправо'); }  // Right arrow
        }
    }
}).show();

Это позволяет расширять функциональность уведомлений: можно назначить действия на любые клавиши, включая стрелки, пробел, буквы или цифры.

Управление фокусом при клавиатурной навигации

Для корректной работы клавиатурного взаимодействия необходимо учитывать фокус на уведомлении. Noty автоматически устанавливает фокус на только что созданное уведомление, если параметр modal установлен в true. В противном случае можно программно установить фокус:

let myNoty = new Noty({
    text: 'Фокус на этом уведомлении',
    keyboard: { enabled: true }
}).show();

myNoty.barDom.focus();

Метод barDom.focus() позволяет гарантировать, что нажатия клавиш будут обрабатываться текущим уведомлением, а не элементами страницы.

Комбинирование с автозакрытием и таймерами

Клавиатурная навигация совместима с параметрами timeout и progressBar. При этом нажатие Escape или Enter прерывает автоматическое закрытие и выполняет соответствующее действие:

new Noty({
    text: 'Автозакрытие через 5 секунд',
    timeout: 5000,
    progressBar: true,
    keyboard: { enabled: true, escape: true, enter: true }
}).show();

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

Встроенные обработчики событий клавиатуры

Noty позволяет подключать обработчики событий через API on(). Это расширяет возможности клавиатурного управления:

let n = new Noty({
    text: 'Обработчик событий клавиатуры',
    keyboard: { enabled: true }
}).show();

n.on('onKeyDown', function(e) {
    if(e.key === 'Enter') {
        console.log('Enter нажата');
        n.close();
    }
});

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

Поддержка мультинотификаций

При наличии нескольких уведомлений одновременно Noty обрабатывает фокус автоматически, выделяя верхнее уведомление. Для управления клавиатурой в таких случаях можно использовать события onShow и onClose для установки фокуса на конкретное уведомление:

Noty.overrideDefaults({
    keyboard: { enabled: true, escape: true }
});

let n1 = new Noty({ text: 'Первое уведомление' }).show();
let n2 = new Noty({ text: 'Второе уведомление' }).show();

n2.on('onShow', function() { n2.barDom.focus(); });

Это гарантирует, что нажатие Escape закроет именно верхнее уведомление, а не скрытое в фоне.