Настройте горячие клавиши

Добавьте горячие клавиши на часто используемые элементы интерфейса. Так вы поможете пользователям — нажимать на кнопки порой быстрее, чем управлять мышкой.

В Яндекс.Толоке горячие клавиши особенно полезны — исполнители будут быстрее выполнять ваши задания, а значит, платить за них можно меньше. Кроме того, они помогут повысить рейтинг проекта, если у него низкая оценка в категории «Удобство интерфейса задания».

Особенности работы

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

Горячая клавиша всегда добавится на кнопку, если они делают одно и то же.

Горячие клавиши не зависят от интерфейса. Они работают, даже если не отображаются — например, если настроена горячая клавиша, но не сама кнопка.

Некоторые компоненты предоставляют отдельный способ настройки горячих клавиш. Например, для компонента field.image-annotation есть специальный плагин.

Как их настроить

Добавьте горячие клавиши с помощью отдельного плагина — plugin.hotkeys. Укажите в нем, какая клавиша какое действие вызывает. Плагины добавляются в массив plugins в корне конфигурации.

{
  "type": "plugin.hotkeys",
    "p": {
     "type": "action.play-pause",
     "view": {
       "$ref": "view.items.0"
    }
  }
}
Скопировано

В этом примере нажатие латинской клавиши Р вызывает действие action.play-pause. Оно запускает или останавливает воспроизведение для плеера. Плеер указывается в свойстве view с помощью конструкции $ref — ссылки на другое место в конфигурации.

Посмотреть пример в песочнице.

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

Радио-кнопки и чекбоксы

Чтобы задать горячие клавиши к радио-кнопкам, используйте компонент action.set, а для чекбоксов — action.toggle. Настройте для горячих клавиш выполнение тех же самых действий, что и у переключателя.

Посмотреть пример в песочнице.

Переиспользование горячих клавиш

Вы можете переиспользовать горячую клавишу так же, как и любое другое место кода. Для этого используйте конструкцию { "$ref": "path.to.element" }. Переиспользование пригодится, если вам нужно вставить одинаковые горячие клавиши в несколько мест.

Посмотреть пример в песочнице.

Совет. Размещайте переиспользуемый код в vars, чтобы при изменении конфигурации не менять путь в свойстве $ref.

Выполнение нескольких действий

Чтобы одновременно вызывать несколько действий при нажатии на кнопку, добавьте компонент action.bulk. Например, чтобы показать несколько уведомлений.

Посмотреть пример в песочнице.

Условия в горячих кнопках

Если вы используете условие (helper.if или helper.switch), то добавьте его и в горячую клавишу для корректной работы.

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

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

Посмотреть пример с ошибкой в песочнице.

Посмотреть исправленный пример в песочнице.

Решение проблем

Чтобы в интерфейсе отображалась горячая клавиша, задайте ей то же действие (action), которое происходит при нажатии кнопки.

Если для компонента действие не задано, то его необходимо назначить:

Полный список действий можно посмотреть в разделе Список действий.

Особенности:

  • Тип данных для действий должен совпадать. Например, горячая клавиша будет работать, но не будет отображаться, если кнопка при нажатии записывает в результат строку “true”, а для горячей клавиши указано логическое значение true.
  • Если при нажатии кнопки вызывается несколько действий (action.bulk), то их последовательность для горячей клавиши должна быть такой же.
  • Если используется условный оператор для выбора действия, например helper.if, то при нажатии горячей клавиши должен вызываться тот же условный оператор (helper.if) по тем же правилам.