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

Keyboard and mouse event fixes #661

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Keyboard and mouse event fixes #661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e0a04ac
client/search: fix js error when pressing esc key
po5 May 21, 2023
337cdc0
client: replace deprecated KeyboardEvent.which with KeyboardEvent.key
po5 May 6, 2024
5e54caf
client/views: fix middle click prevention on buttons for modern browsers
po5 May 6, 2024
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
27 changes: 11 additions & 16 deletions client/js/controls/auto_complete_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -142,34 +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) {
func = this.hide;
} else if (key === KEY_TAB && shift) {
if (key === "Escape") {
func = () => {
this.hide();
};
} 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();
Expand Down
4 changes: 1 addition & 3 deletions client/js/controls/file_dropper_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -130,7 +128,7 @@ class FileDropperControl extends events.EventTarget {
}

_evtUrlInputKeyDown(e) {
if (e.which !== KEY_RETURN) {
if (e.key !== "Enter") {
return;
}
e.preventDefault();
Expand Down
3 changes: 0 additions & 3 deletions client/js/controls/pool_input_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
34 changes: 13 additions & 21 deletions client/js/controls/post_notes_overlay_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
}
Expand Down Expand Up @@ -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);
Expand Down
5 changes: 1 addition & 4 deletions client/js/controls/tag_input_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
Expand Down
7 changes: 1 addition & 6 deletions client/js/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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();
5 changes: 5 additions & 0 deletions client/js/util/views.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,11 @@ document.addEventListener("click", (e) => {
e.preventDefault();
}
});
document.addEventListener("auxclick", (e) => {
if (e.target.getAttribute("href") === "" && e.button === 1) {
e.preventDefault();
}
});

module.exports = {
htmlToDom: htmlToDom,
Expand Down
4 changes: 1 addition & 3 deletions client/js/views/post_merge_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand Down Expand Up @@ -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();
Expand Down
Loading