From 78fe37b169602d898ffbd756189706559aad84f2 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Mon, 12 Dec 2016 16:37:49 -0600 Subject: Move functions into class --- .../filtered_search/filtered_search_manager.js.es6 | 164 ++++++++++----------- 1 file changed, 81 insertions(+), 83 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 index 77a9de96c8a..00b7dc195bb 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 @@ -1,76 +1,5 @@ /* eslint-disable no-param-reassign */ ((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 { constructor() { this.tokenizer = gl.FilteredSearchTokenizer; @@ -79,7 +8,7 @@ this.dropdownManager = new gl.FilteredSearchDropdownManager(); this.bindEvents(); - loadSearchParamsFromURL(); + this.loadSearchParamsFromURL(); this.dropdownManager.setDropdown(); this.cleanupWrapper = this.cleanup.bind(this); @@ -93,12 +22,13 @@ bindEvents() { this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager); + this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this); this.checkForEnterWrapper = this.checkForEnter.bind(this); this.clearSearchWrapper = this.clearSearch.bind(this); this.checkForBackspaceWrapper = this.checkForBackspace.bind(this); 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('keyup', this.checkForBackspaceWrapper); this.clearSearchButton.addEventListener('click', this.clearSearchWrapper); @@ -106,21 +36,12 @@ unbindEvents() { 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('keyup', this.checkForBackspaceWrapper); this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper); } - clearSearch(e) { - e.preventDefault(); - - this.filteredSearchInput.value = ''; - this.clearSearchButton.classList.add('hidden'); - - this.dropdownManager.resetDropdowns(); - } - checkForBackspace(e) { // 8 = Backspace Key // 46 = Delete Key @@ -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() { let path = '?scope=all&utf8=✓'; -- cgit v1.2.3