2016-12-02 21:04:10 +00:00
|
|
|
/*= require filtered_search/filtered_search_dropdown */
|
2016-12-14 03:55:25 +00:00
|
|
|
|
|
|
|
/* global droplabFilter */
|
|
|
|
|
2016-12-13 14:52:43 +00:00
|
|
|
(() => {
|
2016-11-30 21:25:10 +00:00
|
|
|
const dropdownData = [{
|
|
|
|
icon: 'fa-pencil',
|
|
|
|
hint: 'author:',
|
2016-12-13 14:52:43 +00:00
|
|
|
tag: '<author>',
|
|
|
|
}, {
|
2016-11-30 21:25:10 +00:00
|
|
|
icon: 'fa-user',
|
|
|
|
hint: 'assignee:',
|
|
|
|
tag: '<assignee>',
|
2016-12-13 14:52:43 +00:00
|
|
|
}, {
|
2016-11-30 21:25:10 +00:00
|
|
|
icon: 'fa-clock-o',
|
|
|
|
hint: 'milestone:',
|
|
|
|
tag: '<milestone>',
|
2016-12-13 14:52:43 +00:00
|
|
|
}, {
|
2016-11-30 21:25:10 +00:00
|
|
|
icon: 'fa-tag',
|
|
|
|
hint: 'label:',
|
|
|
|
tag: '<label>',
|
|
|
|
}];
|
|
|
|
|
2016-12-02 21:04:10 +00:00
|
|
|
class DropdownHint extends gl.FilteredSearchDropdown {
|
2016-12-08 21:36:54 +00:00
|
|
|
constructor(droplab, dropdown, input) {
|
|
|
|
super(droplab, dropdown, input);
|
2016-12-09 17:44:09 +00:00
|
|
|
this.config = {
|
|
|
|
droplabFilter: {
|
|
|
|
template: 'hint',
|
2016-12-14 03:55:25 +00:00
|
|
|
filterFunction: gl.DropdownUtils.filterMethod,
|
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
|
|
|
|
|
|
|
if (selected.hasAttribute('data-value')) {
|
|
|
|
this.dismissDropdown();
|
|
|
|
} else {
|
2016-12-09 17:44:09 +00:00
|
|
|
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-09 17:44:09 +00:00
|
|
|
if (tag.length) {
|
2016-12-13 14:52:43 +00:00
|
|
|
gl.FilteredSearchDropdownManager
|
|
|
|
.addWordToInput(this.getSelectedTextWithoutEscaping(token));
|
2016-12-09 17:44:09 +00:00
|
|
|
}
|
2016-12-09 19:15:09 +00:00
|
|
|
this.dismissDropdown();
|
|
|
|
this.dispatchInputEvent();
|
2016-11-30 21:25:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-12-12 17:19:44 +00:00
|
|
|
getSelectedTextWithoutEscaping(selectedToken) {
|
|
|
|
const lastWord = this.input.value.split(' ').last();
|
|
|
|
const lastWordIndex = selectedToken.indexOf(lastWord);
|
|
|
|
|
|
|
|
return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length);
|
|
|
|
}
|
|
|
|
|
2016-12-02 21:04:10 +00:00
|
|
|
renderContent() {
|
2016-12-09 17:44:09 +00:00
|
|
|
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
|
2016-12-08 21:36:54 +00:00
|
|
|
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;
|
|
|
|
})();
|