/ember-route-input

Input controls for ember routes using route actions

Primary LanguageJavaScriptMIT LicenseMIT

ember-route-input

NPM version npm

An Ember addon to set input (controls which map to a ember-route-action-helper), allowing simple input bindings which scope only to the route they are defined in and require no other hooks or bindings.

Installation

Requires: ember-route-action-helper, ember-browserify, stream-responder-heirarchy, extended-emitter

and optionally supports:

ember install ember-route-input

you'll also want an initializer to customize your bindings

ember g initializer input-init

Usage

There are a few different supported input types:

Keyboard

  • Main Field : .key
  • Supported Modifiers :
    • shift
    • ctrl/control
    • alt/alternate/option
  • Input Identifier : 'keyboard'

Initialize

import Route from '@ember/routing/route';
//...
//bind to keypress on document.body
Route.bodyInput();

In the Route

export default Route.extend({
  //...
  input: function(){
    return {
      keyboard : {
        "arrowleft" : "turnLeft",
        "arrowright" : "turnRight",
      }
    };
  },
  actions : {
    turnLeft : function(e){ /* do something */ },
    turnRight : function(e){ /* do something */ }
  }
});

Controllers

- **Main Field** : `.button` - **Supported Modifiers** : - all other keys are supported : each button-up event that triggers an event will have all other pressed keys as available modifiers - **Input Identifier** : 'controller'

Initialize

import Route from '@ember/routing/route';
//...
//bind to gamepad through the Web API
Route.addInputSource(require('mappable-gamepad'))

In the Route

export default Route.extend({
  //...
  input: function(){
    return {
      controller : {
        "y" : "explode"
      }
    };
  },
  actions : {
    explode : function(e){ /* do something */ }
  }
});

Card Swipe

  • Main Field : .account
  • Supported Modifiers :
    • visa
    • mastercard
    • valid/invalid
  • Input Identifier : 'cardswipe'

Initialize

import Route from '@ember/routing/route';
//...
//bind to keypress on document.body (same as the keyboard)
Route.bodyInput();

In the Route

Route.addInputSource(require('card-swipe'))
export default Route.extend({
  //...
  input: function(){
    return {
      cardswipe : {
        "invalid+credit" : "suggestAnotherCard",
        "valid+credit" : "processTransactionIfReady",
      }
    };
  },
  actions : {
    suggestAnotherCard : function(e){ /* do something */ },
    processTransactionIfReady : function(e){ /* do something */ }
  }
});

Barcode Scanner

Barcode scanner support is only designed for [`ember-electron`](https://ember-electron.js.org/), other setups might work, but no guarantees (and definitely not the browser).
  • Main Field : .scan
  • Supported Modifiers :
    • upc, upcA
    • ean, ean8, ean13
    • code128
    • codabar
  • Input Identifier : 'barcodescanner'

Initialize

import Route from '@ember/routing/route';
const Scanner = requireNode('barcode-scanner/event-adapter/client.js');

Route.addInputSource(Scanner)

electron main

const BarcodeScanner = require('barcode-scanner');
const Scanner = require('barcode-scanner/event-adapter/server.js');
const { ipcMain } = require('electron');

var scanner = new Scanner({
    name : 'barcode',
    scanner : BarcodeScanner,
    emitter: ipcMain,
    transformEmitterFn :(emitter, event) => event.sender
});
scanner.listenForDeviceListRequest();
scanner.listenForDeviceListenerRequest();

In the Route

export default Route.extend({
  //...
  input: function(){
    return {
      barcodescanner : {
        "ean+barcode" : "lookupOnAmazon",
        "code128+barcode" : "lookupInInventory",
      }
    };
  },
  actions : {
    lookupOnAmazon : function(e){ /* do something */ },
    lookupInInventory : function(e){ /* do something */ }
  }
});

Roadmap

Upcoming Features (PRs Welcome!)

  • config interfaces for supported inputs
  • QR scanning support
  • NFC scanner
  • Support for controller actions, too
  • make browserify optional

Contributing

Installation

  • git clone <repository-url>
  • cd ember-route-input
  • npm install

Linting

  • npm run lint:js
  • npm run lint:js -- --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

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

License

This project is licensed under the MIT License.