ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client: replace deprecated KeyboardEvent.which with KeyboardEvent.key

Browse source 
Also fixes moving notes by arrow keys.

Removed left click detection IE8 hack we inherited from the original
visionmedia/page.js code (cf. https://unixpapa.com/js/mouse.html) as
proper KeyboardEvent.key was introduced in IE9 and it's time to move on.

ArrowUp/Down/Left/Right names have to be mangled to maintain IE9 compat.
This commit is contained in:
Eva 2024-05-06 19:34:50 +02:00
parent e0a04acb06
commit 337cdc091e
7 changed files with 25 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
client/js/controls/auto_complete_control.js
View file

@ -2,13 +2,6 @@
const views = require("../util/views.js");
const KEY_TAB = 9;
const KEY_RETURN = 13;
const KEY_DELETE = 46;
const KEY_ESCAPE = 27;
const KEY_UP = 38;
const KEY_DOWN = 40;
function _getSelectionStart(input) {
if ("selectionStart" in input) {
return input.selectionStart;
@ -142,36 +135,36 @@ class AutoCompleteControl {
}
_evtKeyDown(e) {
const key = e.which;
const key = (e.key || "").replace("Arrow", "");
const shift = e.shiftKey;
let func = null;
if (this._isVisible) {
if (key === KEY_ESCAPE) {
if (key === "Escape") {
func = () => {
this.hide();
};
} else if (key === KEY_TAB && shift) {
} else if (key === "Tab" && shift) {
func = () => {
this._selectPrevious();
};
} else if (key === KEY_TAB && !shift) {
} else if (key === "Tab" && !shift) {
func = () => {
this._selectNext();
};
} else if (key === KEY_UP) {
} else if (key === "Up") {
func = () => {
this._selectPrevious();
};
} else if (key === KEY_DOWN) {
} else if (key === "Down") {
func = () => {
this._selectNext();
};
} else if (key === KEY_RETURN && this._activeResult >= 0) {
} else if (key === "Enter" && this._activeResult >= 0) {
func = () => {
this._confirm(this._getActiveSuggestion());
this.hide();
};
} else if (key === KEY_DELETE && this._activeResult >= 0) {
} else if (key === "Delete" && this._activeResult >= 0) {
func = () => {
this._delete(this._getActiveSuggestion());
this.hide();

4
client/js/controls/file_dropper_control.js
View file

@ -5,8 +5,6 @@ const views = require("../util/views.js");
const template = views.getTemplate("file-dropper");
const KEY_RETURN = 13;
class FileDropperControl extends events.EventTarget {
constructor(target, options) {
super();
@ -130,7 +128,7 @@ class FileDropperControl extends events.EventTarget {
}
_evtUrlInputKeyDown(e) {
if (e.which !== KEY_RETURN) {
if (e.key !== "Enter") {
return;
}
e.preventDefault();

3
client/js/controls/pool_input_control.js
View file

@ -10,9 +10,6 @@ const events = require("../events.js");
const views = require("../util/views.js");
const PoolAutoCompleteControl = require("./pool_auto_complete_control.js");
const KEY_SPACE = 32;
const KEY_RETURN = 13;
const SOURCE_INIT = "init";
const SOURCE_IMPLICATION = "implication";
const SOURCE_USER_INPUT = "user-input";

34
client/js/controls/post_notes_overlay_control.js
View file

@ -11,15 +11,6 @@ const svgNS = "http://www.w3.org/2000/svg";
const snapThreshold = 10;
const circleSize = 10;
const MOUSE_BUTTON_LEFT = 1;
const KEY_LEFT = 37;
const KEY_UP = 38;
const KEY_RIGHT = 39;
const KEY_DOWN = 40;
const KEY_ESCAPE = 27;
const KEY_RETURN = 13;
function _getDistance(point1, point2) {
return Math.sqrt(
Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)
@ -188,16 +179,17 @@ class SelectedState extends ActiveState {
evtCanvasKeyDown(e) {
const delta = e.ctrlKey ? 10 : 1;
const offsetMap = {
[KEY_LEFT]: [-delta, 0],
[KEY_UP]: [0, -delta],
[KEY_DOWN]: [0, delta],
[KEY_RIGHT]: [delta, 0],
["Left"]: [-delta, 0],
["Up"]: [0, -delta],
["Down"]: [0, delta],
["Right"]: [delta, 0],
};
if (Object.prototype.hasOwnProperty.call(offsetMap, e.witch)) {
const key = (e.key || "").replace("Arrow", "");
if (Object.prototype.hasOwnProperty.call(offsetMap, key)) {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
const args = offsetMap[e.which];
const args = offsetMap[key];
if (e.shiftKey) {
this._scaleEditedNote(...args);
} else {
@ -331,7 +323,7 @@ class MovingPointState extends ActiveState {
}
evtCanvasKeyDown(e) {
if (e.which === KEY_ESCAPE) {
if (e.key === "Escape") {
this._notePoint.x = this._originalNotePoint.x;
this._notePoint.y = this._originalNotePoint.y;
this._control._state = new SelectedState(
@ -364,7 +356,7 @@ class MovingNoteState extends ActiveState {
}
evtCanvasKeyDown(e) {
if (e.which === KEY_ESCAPE) {
if (e.key === "Escape") {
for (let i of misc.range(this._note.polygon.length)) {
this._note.polygon.at(i).x = this._originalPolygon[i].x;
this._note.polygon.at(i).y = this._originalPolygon[i].y;
@ -402,7 +394,7 @@ class ScalingNoteState extends ActiveState {
}
evtCanvasKeyDown(e) {
if (e.which === KEY_ESCAPE) {
if (e.key === "Escape") {
for (let i of misc.range(this._note.polygon.length)) {
this._note.polygon.at(i).x = this._originalPolygon[i].x;
this._note.polygon.at(i).y = this._originalPolygon[i].y;
@ -516,12 +508,12 @@ class DrawingPolygonState extends ActiveState {
}
evtCanvasKeyDown(e) {
if (e.which === KEY_ESCAPE) {
if (e.key === "Escape") {
this._note.polygon.remove(this._note.polygon.secondLastPoint);
if (this._note.polygon.length === 1) {
this._cancel();
}
} else if (e.which === KEY_RETURN) {
} else if (e.key === "Enter") {
this._finish();
}
}
@ -683,7 +675,7 @@ class PostNotesOverlayControl extends events.EventTarget {
_evtCanvasMouseDown(e) {
e.preventDefault();
if (e.which !== MOUSE_BUTTON_LEFT) {
if (e.button !== 0) {
return;
}
const hoveredNode = document.elementFromPoint(e.clientX, e.clientY);

5
client/js/controls/tag_input_control.js
View file

@ -10,9 +10,6 @@ const events = require("../events.js");
const views = require("../util/views.js");
const TagAutoCompleteControl = require("./tag_auto_complete_control.js");
const KEY_SPACE = 32;
const KEY_RETURN = 13;
const SOURCE_INIT = "init";
const SOURCE_IMPLICATION = "implication";
const SOURCE_USER_INPUT = "user-input";
@ -273,7 +270,7 @@ class TagInputControl extends events.EventTarget {
}
_evtInputKeyDown(e) {
if (e.which === KEY_RETURN || e.which === KEY_SPACE) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
this._hideAutoComplete();
this.addTagByText(this._tagInputNode.value, SOURCE_USER_INPUT);

7
client/js/router.js
View file

@ -258,7 +258,7 @@ const _onPopState = (router) => {
const _onClick = (router) => {
return (e) => {
if (1 !== _which(e)) {
if (e.button !== 0) {
return;
}
if (e.metaKey || e.ctrlKey || e.shiftKey) {
@ -310,11 +310,6 @@ const _onClick = (router) => {
};
};
function _which(e) {
e = e || window.event;
return e.which === null ? e.button : e.which;
}
Router.prototype.Context = Context;
Router.prototype.Route = Route;
module.exports = new Router();

4
client/js/views/post_merge_view.js
View file

@ -3,7 +3,6 @@
const events = require("../events.js");
const views = require("../util/views.js");
const KEY_RETURN = 13;
const template = views.getTemplate("post-merge");
const sideTemplate = views.getTemplate("post-merge-side");
@ -110,8 +109,7 @@ class PostMergeView extends events.EventTarget {
}
_evtPostSearchFieldKeyDown(e) {
const key = e.which;
if (key !== KEY_RETURN) {
if (e.key !== "Enter") {
return;
}
e.target.blur();