Introduced new Class for Search Textbox26303-make-search-boxes-consistent-throughout-gitlab

2 files changed, 72 insertions, 0 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 5f87a05067b..9d78eeb4fa6 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -55,6 +55,7 @@ import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
 import ShortcutsBlob from './shortcuts_blob';
 import initSettingsPanels from './settings_panels';
+import SearchTextbox from './search_textbox';
 
 (function() {
   var Dispatcher;
@@ -308,6 +309,7 @@ import initSettingsPanels from './settings_panels';
           new gl.MemberExpirationDate();
           new gl.Members();
           new UsersSelect();
+          new SearchTextbox();
           break;
         case 'groups:new':
         case 'admin:groups:new':
diff --git a/app/assets/javascripts/search_textbox.js b/app/assets/javascripts/search_textbox.js
new file mode 100644
index 00000000000..669e69de5b5
--- /dev/null
+++ b/app/assets/javascripts/search_textbox.js
@@ -0,0 +1,70 @@
+class SearchTextBox {
+  constructor({
+    wrap,
+  } = {}) {
+    this.wrap = wrap || $('.search-textbox');
+    this.searchInput = this.getElement('.search-textbox-input');
+    this.clearInput = this.getElement('.js-clear-input');
+  }
+
+  // Finds an element inside wrapper element
+  bindEventContext() {
+    this.onSearchInputBlur = this.onSearchInputBlur.bind(this);
+    this.onClearInputClick = this.onClearInputClick.bind(this);
+    this.onSearchInputFocus = this.onSearchInputFocus.bind(this);
+    this.onSearchInputClick = this.onSearchInputClick.bind(this);
+    this.onSearchInputKeyUp = this.onSearchInputKeyUp.bind(this);
+    this.onSearchInputKeyDown = this.onSearchInputKeyDown.bind(this);
+  }
+  getElement(selector) {
+    return this.wrap.find(selector);
+  }
+
+  getSearchText(selectedObject, el) {
+    return selectedObject.id ? selectedObject.text : '';
+  }
+
+
+  bindEvents() {
+    this.searchInput.on('keydown', this.onSearchInputKeyDown);
+    this.searchInput.on('keyup', this.onSearchInputKeyUp);
+    this.searchInput.on('click', this.onSearchInputClick);
+    this.searchInput.on('focus', this.onSearchInputFocus);
+    this.searchInput.on('blur', this.onSearchInputBlur);
+    this.clearInput.on('click', this.onClearInputClick);
+  }
+
+  onSearchInputKeyUp(e) {
+    this.wrap.toggleClass('has-value', !!e.target.value);
+  }
+
+  // Avoid falsy value to be returned
+  onSearchInputClick(e) {
+    return e.stopImmediatePropagation();
+  }
+
+  onSearchInputFocus() {
+    this.isFocused = true;
+    this.wrap.addClass('search-active');
+    if (this.getValue() === '') {
+      return this.getData();
+    }
+  }
+
+  getValue() {
+    return this.searchInput.val();
+  }
+
+  onClearInputClick(e) {
+    e.preventDefault();
+    return this.searchInput.val('').focus();
+  }
+
+  onSearchInputBlur(e) {
+    this.isFocused = false;
+    this.wrap.removeClass('search-active');
+  }
+
+}
+
+export default SearchTextBox;