Хоткеи в приложенях Ruby on Rails

в 0:02, , рубрики: gem, hotkeys, javascript library, mousetrap, ruby, ruby on rails, rubygems, метки: , , , , , ,

Fingers on the railsMousetrap — javascript-библиотека, позволяющая легко и непринужденно добавлять хоткеи на сайты, появилась не так давно. Но уже успела полюбиться мне настолько, что я решил сделать ее добавление к проекту на Ruby on Rails простым и приятным. А именно, завернуть в ruby-библиотеку для рельсов. Так появился gem mousetrap-rails.

Подключение

Чтобы использовать библиотеку в проекте, добавьте в Gemfile вашего приложения строчку

gem 'mousetrap-rails'

и выполните

$ bundle install

После чего запустите генератор, который создаст coffescript-файл с примерами использования keybindings.js.coffee и подключит библиотеку в Asset Pipeline, добавив //= require mousetrap в js манифест приложения.

$ rails generate mousetrap:install

Использование

С помощью уже включенных в созданный файл javascript-функций вы можете из коробки использовать data-атрибуты (data-keybinding), чтобы создать навигацию по страницам.

Например, код вида

= link_to 'Homepage', root_path, data: { keybinding: 'h' } 

позволит перейти на домашнюю страницу по нажатию на 'h'

А этот — заставит переключить фокус на поле ввода Username по кнопке 'u'

= text_field_tag 'Username', nil, data: { keybinding: 'u' }

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

// одиночные кнопки
Mousetrap.bind '4', -> alert '4 pressed!'
Mousetrap.bind 'x', (-> alert 'x pressed!'), 'keyup'

// комбинации
Mousetrap.bind 'command+shift+k', ->
  alert 'command+shift+k pressed!'
  false

Mousetrap.bind ['command+k', 'ctrl+k'], ->
  alert 'command+k or ctrl+k pressed!'
  false

// последовательности нажатий
Mousetrap.bind 'g i', -> console.log 'g i sequence pressed!'
Mousetrap.bind '* a', -> console.log '* a sequence pressed!'

// мега-комбо
Mousetrap.bind 'up up down down left right left right b a enter', -> console.log 'You WIN!'

Подробнее о возможностях Mousetrap можно узнать на странице проекта.

В заключение

Mousetrap прекрасно справляется со своими обязанностями, и gem я собираюсь развивать дальше. Буду рад любому конструктивному фидбэку.

Ссылки (куда же без них)

© Photo by macrj

Автор: kugaevsky

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js