2017-04-07 13:57:03 +00:00
|
|
|
import Filter from '~/droplab/plugins/filter';
|
2018-02-21 20:22:56 +00:00
|
|
|
import FilteredSearchDropdown from './filtered_search_dropdown';
|
|
|
|
import DropdownUtils from './dropdown_utils';
|
|
|
|
import FilteredSearchDropdownManager from './filtered_search_dropdown_manager';
|
|
|
|
import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
|
2016-12-14 03:55:25 +00:00
|
|
|
|
2018-02-21 20:22:56 +00:00
|
|
|
export default class DropdownHint extends FilteredSearchDropdown {
|
2017-07-20 19:17:34 +00:00
|
|
|
constructor(options = {}) {
|
|
|
|
const { input, tokenKeys } = options;
|
|
|
|
super(options);
|
2017-04-17 07:01:11 +00:00
|
|
|
this.config = {
|
|
|
|
Filter: {
|
|
|
|
template: 'hint',
|
2018-02-21 20:22:56 +00:00
|
|
|
filterFunction: DropdownUtils.filterHint.bind(null, {
|
2017-05-23 16:35:54 +00:00
|
|
|
input,
|
|
|
|
allowedKeys: tokenKeys.getKeys(),
|
|
|
|
}),
|
2017-04-17 07:01:11 +00:00
|
|
|
},
|
|
|
|
};
|
2017-05-23 16:35:54 +00:00
|
|
|
this.tokenKeys = tokenKeys;
|
2017-04-17 07:01:11 +00:00
|
|
|
}
|
2016-12-09 19:15:09 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
itemClicked(e) {
|
|
|
|
const { selected } = e.detail;
|
2016-11-30 21:25:10 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
if (selected.tagName === 'LI') {
|
|
|
|
if (selected.hasAttribute('data-value')) {
|
|
|
|
this.dismissDropdown();
|
|
|
|
} else if (selected.getAttribute('data-action') === 'submit') {
|
|
|
|
this.dismissDropdown();
|
|
|
|
this.dispatchFormSubmitEvent();
|
|
|
|
} else {
|
|
|
|
const token = selected.querySelector('.js-filter-hint').innerText.trim();
|
|
|
|
const tag = selected.querySelector('.js-filter-tag').innerText.trim();
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
if (tag.length) {
|
|
|
|
// Get previous input values in the input field and convert them into visual tokens
|
|
|
|
const previousInputValues = this.input.value.split(' ');
|
|
|
|
const searchTerms = [];
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
previousInputValues.forEach((value, index) => {
|
|
|
|
searchTerms.push(value);
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
if (index === previousInputValues.length - 1
|
|
|
|
&& token.indexOf(value.toLowerCase()) !== -1) {
|
|
|
|
searchTerms.pop();
|
2017-01-30 22:53:18 +00:00
|
|
|
}
|
2017-04-17 07:01:11 +00:00
|
|
|
});
|
2017-01-30 22:53:18 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
if (searchTerms.length > 0) {
|
2018-02-21 20:22:56 +00:00
|
|
|
FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
|
2016-12-16 05:20:31 +00:00
|
|
|
}
|
2017-04-17 07:01:11 +00:00
|
|
|
|
2018-02-21 20:22:56 +00:00
|
|
|
FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
|
2016-12-09 17:44:09 +00:00
|
|
|
}
|
2017-04-17 07:01:11 +00:00
|
|
|
this.dismissDropdown();
|
|
|
|
this.dispatchInputEvent();
|
2016-11-30 21:25:10 +00:00
|
|
|
}
|
|
|
|
}
|
2017-04-17 07:01:11 +00:00
|
|
|
}
|
2016-11-30 21:25:10 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
renderContent() {
|
2017-06-16 20:01:32 +00:00
|
|
|
const dropdownData = this.tokenKeys.get()
|
2017-05-18 20:30:16 +00:00
|
|
|
.map(tokenKey => ({
|
2018-09-18 14:42:53 +00:00
|
|
|
icon: `${gon.sprite_icons}#${tokenKey.icon}`,
|
2017-05-18 20:30:16 +00:00
|
|
|
hint: tokenKey.key,
|
2017-08-29 12:28:23 +00:00
|
|
|
tag: `:${tokenKey.tag}`,
|
2017-05-18 20:30:16 +00:00
|
|
|
type: tokenKey.type,
|
|
|
|
}));
|
2016-12-16 05:08:49 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config);
|
|
|
|
this.droplab.setData(this.hookId, dropdownData);
|
|
|
|
}
|
2016-12-06 22:23:04 +00:00
|
|
|
|
2017-04-17 07:01:11 +00:00
|
|
|
init() {
|
|
|
|
this.droplab.addHook(this.input, this.dropdown, [Filter], this.config).init();
|
2016-11-30 21:25:10 +00:00
|
|
|
}
|
2017-04-17 07:01:11 +00:00
|
|
|
}
|