bigopon/app.html

## app.html
<template>
  <require from="./on-key"></require>
  <div>
    Press [<b>Ctrl + Enter</b>] in textbox <br/>
    Or [<b>Alt + Click</b>] it to trigger event
  </div>
  <input
    value.bind="message"
    keyup.delegate="textEntered() & keys:'ctrl':13"
    mousedown.delegate="textClicked() & keys:'alt'"
  />
  <hr/>
  <label style='display: block;'>
    Dynamic key binding:<br/>
    <input type='number' value.bind='key | number'/>
  </label>
</template>

## app.js
export class App {
  message = 'Hello World!';
  textEntered() {
    alert(this.message);
  }
  textClicked() {
    alert(this.message);
  }
}

export class NumberValueConverter {
  fromView(v) {
    return parseFloat(v);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## on-key.js
export const keyMap = {
  enter: 13,
  esc: 27,
  tab: 9,

  // When you wish to change something at run time or after start
  setAlias(alias, key) {
    this[alias] = key;
    remapAllBehaviors();
  },

  setMetaKey(alias, key) {
    metaKeys[alias] = key;
    remapAllBehaviors();
  }
}


export class KeysBindingBehavior {

  binding: any
  inputs: ( string | number)[]

  bind(binding, scope, ...keyCodesOrAliases) {
    if (!binding.callSource || !binding.targetEvent) {
      throw new Error('Keys binding behavior only supports event.');
    }
    if(keyCodesOrAliases.length === 0) {
      throw new Error("Expected at least one key-code or alias that should trigger the event");
    }
    this.binding = binding;
    // need to hold this for reuse
    this.inputs = keyCodesOrAliases;
    this.map();
    keysBehaviors.push(this);

    binding.isKeyboardEvent = keyboardEvents.indexOf(binding.targetEvent) !== -1;
    binding.keyCodeFilteredCallSource = binding.callSource;
    binding.callSource = keysCallSource;
  }

  unbind(binding, scope) {
    const idx = keysBehaviors.indexOf(this);
    if (idx !== -1) {
      keysBehaviors.splice(idx, 1);
    }
    binding.callSource = binding.keyCodeFilteredCallSource;
    binding.keyCodeFilteredCallSource = binding.keys = binding.inputs = null;
  }

  map() {
    this.binding.keys = this.inputs.reduce(keyMapper, []);
  }
}


const keysBehaviors = [];

function remapAllBehaviors() {
  for (let i = 0, ii = keysBehaviors.length; i < ii; ++i) keysBehaviors[i].map();
}

const metaKeys = {
  ctrl: true,
  alt: true,
  shift: true,
  meta: true
}

const keyboardEvents = ['keydown', 'keypress', 'keyup', 'input'];

function keyMapper(keys, item) {
  if (typeof item === 'number') {
    keys.push(item);
  } else if (metaKeys[item]) {
    (keys.meta = keys.meta || []).push(item);
  } else if (keyMap[item]) {
    keys.push(keyMap[item]);
  }
  return keys;
}

function keysCallSource(event) {
  const keys = this.keys;
  if (keys.meta) {
    for (let i = 0, ii = keys.meta.length; i < ii; ++i) {
      if (!event[keys.meta[i] + 'Key']) return;
    }
  }
  if (this.isKeyboardEvent) {
    if (keys.indexOf(event.keyCode) !== -1) {
      this.keyCodeFilteredCallSource(event);
    }
    return;
  }
  this.keyCodeFilteredCallSource(event);
}
	<template>
	<require from="./on-key"></require>
	<div>
	Press [<b>Ctrl + Enter</b>] in textbox <br/>
	Or [<b>Alt + Click</b>] it to trigger event
	</div>
	<input
	value.bind="message"
	keyup.delegate="textEntered() & keys:'ctrl':13"
	mousedown.delegate="textClicked() & keys:'alt'"
	/>
	<hr/>
	<label style='display: block;'>
	Dynamic key binding:<br/>
	<input type='number' value.bind='key \| number'/>
	</label>
	</template>
	export class App {
	message = 'Hello World!';
	textEntered() {
	alert(this.message);
	}
	textClicked() {
	alert(this.message);
	}
	}

	export class NumberValueConverter {
	fromView(v) {
	return parseFloat(v);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	export const keyMap = {
	enter: 13,
	esc: 27,
	tab: 9,

	// When you wish to change something at run time or after start
	setAlias(alias, key) {
	this[alias] = key;
	remapAllBehaviors();
	},

	setMetaKey(alias, key) {
	metaKeys[alias] = key;
	remapAllBehaviors();
	}
	}


	export class KeysBindingBehavior {

	binding: any
	inputs: ( string \| number)[]

	bind(binding, scope, ...keyCodesOrAliases) {
	if (!binding.callSource \|\| !binding.targetEvent) {
	throw new Error('Keys binding behavior only supports event.');
	}
	if(keyCodesOrAliases.length === 0) {
	throw new Error("Expected at least one key-code or alias that should trigger the event");
	}
	this.binding = binding;
	// need to hold this for reuse
	this.inputs = keyCodesOrAliases;
	this.map();
	keysBehaviors.push(this);

	binding.isKeyboardEvent = keyboardEvents.indexOf(binding.targetEvent) !== -1;
	binding.keyCodeFilteredCallSource = binding.callSource;
	binding.callSource = keysCallSource;
	}

	unbind(binding, scope) {
	const idx = keysBehaviors.indexOf(this);
	if (idx !== -1) {
	keysBehaviors.splice(idx, 1);
	}
	binding.callSource = binding.keyCodeFilteredCallSource;
	binding.keyCodeFilteredCallSource = binding.keys = binding.inputs = null;
	}

	map() {
	this.binding.keys = this.inputs.reduce(keyMapper, []);
	}
	}


	const keysBehaviors = [];

	function remapAllBehaviors() {
	for (let i = 0, ii = keysBehaviors.length; i < ii; ++i) keysBehaviors[i].map();
	}

	const metaKeys = {
	ctrl: true,
	alt: true,
	shift: true,
	meta: true
	}

	const keyboardEvents = ['keydown', 'keypress', 'keyup', 'input'];

	function keyMapper(keys, item) {
	if (typeof item === 'number') {
	keys.push(item);
	} else if (metaKeys[item]) {
	(keys.meta = keys.meta \|\| []).push(item);
	} else if (keyMap[item]) {
	keys.push(keyMap[item]);
	}
	return keys;
	}

	function keysCallSource(event) {
	const keys = this.keys;
	if (keys.meta) {
	for (let i = 0, ii = keys.meta.length; i < ii; ++i) {
	if (!event[keys.meta[i] + 'Key']) return;
	}
	}
	if (this.isKeyboardEvent) {
	if (keys.indexOf(event.keyCode) !== -1) {
	this.keyCodeFilteredCallSource(event);
	}
	return;
	}
	this.keyCodeFilteredCallSource(event);
	}