Commit 78fe37b1 authored by Clement Ho's avatar Clement Ho

Move functions into class

parent 5116db24
/* eslint-disable no-param-reassign */ /* eslint-disable no-param-reassign */
((global) => { ((global) => {
// TODO: Encapsulate inside class?
function toggleClearSearchButton(e) {
const clearSearchButton = document.querySelector('.clear-search');
if (e.target.value) {
clearSearchButton.classList.remove('hidden');
} else {
clearSearchButton.classList.add('hidden');
}
}
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];
// Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys.get()
let conditionIndex = 0;
const validCondition = gl.FilteredSearchTokenKeys.get()
.filter(v => v.conditions && v.conditions.filter((c, index) => {
// Return TokenKeys that have conditions that much the URL
if (c.url === p) {
conditionIndex = index;
}
return c.url === p;
})[0])[0];
if (validCondition) {
// Parse params based on rules provided in the conditions key of gl.FilteredSearchTokenKeys.get()
inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`;
inputValue += ' ';
} 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;
const match = gl.FilteredSearchTokenKeys.get().filter(t => key === `${t.key}_${t.param}`)[0];
if (match) {
const sanitizedKey = key.slice(0, key.indexOf('_'));
const valueHasSpace = sanitizedValue.indexOf(' ') !== -1;
const symbol = match.symbol;
let quotationsToUse;
if (valueHasSpace) {
// Prefer ", but use ' if required
quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
}
inputValue += valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`;
inputValue += ' ';
} else if (!match && key === 'search') {
inputValue += sanitizedValue;
inputValue += ' ';
}
}
});
// Trim the last space value
document.querySelector('.filtered-search').value = inputValue.trim();
if (inputValue.trim()) {
document.querySelector('.clear-search').classList.remove('hidden');
}
}
class FilteredSearchManager { class FilteredSearchManager {
constructor() { constructor() {
this.tokenizer = gl.FilteredSearchTokenizer; this.tokenizer = gl.FilteredSearchTokenizer;
...@@ -79,7 +8,7 @@ ...@@ -79,7 +8,7 @@
this.dropdownManager = new gl.FilteredSearchDropdownManager(); this.dropdownManager = new gl.FilteredSearchDropdownManager();
this.bindEvents(); this.bindEvents();
loadSearchParamsFromURL(); this.loadSearchParamsFromURL();
this.dropdownManager.setDropdown(); this.dropdownManager.setDropdown();
this.cleanupWrapper = this.cleanup.bind(this); this.cleanupWrapper = this.cleanup.bind(this);
...@@ -93,12 +22,13 @@ ...@@ -93,12 +22,13 @@
bindEvents() { bindEvents() {
this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager); this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
this.checkForEnterWrapper = this.checkForEnter.bind(this); this.checkForEnterWrapper = this.checkForEnter.bind(this);
this.clearSearchWrapper = this.clearSearch.bind(this); this.clearSearchWrapper = this.clearSearch.bind(this);
this.checkForBackspaceWrapper = this.checkForBackspace.bind(this); this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper); this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
this.filteredSearchInput.addEventListener('input', toggleClearSearchButton); this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper); this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper); this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
this.clearSearchButton.addEventListener('click', this.clearSearchWrapper); this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
...@@ -106,21 +36,12 @@ ...@@ -106,21 +36,12 @@
unbindEvents() { unbindEvents() {
this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper); this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
this.filteredSearchInput.removeEventListener('input', toggleClearSearchButton); this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper); this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper); this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper); this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
} }
clearSearch(e) {
e.preventDefault();
this.filteredSearchInput.value = '';
this.clearSearchButton.classList.add('hidden');
this.dropdownManager.resetDropdowns();
}
checkForBackspace(e) { checkForBackspace(e) {
// 8 = Backspace Key // 8 = Backspace Key
// 46 = Delete Key // 46 = Delete Key
...@@ -141,6 +62,83 @@ ...@@ -141,6 +62,83 @@
} }
} }
toggleClearSearchButton(e) {
if (e.target.value) {
this.clearSearchButton.classList.remove('hidden');
} else {
this.clearSearchButton.classList.add('hidden');
}
}
clearSearch(e) {
e.preventDefault();
this.filteredSearchInput.value = '';
this.clearSearchButton.classList.add('hidden');
this.dropdownManager.resetDropdowns();
}
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];
// Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys.get()
let conditionIndex = 0;
const validCondition = gl.FilteredSearchTokenKeys.get()
.filter(v => v.conditions && v.conditions.filter((c, index) => {
// Return TokenKeys that have conditions that much the URL
if (c.url === p) {
conditionIndex = index;
}
return c.url === p;
})[0])[0];
if (validCondition) {
// Parse params based on rules provided in the conditions key of gl.FilteredSearchTokenKeys.get()
inputValue += `${validCondition.key}:${validCondition.conditions[conditionIndex].keyword}`;
inputValue += ' ';
} 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;
const match = gl.FilteredSearchTokenKeys.get().filter(t => key === `${t.key}_${t.param}`)[0];
if (match) {
const sanitizedKey = key.slice(0, key.indexOf('_'));
const valueHasSpace = sanitizedValue.indexOf(' ') !== -1;
const symbol = match.symbol;
let quotationsToUse;
if (valueHasSpace) {
// Prefer ", but use ' if required
quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
}
inputValue += valueHasSpace ? `${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}` : `${sanitizedKey}:${symbol}${sanitizedValue}`;
inputValue += ' ';
} else if (!match && key === 'search') {
inputValue += sanitizedValue;
inputValue += ' ';
}
}
});
// Trim the last space value
this.filteredSearchInput.value = inputValue.trim();
if (inputValue.trim()) {
this.clearSearchButton.classList.remove('hidden');
}
}
search() { search() {
let path = '?scope=all&utf8=✓'; let path = '?scope=all&utf8=✓';
......
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