Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Jérome Perrin
gitlab-ce
Commits
b93ca73e
Commit
b93ca73e
authored
Sep 08, 2016
by
Bryce Johnson
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Refactor SearchAutocomplete to ES6 class syntax.
parent
01fdb521
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
77 additions
and
81 deletions
+77
-81
app/assets/javascripts/dispatcher.js
app/assets/javascripts/dispatcher.js
+2
-1
app/assets/javascripts/search_autocomplete.js.es6
app/assets/javascripts/search_autocomplete.js.es6
+75
-80
No files found.
app/assets/javascripts/dispatcher.js
View file @
b93ca73e
...
@@ -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
();
}
}
};
};
...
...
app/assets/javascripts/search_autocomplete.js
→
app/assets/javascripts/search_autocomplete.js
.es6
View file @
b93ca73e
(
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 = {})
);
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment