Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extend keymaster to support dispatching key events to elements #76

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Extend keymaster to support dispatching key events to elements #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 40 additions & 10 deletions keymaster.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,9 +125,40 @@
for(k in _MODIFIERS) assignKey[k] = false;
}

// parse and assign shortcut
function assignKey(key, scope, method){
var keys, mods, i, mi;
function storeKey(keyCode, key, mods, scope, method) {
if (!(keyCode in _handlers)) _handlers[keyCode] = [];
_handlers[keyCode].push({ shortcut: key, scope: scope, method: method, key: key, mods: mods });
}

function createKeyEvent(keyCode, mods, view, type) {
var i;
var keyboardEvent = document.createEventObject ? document.createEventObject() : document.createEvent("Events");
keyboardEvent.initEvent(type, true, true);
keyboardEvent.view = view;
keyboardEvent.keyCode = keyCode;
keyboardEvent.which = keyCode;

for(i = 0; i < mods.length; i++) {
keyboardEvent[modifierMap[mods[i]]] = true;
}

return keyboardEvent;
}

function dispatchKey(keyCode, key, mods, view, element) {
var keyboardEvent;
view = view === 'all' ? window : view;
keyboardEvent = createKeyEvent(keyCode, mods, view, 'keydown');
element.dispatchEvent(keyboardEvent);
keyboardEvent = createKeyEvent(keyCode, mods, view, 'keypress');
element.dispatchEvent(keyboardEvent);
keyboardEvent = createKeyEvent(keyCode, mods, view, 'keyup');
element.dispatchEvent(keyboardEvent);
}

// parse and assign shortcut or dispatch keyEvent
function assignKey(key, scope, method) {
var keys, mods, i, mi, keyCode;
if (method === undefined) {
method = scope;
scope = 'all';
Expand All @@ -148,13 +179,12 @@
mods[mi] = _MODIFIERS[mods[mi]];
key = [key[key.length-1]];
}
// convert to keycode and...
key = key[0]
key = code(key);
// ...store handler
if (!(key in _handlers)) _handlers[key] = [];
_handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods });
}
keyCode = code(key[0]);
if (typeof method === 'function') // ...store handler
storeKey(keyCode, keys[i], mods, scope, method);
else // ... dispatch event
dispatchKey(keyCode, keys[i], mods, scope, method);
}
};

// Returns true if the key with code 'keyCode' is currently down
Expand Down
137 changes: 137 additions & 0 deletions selftest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!html>
<head>
<title>The Keymaster</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script src="keymaster.js"></script>

<h1>
The Keymaster Self Test.
</h1>

<input type="text" placeholder="a text input"/>
<select><option></option><option>select</option></select>
<textarea placeholder="a textarea"></textarea>

<p>The Self Test simulated the first five items on this manual test list:</p>
<ol>
<li>Press 'c'. Nothing should be logged on console.</li>
<li>Press 'o' or Enter or Cursor &larr;. Console should log function call.</li>
<li>Press 'i'. Switches scope to 'issues'.</li>
<li>Press 'c'. Console should log function call.</li>
<li>Press 'o' or Enter or Cursor &larr;. Console should log function call.</li>
<li>Press and hold 'm'. Console should log a message every second.</li>
<li>Every second console should log a message listing all the currently pressed keycodes.</li>
</ol>

<p>
At any time, try pressing ⌘+right, shift+left or ctrl+shift+alt+d.
</p>

<p>
When a input, a select or a textarea element is focused, key inputs should be ignored.
</p>

<script>
key('c', 'issues', function(){
console.log('c/issues');
});

key('command+r, ctrl+r', 'issues', function(){
console.log('Hijacked Command+R or Ctrl+R, damn!');
return false;
});

key('i', function(){
key.setScope('issues');
console.log('Switched to "issues" scope. Command+R or Ctrl+R is now no longer reloading...');
});

key('i', function(){
console.log('(example of multiple assignment)');
});

key('o, enter, left', function(){
console.log('o, enter or left pressed!');
});

key('ctrl+c', function(){
console.log('this is not the command line');
});

key('⌘+right,shift+left,ctrl+shift+alt+d', function(event){
console.log('command+right, or shift+left, or ctrl+shift+alt+d');
console.log('here is the event: ', event);
console.log('key.control', key.control);
console.log('key.ctrl', key.ctrl);
console.log('key.shift', key.shift);
console.log('key.alt', key.alt);
console.log('key["⌘"]', key["⌘"]);
return false; // prevent default && stop propagation
});

key('⌘+x, ctrl+x', function(event, handler){
console.log(handler.shortcut, handler.scope);
return false;
});

key('/', function(){ console.log('/') });
key('shift+]', function(){ console.log('shift+]') });

// set up for testing
var expected;
console.log = function(actual) {
var oneExpected;
if (typeof expected === 'string')
oneExpected = expected;
else
oneExpected = expected.shift();

if (oneExpected === actual) {
console.warn('PASS ' + actual);
} else {
console.error('FAIL ' + actual + ' !== ' + oneExpected);
}
}

// Now fire some events
expected = undefined;
key('c', document.body);
expected = 'o, enter or left pressed!';
key('o, enter, left', document.body);
expected = [
'Switched to "issues" scope. Command+R or Ctrl+R is now no longer reloading...',
'(example of multiple assignment)'
],
key('i', document.body);
expected = 'c/issues'
key('c', document.body);
expected = 'this is not the command line';
key('ctrl+c', document.body);
expected = 'o, enter or left pressed!';
key('o, enter, left', document.body);
expected = [
'command+right, or shift+left, or ctrl+shift+alt+d',
'here is the event: ' ,
'key.control',
'key.ctrl',
'key.shift',
'key.alt',
'key["⌘"]',
'command+right, or shift+left, or ctrl+shift+alt+d',
'here is the event: ' ,
'key.control',
'key.ctrl',
'key.shift',
'key.alt',
'key["⌘"]',
];
key('⌘+right,ctrl+shift+alt+d', document.body);

// document.onkeydown = function(event){
// console.log(event.keyCode);
// }
</script>
</body>
</html>