Commit b93ca73e authored by Bryce Johnson's avatar Bryce Johnson

Refactor SearchAutocomplete to ES6 class syntax.

parent 01fdb521
...@@ -279,7 +279,8 @@ ...@@ -279,7 +279,8 @@
Dispatcher.prototype.initSearch = function() { Dispatcher.prototype.initSearch = function() {
// Only when search form is present // Only when search form is present
if ($('.search').length) { if ($('.search').length) {
return new SearchAutocomplete(); debugger;
return new gl.SearchAutocomplete();
} }
}; };
......
(function() { (global => {
var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
const KEYCODE = {
this.SearchAutocomplete = (function() { ESCAPE: 27,
var KEYCODE; BACKSPACE: 8,
ENTER: 13,
KEYCODE = { UP: 38,
ESCAPE: 27, DOWN: 40
BACKSPACE: 8, };
ENTER: 13,
UP: 38, class SearchAutocomplete {
DOWN: 40 constructor(opts = {}) {
}; this.onSearchInputBlur = this.onSearchInputBlur.bind(this);
this.onClearInputClick = this.onClearInputClick.bind(this);
function SearchAutocomplete(opts) { this.onSearchInputFocus = this.onSearchInputFocus.bind(this);
var ref, ref1, ref2, ref3, ref4; this.onSearchInputClick = this.onSearchInputClick.bind(this);
if (opts == null) { this.onSearchInputKeyUp = this.onSearchInputKeyUp.bind(this);
opts = {}; this.onSearchInputKeyDown = this.onSearchInputKeyDown.bind(this);
} this.wrap = opts.wrap || $('.search');
this.onSearchInputBlur = bind(this.onSearchInputBlur, this); this.optsEl = opts.optsEl || this.wrap.find('.search-autocomplete-opts');
this.onClearInputClick = bind(this.onClearInputClick, this); this.autocompletePath = opts.autocompletePath || this.optsEl.data('autocomplete-path')
this.onSearchInputFocus = bind(this.onSearchInputFocus, this); this.projectId = opts.projectId || this.optsEl.data('autocomplete-project-id') || '';
this.onSearchInputClick = bind(this.onSearchInputClick, this); this.projectRef = opts.projectRef || this.optsEl.data('autocomplete-project-ref') || '';
this.onSearchInputKeyUp = bind(this.onSearchInputKeyUp, this);
this.onSearchInputKeyDown = bind(this.onSearchInputKeyDown, this);
this.wrap = (ref = opts.wrap) != null ? ref : $('.search'), this.optsEl = (ref1 = opts.optsEl) != null ? ref1 : this.wrap.find('.search-autocomplete-opts'), this.autocompletePath = (ref2 = opts.autocompletePath) != null ? ref2 : this.optsEl.data('autocomplete-path'), this.projectId = (ref3 = opts.projectId) != null ? ref3 : this.optsEl.data('autocomplete-project-id') || '', this.projectRef = (ref4 = opts.projectRef) != null ? ref4 : this.optsEl.data('autocomplete-project-ref') || '';
// Dropdown Element
this.dropdown = this.wrap.find('.dropdown'); this.dropdown = this.wrap.find('.dropdown');
this.dropdownContent = this.dropdown.find('.dropdown-content'); this.dropdownContent = this.dropdown.find('.dropdown-content');
this.locationBadgeEl = this.getElement('.location-badge'); this.locationBadgeEl = this.getElement('.location-badge');
...@@ -46,19 +42,19 @@ ...@@ -46,19 +42,19 @@
} }
// Finds an element inside wrapper element // Finds an element inside wrapper element
SearchAutocomplete.prototype.getElement = function(selector) { getElement(selector) {
return this.wrap.find(selector); return this.wrap.find(selector);
}; }
SearchAutocomplete.prototype.saveOriginalState = function() { saveOriginalState() {
return this.originalState = this.serializeState(); return this.originalState = this.serializeState();
}; }
SearchAutocomplete.prototype.saveTextLength = function() { saveTextLength() {
return this.lastTextLength = this.searchInput.val().length; return this.lastTextLength = this.searchInput.val().length;
}; }
SearchAutocomplete.prototype.createAutocomplete = function() { createAutocomplete() {
return this.searchInput.glDropdown({ return this.searchInput.glDropdown({
filterInputBlur: false, filterInputBlur: false,
filterable: true, filterable: true,
...@@ -73,9 +69,9 @@ ...@@ -73,9 +69,9 @@
selectable: true, selectable: true,
clicked: this.onClick.bind(this) clicked: this.onClick.bind(this)
}); });
}; }
SearchAutocomplete.prototype.getData = function(term, callback) { getData(term, callback) {
var _this, contents, jqXHR; var _this, contents, jqXHR;
_this = this; _this = this;
if (!term) { if (!term) {
...@@ -138,9 +134,9 @@ ...@@ -138,9 +134,9 @@
}).always(function() { }).always(function() {
return _this.loadingSuggestions = false; return _this.loadingSuggestions = false;
}); });
}; }
SearchAutocomplete.prototype.getCategoryContents = function() { getCategoryContents() {
var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, utils; var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, utils;
userId = gon.current_user_id; userId = gon.current_user_id;
utils = gl.utils, projectOptions = gl.projectOptions, groupOptions = gl.groupOptions, dashboardOptions = gl.dashboardOptions; utils = gl.utils, projectOptions = gl.projectOptions, groupOptions = gl.groupOptions, dashboardOptions = gl.dashboardOptions;
...@@ -173,9 +169,9 @@ ...@@ -173,9 +169,9 @@
items.splice(0, 1); items.splice(0, 1);
} }
return items; return items;
}; }
SearchAutocomplete.prototype.serializeState = function() { serializeState() {
return { return {
// Search Criteria // Search Criteria
search_project_id: this.projectInputEl.val(), search_project_id: this.projectInputEl.val(),
...@@ -186,9 +182,9 @@ ...@@ -186,9 +182,9 @@
// Location badge // Location badge
_location: this.locationBadgeEl.text() _location: this.locationBadgeEl.text()
}; };
}; }
SearchAutocomplete.prototype.bindEvents = function() { bindEvents() {
this.searchInput.on('keydown', this.onSearchInputKeyDown); this.searchInput.on('keydown', this.onSearchInputKeyDown);
this.searchInput.on('keyup', this.onSearchInputKeyUp); this.searchInput.on('keyup', this.onSearchInputKeyUp);
this.searchInput.on('click', this.onSearchInputClick); this.searchInput.on('click', this.onSearchInputClick);
...@@ -200,9 +196,9 @@ ...@@ -200,9 +196,9 @@
return _this.searchInput.focus(); return _this.searchInput.focus();
}; };
})(this)); })(this));
}; }
SearchAutocomplete.prototype.enableAutocomplete = function() { enableAutocomplete() {
var _this; var _this;
// No need to enable anything if user is not logged in // No need to enable anything if user is not logged in
if (!gon.current_user_id) { if (!gon.current_user_id) {
...@@ -216,12 +212,12 @@ ...@@ -216,12 +212,12 @@
} }
}; };
SearchAutocomplete.prototype.onSearchInputKeyDown = function() {
// Saves last length of the entered text // Saves last length of the entered text
onSearchInputKeyDown() {
return this.saveTextLength(); return this.saveTextLength();
}; }
SearchAutocomplete.prototype.onSearchInputKeyUp = function(e) { onSearchInputKeyUp(e) {
switch (e.keyCode) { switch (e.keyCode) {
case KEYCODE.BACKSPACE: case KEYCODE.BACKSPACE:
// when trying to remove the location badge // when trying to remove the location badge
...@@ -259,54 +255,53 @@ ...@@ -259,54 +255,53 @@
} }
} }
this.wrap.toggleClass('has-value', !!e.target.value); this.wrap.toggleClass('has-value', !!e.target.value);
}; }
// Avoid falsy value to be returned // Avoid falsy value to be returned
SearchAutocomplete.prototype.onSearchInputClick = function(e) { onSearchInputClick(e) {
// Prevents closing the dropdown menu
return e.stopImmediatePropagation(); return e.stopImmediatePropagation();
}; }
SearchAutocomplete.prototype.onSearchInputFocus = function() { onSearchInputFocus() {
this.isFocused = true; this.isFocused = true;
this.wrap.addClass('search-active'); this.wrap.addClass('search-active');
if (this.getValue() === '') { if (this.getValue() === '') {
return this.getData(); return this.getData();
} }
}; }
SearchAutocomplete.prototype.getValue = function() { getValue() {
return this.searchInput.val(); return this.searchInput.val();
}; }
SearchAutocomplete.prototype.onClearInputClick = function(e) { onClearInputClick(e) {
e.preventDefault(); e.preventDefault();
return this.searchInput.val('').focus(); return this.searchInput.val('').focus();
}; }
SearchAutocomplete.prototype.onSearchInputBlur = function(e) { onSearchInputBlur(e) {
this.isFocused = false; this.isFocused = false;
this.wrap.removeClass('search-active'); this.wrap.removeClass('search-active');
// If input is blank then restore state // If input is blank then restore state
if (this.searchInput.val() === '') { if (this.searchInput.val() === '') {
return this.restoreOriginalState(); return this.restoreOriginalState();
} }
}; }
SearchAutocomplete.prototype.addLocationBadge = function(item) { addLocationBadge(item) {
var badgeText, category, value; var badgeText, category, value;
category = item.category != null ? item.category + ": " : ''; category = item.category != null ? item.category + ": " : '';
value = item.value != null ? item.value : ''; value = item.value != null ? item.value : '';
badgeText = "" + category + value; badgeText = "" + category + value;
this.locationBadgeEl.text(badgeText).show(); this.locationBadgeEl.text(badgeText).show();
return this.wrap.addClass('has-location-badge'); return this.wrap.addClass('has-location-badge');
}; }
SearchAutocomplete.prototype.hasLocationBadge = function() { hasLocationBadge() {
return this.wrap.is('.has-location-badge'); return this.wrap.is('.has-location-badge');
}; };
SearchAutocomplete.prototype.restoreOriginalState = function() { restoreOriginalState() {
var i, input, inputs, len; var i, input, inputs, len;
inputs = Object.keys(this.originalState); inputs = Object.keys(this.originalState);
for (i = 0, len = inputs.length; i < len; i++) { for (i = 0, len = inputs.length; i < len; i++) {
...@@ -320,13 +315,13 @@ ...@@ -320,13 +315,13 @@
value: this.originalState._location value: this.originalState._location
}); });
} }
}; }
SearchAutocomplete.prototype.badgePresent = function() { badgePresent() {
return this.locationBadgeEl.length; return this.locationBadgeEl.length;
}; }
SearchAutocomplete.prototype.resetSearchState = function() { resetSearchState() {
var i, input, inputs, len, results; var i, input, inputs, len, results;
inputs = Object.keys(this.originalState); inputs = Object.keys(this.originalState);
results = []; results = [];
...@@ -339,30 +334,30 @@ ...@@ -339,30 +334,30 @@
results.push(this.getElement("#" + input).val('')); results.push(this.getElement("#" + input).val(''));
} }
return results; return results;
}; }
SearchAutocomplete.prototype.removeLocationBadge = function() { removeLocationBadge() {
this.locationBadgeEl.hide(); this.locationBadgeEl.hide();
this.resetSearchState(); this.resetSearchState();
this.wrap.removeClass('has-location-badge'); this.wrap.removeClass('has-location-badge');
return this.disableAutocomplete(); return this.disableAutocomplete();
}; }
SearchAutocomplete.prototype.disableAutocomplete = function() { disableAutocomplete() {
if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('open')) { if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('open')) {
this.searchInput.addClass('disabled'); this.searchInput.addClass('disabled');
this.dropdown.removeClass('open').trigger('hidden.bs.dropdown'); this.dropdown.removeClass('open').trigger('hidden.bs.dropdown');
this.restoreMenu(); this.restoreMenu();
} }
}; }
SearchAutocomplete.prototype.restoreMenu = function() { restoreMenu() {
var html; var html;
html = "<ul> <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li> </ul>"; html = "<ul> <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li> </ul>";
return this.dropdownContent.html(html); return this.dropdownContent.html(html);
}; };
SearchAutocomplete.prototype.onClick = function(item, $el, e) { onClick(item, $el, e) {
if (location.pathname.indexOf(item.url) !== -1) { if (location.pathname.indexOf(item.url) !== -1) {
e.preventDefault(); e.preventDefault();
if (!this.badgePresent) { if (!this.badgePresent) {
...@@ -385,9 +380,9 @@ ...@@ -385,9 +380,9 @@
} }
}; };
return SearchAutocomplete; }
})(); global.SearchAutocomplete = SearchAutocomplete;
$(function() { $(function() {
var $projectOptionsDataEl = $('.js-search-project-options'); var $projectOptionsDataEl = $('.js-search-project-options');
...@@ -408,16 +403,16 @@ ...@@ -408,16 +403,16 @@
if ($groupOptionsDataEl.length) { if ($groupOptionsDataEl.length) {
gl.groupOptions = gl.groupOptions || {}; gl.groupOptions = gl.groupOptions || {};
var groupPath = $groupOptionsDataEl.data('group-path'); var groupPath = $groupOptionsDataEl.data('group-path');
gl.groupOptions[groupPath] = { gl.groupOptions[groupPath] = {
name: $groupOptionsDataEl.data('name'), name: $groupOptionsDataEl.data('name'),
issuesPath: $groupOptionsDataEl.data('issues-path'), issuesPath: $groupOptionsDataEl.data('issues-path'),
mrPath: $groupOptionsDataEl.data('mr-path') mrPath: $groupOptionsDataEl.data('mr-path')
}; };
} }
if ($dashboardOptionsDataEl.length) { if ($dashboardOptionsDataEl.length) {
gl.dashboardOptions = { gl.dashboardOptions = {
issuesPath: $dashboardOptionsDataEl.data('issues-path'), issuesPath: $dashboardOptionsDataEl.data('issues-path'),
...@@ -426,4 +421,4 @@ ...@@ -426,4 +421,4 @@
} }
}); });
}).call(this); })(window.gl || (window.gl = {}));
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