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
ed4e525a
Commit
ed4e525a
authored
Dec 09, 2016
by
Clement Ho
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Code cleanup
parent
c5029c65
Changes
10
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
203 additions
and
235 deletions
+203
-235
app/assets/javascripts/droplab/droplab.js
app/assets/javascripts/droplab/droplab.js
+10
-1
app/assets/javascripts/droplab/droplab_ajax_filter.js
app/assets/javascripts/droplab/droplab_ajax_filter.js
+6
-7
app/assets/javascripts/filtered_search/dropdown_assignee.js.es6
...sets/javascripts/filtered_search/dropdown_assignee.js.es6
+26
-15
app/assets/javascripts/filtered_search/dropdown_author.js.es6
...assets/javascripts/filtered_search/dropdown_author.js.es6
+18
-13
app/assets/javascripts/filtered_search/dropdown_hint.js.es6
app/assets/javascripts/filtered_search/dropdown_hint.js.es6
+15
-15
app/assets/javascripts/filtered_search/dropdown_label.js.es6
app/assets/javascripts/filtered_search/dropdown_label.js.es6
+14
-12
app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
...ets/javascripts/filtered_search/dropdown_milestone.js.es6
+14
-11
app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
...vascripts/filtered_search/filtered_search_dropdown.js.es6
+18
-47
app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
...avascripts/filtered_search/filtered_search_manager.js.es6
+81
-113
app/views/shared/issuable/_search_bar.html.haml
app/views/shared/issuable/_search_bar.html.haml
+1
-1
No files found.
app/assets/javascripts/droplab/droplab.js
View file @
ed4e525a
...
@@ -39,6 +39,10 @@ var DropDown = function(list, trigger) {
...
@@ -39,6 +39,10 @@ var DropDown = function(list, trigger) {
this
.
getItems
();
this
.
getItems
();
this
.
addEvents
();
this
.
addEvents
();
this
.
initialState
=
list
.
innerHTML
;
this
.
initialState
=
list
.
innerHTML
;
if
(
this
.
initialState
.
indexOf
(
'
{{
'
)
==
-
1
)
{
debugger
}
};
};
Object
.
assign
(
DropDown
.
prototype
,
{
Object
.
assign
(
DropDown
.
prototype
,
{
...
@@ -138,6 +142,10 @@ Object.assign(DropDown.prototype, {
...
@@ -138,6 +142,10 @@ Object.assign(DropDown.prototype, {
this
.
list
.
style
.
display
=
'
none
'
;
this
.
list
.
style
.
display
=
'
none
'
;
this
.
hidden
=
true
;
this
.
hidden
=
true
;
},
},
destroy
:
function
()
{
this
.
hide
();
}
});
});
module
.
exports
=
DropDown
;
module
.
exports
=
DropDown
;
...
@@ -247,7 +255,7 @@ require('./window')(function(w){
...
@@ -247,7 +255,7 @@ require('./window')(function(w){
changeHookList
:
function
(
trigger
,
list
,
plugins
,
config
)
{
changeHookList
:
function
(
trigger
,
list
,
plugins
,
config
)
{
trigger
=
document
.
querySelector
(
'
[data-id="
'
+
trigger
+
'
"]
'
);
trigger
=
document
.
querySelector
(
'
[data-id="
'
+
trigger
+
'
"]
'
);
list
=
document
.
querySelector
(
list
);
//
list = document.querySelector(list);
this
.
hooks
.
every
(
function
(
hook
,
i
)
{
this
.
hooks
.
every
(
function
(
hook
,
i
)
{
if
(
hook
.
trigger
===
trigger
)
{
if
(
hook
.
trigger
===
trigger
)
{
// Restore initial State
// Restore initial State
...
@@ -503,6 +511,7 @@ Object.assign(HookInput.prototype, {
...
@@ -503,6 +511,7 @@ Object.assign(HookInput.prototype, {
this
.
restoreInitialState
();
this
.
restoreInitialState
();
this
.
removeEvents
();
this
.
removeEvents
();
this
.
removePlugins
();
this
.
removePlugins
();
this
.
list
.
destroy
();
}
}
});
});
...
...
app/assets/javascripts/droplab/droplab_ajax_filter.js
View file @
ed4e525a
...
@@ -8,14 +8,12 @@ require('../window')(function(w){
...
@@ -8,14 +8,12 @@ require('../window')(function(w){
this
.
hook
=
hook
;
this
.
hook
=
hook
;
this
.
notLoading
();
this
.
notLoading
();
this
.
hook
.
trigger
.
addEventListener
(
'
keydown.dl
'
,
this
.
debounceTrigger
.
bind
(
this
));
this
.
debounceTriggerWrapper
=
this
.
debounceTrigger
.
bind
(
this
);
this
.
hook
.
trigger
.
addEventListener
(
'
keydown.dl
'
,
this
.
debounceTriggerWrapper
);
this
.
hook
.
trigger
.
addEventListener
(
'
focus
'
,
this
.
debounceTriggerWrapper
);
this
.
trigger
();
this
.
trigger
();
},
},
debounceTriggerWrapper
()
{
return
this
.
debounceTrigger
.
bind
(
this
.
hook
);
},
notLoading
:
function
notLoading
()
{
notLoading
:
function
notLoading
()
{
this
.
loading
=
false
;
this
.
loading
=
false
;
},
},
...
@@ -57,7 +55,8 @@ require('../window')(function(w){
...
@@ -57,7 +55,8 @@ require('../window')(function(w){
params
[
config
.
searchKey
]
=
searchValue
;
params
[
config
.
searchKey
]
=
searchValue
;
var
self
=
this
;
var
self
=
this
;
this
.
_loadUrlData
(
config
.
endpoint
+
this
.
buildParams
(
params
)).
then
(
function
(
data
)
{
this
.
_loadUrlData
(
config
.
endpoint
+
this
.
buildParams
(
params
)).
then
(
function
(
data
)
{
self
.
hook
.
list
.
addData
.
call
(
self
.
hook
.
list
,
data
[
0
]);
self
.
hook
.
restoreInitialState
.
call
(
self
.
hook
);
self
.
hook
.
list
.
setData
.
call
(
self
.
hook
.
list
,
data
[
0
]);
self
.
notLoading
();
self
.
notLoading
();
});
});
},
},
...
@@ -93,7 +92,7 @@ require('../window')(function(w){
...
@@ -93,7 +92,7 @@ require('../window')(function(w){
clearTimeout
(
this
.
timeout
);
clearTimeout
(
this
.
timeout
);
}
}
this
.
hook
.
trigger
.
removeEventListener
(
'
keydown.dl
'
,
this
.
debounceTrigger
);
this
.
hook
.
trigger
.
removeEventListener
(
'
keydown.dl
'
,
this
.
debounceTrigger
Wrapper
);
this
.
hook
.
trigger
.
removeEventListener
(
'
focus
'
,
this
.
debounceTriggerWrapper
);
this
.
hook
.
trigger
.
removeEventListener
(
'
focus
'
,
this
.
debounceTriggerWrapper
);
}
}
};
};
...
...
app/assets/javascripts/filtered_search/dropdown_assignee.js.es6
View file @
ed4e525a
...
@@ -6,6 +6,19 @@
...
@@ -6,6 +6,19 @@
constructor(droplab, dropdown, input) {
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
super(droplab, dropdown, input);
this.listId = 'js-dropdown-assignee';
this.listId = 'js-dropdown-assignee';
this.config = {
droplabAjaxFilter: {
endpoint: '/autocomplete/users.json',
searchKey: 'search',
params: {
per_page: 20,
active: true,
project_id: 2,
current_user: true,
},
searchValueFunction: this.getSearchInput,
}
};
}
}
itemClicked(e) {
itemClicked(e) {
...
@@ -21,27 +34,25 @@
...
@@ -21,27 +34,25 @@
renderContent() {
renderContent() {
// TODO: Pass elements instead of querySelectors
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, '#js-dropdown-assignee', [droplabAjax], {
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
droplabAjax: {
endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=¤t_user=true&push_code_to_protected_branches=&author_id=&skip_users=',
method: 'setData',
}
});
}
}
filterMethod(item, query) {
getSearchInput() {
const query = document.querySelector('.filtered-search').value;
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const valueWithoutColon = value.slice(1).toLowerCase();
const valueWithoutColon = value.slice(1);
const hasPrefix = valueWithoutColon[0] === '@';
const valueWithoutPrefix = valueWithoutColon.slice(1);
const valueWithoutPrefix = valueWithoutColon.slice(1);
const username = item.username.toLowerCase();
if (hasPrefix) {
const name = item.name.toLowerCase();
return valueWithoutPrefix;
} else {
const noUsernameMatch = username.indexOf(valueWithoutPrefix) === -1 && username.indexOf(valueWithoutColon) === -1;
return valueWithoutColon;
const noNameMatch = name.indexOf(valueWithoutColon) === -1;
}
}
item.droplab_hidden = noUsernameMatch && noNameMatch;
configure() {
return item
;
this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init()
;
}
}
}
}
...
...
app/assets/javascripts/filtered_search/dropdown_author.js.es6
View file @
ed4e525a
...
@@ -6,18 +6,7 @@
...
@@ -6,18 +6,7 @@
constructor(droplab, dropdown, input) {
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
super(droplab, dropdown, input);
this.listId = 'js-dropdown-author';
this.listId = 'js-dropdown-author';
}
this.config = {
itemClicked(e) {
const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim();
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username));
this.dismissDropdown();
}
renderContent() {
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjaxFilter], {
droplabAjaxFilter: {
droplabAjaxFilter: {
endpoint: '/autocomplete/users.json',
endpoint: '/autocomplete/users.json',
searchKey: 'search',
searchKey: 'search',
...
@@ -29,7 +18,19 @@
...
@@ -29,7 +18,19 @@
},
},
searchValueFunction: this.getSearchInput,
searchValueFunction: this.getSearchInput,
}
}
});
};
}
itemClicked(e) {
const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim();
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username));
this.dismissDropdown();
}
renderContent() {
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
}
}
getSearchInput() {
getSearchInput() {
...
@@ -45,6 +46,10 @@
...
@@ -45,6 +46,10 @@
return valueWithoutColon;
return valueWithoutColon;
}
}
}
}
configure() {
this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
}
}
}
global.DropdownAuthor = DropdownAuthor;
global.DropdownAuthor = DropdownAuthor;
...
...
app/assets/javascripts/filtered_search/dropdown_hint.js.es6
View file @
ed4e525a
...
@@ -24,26 +24,30 @@
...
@@ -24,26 +24,30 @@
constructor(droplab, dropdown, input) {
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
super(droplab, dropdown, input);
this.listId = 'js-dropdown-hint';
this.listId = 'js-dropdown-hint';
this.config = {
droplabFilter: {
template: 'hint',
filterFunction: this.filterMethod,
}
};
}
}
itemClicked(e) {
itemClicked(e) {
const token = e.detail.selected.querySelector('.js-filter-hint').innerText.trim();
const selected = e.detail.selected;
const tag = e.detail.selected.querySelector('.js-filter-tag').innerText.trim();
if (!selected.hasAttribute('data-value')) {
const token = selected.querySelector('.js-filter-hint').innerText.trim();
const tag = selected.querySelector('.js-filter-tag').innerText.trim();
if (tag.length) {
if (tag.length) {
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token));
gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token));
}
}
}
this.dismissDropdown();
this.dismissDropdown();
}
}
renderContent() {
renderContent() {
this.droplab.changeHookList(this.hookId, '#js-dropdown-hint', [droplabFilter], {
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
droplabFilter: {
template: 'hint',
filterFunction: this.filterMethod,
}
});
this.droplab.setData(this.hookId, dropdownData);
this.droplab.setData(this.hookId, dropdownData);
}
}
...
@@ -60,11 +64,7 @@
...
@@ -60,11 +64,7 @@
}
}
configure() {
configure() {
this.droplab.addHook(this.input, this.dropdown, [droplabFilter], {
this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
droplabFilter: {
template: 'hint',
}
}).init();
}
}
}
}
...
...
app/assets/javascripts/filtered_search/dropdown_label.js.es6
View file @
ed4e525a
...
@@ -6,7 +6,15 @@
...
@@ -6,7 +6,15 @@
constructor(droplab, dropdown, input) {
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
super(droplab, dropdown, input);
this.listId = 'js-dropdown-label';
this.listId = 'js-dropdown-label';
this.filterSymbol = '~';
this.config = {
droplabAjax: {
endpoint: 'labels.json',
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this, '~'),
}
};
}
}
itemClicked(e) {
itemClicked(e) {
...
@@ -22,17 +30,11 @@
...
@@ -22,17 +30,11 @@
}
}
renderContent() {
renderContent() {
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
// TODO: Don't bind filterWithSymbol to (this), just pass the symbol
}
this.droplab.changeHookList(this.hookId, '#js-dropdown-label', [droplabAjax, droplabFilter], {
droplabAjax: {
configure() {
endpoint: 'labels.json',
this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this),
}
});
}
}
}
}
...
...
app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
View file @
ed4e525a
...
@@ -6,7 +6,15 @@
...
@@ -6,7 +6,15 @@
constructor(droplab, dropdown, input) {
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
super(droplab, dropdown, input);
this.listId = 'js-dropdown-milestone';
this.listId = 'js-dropdown-milestone';
this.filterSymbol = '%';
this.config = {
droplabAjax: {
endpoint: 'milestones.json',
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this, '%'),
}
};
}
}
itemClicked(e) {
itemClicked(e) {
...
@@ -22,16 +30,11 @@
...
@@ -22,16 +30,11 @@
}
}
renderContent() {
renderContent() {
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
this.droplab.changeHookList(this.hookId, '#js-dropdown-milestone', [droplabAjax, droplabFilter], {
}
droplabAjax: {
endpoint: 'milestones.json',
configure() {
method: 'setData',
this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this),
}
});
}
}
}
}
...
...
app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
View file @
ed4e525a
...
@@ -12,11 +12,16 @@
...
@@ -12,11 +12,16 @@
}
}
bindEvents() {
bindEvents() {
this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this));
this.itemClickedWrapper = this.itemClicked.bind(this);
this.dropdown.addEventListener('click.dl', this.itemClickedWrapper);
}
}
unbindEvents() {
unbindEvents() {
this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this));
this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper);
}
getCurrentHook() {
return this.droplab.hooks.filter(h => h.id === this.hookId)[0];
}
}
getEscapedText(text) {
getEscapedText(text) {
...
@@ -49,34 +54,8 @@
...
@@ -49,34 +54,8 @@
// Overridden by dropdown sub class
// Overridden by dropdown sub class
}
}
getFilterConfig(filterKeyword) {
renderContent() {
const config = {};
// Overriden by dropdown sub class
const filterConfig = {};
if (filterKeyword) {
filterConfig.text = filterKeyword;
}
if (this.filterMethod) {
filterConfig.filter = this.filterMethod;
}
config[this.hookId] = filterConfig;
return config;
}
destroy() {
this.input.setAttribute(DATA_DROPDOWN_TRIGGER, '');
this.droplab.setConfig(this.getFilterConfig());
this.droplab.setData(this.hookId, []);
this.unbindEvents();
}
dismissDropdown() {
this.input.focus();
// Propogate input change to FilteredSearchManager
// so that it can determine which dropdowns to open
this.input.dispatchEvent(new Event('input'));
}
}
setAsDropdown() {
setAsDropdown() {
...
@@ -97,13 +76,12 @@
...
@@ -97,13 +76,12 @@
return dataValue !== null;
return dataValue !== null;
}
}
getCurrentHook() {
dismissDropdown() {
return this.droplab.hooks.filter(h => h.id === this.hookId)[0];
this.input.focus();
}
// Propogate input change to FilteredSearchManager
// so that it can determine which dropdowns to open
renderContent() {
this.input.dispatchEvent(new Event('input'));
// Overriden by dropdown sub class
}
}
render(forceRenderContent) {
render(forceRenderContent) {
this.setAsDropdown();
this.setAsDropdown();
...
@@ -134,14 +112,7 @@
...
@@ -134,14 +112,7 @@
}
}
}
}
hide() {
filterWithSymbol(filterSymbol, item, query) {
const currentHook = this.getCurrentHook();
if (currentHook) {
currentHook.list.hide();
}
}
filterWithSymbol(item, query) {
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const valueWithoutColon = value.slice(1).toLowerCase();
const valueWithoutColon = value.slice(1).toLowerCase();
const prefix = valueWithoutColon[0];
const prefix = valueWithoutColon[0];
...
@@ -149,8 +120,8 @@
...
@@ -149,8 +120,8 @@
const title = item.title.toLowerCase();
const title = item.title.toLowerCase();
// Eg.
this.
filterSymbol = ~ for labels
// Eg. filterSymbol = ~ for labels
const matchWithoutPrefix = prefix ===
this.
filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
const matchWithoutPrefix = prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
const match = title.indexOf(valueWithoutColon) !== -1;
const match = title.indexOf(valueWithoutColon) !== -1;
item.droplab_hidden = !match && !matchWithoutPrefix;
item.droplab_hidden = !match && !matchWithoutPrefix;
...
...
app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
View file @
ed4e525a
...
@@ -69,20 +69,19 @@
...
@@ -69,20 +69,19 @@
}
}
}
}
let dropdownHint;
let dropdownAuthor;
let dropdownAssignee;
let dropdownMilestone;
let dropdownLabel;
class FilteredSearchManager {
class FilteredSearchManager {
constructor() {
constructor() {
this.tokenizer = gl.FilteredSearchTokenizer;
this.tokenizer = gl.FilteredSearchTokenizer;
this.filteredSearchInput = document.querySelector('.filtered-search');
this.clearSearchButton = document.querySelector('.clear-search');
this.setupMapping();
this.bindEvents();
this.bindEvents();
loadSearchParamsFromURL();
loadSearchParamsFromURL();
this.setDropdown();
this.setDropdown();
document.addEventListener('page:change', this.cleanup);
this.cleanupWrapper = this.cleanup.bind(this);
document.addEventListener('page:fetch', this.cleanupWrapper);
}
}
cleanup() {
cleanup() {
...
@@ -93,124 +92,105 @@
...
@@ -93,124 +92,105 @@
this.droplab = null;
this.droplab = null;
}
}
dropdownHint = null;
this.setupMapping();
dropdownAuthor = null;
dropdownAssignee = null;
document.removeEventListener('page:fetch', this.cleanupWrapper);
dropdownMilestone = null;
}
dropdownLabel = null;
document.removeEventListener('page:change', this.cleanup);
setupMapping() {
this.mapping = {
author: {
reference: null,
gl: 'DropdownAuthor',
element: document.querySelector('#js-dropdown-author'),
},
assignee: {
reference: null,
gl: 'DropdownAssignee',
element: document.querySelector('#js-dropdown-assignee'),
},
milestone: {
reference: null,
gl: 'DropdownMilestone',
element: document.querySelector('#js-dropdown-milestone'),
},
label: {
reference: null,
gl: 'DropdownLabel',
element: document.querySelector('#js-dropdown-label'),
},
hint: {
reference: null,
gl: 'DropdownHint',
element: document.querySelector('#js-dropdown-hint'),
},
}
}
}
static addWordToInput(word, addSpace) {
static addWordToInput(word, addSpace) {
const filteredSearchValue = document.querySelector('.filtered-search').value;
const filteredSearchInput = document.querySelector('.filtered-search')
const filteredSearchValue = filteredSearchInput.value;
const hasExistingValue = filteredSearchValue.length !== 0;
const hasExistingValue = filteredSearchValue.length !== 0;
const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue);
const { lastToken } = gl.FilteredSearchTokenizer.processTokens(filteredSearchValue);
if (lastToken.hasOwnProperty('key')) {
if (lastToken.hasOwnProperty('key')) {
console.log(lastToken);
console.log(lastToken);
// Spaces inside the token means that the token value will be escaped by quotes
// Spaces inside the token means that the token value will be escaped by quotes
const hasQuotes = lastToken.value.indexOf(' ') !== -1;
const hasQuotes = lastToken.value.indexOf(' ') !== -1;
const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length;
const lengthToRemove = hasQuotes ? lastToken.value.length + 2 : lastToken.value.length;
document.querySelector('.filtered-search')
.value = filteredSearchValue.slice(0, -1 * (lengthToRemove));
filteredSearchInput
.value = filteredSearchValue.slice(0, -1 * (lengthToRemove));
}
}
document.querySelector('.filtered-search')
.value += hasExistingValue && addSpace ? ` ${word}` : word;
filteredSearchInput
.value += hasExistingValue && addSpace ? ` ${word}` : word;
}
}
loadDropdown(dropdownName = '', hideDropdown) {
load(key, firstLoad = false) {
let firstLoad = false;
console.log(`🦄 load ${key} dropdown`);
const filteredSearch = document.querySelector('.filtered-search');
const glClass = this.mapping[key].gl;
const element = this.mapping[key].element;
if(!this.droplab) {
firstLoad = true;
this.droplab = new DropLab();
}
dropdownName = dropdownName.toLowerCase();
const filterIconPadding = 27;
const filterIconPadding = 27;
const
match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0]
;
const
dropdownOffset = gl.text.getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding
;
if (!this.
font
) {
if (!this.
mapping[key].reference
) {
this.
font = window.getComputedStyle(filteredSearch).font
;
this.
mapping[key].reference = new gl[glClass](this.droplab, element, this.filteredSearchInput)
;
}
}
if (match && this.currentDropdown !== match.key) {
if (firstLoad) {
console.log(`🦄 load ${match.key} dropdown`);
this.mapping[key].reference.configure();
}
const dynamicDropdownPadding = 12;
const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding + dynamicDropdownPadding;
const dropdownAuthorElement = document.querySelector('#js-dropdown-author');
const dropdownAssigneeElement = document.querySelector('#js-dropdown-assignee');
const dropdownMilestoneElement = document.querySelector('#js-dropdown-milestone');
const dropdownLabelElemenet = document.querySelector('#js-dropdown-label');
this.dismissCurrentDropdown();
this.currentDropdown = match.key;
if (match.key === 'author') {
if (!dropdownAuthor) {
dropdownAuthor = new gl.DropdownAuthor(this.droplab, dropdownAuthorElement, filteredSearch);
}
dropdownAuthor.setOffset(dropdownOffset);
dropdownAuthor.render();
} else if (match.key === 'assignee') {
if (!dropdownAssignee) {
dropdownAssignee = new gl.DropdownAssignee(this.droplab, dropdownAssigneeElement, filteredSearch);
}
dropdownAssignee.setOffset(dropdownOffset);
dropdownAssignee.render();
} else if (match.key === 'milestone') {
if (!dropdownMilestone) {
dropdownMilestone = new gl.DropdownMilestone(this.droplab, dropdownMilestoneElement, filteredSearch);
}
dropdownMilestone.setOffset(dropdownOffset);
this.mapping[key].reference.setOffset(dropdownOffset);
dropdownMilestone.render();
this.mapping[key].reference.render(firstLoad);
} else if (match.key === 'label') {
if (!dropdownLabel) {
dropdownLabel = new gl.DropdownLabel(this.droplab, dropdownLabelElemenet, filteredSearch);
}
dropdownLabel.setOffset(dropdownOffset);
this.currentDropdown = key;
dropdownLabel.render();
}
}
} else if (!match && this.currentDropdown !== 'hint
') {
loadDropdown(dropdownName = '
') {
console.log('🦄 load hint dropdown')
;
let firstLoad = false
;
const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding;
if(!this.droplab) {
const dropdownHintElement = document.querySelector('#js-dropdown-hint');
firstLoad = true;
this.droplab = new DropLab();
}
this.dismissCurrentDropdown();
if (!this.font) {
this.currentDropdown = 'hint';
this.font = window.getComputedStyle(this.filteredSearchInput).font;
if (!dropdownHint) {
}
dropdownHint = new gl.DropdownHint(this.droplab, dropdownHintElement, filteredSearch);
}
if (firstLoad) {
const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName.toLowerCase())[0];
dropdownHint.configure(
);
const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key && this.mapping.hasOwnProperty(match.key
);
}
const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
dropdownHint.setOffset(dropdownOffset);
if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
dropdownHint.render(firstLoad);
const key = match && match.hasOwnProperty('key') ? match.key : 'hint';
this.load(key, firstLoad);
}
}
}
dismissCurrentDropdown() {
gl.droplab = this.droplab;
// if (this.currentDropdown === 'hint') {
// dropdownHint.hide();
// } else if (this.currentDropdown === 'author') {
// // dropdownAuthor.hide();
// }
}
}
setDropdown() {
setDropdown() {
const { lastToken } = this.tokenizer.processTokens(
document.querySelector('.filtered-search')
.value);
const { lastToken } = this.tokenizer.processTokens(
this.filteredSearchInput
.value);
if (typeof lastToken === 'string') {
if (typeof lastToken === 'string') {
// Token is not fully initialized yet
// Token is not fully initialized yet
...
@@ -228,32 +208,20 @@
...
@@ -228,32 +208,20 @@
}
}
bindEvents() {
bindEvents() {
const filteredSearchInput = document.querySelector('.filtered-search');
this.filteredSearchInput.addEventListener('input', this.setDropdown.bind(this));
this.filteredSearchInput.addEventListener('input', toggleClearSearchButton);
filteredSearchInput.addEventListener('input', this.setDropdown.bind(this));
this.filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this));
filteredSearchInput.addEventListener('input', toggleClearSearchButton);
this.clearSearchButton.addEventListener('click', this.clearSearch.bind(this));
filteredSearchInput.addEventListener('keydown', this.checkForEnter.bind(this));
document.querySelector('.clear-search').addEventListener('click', this.clearSearch.bind(this));
}
}
clearSearch(e) {
clearSearch(e) {
e.stopPropagation();
e.stopPropagation();
e.preventDefault();
e.preventDefault();
document.querySelector('.filtered-search')
.value = '';
this.filteredSearchInput
.value = '';
document.querySelector('.clear-search')
.classList.add('hidden');
this.clearSearchButton
.classList.add('hidden');
dropdownHint.resetFilters();
dropdownHint.resetFilters();
this.loadDropdown('hint', true);
this.loadDropdown('hint');
}
checkDropdownToken(e) {
const input = e.target.value;
const { lastToken } = this.tokenizer.processTokens(input);
// Check for dropdown token
if (lastToken[lastToken.length - 1] === ':') {
const token = lastToken.slice(0, -1);
}
}
}
checkForEnter(e) {
checkForEnter(e) {
...
...
app/views/shared/issuable/_search_bar.html.haml
View file @
ed4e525a
...
@@ -18,7 +18,7 @@
...
@@ -18,7 +18,7 @@
=
icon
(
'times'
)
=
icon
(
'times'
)
#js-dropdown-hint
.dropdown-menu.hint-dropdown
#js-dropdown-hint
.dropdown-menu.hint-dropdown
%ul
%ul
%li
.filter-dropdown-item
{
'data-value'
:
'
none
'
}
%li
.filter-dropdown-item
{
'data-value'
:
''
}
%button
.btn.btn-link
%button
.btn.btn-link
=
icon
(
'search'
)
=
icon
(
'search'
)
%span
%span
...
...
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