github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-24 04:55:31 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Allow mouse to resize chat drawer on touch devices (#23061)

Browse Source
This commit is contained in:
Jan Cernik 2023-08-18 05:02:11 -03:00 committed by GitHub
parent 7c8e978b54
commit b2dc2d1063
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
plugins/chat/assets/javascripts/discourse/modifiers/chat/resizable-node.js
View File

@ -1,13 +1,10 @@
import Modifier from "ember-modifier"; import Modifier from "ember-modifier";
import { registerDestructor } from "@ember/destroyable"; import { registerDestructor } from "@ember/destroyable";
import { bind } from "discourse-common/utils/decorators"; import { bind } from "discourse-common/utils/decorators";
import { inject as service } from "@ember/service";
const MINIMUM_SIZE = 20; const MINIMUM_SIZE = 20;
export default class ResizableNode extends Modifier { export default class ResizableNode extends Modifier {
@service capabilities;
element = null; element = null;
resizerSelector = null; resizerSelector = null;
didResizeContainer = null; didResizeContainer = null;
@ -34,28 +31,22 @@ export default class ResizableNode extends Modifier {
options options
); );
if (this.capabilities.touch) {
this.element this.element
.querySelector(this.resizerSelector) .querySelector(this.resizerSelector)
?.addEventListener("touchstart", this._startResize); ?.addEventListener("touchstart", this._startResize);
} else {
this.element this.element
.querySelector(this.resizerSelector) .querySelector(this.resizerSelector)
?.addEventListener("mousedown", this._startResize); ?.addEventListener("mousedown", this._startResize);
} }
}
cleanup() { cleanup() {
if (this.capabilities.touch) {
this.element this.element
.querySelector(this.resizerSelector) .querySelector(this.resizerSelector)
?.addEventListener("touchstart", this._startResize); ?.addEventListener("touchstart", this._startResize);
} else {
this.element this.element
.querySelector(this.resizerSelector) .querySelector(this.resizerSelector)
?.removeEventListener("mousedown", this._startResize); ?.removeEventListener("mousedown", this._startResize);
} }
}
@bind @bind
_startResize(event) { _startResize(event) {
@ -77,14 +68,11 @@ export default class ResizableNode extends Modifier {
this._originalPageX = this._eventValueForProperty(event, "pageX"); this._originalPageX = this._eventValueForProperty(event, "pageX");
this._originalPageY = this._eventValueForProperty(event, "pageY"); this._originalPageY = this._eventValueForProperty(event, "pageY");
if (this.capabilities.touch) {
window.addEventListener("touchmove", this._resize); window.addEventListener("touchmove", this._resize);
window.addEventListener("touchend", this._stopResize); window.addEventListener("touchend", this._stopResize);
} else {
window.addEventListener("mousemove", this._resize); window.addEventListener("mousemove", this._resize);
window.addEventListener("mouseup", this._stopResize); window.addEventListener("mouseup", this._stopResize);
} }
}
/* /*
The bulk of the logic is to calculate the new width and height of the element The bulk of the logic is to calculate the new width and height of the element
@ -154,17 +142,14 @@ export default class ResizableNode extends Modifier {
@bind @bind
_stopResize() { _stopResize() {
if (this.capabilities.touch) {
window.removeEventListener("touchmove", this._resize); window.removeEventListener("touchmove", this._resize);
window.removeEventListener("touchend", this._stopResize); window.removeEventListener("touchend", this._stopResize);
} else {
window.removeEventListener("mousemove", this._resize); window.removeEventListener("mousemove", this._resize);
window.removeEventListener("mouseup", this._stopResize); window.removeEventListener("mouseup", this._stopResize);
} }
}
_eventValueForProperty(event, property) { _eventValueForProperty(event, property) {
if (this.capabilities.touch) { if (event.changedTouches) {
return event.changedTouches[0][property]; return event.changedTouches[0][property];
} else { } else {
return event[property]; return event[property];