Ruby on Railsアプリケーションのホットキー

レール上の指 Mousetrap-サイトにホットキーを簡単かつ簡単に追加できるjavascriptライブラリ。 しかし、私はすでに私にとても夢中になっていたので、Ruby on Railsプロジェクトにそれを簡単で楽しいものにすることを決めました。 つまり、レール用のrubyライブラリでラップします。 これがgem mousetrap-railsの由来です


接続


プロジェクトでライブラリを使用するにGemfile 、アプリケーションのGemfile行を追加します
 gem 'mousetrap-rails' 

そして実行する
 $ bundle install 

次に、ジェネレーターを実行します。これにより、keybindings.js.coffeeの使用例を含むcoffescriptファイルが作成され、jsアプリケーションマニフェストに//= require mousetrapを追加してライブラリがAsset Pipelineに接続されます。

 $ rails generate mousetrap:install 


使用する


作成されたファイルにすでに含まれているjavascript関数を使用して、ボックスからdata-keybinding属性( data-keybinding )を使用してページナビゲーションを作成できます。

たとえば、ビューコード
 = link_to 'Homepage', root_path, data: { keybinding: 'h' } 
'h'クリックしてホームページに移動できます

これにより、 'u'ボタンを使用してUsername入力フィールドにフォーカスを切り替えることができます
 = text_field_tag 'Username', nil, data: { keybinding: 'u' } 

もちろん、ライブラリの機能はナビゲーションだけに限定されず、任意のjavascript関数を呼び出すことができます。 さらに、1つのボタンだけでなく、キーボードコンボ全体でも彼女の電話を切ることができます。
 //   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 'gi sequence pressed!' Mousetrap.bind '* a', -> console.log '* a sequence pressed!' // - Mousetrap.bind 'up up down down left right left right ba enter', -> console.log 'You WIN!' 

プロジェクトページでMousetrapの機能の詳細をご覧ください。

結論として


Mousetrapはうまく機能しているので、このgemをさらに開発していきます。 私は建設的なフィードバックを喜んでいます

リンク(それらがない場合)



©Photo by macrj

Source: https://habr.com/ru/post/J152057/


All Articles