2016-11-09 20:31:58 +00:00
|
|
|
/* eslint-disable no-param-reassign */
|
2016-11-04 21:27:11 +00:00
|
|
|
((global) => {
|
2016-11-14 16:37:55 +00:00
|
|
|
function toggleClearSearchButton(e) {
|
2016-11-09 23:07:30 +00:00
|
|
|
const clearSearchButton = document.querySelector('.clear-search');
|
2016-11-09 20:31:58 +00:00
|
|
|
|
2016-11-14 23:45:26 +00:00
|
|
|
if (e.target.value) {
|
|
|
|
clearSearchButton.classList.remove('hidden');
|
|
|
|
} else {
|
|
|
|
clearSearchButton.classList.add('hidden');
|
|
|
|
}
|
2016-11-09 20:31:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function loadSearchParamsFromURL() {
|
|
|
|
// We can trust that each param has one & since values containing & will be encoded
|
|
|
|
// Remove the first character of search as it is always ?
|
|
|
|
const params = window.location.search.slice(1).split('&');
|
|
|
|
let inputValue = '';
|
|
|
|
|
|
|
|
params.forEach((p) => {
|
|
|
|
const split = p.split('=');
|
|
|
|
const key = decodeURIComponent(split[0]);
|
|
|
|
const value = split[1];
|
|
|
|
|
2016-11-30 18:30:52 +00:00
|
|
|
// Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys.get()
|
2016-11-14 19:22:32 +00:00
|
|
|
let conditionIndex = 0;
|
2016-11-30 18:30:52 +00:00
|
|
|
const validCondition = gl.FilteredSearchTokenKeys.get()
|
2016-11-14 23:45:26 +00:00
|
|
|
.filter(v => v.conditions && v.conditions.filter((c, index) => {
|
|
|
|
if (c.url === p) {
|
|
|
|
conditionIndex = index;
|
|
|
|
}
|
|
|
|
return c.url === p;
|
|
|
|
})[0])[0];
|
2016-11-14 19:22:32 +00:00
|
|
|
|
|
|
|
if (validCondition) {
|
|
|
|
inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`;
|
|
|
|
} else {
|
|
|
|
// Sanitize value since URL converts spaces into +
|
|
|
|
// Replace before decode so that we know what was originally + versus the encoded +
|
|
|
|
const sanitizedValue = value ? decodeURIComponent(value.replace(/[+]/g, ' ')) : value;
|
2016-11-30 18:30:52 +00:00
|
|
|
const match = gl.FilteredSearchTokenKeys.get().filter(t => key === `${t.key}_${t.param}`)[0];
|
2016-11-14 19:22:32 +00:00
|
|
|
|
|
|
|
if (match) {
|
|
|
|
const sanitizedKey = key.slice(0, key.indexOf('_'));
|
|
|
|
const valueHasSpace = sanitizedValue.indexOf(' ') !== -1;
|
|
|
|
const symbol = match.symbol;
|
|
|
|
|
|
|
|
const preferredQuotations = '"';
|
|
|
|
let quotationsToUse = preferredQuotations;
|
|
|
|
|
|
|
|
if (valueHasSpace) {
|
|
|
|
// Prefer ", but use ' if required
|
|
|
|
quotationsToUse = sanitizedValue.indexOf(preferredQuotations) === -1 ? preferredQuotations : '\'';
|
|
|
|
}
|
|
|
|
|
|
|
|
inputValue += valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`;
|
|
|
|
inputValue += ' ';
|
|
|
|
} else if (!match && key === 'search') {
|
|
|
|
inputValue += sanitizedValue;
|
|
|
|
inputValue += ' ';
|
2016-11-09 20:31:58 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Trim the last space value
|
|
|
|
document.querySelector('.filtered-search').value = inputValue.trim();
|
|
|
|
|
|
|
|
if (inputValue.trim()) {
|
|
|
|
document.querySelector('.clear-search').classList.remove('hidden');
|
|
|
|
}
|
|
|
|
}
|
2016-11-04 21:27:11 +00:00
|
|
|
|
|
|
|
class FilteredSearchManager {
|
|
|
|
constructor() {
|
2016-11-30 18:30:52 +00:00
|
|
|
this.tokenizer = gl.FilteredSearchTokenizer;
|
2016-12-09 17:44:09 +00:00
|
|
|
this.filteredSearchInput = document.querySelector('.filtered-search');
|
|
|
|
this.clearSearchButton = document.querySelector('.clear-search');
|
|
|
|
|
|
|
|
this.setupMapping();
|
2016-11-04 21:27:11 +00:00
|
|
|
this.bindEvents();
|
2016-11-09 20:31:58 +00:00
|
|
|
loadSearchParamsFromURL();
|
2016-11-30 21:18:17 +00:00
|
|
|
this.setDropdown();
|
2016-12-08 21:42:58 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
this.cleanupWrapper = this.cleanup.bind(this);
|
|
|
|
document.addEventListener('page:fetch', this.cleanupWrapper);
|
2016-12-08 21:42:58 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
cleanup() {
|
|
|
|
console.log('cleanup')
|
|
|
|
|
|
|
|
if (this.droplab) {
|
|
|
|
this.droplab.destroy();
|
|
|
|
this.droplab = null;
|
|
|
|
}
|
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
this.setupMapping();
|
|
|
|
|
|
|
|
document.removeEventListener('page:fetch', this.cleanupWrapper);
|
|
|
|
}
|
2016-12-08 21:42:58 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
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'),
|
|
|
|
},
|
|
|
|
}
|
2016-11-04 21:27:11 +00:00
|
|
|
}
|
|
|
|
|
2016-11-30 21:18:17 +00:00
|
|
|
static addWordToInput(word, addSpace) {
|
2016-12-09 17:44:09 +00:00
|
|
|
const filteredSearchInput = document.querySelector('.filtered-search')
|
|
|
|
const filteredSearchValue = filteredSearchInput.value;
|
2016-12-05 22:29:55 +00:00
|
|
|
const hasExistingValue = filteredSearchValue.length !== 0;
|
|
|
|
const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue);
|
2016-12-09 17:44:09 +00:00
|
|
|
|
2016-12-05 22:29:55 +00:00
|
|
|
if (lastToken.hasOwnProperty('key')) {
|
2016-12-06 18:52:23 +00:00
|
|
|
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;
|
2016-12-09 17:44:09 +00:00
|
|
|
filteredSearchInput.value = filteredSearchValue.slice(0, -1 * (lengthToRemove));
|
2016-12-05 22:29:55 +00:00
|
|
|
}
|
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
filteredSearchInput.value += hasExistingValue && addSpace ? ` ${word}` : word;
|
2016-11-30 18:32:10 +00:00
|
|
|
}
|
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
load(key, firstLoad = false) {
|
|
|
|
console.log(`🦄 load ${key} dropdown`);
|
|
|
|
const glClass = this.mapping[key].gl;
|
|
|
|
const element = this.mapping[key].element;
|
2016-12-05 21:12:34 +00:00
|
|
|
const filterIconPadding = 27;
|
2016-12-09 17:44:09 +00:00
|
|
|
const dropdownOffset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding;
|
2016-11-30 18:32:10 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
if (!this.mapping[key].reference) {
|
|
|
|
this.mapping[key].reference = new gl[glClass](this.droplab, element, this.filteredSearchInput);
|
2016-12-07 18:33:02 +00:00
|
|
|
}
|
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
if (firstLoad) {
|
|
|
|
this.mapping[key].reference.configure();
|
|
|
|
}
|
2016-12-02 22:43:15 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
this.mapping[key].reference.setOffset(dropdownOffset);
|
|
|
|
this.mapping[key].reference.render(firstLoad);
|
2016-12-02 22:43:15 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
this.currentDropdown = key;
|
|
|
|
}
|
2016-12-02 21:04:10 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
loadDropdown(dropdownName = '') {
|
|
|
|
let firstLoad = false;
|
2016-12-05 21:12:34 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
if(!this.droplab) {
|
|
|
|
firstLoad = true;
|
|
|
|
this.droplab = new DropLab();
|
|
|
|
}
|
2016-12-08 21:36:54 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
if (!this.font) {
|
|
|
|
this.font = window.getComputedStyle(this.filteredSearchInput).font;
|
|
|
|
}
|
2016-12-08 21:36:54 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
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';
|
2016-12-08 21:36:54 +00:00
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
|
|
|
|
const key = match && match.hasOwnProperty('key') ? match.key : 'hint';
|
|
|
|
this.load(key, firstLoad);
|
2016-12-07 18:55:03 +00:00
|
|
|
}
|
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
gl.droplab = this.droplab;
|
2016-11-30 21:18:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
setDropdown() {
|
2016-12-09 17:44:09 +00:00
|
|
|
const { lastToken } = this.tokenizer.processTokens(this.filteredSearchInput.value);
|
2016-11-30 21:18:17 +00:00
|
|
|
|
|
|
|
if (typeof lastToken === 'string') {
|
|
|
|
// Token is not fully initialized yet
|
|
|
|
// because it has no value
|
|
|
|
// Eg. token = 'label:'
|
|
|
|
const { tokenKey } = this.tokenizer.parseToken(lastToken);
|
|
|
|
this.loadDropdown(tokenKey);
|
|
|
|
} else if (lastToken.hasOwnProperty('key')) {
|
|
|
|
// Token has been initialized into an object
|
|
|
|
// because it has a value
|
|
|
|
this.loadDropdown(lastToken.key);
|
|
|
|
} else {
|
|
|
|
this.loadDropdown('hint');
|
2016-11-30 18:32:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-11-04 21:27:11 +00:00
|
|
|
bindEvents() {
|
2016-12-09 17:44:09 +00:00
|
|
|
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));
|
2016-12-07 18:55:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
clearSearch(e) {
|
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
|
2016-12-09 17:44:09 +00:00
|
|
|
this.filteredSearchInput.value = '';
|
|
|
|
this.clearSearchButton.classList.add('hidden');
|
2016-12-07 18:55:03 +00:00
|
|
|
dropdownHint.resetFilters();
|
2016-12-09 17:44:09 +00:00
|
|
|
this.loadDropdown('hint');
|
2016-11-04 21:27:11 +00:00
|
|
|
}
|
|
|
|
|
2016-11-14 16:37:55 +00:00
|
|
|
checkForEnter(e) {
|
2016-11-10 01:10:15 +00:00
|
|
|
// Enter KeyCode
|
2016-11-14 16:37:55 +00:00
|
|
|
if (e.keyCode === 13) {
|
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
2016-11-04 21:27:11 +00:00
|
|
|
this.search();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
search() {
|
|
|
|
console.log('search');
|
2016-11-08 19:20:37 +00:00
|
|
|
let path = '?scope=all&utf8=✓';
|
|
|
|
|
|
|
|
// Check current state
|
|
|
|
const currentPath = window.location.search;
|
|
|
|
const stateIndex = currentPath.indexOf('state=');
|
|
|
|
const defaultState = 'opened';
|
|
|
|
let currentState = defaultState;
|
|
|
|
|
2016-11-30 18:30:52 +00:00
|
|
|
const { tokens, searchToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value);
|
2016-11-09 23:07:30 +00:00
|
|
|
|
2016-11-08 19:20:37 +00:00
|
|
|
if (stateIndex !== -1) {
|
|
|
|
const remaining = currentPath.slice(stateIndex + 6);
|
|
|
|
const separatorIndex = remaining.indexOf('&');
|
|
|
|
|
|
|
|
currentState = separatorIndex === -1 ? remaining : remaining.slice(0, separatorIndex);
|
|
|
|
}
|
|
|
|
|
2016-11-09 20:31:58 +00:00
|
|
|
path += `&state=${currentState}`;
|
2016-11-09 23:07:30 +00:00
|
|
|
tokens.forEach((token) => {
|
2016-11-30 18:30:52 +00:00
|
|
|
const match = gl.FilteredSearchTokenKeys.get().filter(t => t.key === token.key)[0];
|
2016-11-14 19:22:32 +00:00
|
|
|
let tokenPath = '';
|
|
|
|
|
|
|
|
if (token.wildcard && match.conditions) {
|
2016-11-14 23:45:26 +00:00
|
|
|
const condition = match.conditions
|
|
|
|
.filter(c => c.keyword === token.value.toLowerCase())[0];
|
2016-11-14 19:22:32 +00:00
|
|
|
|
|
|
|
if (condition) {
|
|
|
|
tokenPath = `${condition.url}`;
|
|
|
|
}
|
|
|
|
} else if (!token.wildcard) {
|
|
|
|
// Remove the wildcard token
|
|
|
|
tokenPath = `${token.key}_${match.param}=${encodeURIComponent(token.value.slice(1))}`;
|
|
|
|
} else {
|
|
|
|
tokenPath = `${token.key}_${match.param}=${encodeURIComponent(token.value)}`;
|
|
|
|
}
|
|
|
|
|
|
|
|
path += `&${tokenPath}`;
|
2016-11-04 21:27:11 +00:00
|
|
|
});
|
|
|
|
|
2016-11-09 23:07:30 +00:00
|
|
|
if (searchToken) {
|
|
|
|
path += `&search=${encodeURIComponent(searchToken)}`;
|
2016-11-04 21:27:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
window.location = path;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
global.FilteredSearchManager = FilteredSearchManager;
|
2016-11-08 17:35:28 +00:00
|
|
|
})(window.gl || (window.gl = {}));
|