Навигация клавиатурой

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

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

Чтобы использовать навигацию клавиатурой в диаграмме Gantt, нужно включить плагин keyboard_navigation с помощью метода gantt.plugins.

gantt.plugins({
    keyboard_navigation: true
});

API объекта gantt.ext.keyboardNavigation приведено в статье Расширение навигации клавиатурой.

Доступны два варианта навигации клавиатурой:

• навигация по строкам задач

Чтобы включить её, установите свойство keyboard_navigation в true.

• навигация по ячейкам задач

Чтобы использовать этот тип навигации, установите свойство keyboard_navigation_cells в true.

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

Фокус на Gantt

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

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

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

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

Чтобы вернуть фокус к Gantt, необходимо использовать метод focus. Когда Gantt получает фокус снова, он устанавливает фокус на активном элементе внутри, или на первую строку, или на последний выбранный элемент.

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

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

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

заметка

Когда вы устанавливаете фокус на ячейку/строку грид и затем кликаете на произвольный HTML-элемент внутри Gantt, фокус возвращается к ячейке/строке грид.

Начиная с версии v7.1.13 вы можете добавить класс 'no_keyboard_navigation' к пользовательскому элементу, чтобы фокус не восстанавливался на ячейке/строке грид.

Контексты

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

• "gantt" - вся диаграмма Gantt
• "taskRow" - строка с задачей
• "taskCell" - ячейка строки с задачей
• "headerCell" - ячейка заголовка

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

Добавление ярлыка

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

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

gantt.addShortcut("shift+w", function(e){ 
    var task = gantt.locate(e); 
    if(task) 
        gantt.showQuickInfo(task)
},"taskRow");

Удаление ярлыка

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

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

gantt.removeShortcut("shift+w","taskRow");

Получение обработчика ярлыка

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

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

var shortcut_handler = gantt.getShortcutHandler("shift+w","taskRow");

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

Синтаксис ярлыков

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

• клавиша-модификатор + символьная клавиша ("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.

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

Есть набор готовых горячих клавиш, которые можно использовать для навигации по диаграмме Gantt:

Общие горячие клавиши:

• Tab - установить фокус на Gantt
• Alt+Up/Down - вертикальная прокрутка Gantt
• Alt+Left/Right - горизонтальная прокрутка Gantt
• Ctrl+Enter - создать новую задачу
• Ctrl+Z - отменить действие
• Ctrl+R - повторить действие

Горячие клавиши для ячеек заголовка

• Left/Right Arrow Keys - перемещаться по ячейкам заголовка
• Home/End - перейти к первой/последней колонке
• Down - перейти к строкам с задачами
• Space/Enter - клик по заголовку (например, для сортировки)

Горячие клавиши для строк задач

• Up/Down - перемещаться по строкам
• PageDown/PageUp - перейти к первой/последней задаче
• Space - выбрать задачу
• Ctrl+Enter - создать новую задачу
• Delete - удалить выбранную задачу
• Enter - открыть lightbox
• Ctrl+Left/Right - развернуть/свернуть дерево
• Shift+Left/Right - увеличить/уменьшить отступ задачи
• Shift+Down/Up - развернуть/свернуть ветку

Навигация клавиатурой — переход по ячейкам

заметка

Вы можете найти пример реализации возможности копирования/вставки задач с помощью комбинаций Ctrl+C/Ctrl+V в статье соответствующей.

Горячие клавиши для ячеек задач

• Up/Down/Left/Right Arrow Keys - перемещаться по ячейкам задач
• PageDown/PageUp - перейти к первой/последней ячейке в столбце
• Home/End - перейти к первой/последней ячейке в столбце
• Space - выбрать задачу
• Ctrl+Enter - создать новую задачу
• Delete - удалить выбранную задачу
• Enter - открыть lightbox
• Ctrl+Left/Right - развернуть/свернуть дерево

Навигация клавиатурой — переход по ячейкам

Встроенная горячая клавиша прокрутки горизонтальной временной шкалы

Начиная с версии 4.2 диаграмма Gantt предоставляет возможность горизонтальной прокрутки временной шкалы с использованием следующей комбинации:

-> клавиша Shift + перемещение колесика мыши.

С версии 6.3 вы можете задать вместо стандартной клавиши Shift клавишу Alt или Meta в сочетании с колесиком мыши через свойство horizontal_scroll_key:

gantt.config.horizontal_scroll_key = "altKey";

или отключить горизонтальную прокрутку, установив свойство horizontal_scroll_key в false:

gantt.config.horizontal_scroll_key = false;