Клавиатурная навигация

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

Включение функциональности

Чтобы использовать клавиатурную навигацию в Scheduler, нужно включить на странице расширение key_nav.

scheduler.plugins({
    key_nav: true
});

Поведение фокуса во время клавиатурной навигации

Фокус на Scheduler

Когда нажата клавиша Tab, фокус переходит на Scheduler так же, как и на любой обычный элемент. После этого для навигации по Scheduler можно использовать клавиши со стрелками и другие.

Когда клавиша Tab нажата второй раз, фокус покидает Scheduler и перемещается в другое место на странице.

Фокус на модальном окне

Когда открывается модальное окно (lightbox, окно подтверждения), фокус перемещается с Scheduler на это окно, и навигация происходит внутри него как в простой форме. Когда окно закрывается, фокус возвращается к Scheduler.

Чтобы вернуть фокус обратно к Scheduler, нужно использовать метод focus.

scheduler.focus();

Когда Scheduler снова получает фокус, он устанавливает фокус на активном элементе внутри него, или на первую строку, или на последний выбранный элемент.

Стандартные действия навигации в модальном окне следующие:

• Enter — подтвердить и закрыть
• Escape — закрыть без изменений

Если фокус установлен на какой-либо кнопке формы, нажатие Space или Enter вызовет нажатие кнопки, на которую установлен фокус, а не действие.

Стилизация ячеек в фокусе

Когда устанавливается фокус на ячейку, она подсвечивается серым/желтым цветом. Если нужно изменить этот стиль, используйте CSS-класс .dhx_focus_slot:

<style>
    .dhx_focus_slot{
        background-color: #fff;
    }
</style>

Контексты

Действие, вызываемое по клику клавишей, зависит от контекста. Это означает, что разные действия могут быть привязаны к разным элементам (контекстам). В Scheduler существуют следующие элементы контекста (scopes):

• "scheduler" - весь Scheduler
• "timeSlot" - таймслот
• "event" - событие
• "minicalDate" - дата в мини-календаре
• "minicalButton" - кнопка-стрелка в мини-календаре

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

Добавление сочетания клавиш

Чтобы создать новое сочетание клавиш, нужно использовать метод addShortcut и передать ему три параметра:

• shortcut — (string) новое сочетание клавиш или название сочетания клавиш
• handler — (function) функция-обработчик, которая будет вызвана при вызове сочетания клавиш
• scope — (string) название элемента контекста, к которому привязана функция-обработчик

scheduler.addShortcut("shift+w", function(e){ 
    const target = e.target;
    if(target.closest("[event_id]"))
        const eventId = target.getAttribute("event_id");

    if(eventId) 
        scheduler.showQuickInfo(eventId);
},"event");

Удаление сочетания клавиш

Чтобы удалить сочетание клавиш из контекста, нужно использовать метод removeShortcut. Метод принимает два параметра:

• shortcut — (string) имя клавиши или комбинации клавиш для сочетания
• scope — (string) название элемента контекста, к которому привязано сочетание

scheduler.removeShortcut("shift+w","event");

Получение обработчика сочетания клавиш

Получить обработчик клавиатурного сочетания можно с помощью метода getShortcutHandler. Он принимает два параметра:

• shortcut — (string) имя клавиши или комбинации клавиш для сочетания
• scope — (string) название элемента контекста, к которому привязано сочетание

const shortcut_handler = scheduler.getShortcutHandler("shift+w","event");

Метод возвращает функцию, которая представляет обработчик вызова сочетания клавиш.

Синтаксис сочетания клавиш

Клавиатурное сочетание может состоять из следующих клавиш или комбинаций клавиш:

• модификаторная клавиша + символическая клавиша ("ctrl+a");
• модификаторная клавиша + несимволическая клавиша ("ctrl+space");
• символическая клавиша ("a");
• несимволическая клавиша ("space")

Для одного действия может быть несколько сочетаний клавиш. В этом случае все комбинации перечислены через запятую: "ctrl+a, ctrl+space".

Список поддерживаемых клавиш для использования в сочетаниях

• модификаторы: shift, alt, ctrl, meta;
• несимволические клавиши: backspace, tab, enter, esc, space, up, down, left, right, home, end, pageup, pagedown, delete, insert, plus, f1-f12.

Существующие сочетания клавиш

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

Общие сочетания клавиш

• Tab — устанавливает фокус на Scheduler
• Alt+1,Alt+2,Alt+3,... — переключение между представлениями
• Ctrl+Left/Right — переход к следующей/предыдущей дате
• Ctrl+Up/Down — прокрутка области данных
• Ctrl+Enter — создание нового события
• E, Shift+E — выбор следующего/предыдущего события
• Home — переключение на текущую дату
• Ctrl+C, Ctrl+X, Ctrl+V — копирование/вырезание/вставка события

Сочетания клавиш для таймслотов

• Up/Down/Left/Right Arrow Keys — навигация по таймслотам
• Shift+Up/Down/Left/Right Arrow Keys — расширение таймслота
• Enter — создание события в выбранном таймслоте

Сочетания клавиш для событий

• Up/Down/Left/Right Arrow Keys — переход к таймслоту
• Enter — открыть lightbox

Сочетания клавиш для мини-календаря

• Tab — устанавливает фокус на мини-календарь
• Up/Down/Left/Right Arrow Keys — навигация по кнопкам/клеткам
• Enter — клик по кнопке/клетке

Keyboard Navigation and WAI-ARIA - Flat Skin

Keyboard navigation in the scheduler

Связанные события

• onEventCopied
• onEventCut
• onEventPasted