keyboard
Version:
High quality keybinding library
69 lines (60 loc) • 1.77 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Keyboard</title>
</head>
<body>
<ul id="mods"></ul>
<div id="bind"></div>
<script src="Keyboard.js"></script>
<style>
html
{ background: #000; color: #eee; font-family: sans-serif; font-size: 20px; text-align: center; }
#mods li
{ box-shadow: inset 0 0 20px 1px hsla(140, 100%, 50%, .2); display: inline-block; padding: 15px; margin: 5px; border-radius: 5px;
-webkit-transition: .10s; -moz-transition: .10s; }
#mods li.active
{ box-shadow: inset 0 0 20px 4px hsla(140, 100%, 50%, .7); }
#bind
{ font-size: 150%; text-align: center; box-shadow: inset 0 0 20px 4px hsla(300, 100%, 50%, .3); width: 400px; display: inline-block;
padding: 15px; border-radius: 5px; line-height: 50px; height: 50px; }
</style>
<script>
var modifiers = {
Alt: true,
AltGr: true,
Shift: true,
Control: true,
Meta: true,
};
Object.keys(modifiers).forEach(function(mod){
var el = document.createElement('li');
el.textContent = mod;
el.id = mod;
mods.appendChild(el);
keyboard.on(mod, function(e){
if (e.action === 'activate') {
el.className = 'active';
} else if (e.action === 'release') {
el.className = '';
}
});
});
var engaged = {};
keyboard.on('*', function(e){
if (e.action === 'activate' && !(e.name in modifiers)) {
engaged[e.name] = true;
bind.textContent = Object.keys(engaged).join(' · ');
} else if (e.action === 'release' && !(e.name in modifiers)) {
delete engaged[e.name];
bind.textContent = Object.keys(engaged).join(' · ');
}
});
window.addEventListener('blur', function(e){
engaged = {};
bind.textContent = '';
});
</script>
</body>
</html>