Move functions into class

app/assets/javascripts/filtered_search/filtered_search_manager.js.es6

 /* eslint-disable no-param-reassign */
 ((global) => {
-  // TODO: Encapsulate inside class?
-  function toggleClearSearchButton(e) {
-    const clearSearchButton = document.querySelector('.clear-search');
+  class FilteredSearchManager {
+    constructor() {
+      this.tokenizer = gl.FilteredSearchTokenizer;
+      this.filteredSearchInput = document.querySelector('.filtered-search');
+      this.clearSearchButton = document.querySelector('.clear-search');
+      this.dropdownManager = new gl.FilteredSearchDropdownManager();
+
+      this.bindEvents();
+      this.loadSearchParamsFromURL();
+      this.dropdownManager.setDropdown();
+
+      this.cleanupWrapper = this.cleanup.bind(this);
+      document.addEventListener('page:fetch', this.cleanupWrapper);
+    }
+
+    cleanup() {
+      this.unbindEvents();
+      document.removeEventListener('page:fetch', this.cleanupWrapper);
+    }
 
+    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', this.toggleClearSearchButtonWrapper);
+      this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
+      this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
+      this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
+    }
+
+    unbindEvents() {
+      this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
+      this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
+      this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
+      this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
+      this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
+    }
+
+    checkForBackspace(e) {
+      // 8 = Backspace Key
+      // 46 = Delete Key
+      if (e.keyCode === 8 || e.keyCode === 46) {
+        // Reposition dropdown so that it is aligned with cursor
+        this.dropdownManager.updateCurrentDropdownOffset();
+      }
+    }
+
+    checkForEnter(e) {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+
+        // Prevent droplab from opening dropdown
+        this.dropdownManager.destroyDroplab();
+
+        this.search();
+      }
+    }
+
+    toggleClearSearchButton(e) {
       if (e.target.value) {
-      clearSearchButton.classList.remove('hidden');
+        this.clearSearchButton.classList.remove('hidden');
       } else {
-      clearSearchButton.classList.add('hidden');
+        this.clearSearchButton.classList.add('hidden');
+      }
     }
+
+    clearSearch(e) {
+      e.preventDefault();
+
+      this.filteredSearchInput.value = '';
+      this.clearSearchButton.classList.add('hidden');
+
+      this.dropdownManager.resetDropdowns();
     }
 
-  function loadSearchParamsFromURL() {
+    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('&');
@@ -64,80 +132,10 @@
       });
 
       // Trim the last space value
-    document.querySelector('.filtered-search').value = inputValue.trim();
+      this.filteredSearchInput.value = inputValue.trim();
 
       if (inputValue.trim()) {
-      document.querySelector('.clear-search').classList.remove('hidden');
-    }
-  }
-
-  class FilteredSearchManager {
-    constructor() {
-      this.tokenizer = gl.FilteredSearchTokenizer;
-      this.filteredSearchInput = document.querySelector('.filtered-search');
-      this.clearSearchButton = document.querySelector('.clear-search');
-      this.dropdownManager = new gl.FilteredSearchDropdownManager();
-
-      this.bindEvents();
-      loadSearchParamsFromURL();
-      this.dropdownManager.setDropdown();
-
-      this.cleanupWrapper = this.cleanup.bind(this);
-      document.addEventListener('page:fetch', this.cleanupWrapper);
-    }
-
-    cleanup() {
-      this.unbindEvents();
-      document.removeEventListener('page:fetch', this.cleanupWrapper);
-    }
-
-    bindEvents() {
-      this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
-      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('keydown', this.checkForEnterWrapper);
-      this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
-      this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
-    }
-
-    unbindEvents() {
-      this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
-      this.filteredSearchInput.removeEventListener('input', toggleClearSearchButton);
-      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
-      if (e.keyCode === 8 || e.keyCode === 46) {
-        // Reposition dropdown so that it is aligned with cursor
-        this.dropdownManager.updateCurrentDropdownOffset();
-      }
-    }
-
-    checkForEnter(e) {
-      if (e.keyCode === 13) {
-        e.preventDefault();
-
-        // Prevent droplab from opening dropdown
-        this.dropdownManager.destroyDroplab();
-
-        this.search();
+        this.clearSearchButton.classList.remove('hidden');
       }
     }