Refactor keycodes

This commit is contained in:
Steffen van Bergerem 2016-02-26 09:03:33 +01:00
parent e34960392c
commit f948120ba6
20 changed files with 178 additions and 200 deletions

View file

@ -32,7 +32,7 @@ app.views.AspectCreate = app.views.Base.extend({
},
inputKeypress: function(evt) {
if(evt.which === 13) {
if(evt.which === Keycodes.ENTER) {
evt.preventDefault();
this.createAspect();
}

View file

@ -56,7 +56,7 @@ app.views.CommentStream = app.views.Base.extend({
},
keyDownOnCommentBox: function(evt) {
if(evt.keyCode === 13 && evt.ctrlKey) {
if(evt.which === Keycodes.ENTER && evt.ctrlKey) {
this.$("form").submit();
return false;
}

View file

@ -43,7 +43,7 @@ app.views.ConversationsForm = Backbone.View.extend({
},
keyDown : function(evt) {
if( evt.keyCode === 13 && evt.ctrlKey ) {
if(evt.which === Keycodes.ENTER && evt.ctrlKey) {
$(evt.target).parents("form").submit();
}
}

View file

@ -50,7 +50,7 @@ app.views.Conversations = Backbone.View.extend({
},
keyDown : function(evt) {
if( evt.keyCode === 13 && evt.ctrlKey ) {
if(evt.which === Keycodes.ENTER && evt.ctrlKey) {
$(evt.target).parents("form").submit();
}
}

View file

@ -7,11 +7,6 @@
*/
app.views.PublisherMention = app.views.SearchBase.extend({
KEYS: {
PASTE: 118, BACKSPACE: 8, TAB: 9, RETURN: 13, ESC: 27, LEFT: 37,
UP: 38, RIGHT: 39, DOWN: 40, COMMA: 188, SPACE: 32, HOME: 36, END: 35
},
settings: {
triggerChar: "@",
minChars: 2,
@ -222,7 +217,7 @@ app.views.PublisherMention = app.views.SearchBase.extend({
* user press up and down arrows.
*/
onArrowKeysPress: function(e){
if(!this.isVisible() || (e.keyCode !== this.KEYS.UP && e.keyCode !== this.KEYS.DOWN)){
if(!this.isVisible() || (e.which !== Keycodes.UP && e.which !== Keycodes.DOWN)){
return;
}
@ -231,12 +226,12 @@ app.views.PublisherMention = app.views.SearchBase.extend({
this.getTypeaheadInput().typeahead("activate");
this.getTypeaheadInput().typeahead("open");
this.getTypeaheadInput().trigger($.Event("keydown", {keyCode: e.keyCode}));
this.getTypeaheadInput().trigger($.Event("keydown", {keyCode: e.keyCode, which: e.which}));
},
onInputBoxKeyPress: function(e){
// Excluding ctrl+v from key press event in firefox
if(!((e.which === this.KEYS.PASTE && e.ctrlKey) || (e.keyCode === this.KEYS.BACKSPACE))){
if(!((String.fromCharCode(e.which).toLowerCase() === "v" && e.ctrlKey) || (e.which === Keycodes.BACKSPACE))){
var typedValue = String.fromCharCode(e.which || e.keyCode);
this.inputBuffer.push(typedValue);
}
@ -260,8 +255,8 @@ app.views.PublisherMention = app.views.SearchBase.extend({
onInputBoxKeyDown: function(e){
// This also matches HOME/END on OSX which is CMD+LEFT, CMD+RIGHT
if(e.keyCode === this.KEYS.LEFT || e.keyCode === this.KEYS.RIGHT ||
e.keyCode === this.KEYS.HOME || e.keyCode === this.KEYS.END){
if(e.which === Keycodes.LEFT || e.which === Keycodes.RIGHT ||
e.which === Keycodes.HOME || e.which === Keycodes.END){
_.defer(this.clearBuffer);
// IE9 doesn't fire the oninput event when backspace or delete is pressed. This causes the highlighting
@ -274,7 +269,7 @@ app.views.PublisherMention = app.views.SearchBase.extend({
return;
}
if(e.keyCode === this.KEYS.BACKSPACE){
if(e.which === Keycodes.BACKSPACE){
this.inputBuffer = this.inputBuffer.slice(0, this.inputBuffer.length - 1);
return;
}
@ -283,17 +278,17 @@ app.views.PublisherMention = app.views.SearchBase.extend({
return true;
}
switch(e.keyCode){
case this.KEYS.ESC:
case this.KEYS.SPACE:
switch(e.which){
case Keycodes.ESC:
case Keycodes.SPACE:
this.resetMentionBox();
break;
case this.KEYS.UP:
case this.KEYS.DOWN:
case Keycodes.UP:
case Keycodes.DOWN:
this.onArrowKeysPress(e);
break;
case this.KEYS.RETURN:
case this.KEYS.TAB:
case Keycodes.RETURN:
case Keycodes.TAB:
if(this.getSelected().size() === 1){
this.getSelected().click();
return false;

View file

@ -247,8 +247,9 @@ app.views.Publisher = Backbone.View.extend({
// avoid submitting form when pressing Enter key
avoidEnter: function(evt){
if(evt.keyCode === 13)
if(evt.which === Keycodes.ENTER) {
return false;
}
},
getUploadedPhotos: function() {
@ -356,7 +357,7 @@ app.views.Publisher = Backbone.View.extend({
},
keyDown : function(evt) {
if( evt.keyCode === 13 && evt.ctrlKey ) {
if(evt.which === Keycodes.ENTER && evt.ctrlKey) {
this.$("form").submit();
this.open();
return false;

View file

@ -40,7 +40,7 @@ app.views.Search = app.views.SearchBase.extend({
},
inputKeypress: function(evt){
if(evt.which === 13 && $(".tt-suggestion.tt-cursor").length === 0){
if(evt.which === Keycodes.ENTER && $(".tt-suggestion.tt-cursor").length === 0){
$(evt.target).closest("form").submit();
}
},

View file

@ -46,7 +46,7 @@ app.views.TagFollowingList = app.views.Base.extend({
});
this.$("input").bind('keydown', function(evt){
if(evt.keyCode === 13 || evt.keyCode === 9 || evt.keyCode === 32){
if(evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
evt.preventDefault();
if( $('li.as-result-item.active').length === 0 ){
$('li.as-result-item').first().click();

View file

@ -73,7 +73,7 @@ Diaspora.Pages.UsersGettingStarted = function() {
});
autocompleteInput.bind('keydown', function(evt){
if(evt.keyCode === 13 || evt.keyCode === 9 || evt.keyCode === 32){
if(evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
evt.preventDefault();
if( $('li.as-result-item.active').length === 0 ){
$('li.as-result-item').first().click();

View file

@ -21,7 +21,7 @@
});
autocompleteInput.bind('keydown', function(evt){
if(evt.keyCode == 13 || evt.keyCode == 9 || evt.keyCode == 32){
if(evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
evt.preventDefault();
if( $('li.as-result-item.active').length == 0 ){
$('li.as-result-item').first().click();

View file

@ -25,7 +25,7 @@
});
autocompleteInput.bind('keydown', function(evt){
if(evt.keyCode == 13 || evt.keyCode == 9 || evt.keyCode == 32){
if(evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
evt.preventDefault();
if( $('li.as-result-item.active').length == 0 ){
$('li.as-result-item').first().click();

View file

@ -66,6 +66,7 @@
"app",
"Diaspora",
"Keycodes",
"Mentions",
"PosixBracketExpressions"
]

View file

@ -0,0 +1,117 @@
window.Keycodes = {
BACKSPACE: 8,
TAB: 9,
ENTER: 13,
RETURN: 13,
SHIFT: 16,
CTRL: 17,
ALT: 18,
PAUSE: 19,
BREAK: 19,
CAPSLOCK: 20,
ESCAPE: 27,
ESC: 27,
SPACEBAR: 32,
SPACE: 32,
PAGEUP: 33,
PAGEDOWN: 34,
END: 35,
HOME: 36,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
INSERT: 45,
DEL: 46,
DELETE: 46,
0: 48,
1: 49,
2: 50,
3: 51,
4: 52,
5: 53,
6: 54,
7: 55,
8: 56,
9: 57,
A: 65,
B: 66,
C: 67,
D: 68,
E: 69,
F: 70,
G: 71,
H: 72,
I: 73,
J: 74,
K: 75,
L: 76,
M: 77,
N: 78,
O: 79,
P: 80,
Q: 81,
R: 82,
S: 83,
T: 84,
U: 85,
V: 86,
W: 87,
X: 88,
Y: 89,
Z: 90,
LEFTWINDOW: 91,
RIGHTWINDOW: 92,
SELECT: 93,
NUMPAD0: 96,
NUMPAD1: 97,
NUMPAD2: 98,
NUMPAD3: 99,
NUMPAD4: 100,
NUMPAD5: 101,
NUMPAD6: 102,
NUMPAD7: 103,
NUMPAD8: 104,
NUMPAD9: 105,
MULTIPLY: 106,
ADD: 107,
SUBTRACT: 109,
DECIMALPOINT: 110,
DIVIDE: 111,
F1: 112,
F2: 113,
F3: 114,
F4: 115,
F5: 116,
F6: 117,
F7: 118,
F8: 119,
F9: 120,
F10: 121,
F11: 122,
F12: 123,
NUMLOCK: 144,
SCROLLLOCK: 145,
SEMICOLON: 186,
EQUALSIGN: 187,
COMMA: 188,
DASH: 189,
PERIOD: 190,
FORWARDSLASH: 191,
ACCENTGRAVE: 192,
OPENBRACKET: 219,
BACKSLASH: 220,
CLOSEBRACKET: 221,
SINGLEQUOTE: 222,
isInsertion: function(keyCode) {
if(keyCode <= 46 && keyCode !== this.RETURN && keyCode !== this.SPACEBAR) {
return false;
} else if(keyCode > 90 && keyCode < 96) {
return false;
} else if(keyCode >= 112 && keyCode <= 145) {
return false;
} else {
return true;
}
}
};

View file

@ -47,13 +47,13 @@ describe("app.views.AspectCreate", function() {
});
it("should call createAspect if the enter key was pressed", function() {
var e = $.Event("keypress", { which: 13 });
var e = $.Event("keypress", { which: Keycodes.ENTER });
this.view.inputKeypress(e);
expect(this.view.createAspect).toHaveBeenCalled();
});
it("shouldn't call createAspect if another key was pressed", function() {
var e = $.Event("keypress", { which: 42 });
var e = $.Event("keypress", { which: Keycodes.TAB });
this.view.inputKeypress(e);
expect(this.view.createAspect).not.toHaveBeenCalled();
});

View file

@ -107,8 +107,7 @@ describe("app.views.CommentStream", function(){
var form = this.view.$("form");
form.submit(submitCallback);
var e = $.Event("keydown", { keyCode: 13 });
e.ctrlKey = false;
var e = $.Event("keydown", { which: Keycodes.ENTER, ctrlKey: false });
this.view.keyDownOnCommentBox(e);
expect(submitCallback).not.toHaveBeenCalled();
@ -119,8 +118,7 @@ describe("app.views.CommentStream", function(){
var form = this.view.$("form");
form.submit(submitCallback);
var e = $.Event("keydown", { keyCode: 13 });
e.ctrlKey = true;
var e = $.Event("keydown", { which: Keycodes.ENTER, ctrlKey: true });
this.view.keyDownOnCommentBox(e);
expect(submitCallback).toHaveBeenCalled();

View file

@ -64,14 +64,14 @@ describe("app.views.Conversations", function(){
it("should submit the form with ctrl+enter", function(){
$("form#new_message").submit(this.submitCallback);
var e = $.Event("keydown", { keyCode: 13, ctrlKey: true });
var e = $.Event("keydown", { which: Keycodes.ENTER, ctrlKey: true });
$("textarea#message_text").trigger(e);
expect(this.submitCallback).toHaveBeenCalled();
});
it("shouldn't submit the form without the ctrl key", function(){
$("form#new_message").submit(this.submitCallback);
var e = $.Event("keydown", { keyCode: 13, ctrlKey: false });
var e = $.Event("keydown", { which: Keycodes.ENTER, ctrlKey: false });
$("textarea#message_text").trigger(e);
expect(this.submitCallback).not.toHaveBeenCalled();
});

View file

@ -225,8 +225,7 @@ describe("app.views.Publisher", function() {
var submitCallback = jasmine.createSpy().and.returnValue(false);
form.submit(submitCallback);
var e = $.Event("keydown", { keyCode: 13 });
e.ctrlKey = true;
var e = $.Event("keydown", { which: Keycodes.ENTER, ctrlKey: true });
this.view.keyDown(e);
expect(submitCallback).toHaveBeenCalled();
@ -460,8 +459,7 @@ describe("app.views.Publisher", function() {
describe('#avoidEnter', function(){
it("Avoid submitting the form when pressing enter", function(){
// simulates the event object
var evt = {};
evt.keyCode = 13;
var evt = $.Event("keydown", { which: Keycodes.ENTER });
// should return false in order to avoid the form submition
expect(this.view.avoidEnter(evt)).toBeFalsy();

View file

@ -16,9 +16,7 @@ describe("app.views.StreamShortcuts", function () {
describe("pressing 'j'", function(){
it("should call 'gotoNext' if not pressed in an input field", function(){
spyOn(this.view, 'gotoNext');
var e = $.Event("keydown", { which: 74, target: {type: "div"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('j');
var e = $.Event("keydown", { which: Keycodes.J, target: {type: "div"} });
this.view._onHotkeyDown(e);
expect(this.view.gotoNext).toHaveBeenCalled();
});
@ -32,9 +30,7 @@ describe("app.views.StreamShortcuts", function () {
it("shouldn't do anything if the user types in an input field", function(){
spyOn(this.view, 'gotoNext');
spyOn(this.view, 'selectPost');
var e = $.Event("keydown", { which: 74, target: {type: "textarea"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('j');
var e = $.Event("keydown", { which: Keycodes.J, target: {type: "textarea"} });
this.view._onHotkeyDown(e);
expect(this.view.gotoNext).not.toHaveBeenCalled();
expect(this.view.selectPost).not.toHaveBeenCalled();
@ -44,9 +40,7 @@ describe("app.views.StreamShortcuts", function () {
describe("pressing 'k'", function(){
it("should call 'gotoPrev' if not pressed in an input field", function(){
spyOn(this.view, 'gotoPrev');
var e = $.Event("keydown", { which: 75, target: {type: "div"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('k');
var e = $.Event("keydown", { which: Keycodes.K, target: {type: "div"} });
this.view._onHotkeyDown(e);
expect(this.view.gotoPrev).toHaveBeenCalled();
});
@ -60,9 +54,7 @@ describe("app.views.StreamShortcuts", function () {
it("shouldn't do anything if the user types in an input field", function(){
spyOn(this.view, 'gotoPrev');
spyOn(this.view, 'selectPost');
var e = $.Event("keydown", { which: 75, target: {type: "textarea"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('k');
var e = $.Event("keydown", { which: Keycodes.K, target: {type: "textarea"} });
this.view._onHotkeyDown(e);
expect(this.view.gotoPrev).not.toHaveBeenCalled();
expect(this.view.selectPost).not.toHaveBeenCalled();
@ -72,18 +64,14 @@ describe("app.views.StreamShortcuts", function () {
describe("pressing 'c'", function(){
it("should click on the comment-button if not pressed in an input field", function(){
spyOn(this.view, 'commentSelected');
var e = $.Event("keyup", { which: 67, target: {type: "div"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('c');
var e = $.Event("keyup", { which: Keycodes.C, target: {type: "div"} });
this.view._onHotkeyUp(e);
expect(this.view.commentSelected).toHaveBeenCalled();
});
it("shouldn't do anything if the user types in an input field", function(){
spyOn(this.view, 'commentSelected');
var e = $.Event("keyup", { which: 67, target: {type: "textarea"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('c');
var e = $.Event("keyup", { which: Keycodes.C, target: {type: "textarea"} });
this.view._onHotkeyUp(e);
expect(this.view.commentSelected).not.toHaveBeenCalled();
});
@ -92,18 +80,14 @@ describe("app.views.StreamShortcuts", function () {
describe("pressing 'l'", function(){
it("should click on the like-button if not pressed in an input field", function(){
spyOn(this.view, 'likeSelected');
var e = $.Event("keyup", { which: 76, target: {type: "div"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('l');
var e = $.Event("keyup", { which: Keycodes.L, target: {type: "div"} });
this.view._onHotkeyUp(e);
expect(this.view.likeSelected).toHaveBeenCalled();
});
it("shouldn't do anything if the user types in an input field", function(){
spyOn(this.view, 'likeSelected');
var e = $.Event("keyup", { which: 76, target: {type: "textarea"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('l');
var e = $.Event("keyup", { which: Keycodes.L, target: {type: "textarea"} });
this.view._onHotkeyUp(e);
expect(this.view.likeSelected).not.toHaveBeenCalled();
});
@ -112,18 +96,14 @@ describe("app.views.StreamShortcuts", function () {
describe("pressing 'r'", function(){
it("should click on the reshare-button if not pressed in an input field", function(){
spyOn(this.view, 'reshareSelected');
var e = $.Event("keyup", { which: 82, target: {type: "div"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('r');
var e = $.Event("keyup", { which: Keycodes.R, target: {type: "div"} });
this.view._onHotkeyUp(e);
expect(this.view.reshareSelected).toHaveBeenCalled();
});
it("shouldn't do anything if the user types in an input field", function(){
spyOn(this.view, 'reshareSelected');
var e = $.Event("keyup", { which: 82, target: {type: "textarea"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('r');
var e = $.Event("keyup", { which: Keycodes.R, target: {type: "textarea"} });
this.view._onHotkeyUp(e);
expect(this.view.reshareSelected).not.toHaveBeenCalled();
});
@ -132,18 +112,14 @@ describe("app.views.StreamShortcuts", function () {
describe("pressing 'm'", function(){
it("should click on the more-button if not pressed in an input field", function(){
spyOn(this.view, 'expandSelected');
var e = $.Event("keyup", { which: 77, target: {type: "div"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('m');
var e = $.Event("keyup", { which: Keycodes.M, target: {type: "div"} });
this.view._onHotkeyUp(e);
expect(this.view.expandSelected).toHaveBeenCalled();
});
it("shouldn't do anything if the user types in an input field", function(){
spyOn(this.view, 'expandSelected');
var e = $.Event("keyup", { which: 77, target: {type: "textarea"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('m');
var e = $.Event("keyup", { which: Keycodes.M, target: {type: "textarea"} });
this.view._onHotkeyUp(e);
expect(this.view.expandSelected).not.toHaveBeenCalled();
});
@ -152,18 +128,14 @@ describe("app.views.StreamShortcuts", function () {
describe("pressing 'o'", function(){
it("should click on the more-button if not pressed in an input field", function(){
spyOn(this.view, 'openFirstLinkSelected');
var e = $.Event("keyup", { which: 79, target: {type: "div"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('o');
var e = $.Event("keyup", { which: Keycodes.O, target: {type: "div"} });
this.view._onHotkeyUp(e);
expect(this.view.openFirstLinkSelected).toHaveBeenCalled();
});
it("shouldn't do anything if the user types in an input field", function(){
spyOn(this.view, 'openFirstLinkSelected');
var e = $.Event("keyup", { which: 79, target: {type: "textarea"} });
//verify that the test is correct
expect(String.fromCharCode( e.which ).toLowerCase()).toBe('o');
var e = $.Event("keyup", { which: Keycodes.O, target: {type: "textarea"} });
this.view._onHotkeyUp(e);
expect(this.view.openFirstLinkSelected).not.toHaveBeenCalled();
});

View file

@ -0,0 +1,13 @@
describe("Keycodes", function() {
it("sets the correct keycode for letters", function() {
"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").forEach(function(c) {
expect(String.fromCharCode(Keycodes[c])).toBe(c);
});
});
it("sets the correct keycode for digits", function() {
"0123456789".split("").forEach(function(c) {
expect(String.fromCharCode(Keycodes[c])).toBe(c);
});
});
});

View file

@ -1,117 +0,0 @@
var KEYCODES = {
BACKSPACE : 8,
TAB : 9,
ENTER : 13,
RETURN : 13,
SHIFT : 16,
CTRL : 17,
ALT : 18,
PAUSE : 19,
BREAK : 19,
CAPSLOCK : 20,
ESCAPE : 27,
ESC : 27,
SPACEBAR : 32,
SPACE: 32,
PAGEUP : 33,
PAGEDOWN : 34,
END : 35,
HOME : 36,
LEFT : 37,
UP : 38,
RIGHT : 39,
DOWN : 40,
INSERT : 45,
DEL : 46,
DELETE : 46,
0 : 48,
1 : 49,
2 : 50,
3 : 51,
4 : 52,
5 : 53,
6 : 54,
7 : 55,
8 : 56,
9 : 57,
A : 65,
B : 66,
C : 67,
D : 68,
E : 69,
F : 70,
G : 71,
H : 72,
I : 73,
J : 74,
K : 75,
L : 76,
M : 77,
N : 78,
O : 79,
P : 80,
Q : 81,
R : 82,
S : 83,
T : 84,
U : 85,
V : 86,
W : 87,
X : 88,
Y : 89,
Z : 90,
LEFTWINDOW : 91,
RIGHTWINDOW : 92,
SELECT : 93,
NUMPAD0 : 96,
NUMPAD1 : 97,
NUMPAD2 : 98,
NUMPAD3 : 99,
NUMPAD4 : 100,
NUMPAD5 : 101,
NUMPAD6 : 102,
NUMPAD7 : 103,
NUMPAD8 : 104,
NUMPAD9 : 105,
MULTIPLY : 106,
ADD : 107,
SUBTRACT : 109,
DECIMALPOINT : 110,
DIVIDE : 111,
F1 : 112,
F2 : 113,
F3 : 114,
F4 : 115,
F5 : 116,
F6 : 117,
F7 : 118,
F8 : 119,
F9 : 120,
F10 : 121,
F11 : 122,
F12 : 123,
NUMLOCK : 144,
SCROLLLOCK : 145,
SEMICOLON : 186,
EQUALSIGN : 187,
COMMA : 188,
DASH : 189,
PERIOD : 190,
FORWARDSLASH : 191,
ACCENTGRAVE : 192,
OPENBRACKET : 219,
BACKSLASH : 220,
CLOSEBRACKET : 221,
SINGLEQUOTE : 222,
isInsertion : function(keyCode){
if(keyCode <= 46 && keyCode != this.RETURN && keyCode != this.SPACEBAR){
return false;
}else if(keyCode > 90 && keyCode < 96){
return false;
}else if(keyCode >= 112 && keyCode <= 145){
return false;
}else {
return true;
}
}
};