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 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) { function _getSelectionStart(input) {
if ("selectionStart" in input) { if ("selectionStart" in input) {
return input.selectionStart; return input.selectionStart;
@ -142,36 +135,36 @@ class AutoCompleteControl {
} }
_evtKeyDown(e) { _evtKeyDown(e) {
const key = e.which; const key = (e.key || "").replace("Arrow", "");
const shift = e.shiftKey; const shift = e.shiftKey;
let func = null; let func = null;
if (this._isVisible) { if (this._isVisible) {
if (key === KEY_ESCAPE) { if (key === "Escape") {
func = () => { func = () => {
this.hide(); this.hide();
}; };
} else if (key === KEY_TAB && shift) { } else if (key === "Tab" && shift) {
func = () => { func = () => {
this._selectPrevious(); this._selectPrevious();
}; };
} else if (key === KEY_TAB && !shift) { } else if (key === "Tab" && !shift) {
func = () => { func = () => {
this._selectNext(); this._selectNext();
}; };
} else if (key === KEY_UP) { } else if (key === "Up") {
func = () => { func = () => {
this._selectPrevious(); this._selectPrevious();
}; };
} else if (key === KEY_DOWN) { } else if (key === "Down") {
func = () => { func = () => {
this._selectNext(); this._selectNext();
}; };
} else if (key === KEY_RETURN && this._activeResult >= 0) { } else if (key === "Enter" && this._activeResult >= 0) {
func = () => { func = () => {
this._confirm(this._getActiveSuggestion()); this._confirm(this._getActiveSuggestion());
this.hide(); this.hide();
}; };
} else if (key === KEY_DELETE && this._activeResult >= 0) { } else if (key === "Delete" && this._activeResult >= 0) {
func = () => { func = () => {
this._delete(this._getActiveSuggestion()); this._delete(this._getActiveSuggestion());
this.hide(); 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 template = views.getTemplate("file-dropper");
const KEY_RETURN = 13;
class FileDropperControl extends events.EventTarget { class FileDropperControl extends events.EventTarget {
constructor(target, options) { constructor(target, options) {
super(); super();
@ -130,7 +128,7 @@ class FileDropperControl extends events.EventTarget {
} }
_evtUrlInputKeyDown(e) { _evtUrlInputKeyDown(e) {
if (e.which !== KEY_RETURN) { if (e.key !== "Enter") {
return; return;
} }
e.preventDefault(); 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 views = require("../util/views.js");
const PoolAutoCompleteControl = require("./pool_auto_complete_control.js"); const PoolAutoCompleteControl = require("./pool_auto_complete_control.js");
const KEY_SPACE = 32;
const KEY_RETURN = 13;
const SOURCE_INIT = "init"; const SOURCE_INIT = "init";
const SOURCE_IMPLICATION = "implication"; const SOURCE_IMPLICATION = "implication";
const SOURCE_USER_INPUT = "user-input"; 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 snapThreshold = 10;
const circleSize = 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) { function _getDistance(point1, point2) {
return Math.sqrt( return Math.sqrt(
Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2) Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2)
@ -188,16 +179,17 @@ class SelectedState extends ActiveState {
evtCanvasKeyDown(e) { evtCanvasKeyDown(e) {
const delta = e.ctrlKey ? 10 : 1; const delta = e.ctrlKey ? 10 : 1;
const offsetMap = { const offsetMap = {
[KEY_LEFT]: [-delta, 0], ["Left"]: [-delta, 0],
[KEY_UP]: [0, -delta], ["Up"]: [0, -delta],
[KEY_DOWN]: [0, delta], ["Down"]: [0, delta],
[KEY_RIGHT]: [delta, 0], ["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.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
e.preventDefault(); e.preventDefault();
const args = offsetMap[e.which]; const args = offsetMap[key];
if (e.shiftKey) { if (e.shiftKey) {
this._scaleEditedNote(...args); this._scaleEditedNote(...args);
} else { } else {
@ -331,7 +323,7 @@ class MovingPointState extends ActiveState {
} }
evtCanvasKeyDown(e) { evtCanvasKeyDown(e) {
if (e.which === KEY_ESCAPE) { if (e.key === "Escape") {
this._notePoint.x = this._originalNotePoint.x; this._notePoint.x = this._originalNotePoint.x;
this._notePoint.y = this._originalNotePoint.y; this._notePoint.y = this._originalNotePoint.y;
this._control._state = new SelectedState( this._control._state = new SelectedState(
@ -364,7 +356,7 @@ class MovingNoteState extends ActiveState {
} }
evtCanvasKeyDown(e) { evtCanvasKeyDown(e) {
if (e.which === KEY_ESCAPE) { if (e.key === "Escape") {
for (let i of misc.range(this._note.polygon.length)) { 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).x = this._originalPolygon[i].x;
this._note.polygon.at(i).y = this._originalPolygon[i].y; this._note.polygon.at(i).y = this._originalPolygon[i].y;
@ -402,7 +394,7 @@ class ScalingNoteState extends ActiveState {
} }
evtCanvasKeyDown(e) { evtCanvasKeyDown(e) {
if (e.which === KEY_ESCAPE) { if (e.key === "Escape") {
for (let i of misc.range(this._note.polygon.length)) { 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).x = this._originalPolygon[i].x;
this._note.polygon.at(i).y = this._originalPolygon[i].y; this._note.polygon.at(i).y = this._originalPolygon[i].y;
@ -516,12 +508,12 @@ class DrawingPolygonState extends ActiveState {
} }
evtCanvasKeyDown(e) { evtCanvasKeyDown(e) {
if (e.which === KEY_ESCAPE) { if (e.key === "Escape") {
this._note.polygon.remove(this._note.polygon.secondLastPoint); this._note.polygon.remove(this._note.polygon.secondLastPoint);
if (this._note.polygon.length === 1) { if (this._note.polygon.length === 1) {
this._cancel(); this._cancel();
} }
} else if (e.which === KEY_RETURN) { } else if (e.key === "Enter") {
this._finish(); this._finish();
} }
} }
@ -683,7 +675,7 @@ class PostNotesOverlayControl extends events.EventTarget {
_evtCanvasMouseDown(e) { _evtCanvasMouseDown(e) {
e.preventDefault(); e.preventDefault();
if (e.which !== MOUSE_BUTTON_LEFT) { if (e.button !== 0) {
return; return;
} }
const hoveredNode = document.elementFromPoint(e.clientX, e.clientY); 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 views = require("../util/views.js");
const TagAutoCompleteControl = require("./tag_auto_complete_control.js"); const TagAutoCompleteControl = require("./tag_auto_complete_control.js");
const KEY_SPACE = 32;
const KEY_RETURN = 13;
const SOURCE_INIT = "init"; const SOURCE_INIT = "init";
const SOURCE_IMPLICATION = "implication"; const SOURCE_IMPLICATION = "implication";
const SOURCE_USER_INPUT = "user-input"; const SOURCE_USER_INPUT = "user-input";
@ -273,7 +270,7 @@ class TagInputControl extends events.EventTarget {
} }
_evtInputKeyDown(e) { _evtInputKeyDown(e) {
if (e.which === KEY_RETURN || e.which === KEY_SPACE) { if (e.key === "Enter" || e.key === " ") {
e.preventDefault(); e.preventDefault();
this._hideAutoComplete(); this._hideAutoComplete();
this.addTagByText(this._tagInputNode.value, SOURCE_USER_INPUT); 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) => { const _onClick = (router) => {
return (e) => { return (e) => {
if (1 !== _which(e)) { if (e.button !== 0) {
return; return;
} }
if (e.metaKey || e.ctrlKey || e.shiftKey) { 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.Context = Context;
Router.prototype.Route = Route; Router.prototype.Route = Route;
module.exports = new Router(); module.exports = new Router();

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

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