Skip to content

Commit

Permalink
BaseInput.js: Enhance pasted input processing
Browse files Browse the repository at this point in the history
  • Loading branch information
@nilmerg
nilmerg committed Apr 28, 2023
1 parent 376cc1b commit d0f4a75
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 33 deletions.
71 changes: 49 additions & 22 deletions asset/js/widget/BaseInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,22 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
// Reset the data input, otherwise the value remains and is sent continuously with subsequent requests
this.dataInput.value = '';

for (const termIndex of Object.keys(changedTerms)) {
if (changedTerms === 'bogus') {
return;
}

let changedIndices = Object.keys(changedTerms);
if (! changedIndices.length) {
// Perform a partial reset. this.reset() empties the termContainer, which isn't desired here
this.usedTerms = [];
this.lastCompletedTerm = null;

this.registerTerms();
this.togglePlaceholder();
this.termInput.value = '';
}

for (const termIndex of changedIndices) {
let label = this.termContainer.querySelector(`[data-index="${ termIndex }"]`);
if (! label) {
continue;
Expand Down Expand Up @@ -563,26 +578,34 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
return 'noAutoSubmit' in this.input.dataset;
}

autoSubmit(input, changeType, changedTerms) {
autoSubmit(input, changeType, data) {
if (this.shouldNotAutoSubmit()) {
return;
}

if (changeType === 'save') {
if (changeType === 'save' && 'terms' in data) {
// Replace old term data with the new one, as required by the backend
for (const termIndex of Object.keys(changedTerms)) {
changedTerms[termIndex] = this.usedTerms[termIndex];
for (const termIndex of Object.keys(data['terms'])) {
data['terms'][termIndex] = this.usedTerms[termIndex];
}
}

if (Object.keys(changedTerms).length) {
this.dataInput.value = JSON.stringify({
type: changeType,
terms: changedTerms
});
if (changeType === 'remove' && ! Object.keys(data['terms']).length) {
return;
}

$(this.input.form).trigger('submit', { submittedBy: input });
this.dataInput.value = JSON.stringify({
type: changeType,
...data
});

let eventData = { submittedBy: input };
if (changeType === 'paste') {
// Ensure that what's pasted is also transmitted as value
eventData['terms'] = this.termsToQueryString(data['terms']) + this.separator + data['input'];
}

$(this.input.form).trigger('submit', eventData);
}

submitTerms(terms) {
Expand Down Expand Up @@ -691,9 +714,9 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
this.checkValidity(input);

if (termIndex >= 0) {
this.autoSubmit(input, 'save', { [termIndex]: this.saveTerm(input, false, true) });
this.autoSubmit(input, 'save', { terms: { [termIndex]: this.saveTerm(input, false, true) } });
} else {
this.autoSubmit(input, 'exchange', this.exchangeTerm());
this.autoSubmit(input, 'exchange', { terms: this.exchangeTerm() });
this.togglePlaceholder();
}
}
Expand All @@ -718,7 +741,7 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
}

if (! isTerm) {
this.autoSubmit(this.input, 'remove', this.clearSelectedTerms());
this.autoSubmit(this.input, 'remove', { terms: this.clearSelectedTerms() });
this.togglePlaceholder();
}
}
Expand Down Expand Up @@ -774,7 +797,7 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
}

this.togglePlaceholder();
this.autoSubmit(input, 'remove', removedTerms);
this.autoSubmit(input, 'remove', { terms: removedTerms });
break;
case 'Delete':
removedTerms = this.clearSelectedTerms();
Expand All @@ -795,7 +818,7 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
}

this.togglePlaceholder();
this.autoSubmit(input, 'remove', removedTerms);
this.autoSubmit(input, 'remove', { terms: removedTerms });
break;
case 'Enter':
if (termIndex >= 0) {
Expand Down Expand Up @@ -847,7 +870,7 @@ define(["../notjQuery", "Completer"], function ($, Completer) {

break;
case 'Delete':
this.autoSubmit(event.target, 'remove', this.clearSelectedTerms());
this.autoSubmit(event.target, 'remove', { terms: this.clearSelectedTerms() });
this.togglePlaceholder();
break;
}
Expand All @@ -873,10 +896,11 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
if (this.readPartialTerm(input)) {
let previousTerm = this.saveTerm(input);
if (previousTerm !== false) {
this.autoSubmit(input, 'save', { [termIndex]: previousTerm });
this.autoSubmit(input, 'save', { terms: { [termIndex]: previousTerm } });
}
} else {
this.autoSubmit(input, 'remove', { [termIndex]: this.removeTerm(input.parentNode) });
this.autoSubmit(
input, 'remove', { terms: { [termIndex]: this.removeTerm(input.parentNode) } });
}
}
}, 0);
Expand Down Expand Up @@ -923,11 +947,14 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
}

onPaste(event) {
if (this.shouldNotAutoSubmit() || this.hasTerms() || this.input.value) {
if (this.shouldNotAutoSubmit() || this.input.value) {
return;
}

this.autoSubmit(this.input, 'paste', [event.clipboardData.getData('text/plain')]);
this.autoSubmit(this.input, 'paste', {
input: event.clipboardData.getData('text/plain'),
terms: this.usedTerms
});

event.preventDefault();
}
Expand All @@ -953,7 +980,7 @@ define(["../notjQuery", "Completer"], function ($, Completer) {

if (event.type === 'cut') {
this.clearPartialTerm(this.input);
this.autoSubmit(this.input, 'remove', this.clearSelectedTerms());
this.autoSubmit(this.input, 'remove', { terms: this.clearSelectedTerms() });
this.togglePlaceholder();
}
}
Expand Down
23 changes: 14 additions & 9 deletions asset/js/widget/FilterInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -970,11 +970,16 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
return label;
}

autoSubmit(input, changeType, changedTerms) {
autoSubmit(input, changeType, data) {
if (this.shouldNotAutoSubmit()) {
return;
}

let changedTerms = [];
if ('terms' in data) {
changedTerms = data['terms'];
}

let changedIndices = Object.keys(changedTerms).sort((a, b) => a - b);
if (! changedIndices.length) {
return;
Expand All @@ -987,7 +992,7 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
lastTermAt = changedIndices.pop();
if (changedTerms[lastTermAt].type === 'value') {
if (! changedIndices.length) {
changedTerms = {
data['terms'] = {
...{
[lastTermAt - 2]: this.usedTerms[lastTermAt - 2],
[lastTermAt - 1]: this.usedTerms[lastTermAt - 1]
Expand Down Expand Up @@ -1030,7 +1035,7 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {

if (valueAt === updateAt) {
if (changedIndices.length === 1) {
changedTerms = {
data['terms'] = {
...{
[valueAt - 2]: this.usedTerms[valueAt - 2],
[valueAt - 1]: this.usedTerms[valueAt - 1]
Expand Down Expand Up @@ -1058,7 +1063,7 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
return;
}

super.autoSubmit(input, changeType, changedTerms);
super.autoSubmit(input, changeType, data);
}

encodeTerm(termData) {
Expand Down Expand Up @@ -1307,7 +1312,7 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
}
}

this.autoSubmit(this.input, 'remove', this.removeRange(labels));
this.autoSubmit(this.input, 'remove', { terms: this.removeRange(labels) });
this.togglePlaceholder();
}

Expand Down Expand Up @@ -1421,7 +1426,7 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {

if (newTerm !== null) {
let label = this.insertTerm(newTerm, termIndex + 1);
this.autoSubmit(label.firstChild, 'insert', { [termIndex + 1]: newTerm });
this.autoSubmit(label.firstChild, 'insert', { terms: { [termIndex + 1]: newTerm } });
this.complete(label.firstChild, { term: newTerm });
$(label.firstChild).focus({ scripted: true });
event.preventDefault();
Expand All @@ -1432,13 +1437,13 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
this.togglePlaceholder();
} else if (operators.exactMatch) {
if (termType !== operators[0].type) {
this.autoSubmit(input, 'exchange', this.exchangeTerm());
this.autoSubmit(input, 'exchange', { terms: this.exchangeTerm() });
} else {
this.clearPartialTerm(input);
}

this.addTerm({ ...operators[0] });
this.autoSubmit(input, 'add', { [this.usedTerms.length - 1]: operators[0] });
this.autoSubmit(input, 'add', { terms: { [this.usedTerms.length - 1]: operators[0] } });
this.togglePlaceholder();
event.preventDefault();
} else if (termType === 'operator') {
Expand Down Expand Up @@ -1484,7 +1489,7 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
if (isTerm && input.checkValidity()) {
let value = this.readPartialTerm(input);
if (value && ! ['column', 'value'].includes(input.parentNode.dataset.type)) {
this.autoSubmit(input, 'save', { [termIndex]: this.saveTerm(input) });
this.autoSubmit(input, 'save', { terms: { [termIndex]: this.saveTerm(input) } });
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions asset/js/widget/TermInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ define(["BaseInput"], function (BaseInput) {
if (Object.keys(addedTerms).length) {
this.togglePlaceholder();
event.preventDefault();
this.autoSubmit(this.input, 'exchange', addedTerms);
this.autoSubmit(this.input, 'exchange', { terms: addedTerms });
}
}

Expand Down Expand Up @@ -169,7 +169,7 @@ define(["BaseInput"], function (BaseInput) {
if (Object.keys(addedTerms).length) {
this.togglePlaceholder();
event.preventDefault();
this.autoSubmit(this.input, 'exchange', addedTerms);
this.autoSubmit(this.input, 'exchange', { terms: addedTerms });
this.ignoreSpaceUntil = null;

return;
Expand Down

0 comments on commit d0f4a75

Please sign in to comment.