Skip to content

G
gitlab-ce
Commit ed4e525a authored by Clement Ho's avatar Clement Ho
Browse files
Options

Code cleanup

parent c5029c65
Show whitespace changes
Inline Side-by-side
Showing with 203 additions and 235 deletions
app/assets/javascripts/droplab/droplab.js
View file @ ed4e525a
......@@ -39,6 +39,10 @@ var DropDown = function(list, trigger) {
this.getItems();
this.addEvents();
this.initialState = list.innerHTML;
if (this.initialState.indexOf('{{') == -1) {
debugger
}
};
Object.assign(DropDown.prototype, {
......@@ -138,6 +142,10 @@ Object.assign(DropDown.prototype, {
this.list.style.display = 'none';
this.hidden = true;
},
destroy: function() {
this.hide();
}
});
module.exports = DropDown;
......@@ -247,7 +255,7 @@ require('./window')(function(w){
changeHookList: function(trigger, list, plugins, config) {
trigger = document.querySelector('[data-id="'+trigger+'"]');
list = document.querySelector(list);
// list = document.querySelector(list);
this.hooks.every(function(hook, i) {
if(hook.trigger === trigger) {
// Restore initial State
......@@ -503,6 +511,7 @@ Object.assign(HookInput.prototype, {
this.restoreInitialState();
this.removeEvents();
this.removePlugins();
this.list.destroy();
}
});
......
app/assets/javascripts/droplab/droplab_ajax_filter.js
View file @ ed4e525a
......@@ -8,14 +8,12 @@ require('../window')(function(w){
this.hook = hook;
this.notLoading();
this.hook.trigger.addEventListener('keydown.dl', this.debounceTrigger.bind(this));
this.debounceTriggerWrapper = this.debounceTrigger.bind(this);
this.hook.trigger.addEventListener('keydown.dl', this.debounceTriggerWrapper);
this.hook.trigger.addEventListener('focus', this.debounceTriggerWrapper);
this.trigger();
},
debounceTriggerWrapper() {
return this.debounceTrigger.bind(this.hook);
},
notLoading: function notLoading() {
this.loading = false;
},
......@@ -57,7 +55,8 @@ require('../window')(function(w){
params[config.searchKey] = searchValue;
var self = this;
this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) {
self.hook.list.addData.call(self.hook.list, data[0]);
self.hook.restoreInitialState.call(self.hook);
self.hook.list.setData.call(self.hook.list, data[0]);
self.notLoading();
});
},
......@@ -93,7 +92,7 @@ require('../window')(function(w){
clearTimeout(this.timeout);
}
this.hook.trigger.removeEventListener('keydown.dl', this.debounceTrigger);
this.hook.trigger.removeEventListener('keydown.dl', this.debounceTriggerWrapper);
this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper);
}
};
......
app/assets/javascripts/filtered_search/dropdown_assignee.js.es6
View file @ ed4e525a
......@@ -6,6 +6,19 @@
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-assignee';
this.config = {
droplabAjaxFilter: {
endpoint: '/autocomplete/users.json',
searchKey: 'search',
params: {
per_page: 20,
active: true,
project_id: 2,
current_user: true,
},
searchValueFunction: this.getSearchInput,
}
};
}
itemClicked(e) {
......@@ -21,27 +34,25 @@
renderContent() {
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, '#js-dropdown-assignee', [droplabAjax], {
droplabAjax: {
endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=',
method: 'setData',
}
});
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
}
filterMethod(item, query) {
getSearchInput() {
const query = document.querySelector('.filtered-search').value;
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const valueWithoutColon = value.slice(1).toLowerCase();
const valueWithoutColon = value.slice(1);
const hasPrefix = valueWithoutColon[0] === '@';
const valueWithoutPrefix = valueWithoutColon.slice(1);
const username = item.username.toLowerCase();
const name = item.name.toLowerCase();
const noUsernameMatch = username.indexOf(valueWithoutPrefix) === -1 && username.indexOf(valueWithoutColon) === -1;
const noNameMatch = name.indexOf(valueWithoutColon) === -1;
if (hasPrefix) {
return valueWithoutPrefix;
} else {
return valueWithoutColon;
}
}
item.droplab_hidden = noUsernameMatch && noNameMatch;
return item;
configure() {
this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
}
}
......
app/assets/javascripts/filtered_search/dropdown_author.js.es6
View file @ ed4e525a
......@@ -6,18 +6,7 @@
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-author';
}
itemClicked(e) {
const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim();
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username));
this.dismissDropdown();
}
renderContent() {
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjaxFilter], {
this.config = {
droplabAjaxFilter: {
endpoint: '/autocomplete/users.json',
searchKey: 'search',
......@@ -29,7 +18,19 @@
},
searchValueFunction: this.getSearchInput,
}
});
};
}
itemClicked(e) {
const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim();
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username));
this.dismissDropdown();
}
renderContent() {
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
}
getSearchInput() {
......@@ -45,6 +46,10 @@
return valueWithoutColon;
}
}
configure() {
this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
}
}
global.DropdownAuthor = DropdownAuthor;
......
app/assets/javascripts/filtered_search/dropdown_hint.js.es6
View file @ ed4e525a
......@@ -24,26 +24,30 @@
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-hint';
this.config = {
droplabFilter: {
template: 'hint',
filterFunction: this.filterMethod,
}
};
}
itemClicked(e) {
const token = e.detail.selected.querySelector('.js-filter-hint').innerText.trim();
const tag = e.detail.selected.querySelector('.js-filter-tag').innerText.trim();
const selected = e.detail.selected;
if (!selected.hasAttribute('data-value')) {
const token = selected.querySelector('.js-filter-hint').innerText.trim();
const tag = selected.querySelector('.js-filter-tag').innerText.trim();
if (tag.length) {
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token));
}
}
this.dismissDropdown();
}
renderContent() {
this.droplab.changeHookList(this.hookId, '#js-dropdown-hint', [droplabFilter], {
droplabFilter: {
template: 'hint',
filterFunction: this.filterMethod,
}
});
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
this.droplab.setData(this.hookId, dropdownData);
}
......@@ -60,11 +64,7 @@
}
configure() {
this.droplab.addHook(this.input, this.dropdown, [droplabFilter], {
droplabFilter: {
template: 'hint',
}
}).init();
this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
}
}
......
app/assets/javascripts/filtered_search/dropdown_label.js.es6
View file @ ed4e525a
......@@ -6,7 +6,15 @@
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-label';
this.filterSymbol = '~';
this.config = {
droplabAjax: {
endpoint: 'labels.json',
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this, '~'),
}
};
}
itemClicked(e) {
......@@ -22,17 +30,11 @@
}
renderContent() {
// TODO: Pass elements instead of querySelectors
// TODO: Don't bind filterWithSymbol to (this), just pass the symbol
this.droplab.changeHookList(this.hookId, '#js-dropdown-label', [droplabAjax, droplabFilter], {
droplabAjax: {
endpoint: 'labels.json',
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this),
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
}
});
configure() {
this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
}
}
......
app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
View file @ ed4e525a
......@@ -6,7 +6,15 @@
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-milestone';
this.filterSymbol = '%';
this.config = {
droplabAjax: {
endpoint: 'milestones.json',
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this, '%'),
}
};
}
itemClicked(e) {
......@@ -22,16 +30,11 @@
}
renderContent() {
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, '#js-dropdown-milestone', [droplabAjax, droplabFilter], {
droplabAjax: {
endpoint: 'milestones.json',
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this),
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
}
});
configure() {
this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
}
}
......
app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
View file @ ed4e525a
......@@ -12,11 +12,16 @@
}
bindEvents() {
this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this));
this.itemClickedWrapper = this.itemClicked.bind(this);
this.dropdown.addEventListener('click.dl', this.itemClickedWrapper);
}
unbindEvents() {
this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this));
this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper);
}
getCurrentHook() {
return this.droplab.hooks.filter(h => h.id === this.hookId)[0];
}
getEscapedText(text) {
......@@ -49,34 +54,8 @@
// Overridden by dropdown sub class
}
getFilterConfig(filterKeyword) {
const config = {};
const filterConfig = {};
if (filterKeyword) {
filterConfig.text = filterKeyword;
}
if (this.filterMethod) {
filterConfig.filter = this.filterMethod;
}
config[this.hookId] = filterConfig;
return config;
}
destroy() {
this.input.setAttribute(DATA_DROPDOWN_TRIGGER, '');
this.droplab.setConfig(this.getFilterConfig());
this.droplab.setData(this.hookId, []);
this.unbindEvents();
}
dismissDropdown() {
this.input.focus();
// Propogate input change to FilteredSearchManager
// so that it can determine which dropdowns to open
this.input.dispatchEvent(new Event('input'));
renderContent() {
// Overriden by dropdown sub class
}
setAsDropdown() {
......@@ -97,12 +76,11 @@
return dataValue !== null;
}
getCurrentHook() {
return this.droplab.hooks.filter(h => h.id === this.hookId)[0];
}
renderContent() {
// Overriden by dropdown sub class
dismissDropdown() {
this.input.focus();
// Propogate input change to FilteredSearchManager
// so that it can determine which dropdowns to open
this.input.dispatchEvent(new Event('input'));
}
render(forceRenderContent) {
......@@ -134,14 +112,7 @@
}
}
hide() {
const currentHook = this.getCurrentHook();
if (currentHook) {
currentHook.list.hide();
}
}
filterWithSymbol(item, query) {
filterWithSymbol(filterSymbol, item, query) {
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const valueWithoutColon = value.slice(1).toLowerCase();
const prefix = valueWithoutColon[0];
......@@ -149,8 +120,8 @@
const title = item.title.toLowerCase();
// Eg. this.filterSymbol = ~ for labels
const matchWithoutPrefix = prefix === this.filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
// Eg. filterSymbol = ~ for labels
const matchWithoutPrefix = prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
const match = title.indexOf(valueWithoutColon) !== -1;
item.droplab_hidden = !match && !matchWithoutPrefix;
......
app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
View file @ ed4e525a
......@@ -69,20 +69,19 @@
}
}
let dropdownHint;
let dropdownAuthor;
let dropdownAssignee;
let dropdownMilestone;
let dropdownLabel;
class FilteredSearchManager {
constructor() {
this.tokenizer = gl.FilteredSearchTokenizer;
this.filteredSearchInput = document.querySelector('.filtered-search');
this.clearSearchButton = document.querySelector('.clear-search');
this.setupMapping();
this.bindEvents();
loadSearchParamsFromURL();
this.setDropdown();
document.addEventListener('page:change', this.cleanup);
this.cleanupWrapper = this.cleanup.bind(this);
document.addEventListener('page:fetch', this.cleanupWrapper);
}
cleanup() {
......@@ -93,124 +92,105 @@
this.droplab = null;
}
dropdownHint = null;
dropdownAuthor = null;
dropdownAssignee = null;
dropdownMilestone = null;
dropdownLabel = null;
document.removeEventListener('page:change', this.cleanup);
this.setupMapping();
document.removeEventListener('page:fetch', this.cleanupWrapper);
}
setupMapping() {
this.mapping = {
author: {
reference: null,
gl: 'DropdownAuthor',
element: document.querySelector('#js-dropdown-author'),
},
assignee: {
reference: null,
gl: 'DropdownAssignee',
element: document.querySelector('#js-dropdown-assignee'),
},
milestone: {
reference: null,
gl: 'DropdownMilestone',
element: document.querySelector('#js-dropdown-milestone'),
},
label: {
reference: null,
gl: 'DropdownLabel',
element: document.querySelector('#js-dropdown-label'),
},
hint: {
reference: null,
gl: 'DropdownHint',
element: document.querySelector('#js-dropdown-hint'),
},
}
}
static addWordToInput(word, addSpace) {
const filteredSearchValue = document.querySelector('.filtered-search').value;
const filteredSearchInput = document.querySelector('.filtered-search')
const filteredSearchValue = filteredSearchInput.value;
const hasExistingValue = filteredSearchValue.length !== 0;
const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue);
if (lastToken.hasOwnProperty('key')) {
console.log(lastToken);
// Spaces inside the token means that the token value will be escaped by quotes
const hasQuotes = lastToken.value.indexOf(' ') !== -1;
const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length;
document.querySelector('.filtered-search').value = filteredSearchValue.slice(0, -1 * (lengthToRemove));
filteredSearchInput.value = filteredSearchValue.slice(0, -1 * (lengthToRemove));
}
document.querySelector('.filtered-search').value += hasExistingValue && addSpace ? ` ${word}` : word;
filteredSearchInput.value += hasExistingValue && addSpace ? ` ${word}` : word;
}
loadDropdown(dropdownName = '', hideDropdown) {
let firstLoad = false;
const filteredSearch = document.querySelector('.filtered-search');
if(!this.droplab) {
firstLoad = true;
this.droplab = new DropLab();
}
dropdownName = dropdownName.toLowerCase();
load(key, firstLoad = false) {
console.log(`🦄 load ${key} dropdown`);
const glClass = this.mapping[key].gl;
const element = this.mapping[key].element;
const filterIconPadding = 27;
const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0];
const dropdownOffset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding;
if (!this.font) {
this.font = window.getComputedStyle(filteredSearch).font;
if (!this.mapping[key].reference) {
this.mapping[key].reference = new gl[glClass](this.droplab, element, this.filteredSearchInput);
}
if (match && this.currentDropdown !== match.key) {
console.log(`🦄 load ${match.key} dropdown`);
const dynamicDropdownPadding = 12;
const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding + dynamicDropdownPadding;
const dropdownAuthorElement = document.querySelector('#js-dropdown-author');
const dropdownAssigneeElement = document.querySelector('#js-dropdown-assignee');
const dropdownMilestoneElement = document.querySelector('#js-dropdown-milestone');
const dropdownLabelElemenet = document.querySelector('#js-dropdown-label');
this.dismissCurrentDropdown();
this.currentDropdown = match.key;
if (match.key === 'author') {
if (!dropdownAuthor) {
dropdownAuthor = new gl.DropdownAuthor(this.droplab, dropdownAuthorElement, filteredSearch);
if (firstLoad) {
this.mapping[key].reference.configure();
}
dropdownAuthor.setOffset(dropdownOffset);
dropdownAuthor.render();
} else if (match.key === 'assignee') {
if (!dropdownAssignee) {
dropdownAssignee = new gl.DropdownAssignee(this.droplab, dropdownAssigneeElement, filteredSearch);
}
this.mapping[key].reference.setOffset(dropdownOffset);
this.mapping[key].reference.render(firstLoad);
dropdownAssignee.setOffset(dropdownOffset);
dropdownAssignee.render();
} else if (match.key === 'milestone') {
if (!dropdownMilestone) {
dropdownMilestone = new gl.DropdownMilestone(this.droplab, dropdownMilestoneElement, filteredSearch);
this.currentDropdown = key;
}
dropdownMilestone.setOffset(dropdownOffset);
dropdownMilestone.render();
} else if (match.key === 'label') {
if (!dropdownLabel) {
dropdownLabel = new gl.DropdownLabel(this.droplab, dropdownLabelElemenet, filteredSearch);
}
loadDropdown(dropdownName = '') {
let firstLoad = false;
dropdownLabel.setOffset(dropdownOffset);
dropdownLabel.render();
if(!this.droplab) {
firstLoad = true;
this.droplab = new DropLab();
}
} else if (!match && this.currentDropdown !== 'hint') {
console.log('🦄 load hint dropdown');
const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding;
const dropdownHintElement = document.querySelector('#js-dropdown-hint');
this.dismissCurrentDropdown();
this.currentDropdown = 'hint';
if (!dropdownHint) {
dropdownHint = new gl.DropdownHint(this.droplab, dropdownHintElement, filteredSearch);
if (!this.font) {
this.font = window.getComputedStyle(this.filteredSearchInput).font;
}
if (firstLoad) {
dropdownHint.configure();
}
const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName.toLowerCase())[0];
const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key && this.mapping.hasOwnProperty(match.key);
const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
dropdownHint.setOffset(dropdownOffset);
dropdownHint.render(firstLoad);
}
if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
const key = match && match.hasOwnProperty('key') ? match.key : 'hint';
this.load(key, firstLoad);
}
dismissCurrentDropdown() {
// if (this.currentDropdown === 'hint') {
// dropdownHint.hide();
// } else if (this.currentDropdown === 'author') {
// // dropdownAuthor.hide();
// }
gl.droplab = this.droplab;
}
setDropdown() {
const { lastToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value);
const { lastToken } = this.tokenizer.processTokens(this.filteredSearchInput.value);
if (typeof lastToken === 'string') {
// Token is not fully initialized yet
......@@ -228,32 +208,20 @@
}
bindEvents() {
const filteredSearchInput = document.querySelector('.filtered-search');
filteredSearchInput.addEventListener('input', this.setDropdown.bind(this));
filteredSearchInput.addEventListener('input', toggleClearSearchButton);
filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this));
document.querySelector('.clear-search').addEventListener('click', this.clearSearch.bind(this));
this.filteredSearchInput.addEventListener('input', this.setDropdown.bind(this));
this.filteredSearchInput.addEventListener('input', toggleClearSearchButton);
this.filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this));
this.clearSearchButton.addEventListener('click', this.clearSearch.bind(this));
}
clearSearch(e) {
e.stopPropagation();
e.preventDefault();
document.querySelector('.filtered-search').value = '';
document.querySelector('.clear-search').classList.add('hidden');
this.filteredSearchInput.value = '';
this.clearSearchButton.classList.add('hidden');
dropdownHint.resetFilters();
this.loadDropdown('hint', true);
}
checkDropdownToken(e) {
const input = e.target.value;
const { lastToken } = this.tokenizer.processTokens(input);
// Check for dropdown token
if (lastToken[lastToken.length - 1] === ':') {
const token = lastToken.slice(0, -1);
}
this.loadDropdown('hint');
}
checkForEnter(e) {
......
app/views/shared/issuable/_search_bar.html.haml
View file @ ed4e525a
......@@ -18,7 +18,7 @@
= icon('times')
#js-dropdown-hint.dropdown-menu.hint-dropdown
%ul
%li.filter-dropdown-item{ 'data-value': 'none' }
%li.filter-dropdown-item{ 'data-value': '' }
%button.btn.btn-link
= icon('search')
%span
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7