DEV: Use `key` over the deprecated `keyCode` (#13795)

Makes the code a bit more readable. Inspired by https://github.com/emberjs/ember.js/pull/19185
This commit is contained in:
Jarek Radosz 2021-08-09 11:41:36 +02:00 committed by GitHub
parent 8df48b516f
commit e68c1d5ba5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 165 additions and 66 deletions

View File

@ -28,8 +28,7 @@ export default Component.extend({
schedule("afterRender", () => {
$(this.element.querySelector(".external-url")).keydown((e) => {
// enter key
if (e.keyCode === 13) {
if (e.key === "Enter") {
this.send("submit");
}
});

View File

@ -83,7 +83,7 @@ export default Component.extend({
_init() {
schedule("afterRender", () => {
$(this.element.querySelector(".ip-address-input")).keydown((e) => {
if (e.keyCode === 13) {
if (e.key === "Enter") {
this.send("submit");
}
});

View File

@ -33,7 +33,7 @@ export default Component.extend({
},
keyDown(event) {
if (event.keyCode === 13) {
if (event.key === "Enter") {
this.send("addValue", this.newValue);
}
},

View File

@ -118,7 +118,7 @@ export default Component.extend({
_init() {
schedule("afterRender", () => {
$(this.element.querySelector(".watched-word-input")).keydown((e) => {
if (e.keyCode === 13) {
if (e.key === "Enter") {
this.send("submit");
}
});

View File

@ -138,7 +138,7 @@ export default Mixin.create({
"keydown.setting-enter",
".input-setting-string",
(e) => {
if (e.keyCode === 13) {
if (e.key === "Enter") {
// enter key
this.send("save");
}

View File

@ -43,7 +43,7 @@ export default Component.extend({
this._super(...arguments);
schedule("afterRender", () => {
$("#choose-topic-title").keydown((e) => {
if (e.keyCode === 13) {
if (e.key === "Enter") {
return false;
}
});

View File

@ -44,7 +44,7 @@ export default Component.extend({
}
$(this.element).on("keydown.discourse-create-account", (e) => {
if (!this.disabled && e.keyCode === 13) {
if (!this.disabled && e.key === "Enter") {
e.preventDefault();
e.stopPropagation();
this.action();

View File

@ -21,7 +21,7 @@ export default Component.extend({
$(
"#login-account-password, #login-account-name, #login-second-factor"
).keydown((e) => {
if (e.keyCode === 13) {
if (e.key === "Enter") {
this.action();
}
});

View File

@ -156,7 +156,7 @@ export default Component.extend({
return;
}
if (event.keyCode === 27) {
if (event.key === "Escape") {
this.send("close");
}
},

View File

@ -56,7 +56,7 @@ export default Controller.extend(ModalFunctionality, {
@bind
keyDown(event) {
// CTRL+ENTER or CMD+ENTER
if (event.keyCode === 13 && (event.ctrlKey || event.metaKey)) {
if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
if (this.submitEnabled) {
this.send("createFlag");
return false;

View File

@ -539,7 +539,7 @@ export default {
const selection = document.querySelector(selector);
// Special case: We're binding to enter.
if (e && e.keyCode === 13) {
if (e && e.key === "Enter") {
// Binding to enter should only be effective when there is something
// to select.
if (!selection) {

View File

@ -358,8 +358,7 @@ export default Mixin.create({
},
keyUp(e) {
if (e.keyCode === 27) {
// ESC
if (e.key === "Escape") {
const target = this.cardTarget;
this._close();
target.focus();

View File

@ -102,6 +102,7 @@ acceptance("Composer", function (needs) {
const event = document.createEvent("Event");
event.initEvent("keydown", true, true);
event[mac ? "metaKey" : "ctrlKey"] = true;
event.key = "B";
event.keyCode = 66;
run(() => textarea.dispatchEvent(event));

View File

@ -17,9 +17,10 @@ async function openFlagModal() {
await click(".topic-post:first-child button.create-flag");
}
function keyDown(element, keyCode, modifier) {
function pressEnter(element, modifier) {
const event = document.createEvent("Event");
event.initEvent("keydown", true, true);
event.key = "Enter";
event.keyCode = 13;
event[modifier] = true;
run(() => element.dispatchEvent(event));
@ -158,14 +159,14 @@ acceptance("flagging", function (needs) {
await openFlagModal();
const modal = query("#discourse-modal");
keyDown(modal, 13, "ctrlKey");
pressEnter(modal, "ctrlKey");
assert.ok(
exists("#discourse-modal:visible"),
"The modal wasn't closed because the accept button was disabled"
);
await click("#radio_inappropriate"); // this enables the accept button
keyDown(modal, 13, "ctrlKey");
pressEnter(modal, "ctrlKey");
assert.ok(!exists("#discourse-modal:visible"), "The modal was closed");
});
@ -174,14 +175,14 @@ acceptance("flagging", function (needs) {
await openFlagModal();
const modal = query("#discourse-modal");
keyDown(modal, 13, "metaKey");
pressEnter(modal, "metaKey");
assert.ok(
exists("#discourse-modal:visible"),
"The modal wasn't closed because the accept button was disabled"
);
await click("#radio_inappropriate"); // this enables the accept button
keyDown(modal, 13, "ctrlKey");
pressEnter(modal, "ctrlKey");
assert.ok(!exists("#discourse-modal:visible"), "The modal was closed");
});
});

View File

@ -89,7 +89,7 @@ acceptance("Managing Group Membership", function (needs) {
);
await emailDomains.expand();
await emailDomains.fillInFilter("foo.com");
await emailDomains.keyboard("enter");
await emailDomains.keyboard("Enter");
assert.equal(emailDomains.header().value(), "foo.com");
});

View File

@ -66,23 +66,27 @@ async function keyboardHelper(value, target, selector) {
if (value === "selectAll") {
// special casing the only one not working with triggerEvent
const event = jQuery.Event("keydown");
event.key = "A";
event.keyCode = 65;
event.metaKey = true;
target.trigger(event);
} else {
const mapping = {
enter: { keyCode: 13 },
backspace: { keyCode: 8 },
escape: { keyCode: 27 },
down: { keyCode: 40 },
up: { keyCode: 38 },
tab: { keyCode: 9 },
enter: { key: "Enter", keyCode: 13 },
backspace: { key: "Backspace", keyCode: 8 },
escape: { key: "Escape", keyCode: 27 },
down: { key: "ArrowDown", keyCode: 40 },
up: { key: "ArrowUp", keyCode: 38 },
tab: { key: "Tab", keyCode: 9 },
};
await triggerEvent(
target[0],
"keydown",
mapping[value] || { keyCode: value.charCodeAt(0) }
mapping[value.toLowerCase()] || {
key: value,
keyCode: value.charCodeAt(0),
}
);
}
}

View File

@ -45,7 +45,7 @@ discourseModule(
assert.equal(queryAll(".select-kit-row").text().trim(), "monkey x1");
await this.subject.fillInFilter("key");
assert.equal(queryAll(".select-kit-row").text().trim(), "monkey x1");
await this.subject.keyboard("enter");
await this.subject.keyboard("Enter");
assert.equal(this.subject.header().value(), "foo,bar,monkey");
},
@ -64,7 +64,7 @@ discourseModule(
await this.subject.expand();
await this.subject.fillInFilter("baz");
await this.subject.keyboard("enter");
await this.subject.keyboard("Enter");
const error = queryAll(".select-kit-error").text();
assert.equal(

View File

@ -25,7 +25,7 @@ discourseModule("Integration | Component | value-list", function (hooks) {
async test(assert) {
await selectKit().expand();
await selectKit().fillInFilter("eviltrout");
await selectKit().keyboard("enter");
await selectKit().keyboard("Enter");
assert.equal(
count(".values .value"),
@ -109,7 +109,7 @@ discourseModule("Integration | Component | value-list", function (hooks) {
await selectKit().expand();
await selectKit().fillInFilter("eviltrout");
await selectKit().keyboard("enter");
await selectKit().keyboard("Enter");
assert.equal(
count(".values .value"),
@ -137,7 +137,7 @@ discourseModule("Integration | Component | value-list", function (hooks) {
async test(assert) {
await selectKit().expand();
await selectKit().fillInFilter("eviltrout");
await selectKit().keyboard("enter");
await selectKit().keyboard("Enter");
assert.equal(
count(".values .value"),

View File

@ -9,3 +9,106 @@ document.write(
let setupTestsLegacy = require("discourse/tests/setup-tests").setupTestsLegacy;
setupTestsLegacy(window.Discourse);
const keyFromKeyCode = {
8: "Backspace",
9: "Tab",
13: "Enter",
16: "Shift",
17: "Control",
18: "Alt",
20: "CapsLock",
27: "Escape",
32: " ",
37: "ArrowLeft",
38: "ArrowUp",
39: "ArrowRight",
40: "ArrowDown",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
91: "Meta",
93: "Meta",
97: "a",
98: "b",
99: "c",
100: "d",
101: "e",
102: "f",
103: "g",
104: "h",
105: "i",
106: "j",
107: "k",
108: "l",
109: "m",
110: "n",
111: "o",
112: "p",
113: "q",
114: "r",
115: "s",
116: "t",
117: "u",
118: "v",
119: "w",
120: "x",
121: "y",
122: "z",
187: "=",
189: "-",
};
window.keyEvent = function (selector, contextOrType, typeOrKeyCode, keyCode) {
let context, type;
if (keyCode === undefined) {
context = null;
keyCode = typeOrKeyCode;
type = contextOrType;
} else {
context = contextOrType;
type = typeOrKeyCode;
}
let key = keyFromKeyCode[keyCode];
return window.triggerEvent(selector, context, type, {
keyCode: keyCode,
which: keyCode,
key: key,
});
};

View File

@ -193,11 +193,11 @@ export default ComboBox.extend(TagsMixin, {
_onKeydown(event) {
const value = makeArray(this.value);
if (event.keyCode === 8) {
if (event.key === "Backspace") {
if (!this.selectKit.filter) {
this._onBackspace(this.value, this.highlightedTag);
}
} else if (event.keyCode === 37) {
} else if (event.key === "ArrowLeft") {
if (this.highlightedTag) {
const index = value.indexOf(this.highlightedTag);
const highlightedTag = value[index - 1]
@ -207,7 +207,7 @@ export default ComboBox.extend(TagsMixin, {
} else {
this.set("highlightedTag", value.lastObject);
}
} else if (event.keyCode === 39) {
} else if (event.key === "ArrowRight") {
if (this.highlightedTag) {
const index = value.indexOf(this.highlightedTag);
const highlightedTag = value[index + 1]

View File

@ -54,7 +54,7 @@ export default Component.extend(UtilsMixin, {
},
onKeyup(event) {
if (event.keyCode === 13 && this.selectKit.enterDisabled) {
if (event.key === "Enter" && this.selectKit.enterDisabled) {
this.element.querySelector("input").focus();
event.preventDefault();
event.stopPropagation();
@ -69,30 +69,28 @@ export default Component.extend(UtilsMixin, {
}
// Do nothing for left/right arrow
if (event.keyCode === 37 || event.keyCode === 39) {
if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
return true;
}
// Up arrow
if (event.keyCode === 38) {
if (event.key === "ArrowUp") {
this.selectKit.highlightPrevious();
return false;
}
// Down arrow
if (event.keyCode === 40) {
if (event.key === "ArrowDown") {
this.selectKit.highlightNext();
return false;
}
// Escape
if (event.keyCode === 27) {
if (event.key === "Escape") {
this.selectKit.close(event);
return false;
}
// Enter
if (event.keyCode === 13 && this.selectKit.highlighted) {
if (event.key === "Enter" && this.selectKit.highlighted) {
this.selectKit.select(
this.getValue(this.selectKit.highlighted),
this.selectKit.highlighted
@ -101,7 +99,7 @@ export default Component.extend(UtilsMixin, {
}
if (
event.keyCode === 13 &&
event.key === "Enter" &&
(!this.selectKit.highlighted || this.selectKit.enterDisabled)
) {
this.element.querySelector("input").focus();
@ -113,7 +111,7 @@ export default Component.extend(UtilsMixin, {
}
// Tab
if (event.keyCode === 9) {
if (event.key === "Tab") {
if (this.selectKit.highlighted && this.selectKit.isExpanded) {
this.selectKit.select(
this.getValue(this.selectKit.highlighted),
@ -123,6 +121,7 @@ export default Component.extend(UtilsMixin, {
this.selectKit.close(event);
return;
}
this.selectKit.set("highlighted", null);
},
},

View File

@ -84,7 +84,7 @@ export default Component.extend(UtilsMixin, {
},
keyUp(event) {
if (event.keyCode === 32) {
if (event.key === " ") {
event.preventDefault();
}
},
@ -98,13 +98,12 @@ export default Component.extend(UtilsMixin, {
return false;
}
const onlyShiftKey = event.shiftKey && event.keyCode === 16;
const onlyShiftKey = event.shiftKey && event.key === "Shift";
if (event.metaKey || onlyShiftKey) {
return;
}
if (event.keyCode === 13) {
// Enter
if (event.key === "Enter") {
if (this.selectKit.isExpanded) {
if (this.selectKit.highlighted) {
this.selectKit.select(
@ -116,37 +115,31 @@ export default Component.extend(UtilsMixin, {
} else {
this.selectKit.close(event);
}
} else if (event.keyCode === 38) {
// Up arrow
} else if (event.key === "ArrowUp") {
if (this.selectKit.isExpanded) {
this.selectKit.highlightPrevious();
} else {
this.selectKit.open(event);
}
return false;
} else if (event.keyCode === 40) {
// Down arrow
} else if (event.key === "ArrowDown") {
if (this.selectKit.isExpanded) {
this.selectKit.highlightNext();
} else {
this.selectKit.open(event);
}
return false;
} else if (event.keyCode === 37 || event.keyCode === 39) {
} else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
// Do nothing for left/right arrow
return true;
} else if (event.keyCode === 32) {
// Space
} else if (event.key === " ") {
event.preventDefault(); // prevents the space to trigger a scroll page-next
this.selectKit.toggle(event);
} else if (event.keyCode === 27) {
// Escape
} else if (event.key === "Escape") {
this.selectKit.close(event);
} else if (event.keyCode === 8) {
// Backspace
} else if (event.key === "Backspace") {
this._focusFilterInput();
} else if (event.keyCode === 9) {
// Tab
} else if (event.key === "Tab") {
if (
this.selectKit.highlighted &&
this.selectKit.isExpanded &&

View File

@ -24,7 +24,7 @@ export default Component.extend({
},
keyPress(e) {
if (e.keyCode === 13) {
if (e.key === "Enter") {
e.preventDefault();
e.stopPropagation();
this.send("addUser");

View File

@ -73,8 +73,8 @@ export default Component.extend({
this.autoFocus();
},
keyPress(key) {
if (key.keyCode === 13) {
keyPress(event) {
if (event.key === "Enter") {
if (this.showDoneButton) {
this.send("quit");
} else {

View File

@ -77,7 +77,7 @@ createWidget("discourse-poll-option", {
},
keyDown(e) {
if (e.keyCode === 13) {
if (e.key === "Enter") {
this.click(e);
}
},