Coder Social home page Coder Social logo

digabit / ember-key-responder Goto Github PK

View Code? Open in Web Editor NEW

This project forked from yapplabs/ember-key-responder

0.0 2.0 0.0 350 KB

cocoa inspired approach to keyboard event handling in ember

License: MIT License

JavaScript 86.85% HTML 12.67% CSS 0.48%

ember-key-responder's Introduction

ember-key-responder

Build Status Ember Observer Score

A component-oriented approach to keyboard shortcuts for Ember, inspired by Cocoa's KeyResponder.

ember-key-responder will delegate keyEvents to the current keyResponder. Typically a keyResponder is a view, or a component. In complex applications, various keyResponders enter and leave the system. Since only 1 keyResponder can be active at any given point in time, a stack of them is maintained. The top of the stack is considered the current keyResponder.

This allows for modals or other UI components to naturally become the default responder. As they enter they are pushed onto the stack. When they resign themselves they are dropped from the stack.

Example

Given the following components component-a and component-b

// component-a.js | component-b.js
export default Ember.Component.extend({
  acceptsKeyResponder: true,
  didInsertElement: function() {
    this.becomeKeyResponder(false /* true: replace | false: pushOnToStack*/);
    this._super.apply(this, arguments);
  },

  willDestroyElement: function() {
    this.resignKeyResponder();
    this._super.apply(this, arguments);
  },

  moveUp: function() {
    // do something
  }
});

the template layout of

{{#component-a}
  {{#if showB}}
    {{#component-b}
    {{/component-b}
  {{/if}}
{{/component-a}

and showB is true

the stack of key responders is

component-b // <= current keyResponder
component-a

Key events captured will be delegated to component-b.

If showB becomes false then component-b will be removed and the stack becomes

component-a // <- current keyResponder

At this point in time key events will be delegated to component-a.

Further Usage

ember install:npm ember-key-responder

// app/views/key-reponder-base.js

export default Ember.View.extend({
  acceptsKeyResponder: true,
  didInsertElement: function() {
    this.becomeKeyResponder(false /* true: replace | false: pushOnToStack*/);
    this._super();
  },

  willDestroyElement: function() {
    this.resignKeyResponder();
    this._super();
  }
});

Events:

export var KEY_EVENTS = {
  8: 'deleteBackward',
  9: 'insertTab',
  13: 'insertNewline',
  27: 'cancel',
  32: 'insertSpace',
  37: 'moveLeft',
  38: 'moveUp',
  39: 'moveRight',
  40: 'moveDown',
  46: 'deleteForward'
};

export var MODIFIED_KEY_EVENTS = {
  8: 'deleteForward',
  9: 'insertBacktab',
  37: 'moveLeftAndModifySelection',
  38: 'moveUpAndModifySelection',
  39: 'moveRightAndModifySelection',
  40: 'moveDownAndModifySelection'
};

Additional

To pause or resume the keyResponder:

keyResponder.pause();
keyResponder.resume();

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

ember-key-responder's People

Contributors

stefanpenner avatar lukemelia avatar chrislopresto avatar mike-north avatar ember-tomster avatar

Watchers

James Cloos avatar Digabit 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.