mirror of
https://github.com/discourse/discourse.git
synced 2024-12-12 00:33:42 +08:00
0e37ceeeb9
The main change made is to use `pointerdown` and `touchstart` for detecting click outside in `FloatKit`, the problem of using `click` is that it will trigger on `mouseup` which is not working well with `FloatKit` shown using `mousedown` (when we change selection with the `mousedown` for example) as the release will be interpreted as a click outside and close the menu. To solve this issue the previous code in `post-text-selection` was going through various hacks for detecting state of mouse which are not always very reliable. The second fix is to exit earlier when selection didn't change. This has been tested on chrome/firefox and safari (mobile) and seems to work reliably. <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
41 lines
887 B
JavaScript
41 lines
887 B
JavaScript
import { registerDestructor } from "@ember/destroyable";
|
|
import Modifier from "ember-modifier";
|
|
import { bind } from "discourse-common/utils/decorators";
|
|
|
|
export default class FloatKitCloseOnClickOutside extends Modifier {
|
|
constructor(owner, args) {
|
|
super(owner, args);
|
|
registerDestructor(this, (instance) => instance.cleanup());
|
|
}
|
|
|
|
modify(element, [trigger, closeFn]) {
|
|
this.closeFn = closeFn;
|
|
this.trigger = trigger;
|
|
this.element = element;
|
|
|
|
document.addEventListener("pointerdown", this.check, {
|
|
passive: true,
|
|
});
|
|
}
|
|
|
|
@bind
|
|
check(event) {
|
|
if (this.element.contains(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
this.trigger instanceof HTMLElement &&
|
|
this.trigger.contains(event.target)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
this.closeFn();
|
|
}
|
|
|
|
cleanup() {
|
|
document.removeEventListener("pointerdown", this.check);
|
|
}
|
|
}
|