Skip to content

G
gitlab-ce
Commit b93ca73e authored by Bryce Johnson's avatar Bryce Johnson
Browse files
Options

Refactor SearchAutocomplete to ES6 class syntax.

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