Mousetrap — 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
