Code Monkey home page Code Monkey logo

behave-ui-hotkeys's Introduction

behave-ui-hotkeys

A Marionette Behavior that allows you to add hotkey functionality to any view.

Usage:

npm install --save behave-ui-hotkeys

Then just require and use as you would any other behavior:

var Hotkeys = require('behave-ui-hotkeys'),
    _ = require('underscore');

var View = Marionette.ItemView.extend({
    template: _.template('<h1>Hotkeys!!</h1>'),
    behaviors: {
        Hotkeys: {
            behaviorClass: Hotkeys,
            hotkeys: {
               'cmd:alt:y': 'viewMethod'
            },
            attachToDocument: false
        }
    },
    initialize: function() {
        this.on('hotkey:cmd:alt:y', function() {
            // hotkey fired!
        });
    },
    viewMethod: function(e) {
        // hotkey fired!
    }
});

NOTES:

  • You can use only one code (f1, 4, a, s, delete, pageup, etc), but as many helper keys (cmd, ctrl, alt, shift) as you would like
  • Codes are case insensitive, F1 will become f1, DELETE will become delete, etc...
  • If you specify a view method that does not exist, it will just call event
  • If you do not want to call a view method pass an empty string as the value, i.e.
  • If element type is not a focusable element, div, p, etc behavior adds tabindex attr to element
  • If you set attachToDocument to true, then behavior adds listener to document instead of root view
hotkeys: {
    'ctrl:alt:o': 'open', // will fire event: 'hotkey:ctrl:alt:o', will call: this.view.open()
    'ctrl:alt:p': '' // will only fire event: 'hotkey:ctrl:alt:p', will not call any method
}

List of accepted codes:

  • backspace
  • tab
  • enter
  • return
  • pause
  • esc
  • space
  • pageup
  • pagedown
  • end
  • home
  • left
  • up
  • right
  • down
  • delete
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y
  • z
  • -
  • f1
  • f2
  • f3
  • f4
  • f5
  • f6
  • f7
  • f8
  • f9
  • f10
  • f11
  • f12

Dev

To setup the dev environment just run npm install You can then run grunt watch to automagically run tests and jshint

Test

To run tests run either npm test or grunt test, former is an alias for the latter.

Release History

  • 0.0.1 - Initial Release
  • 0.0.2 - Syntax highlighting added to readme
  • 0.0.3 - Add focus functionality to non-focusable elements
  • 0.0.4 - Clean up readme, cleaned up code
  • 0.0.5 - Added attachToDocument functionality
  • 0.0.6 - Moved from keypress to keydown event
  • 0.0.7 - Moved from keypress to keydown event for document eventListener
  • 0.0.8 - Fixed incorrect call to tag attribute on view el, should be tagName
  • 0.0.9 - Changed from onAttach to onRender for attaching event handlers
  • 0.0.10 - Removed duplicate dependencies
  • 0.0.11 - Changed return keycode from 13 to 10
  • 0.0.12 - Revert previous change

behave-ui-hotkeys's People

Contributors

kkemple avatar lumeet avatar benmccormick avatar samccone avatar

Stargazers

dmirtyisme avatar

Watchers

James Cloos avatar dmirtyisme avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.