FEATURE: Support pasting a list of usernames into a PM

This allows you to paste multiple usernames into a PM's recipient list
at once. It supports usernames separated by spaces, commas, and new lines.
This commit is contained in:
Robin Ward 2019-11-29 16:12:05 -05:00
parent 712e171b34
commit 5df719a3c2
3 changed files with 79 additions and 1 deletions

View File

@ -9,6 +9,25 @@ export default TextField.extend({
autocapitalize: false, autocapitalize: false,
name: "user-selector", name: "user-selector",
init() {
this._super();
this._paste = e => {
let pastedText = "";
if (window.clipboardData && window.clipboardData.getData) {
// IE
pastedText = window.clipboardData.getData("Text");
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData("text/plain");
}
if (pastedText.length > 0) {
this.importText(pastedText);
e.preventDefault();
return false;
}
};
},
@observes("usernames") @observes("usernames")
_update() { _update() {
if (this.canReceiveUpdates === "true") { if (this.canReceiveUpdates === "true") {
@ -19,6 +38,7 @@ export default TextField.extend({
@on("willDestroyElement") @on("willDestroyElement")
_destroyAutocompleteInstance() { _destroyAutocompleteInstance() {
$(this.element).autocomplete("destroy"); $(this.element).autocomplete("destroy");
this.element.addEventListener("paste", this._paste);
}, },
@on("didInsertElement") @on("didInsertElement")
@ -52,6 +72,8 @@ export default TextField.extend({
return usernames; return usernames;
}; };
this.element.addEventListener("paste", this._paste);
const userSelectorComponent = this; const userSelectorComponent = this;
$(this.element) $(this.element)
@ -128,6 +150,24 @@ export default TextField.extend({
}); });
}, },
importText(text) {
let usernames = [];
if ((this.usernames || "").length > 0) {
usernames = this.usernames.split(",");
}
(text || "").split(/[, \n]+/).forEach(val => {
val = val.replace(/^@+/, "").trim();
if (val.length > 0) {
usernames.push(val);
}
});
this.set("usernames", usernames.uniq().join(","));
if (this.canReceiveUpdates !== "true") {
this._createAutocompleteInstance({ updateData: true });
}
},
// THIS IS A HUGE HACK TO SUPPORT CLEARING THE INPUT // THIS IS A HUGE HACK TO SUPPORT CLEARING THE INPUT
@observes("usernames") @observes("usernames")
_clearInput() { _clearInput() {

View File

@ -0,0 +1,38 @@
import componentTest from "helpers/component-test";
moduleForComponent("user-selector", { integration: true });
componentTest("pasting a list of usernames", {
template: `{{user-selector usernames=usernames class="test-selector"}}`,
beforeEach() {
this.set("usernames", "evil,trout");
},
test(assert) {
let element = find(".test-selector")[0];
let paste = text => {
let e = new Event("paste");
e.clipboardData = { getData: () => text };
element.dispatchEvent(e);
};
assert.equal(this.get("usernames"), "evil,trout");
paste("zip,zap,zoom");
assert.equal(this.get("usernames"), "evil,trout,zip,zap,zoom");
paste("evil,abc,abc,abc");
assert.equal(this.get("usernames"), "evil,trout,zip,zap,zoom,abc");
this.set("usernames", "");
paste("names with spaces");
assert.equal(this.get("usernames"), "names,with,spaces");
this.set("usernames", null);
paste("@eviltrout,@codinghorror sam");
assert.equal(this.get("usernames"), "eviltrout,codinghorror,sam");
this.set("usernames", null);
paste("eviltrout\nsam\ncodinghorror");
assert.equal(this.get("usernames"), "eviltrout,sam,codinghorror");
}
});