2017-01-13 15:30:40 +00:00
|
|
|
require('./filtered_search_dropdown');
|
2016-12-14 03:55:25 +00:00
|
|
|
|
|
|
|
/* global droplabFilter */
|
|
|
|
|
2016-12-13 14:52:43 +00:00
|
|
|
(() => {
|
2016-12-02 21:04:10 +00:00
|
|
|
class DropdownHint extends gl.FilteredSearchDropdown {
|
2017-01-05 19:56:23 +00:00
|
|
|
constructor(droplab, dropdown, input, filter) {
|
|
|
|
super(droplab, dropdown, input, filter);
|
2016-12-09 17:44:09 +00:00
|
|
|
this.config = {
|
|
|
|
droplabFilter: {
|
|
|
|
template: 'hint',
|
2017-01-20 15:09:36 +00:00
|
|
|
filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
|
2016-12-13 14:52:43 +00:00
|
|
|
},
|
2016-12-09 17:44:09 +00:00
|
|
|
};
|
2016-11-30 21:25:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
itemClicked(e) {
|
2016-12-12 22:25:31 +00:00
|
|
|
const { selected } = e.detail;
|
2016-12-09 19:15:09 +00:00
|
|
|
|
2016-12-16 05:20:31 +00:00
|
|
|
if (selected.tagName === 'LI') {
|
|
|
|
if (selected.hasAttribute('data-value')) {
|
2016-12-16 16:22:09 +00:00
|
|
|
this.dismissDropdown();
|
2017-01-21 07:44:36 +00:00
|
|
|
} else if (selected.getAttribute('data-action') === 'submit') {
|
|
|
|
this.dismissDropdown();
|
|
|
|
this.dispatchFormSubmitEvent();
|
2016-12-16 05:20:31 +00:00
|
|
|
} else {
|
|
|
|
const token = selected.querySelector('.js-filter-hint').innerText.trim();
|
|
|
|
const tag = selected.querySelector('.js-filter-tag').innerText.trim();
|
2016-11-30 21:25:10 +00:00
|
|
|
|
2016-12-16 05:20:31 +00:00
|
|
|
if (tag.length) {
|
2017-01-05 19:56:23 +00:00
|
|
|
gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''));
|
2016-12-16 05:20:31 +00:00
|
|
|
}
|
|
|
|
this.dismissDropdown();
|
|
|
|
this.dispatchInputEvent();
|
2016-12-09 17:44:09 +00:00
|
|
|
}
|
2016-11-30 21:25:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-02 21:04:10 +00:00
|
|
|
renderContent() {
|
2017-02-15 22:13:53 +00:00
|
|
|
const dropdownData = [];
|
|
|
|
|
|
|
|
[].forEach.call(this.input.parentElement.querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
|
|
|
|
const { icon, hint, tag } = dropdownMenu.dataset;
|
|
|
|
if (icon && hint && tag) {
|
|
|
|
dropdownData.push({
|
|
|
|
icon: `fa-${icon}`,
|
|
|
|
hint,
|
|
|
|
tag: `<${tag}>`,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2016-12-16 05:08:49 +00:00
|
|
|
|
2016-12-17 19:22:00 +00:00
|
|
|
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
|
|
|
|
this.droplab.setData(this.hookId, dropdownData);
|
2016-11-30 21:25:10 +00:00
|
|
|
}
|
2016-12-06 22:23:04 +00:00
|
|
|
|
2016-12-12 16:28:22 +00:00
|
|
|
init() {
|
2016-12-09 17:44:09 +00:00
|
|
|
this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
|
2016-12-08 21:36:54 +00:00
|
|
|
}
|
2016-11-30 21:25:10 +00:00
|
|
|
}
|
|
|
|
|
2016-12-13 14:52:43 +00:00
|
|
|
window.gl = window.gl || {};
|
|
|
|
gl.DropdownHint = DropdownHint;
|
|
|
|
})();
|