github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-22 19:05:30 +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

57
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,27 +31,21 @@ 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); this.element
} else { .querySelector(this.resizerSelector)
this.element ?.addEventListener("mousedown", this._startResize);
.querySelector(this.resizerSelector)
?.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); this.element
} else { .querySelector(this.resizerSelector)
this.element ?.removeEventListener("mousedown", this._startResize);
.querySelector(this.resizerSelector)
?.removeEventListener("mousedown", this._startResize);
}
} }
@bind @bind
@ -77,13 +68,10 @@ 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); window.addEventListener("mousemove", this._resize);
} else { window.addEventListener("mouseup", this._stopResize);
window.addEventListener("mousemove", this._resize);
window.addEventListener("mouseup", this._stopResize);
}
} }
/* /*
@ -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); window.removeEventListener("mousemove", this._resize);
} else { window.removeEventListener("mouseup", this._stopResize);
window.removeEventListener("mousemove", this._resize);
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];