2021-07-03 00:06:54 +00:00
|
|
|
import { spriteIcon } from '~/lib/utils/common_utils';
|
|
|
|
import { objectToQuery } from '~/lib/utils/url_utility';
|
2017-03-13 11:46:43 +00:00
|
|
|
import FilteredSearchContainer from './container';
|
2021-02-14 18:09:20 +00:00
|
|
|
import VisualTokenValue from './visual_token_value';
|
2017-03-10 17:40:38 +00:00
|
|
|
|
2018-02-21 20:22:56 +00:00
|
|
|
export default class FilteredSearchVisualTokens {
|
2020-01-02 13:03:23 +00:00
|
|
|
static permissibleOperatorValues = ['=', '!='];
|
|
|
|
|
|
|
|
static getOperatorToken(value) {
|
|
|
|
let token = null;
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
FilteredSearchVisualTokens.permissibleOperatorValues.forEach((operatorToken) => {
|
2020-01-02 13:03:23 +00:00
|
|
|
if (value.startsWith(operatorToken)) {
|
|
|
|
token = operatorToken;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return token;
|
|
|
|
}
|
|
|
|
|
|
|
|
static getValueToken(value) {
|
|
|
|
let newValue = value;
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
FilteredSearchVisualTokens.permissibleOperatorValues.forEach((operatorToken) => {
|
2020-01-02 13:03:23 +00:00
|
|
|
if (value.startsWith(operatorToken)) {
|
|
|
|
newValue = value.slice(operatorToken.length);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return newValue;
|
|
|
|
}
|
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
static getLastVisualTokenBeforeInput() {
|
2017-03-10 17:40:38 +00:00
|
|
|
const inputLi = FilteredSearchContainer.container.querySelector('.input-token');
|
2017-01-30 22:53:18 +00:00
|
|
|
const lastVisualToken = inputLi && inputLi.previousElementSibling;
|
|
|
|
|
|
|
|
return {
|
|
|
|
lastVisualToken,
|
2018-10-10 06:18:49 +00:00
|
|
|
isLastVisualTokenValid:
|
|
|
|
lastVisualToken === null ||
|
|
|
|
lastVisualToken.className.indexOf('filtered-search-term') !== -1 ||
|
2020-01-02 13:03:23 +00:00
|
|
|
(lastVisualToken &&
|
|
|
|
lastVisualToken.querySelector('.operator') !== null &&
|
|
|
|
lastVisualToken.querySelector('.value') !== null),
|
2017-01-30 22:53:18 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
static unselectTokens() {
|
2018-10-10 06:18:49 +00:00
|
|
|
const otherTokens = FilteredSearchContainer.container.querySelectorAll(
|
|
|
|
'.js-visual-token .selectable.selected',
|
|
|
|
);
|
2020-12-23 21:10:24 +00:00
|
|
|
[].forEach.call(otherTokens, (t) => t.classList.remove('selected'));
|
2017-01-30 22:53:18 +00:00
|
|
|
}
|
|
|
|
|
2017-04-26 20:12:33 +00:00
|
|
|
static selectToken(tokenButton, forceSelection = false) {
|
2017-01-30 22:53:18 +00:00
|
|
|
const selected = tokenButton.classList.contains('selected');
|
|
|
|
FilteredSearchVisualTokens.unselectTokens();
|
|
|
|
|
2017-04-26 20:12:33 +00:00
|
|
|
if (!selected || forceSelection) {
|
2017-01-30 22:53:18 +00:00
|
|
|
tokenButton.classList.add('selected');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
static removeSelectedToken() {
|
2017-03-10 17:40:38 +00:00
|
|
|
const selected = FilteredSearchContainer.container.querySelector('.js-visual-token .selected');
|
2017-01-30 22:53:18 +00:00
|
|
|
|
|
|
|
if (selected) {
|
|
|
|
const li = selected.closest('.js-visual-token');
|
|
|
|
li.parentElement.removeChild(li);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-03 08:15:00 +00:00
|
|
|
static createVisualTokenElementHTML(options = {}) {
|
2020-01-02 13:03:23 +00:00
|
|
|
const {
|
|
|
|
canEdit = true,
|
|
|
|
hasOperator = false,
|
|
|
|
uppercaseTokenName = false,
|
|
|
|
capitalizeTokenValue = false,
|
|
|
|
} = options;
|
2018-10-03 08:15:00 +00:00
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
return `
|
2017-10-24 13:48:41 +00:00
|
|
|
<div class="${canEdit ? 'selectable' : 'hidden'}" role="button">
|
2018-10-03 08:15:00 +00:00
|
|
|
<div class="${uppercaseTokenName ? 'text-uppercase' : ''} name"></div>
|
2020-01-02 13:03:23 +00:00
|
|
|
${hasOperator ? '<div class="operator"></div>' : ''}
|
2017-04-26 20:12:33 +00:00
|
|
|
<div class="value-container">
|
2018-10-03 08:15:00 +00:00
|
|
|
<div class="${capitalizeTokenValue ? 'text-capitalize' : ''} value"></div>
|
2017-10-24 13:48:41 +00:00
|
|
|
<div class="remove-token" role="button">
|
2020-08-18 15:10:33 +00:00
|
|
|
${spriteIcon('close', 's16 close-icon')}
|
2017-10-24 13:48:41 +00:00
|
|
|
</div>
|
2017-04-26 20:12:33 +00:00
|
|
|
</div>
|
2017-01-30 22:53:18 +00:00
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
2020-01-02 13:03:23 +00:00
|
|
|
static renderVisualTokenValue(parentElement, tokenName, tokenValue, tokenOperator) {
|
2019-03-07 23:55:45 +00:00
|
|
|
const tokenType = tokenName.toLowerCase();
|
2017-05-05 22:47:32 +00:00
|
|
|
const tokenValueContainer = parentElement.querySelector('.value-container');
|
2017-05-18 18:53:14 +00:00
|
|
|
const tokenValueElement = tokenValueContainer.querySelector('.value');
|
2020-06-08 09:08:23 +00:00
|
|
|
tokenValueElement.textContent = tokenValue;
|
2017-05-05 22:47:32 +00:00
|
|
|
|
2020-01-02 13:03:23 +00:00
|
|
|
const visualTokenValue = new VisualTokenValue(tokenValue, tokenType, tokenOperator);
|
2018-11-14 15:28:57 +00:00
|
|
|
|
2019-03-07 23:55:45 +00:00
|
|
|
visualTokenValue.render(tokenValueContainer, tokenValueElement);
|
2017-05-05 22:47:32 +00:00
|
|
|
}
|
|
|
|
|
2020-01-02 13:03:23 +00:00
|
|
|
static addVisualTokenElement({ name, operator, value, options = {} }) {
|
2019-03-09 12:22:58 +00:00
|
|
|
const {
|
|
|
|
isSearchTerm = false,
|
|
|
|
canEdit,
|
|
|
|
uppercaseTokenName,
|
|
|
|
capitalizeTokenValue,
|
|
|
|
tokenClass = `search-token-${name.toLowerCase()}`,
|
|
|
|
} = options;
|
2017-01-30 22:53:18 +00:00
|
|
|
const li = document.createElement('li');
|
|
|
|
li.classList.add('js-visual-token');
|
|
|
|
li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
|
|
|
|
|
2019-03-09 12:22:58 +00:00
|
|
|
if (!isSearchTerm) {
|
|
|
|
li.classList.add(tokenClass);
|
|
|
|
}
|
|
|
|
|
2020-01-02 13:03:23 +00:00
|
|
|
const hasOperator = Boolean(operator);
|
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
if (value) {
|
2022-08-22 09:11:23 +00:00
|
|
|
// eslint-disable-next-line no-unsanitized/property
|
2018-10-03 08:15:00 +00:00
|
|
|
li.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML({
|
|
|
|
canEdit,
|
|
|
|
uppercaseTokenName,
|
2020-01-02 13:03:23 +00:00
|
|
|
operator,
|
|
|
|
hasOperator,
|
2018-10-03 08:15:00 +00:00
|
|
|
capitalizeTokenValue,
|
|
|
|
});
|
2020-01-02 13:03:23 +00:00
|
|
|
FilteredSearchVisualTokens.renderVisualTokenValue(li, name, value, operator);
|
2017-01-30 22:53:18 +00:00
|
|
|
} else {
|
2020-01-02 13:03:23 +00:00
|
|
|
const nameHTML = `<div class="${uppercaseTokenName ? 'text-uppercase' : ''} name"></div>`;
|
|
|
|
let operatorHTML = '';
|
|
|
|
|
|
|
|
if (hasOperator) {
|
|
|
|
operatorHTML = '<div class="operator"></div>';
|
|
|
|
}
|
|
|
|
|
2022-08-22 09:11:23 +00:00
|
|
|
// eslint-disable-next-line no-unsanitized/property
|
2020-01-02 13:03:23 +00:00
|
|
|
li.innerHTML = nameHTML + operatorHTML;
|
2017-01-30 22:53:18 +00:00
|
|
|
}
|
2020-01-02 13:03:23 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
li.querySelector('.name').textContent = name;
|
2020-01-02 13:03:23 +00:00
|
|
|
if (hasOperator) {
|
2020-06-08 09:08:23 +00:00
|
|
|
li.querySelector('.operator').textContent = operator;
|
2020-01-02 13:03:23 +00:00
|
|
|
}
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-03-10 17:40:38 +00:00
|
|
|
const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
|
|
|
|
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
|
2017-01-30 22:53:18 +00:00
|
|
|
tokensContainer.insertBefore(li, input.parentElement);
|
|
|
|
}
|
|
|
|
|
|
|
|
static addValueToPreviousVisualTokenElement(value) {
|
2018-10-10 06:18:49 +00:00
|
|
|
const {
|
|
|
|
lastVisualToken,
|
|
|
|
isLastVisualTokenValid,
|
|
|
|
} = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
2017-01-30 22:53:18 +00:00
|
|
|
|
|
|
|
if (!isLastVisualTokenValid && lastVisualToken.classList.contains('filtered-search-token')) {
|
|
|
|
const name = FilteredSearchVisualTokens.getLastTokenPartial();
|
2020-01-02 13:03:23 +00:00
|
|
|
const operator = FilteredSearchVisualTokens.getLastTokenOperator();
|
2022-08-22 09:11:23 +00:00
|
|
|
|
|
|
|
// eslint-disable-next-line no-unsanitized/property
|
2020-01-02 13:03:23 +00:00
|
|
|
lastVisualToken.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML({
|
|
|
|
hasOperator: Boolean(operator),
|
|
|
|
});
|
2020-06-08 09:08:23 +00:00
|
|
|
lastVisualToken.querySelector('.name').textContent = name;
|
|
|
|
lastVisualToken.querySelector('.operator').textContent = operator;
|
2020-01-02 13:03:23 +00:00
|
|
|
FilteredSearchVisualTokens.renderVisualTokenValue(lastVisualToken, name, value, operator);
|
2017-01-30 22:53:18 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-10 06:18:49 +00:00
|
|
|
static addFilterVisualToken(
|
|
|
|
tokenName,
|
2020-01-02 13:03:23 +00:00
|
|
|
tokenOperator,
|
2018-10-10 06:18:49 +00:00
|
|
|
tokenValue,
|
|
|
|
{ canEdit, uppercaseTokenName = false, capitalizeTokenValue = false } = {},
|
|
|
|
) {
|
|
|
|
const {
|
|
|
|
lastVisualToken,
|
|
|
|
isLastVisualTokenValid,
|
|
|
|
} = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
2018-06-16 21:50:13 +00:00
|
|
|
const { addVisualTokenElement } = FilteredSearchVisualTokens;
|
2017-01-30 22:53:18 +00:00
|
|
|
|
|
|
|
if (isLastVisualTokenValid) {
|
2020-01-02 13:03:23 +00:00
|
|
|
addVisualTokenElement({
|
|
|
|
name: tokenName,
|
|
|
|
operator: tokenOperator,
|
|
|
|
value: tokenValue,
|
|
|
|
options: {
|
|
|
|
canEdit,
|
|
|
|
uppercaseTokenName,
|
|
|
|
capitalizeTokenValue,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
} else if (
|
|
|
|
!isLastVisualTokenValid &&
|
2020-12-23 12:10:26 +00:00
|
|
|
lastVisualToken &&
|
|
|
|
!lastVisualToken.querySelector('.operator')
|
2020-01-02 13:03:23 +00:00
|
|
|
) {
|
|
|
|
const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
|
|
|
|
tokensContainer.removeChild(lastVisualToken);
|
|
|
|
addVisualTokenElement({
|
|
|
|
name: tokenName,
|
|
|
|
operator: tokenOperator,
|
|
|
|
value: tokenValue,
|
|
|
|
options: {
|
|
|
|
canEdit,
|
|
|
|
uppercaseTokenName,
|
|
|
|
capitalizeTokenValue,
|
|
|
|
},
|
2018-10-03 08:15:00 +00:00
|
|
|
});
|
2017-01-30 22:53:18 +00:00
|
|
|
} else {
|
2020-06-08 09:08:23 +00:00
|
|
|
const previousTokenName = lastVisualToken.querySelector('.name').textContent;
|
|
|
|
const previousTokenOperator = lastVisualToken.querySelector('.operator').textContent;
|
2017-03-10 17:40:38 +00:00
|
|
|
const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
|
2017-01-30 22:53:18 +00:00
|
|
|
tokensContainer.removeChild(lastVisualToken);
|
|
|
|
|
2020-01-02 13:03:23 +00:00
|
|
|
let value = tokenValue;
|
|
|
|
if (!value && !tokenOperator) {
|
|
|
|
value = tokenName;
|
|
|
|
}
|
|
|
|
addVisualTokenElement({
|
|
|
|
name: previousTokenName,
|
|
|
|
operator: previousTokenOperator,
|
|
|
|
value,
|
|
|
|
options: {
|
|
|
|
canEdit,
|
|
|
|
uppercaseTokenName,
|
|
|
|
capitalizeTokenValue,
|
|
|
|
},
|
2018-10-03 08:15:00 +00:00
|
|
|
});
|
2017-01-30 22:53:18 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
static addSearchVisualToken(searchTerm) {
|
|
|
|
const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
|
|
|
|
|
|
|
if (lastVisualToken && lastVisualToken.classList.contains('filtered-search-term')) {
|
2020-06-08 09:08:23 +00:00
|
|
|
lastVisualToken.querySelector('.name').textContent += ` ${searchTerm}`;
|
2017-01-30 22:53:18 +00:00
|
|
|
} else {
|
2020-01-02 13:03:23 +00:00
|
|
|
FilteredSearchVisualTokens.addVisualTokenElement({
|
|
|
|
name: searchTerm,
|
|
|
|
operator: null,
|
|
|
|
value: null,
|
|
|
|
options: {
|
|
|
|
isSearchTerm: true,
|
|
|
|
},
|
2018-10-03 08:15:00 +00:00
|
|
|
});
|
2017-01-30 22:53:18 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-01-02 13:03:23 +00:00
|
|
|
static getLastTokenPartial(includeOperator = false) {
|
2017-01-30 22:53:18 +00:00
|
|
|
const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
|
|
|
|
|
|
|
if (!lastVisualToken) return '';
|
|
|
|
|
2017-05-18 18:53:14 +00:00
|
|
|
const valueContainer = lastVisualToken.querySelector('.value-container');
|
|
|
|
const originalValue = valueContainer && valueContainer.dataset.originalValue;
|
|
|
|
if (originalValue) {
|
|
|
|
return originalValue;
|
|
|
|
}
|
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
const value = lastVisualToken.querySelector('.value');
|
|
|
|
const name = lastVisualToken.querySelector('.name');
|
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
const valueText = value ? value.textContent : '';
|
|
|
|
const nameText = name ? name.textContent : '';
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2020-01-02 13:03:23 +00:00
|
|
|
if (includeOperator) {
|
|
|
|
const operator = lastVisualToken.querySelector('.operator');
|
2020-06-08 09:08:23 +00:00
|
|
|
const operatorText = operator ? operator.textContent : '';
|
2020-01-02 13:03:23 +00:00
|
|
|
return valueText || operatorText || nameText;
|
|
|
|
}
|
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
return valueText || nameText;
|
|
|
|
}
|
|
|
|
|
2020-01-02 13:03:23 +00:00
|
|
|
static getLastTokenOperator() {
|
|
|
|
const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
|
|
|
|
|
|
|
const operator = lastVisualToken && lastVisualToken.querySelector('.operator');
|
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
return operator?.textContent;
|
2020-01-02 13:03:23 +00:00
|
|
|
}
|
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
static removeLastTokenPartial() {
|
|
|
|
const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
|
|
|
|
|
|
|
if (lastVisualToken) {
|
|
|
|
const value = lastVisualToken.querySelector('.value');
|
2020-01-02 13:03:23 +00:00
|
|
|
const operator = lastVisualToken.querySelector('.operator');
|
2017-01-30 22:53:18 +00:00
|
|
|
if (value) {
|
|
|
|
const button = lastVisualToken.querySelector('.selectable');
|
2017-04-26 20:12:33 +00:00
|
|
|
const valueContainer = lastVisualToken.querySelector('.value-container');
|
|
|
|
button.removeChild(valueContainer);
|
2022-08-22 09:11:23 +00:00
|
|
|
// eslint-disable-next-line no-unsanitized/property
|
2017-01-30 22:53:18 +00:00
|
|
|
lastVisualToken.innerHTML = button.innerHTML;
|
2020-01-02 13:03:23 +00:00
|
|
|
} else if (operator) {
|
|
|
|
lastVisualToken.removeChild(operator);
|
2017-01-30 22:53:18 +00:00
|
|
|
} else {
|
|
|
|
lastVisualToken.closest('.tokens-container').removeChild(lastVisualToken);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
static tokenizeInput() {
|
2017-03-10 17:40:38 +00:00
|
|
|
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
|
2018-10-10 06:18:49 +00:00
|
|
|
const { isLastVisualTokenValid } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
2017-01-30 22:53:18 +00:00
|
|
|
|
|
|
|
if (input.value) {
|
|
|
|
if (isLastVisualTokenValid) {
|
2018-02-21 20:22:56 +00:00
|
|
|
FilteredSearchVisualTokens.addSearchVisualToken(input.value);
|
2017-01-30 22:53:18 +00:00
|
|
|
} else {
|
|
|
|
FilteredSearchVisualTokens.addValueToPreviousVisualTokenElement(input.value);
|
|
|
|
}
|
|
|
|
|
|
|
|
input.value = '';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-07 23:55:45 +00:00
|
|
|
/**
|
|
|
|
* Returns a computed API endpoint
|
|
|
|
* and query string composed of values from endpointQueryParams
|
|
|
|
* @param {String} endpoint
|
|
|
|
* @param {String} endpointQueryParams
|
|
|
|
*/
|
|
|
|
static getEndpointWithQueryParams(endpoint, endpointQueryParams) {
|
|
|
|
if (!endpointQueryParams) {
|
|
|
|
return endpoint;
|
|
|
|
}
|
|
|
|
|
2021-07-03 00:06:54 +00:00
|
|
|
const queryString = objectToQuery(JSON.parse(endpointQueryParams));
|
2019-03-07 23:55:45 +00:00
|
|
|
return `${endpoint}?${queryString}`;
|
|
|
|
}
|
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
static editToken(token) {
|
2017-03-10 17:40:38 +00:00
|
|
|
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
|
2017-01-30 22:53:18 +00:00
|
|
|
|
|
|
|
FilteredSearchVisualTokens.tokenizeInput();
|
|
|
|
|
|
|
|
// Replace token with input field
|
|
|
|
const tokenContainer = token.parentElement;
|
|
|
|
const inputLi = input.parentElement;
|
|
|
|
tokenContainer.replaceChild(inputLi, token);
|
|
|
|
|
2017-05-18 18:53:14 +00:00
|
|
|
const nameElement = token.querySelector('.name');
|
2020-01-02 13:03:23 +00:00
|
|
|
const operatorElement = token.querySelector('.operator');
|
2017-05-18 18:53:14 +00:00
|
|
|
let value;
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-05-18 18:53:14 +00:00
|
|
|
if (token.classList.contains('filtered-search-token')) {
|
2020-01-02 13:03:23 +00:00
|
|
|
FilteredSearchVisualTokens.addFilterVisualToken(
|
2020-06-08 09:08:23 +00:00
|
|
|
nameElement.textContent,
|
|
|
|
operatorElement.textContent,
|
2020-01-02 13:03:23 +00:00
|
|
|
null,
|
|
|
|
{
|
|
|
|
uppercaseTokenName: nameElement.classList.contains('text-uppercase'),
|
|
|
|
},
|
|
|
|
);
|
2017-05-18 18:53:14 +00:00
|
|
|
|
|
|
|
const valueContainerElement = token.querySelector('.value-container');
|
|
|
|
value = valueContainerElement.dataset.originalValue;
|
|
|
|
|
|
|
|
if (!value) {
|
|
|
|
const valueElement = valueContainerElement.querySelector('.value');
|
2020-06-08 09:08:23 +00:00
|
|
|
value = valueElement.textContent;
|
2017-05-18 18:53:14 +00:00
|
|
|
}
|
2017-01-30 22:53:18 +00:00
|
|
|
}
|
|
|
|
|
2017-05-18 18:53:14 +00:00
|
|
|
// token is a search term
|
|
|
|
if (!value) {
|
2020-06-08 09:08:23 +00:00
|
|
|
value = nameElement.textContent;
|
2017-05-18 18:53:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
input.value = value;
|
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
// Opens dropdown
|
|
|
|
const inputEvent = new Event('input');
|
|
|
|
input.dispatchEvent(inputEvent);
|
|
|
|
|
|
|
|
// Adds cursor to input
|
|
|
|
input.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
static moveInputToTheRight() {
|
2017-03-10 17:40:38 +00:00
|
|
|
const input = FilteredSearchContainer.container.querySelector('.filtered-search');
|
2017-05-05 17:59:41 +00:00
|
|
|
|
|
|
|
if (!input) return;
|
|
|
|
|
2017-01-30 22:53:18 +00:00
|
|
|
const inputLi = input.parentElement;
|
2017-03-10 17:40:38 +00:00
|
|
|
const tokenContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-03-08 01:20:51 +00:00
|
|
|
FilteredSearchVisualTokens.tokenizeInput();
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-03-08 01:20:51 +00:00
|
|
|
if (!tokenContainer.lastElementChild.isEqualNode(inputLi)) {
|
2018-10-10 06:18:49 +00:00
|
|
|
const { isLastVisualTokenValid } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
|
2017-01-30 22:53:18 +00:00
|
|
|
|
|
|
|
if (!isLastVisualTokenValid) {
|
2018-02-21 20:22:56 +00:00
|
|
|
const lastPartial = FilteredSearchVisualTokens.getLastTokenPartial();
|
|
|
|
FilteredSearchVisualTokens.removeLastTokenPartial();
|
|
|
|
FilteredSearchVisualTokens.addSearchVisualToken(lastPartial);
|
2017-01-30 22:53:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
tokenContainer.removeChild(inputLi);
|
|
|
|
tokenContainer.appendChild(inputLi);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|