Skip to content

G
gitlab-ce
Commit 367a1588 authored by Clement Ho's avatar Clement Ho
Browse files
Options

Update droplab

parent ceb79e3c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 354 additions and 212 deletions
app/assets/javascripts/droplab/droplab.js
View file @ 367a1588
This diff is collapsed.
app/assets/javascripts/droplab/droplab_ajax.js
View file @ 367a1588
/* eslint-disable */
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/* global droplab */
droplab.plugin(function init(DropLab) {
var _addData = DropLab.prototype.addData;
var _setData = DropLab.prototype.setData;
var _loadUrlData = function(url) {
require('../window')(function(w){
w.droplabAjax = {
_loadUrlData: function _loadUrlData(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest;
xhr.open('GET', url, true);
......@@ -21,32 +20,40 @@ droplab.plugin(function init(DropLab) {
};
xhr.send();
});
};
Object.assign(DropLab.prototype, {
addData: function(trigger, data) {
this.processData(trigger, data, _addData);
},
setData: function(trigger, data) {
this.processData(trigger, data, _setData);
},
processData: function(trigger, data, methodName) {
var _this = this;
if('string' === typeof data) {
_loadUrlData(data).then(function(d) {
methodName.call(_this, trigger, d);
init: function init(hook) {
var config = hook.config.droplabAjax;
if (!config || !config.endpoint || !config.method) {
return;
}
if (config.method !== 'setData' && config.method !== 'addData') {
return;
}
this._loadUrlData(config.endpoint).then(function(d) {
hook.list[config.method].call(hook.list, d);
}).catch(function(e) {
if(e.message)
if(e.message) {
console.error(e.message, e.stack); // eslint-disable-line no-console
else
console.error(e); // eslint-disable-line no-console
})
} else {
methodName.apply(this, arguments);
console.error(e); // eslint-disable-line no-console
}
},
});
},
destroy: function() {
}
};
});
},{"../window":2}],2:[function(require,module,exports){
module.exports = function(callback) {
return (function() {
callback(this);
}).call(null);
};
},{}]},{},[1])(1)
});
\ No newline at end of file
app/assets/javascripts/droplab/droplab_filter.js
View file @ 367a1588
/* eslint-disable */
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.filter||(g.filter = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/* global droplab */
droplab.plugin(function init(DropLab) {
var keydown = function keydown(e) {
require('../window')(function(w){
w.droplabFilter = {
keydownWrapper: function(e){
var list = e.detail.hook.list;
var data = list.data;
var value = e.detail.hook.trigger.value.toLowerCase();
var config = droplab.config[e.detail.hook.id];
var config = e.detail.hook.config.droplabFilter;
var matches = [];
var filterFunction;
// will only work on dynamically set data
// and if a config text property is set
if(!data || (!config.hasOwnProperty('text') && !config.hasOwnProperty('filter'))){
if(!data){
return;
}
var filterFunction = function(o){
if (config && config.filterFunction && typeof config.filterFunction === 'function') {
filterFunction = config.filterFunction;
} else {
filterFunction = function(o){
// cheap string search
o.droplab_hidden = o[config.text].toLowerCase().indexOf(value) === -1;
o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
return o;
};
if (config.hasOwnProperty('filter') && config.filter !== undefined) {
filterFunction = config.filter;
}
matches = data.map(function(o) {
return filterFunction(o, value);
});
list.render(matches);
},
init: function init(hookInput) {
var config = hookInput.config.droplabFilter;
if (!config || (!config.template && !config.filterFunction)) {
return;
}
window.addEventListener('keyup.dl', keydown);
this.hookInput = hookInput;
this.hookInput.trigger.addEventListener('keyup.dl', this.keydownWrapper);
},
destroy: function destroy(){
this.hookInput.trigger.removeEventListener('keyup.dl', this.keydownWrapper);
}
};
});
},{"../window":2}],2:[function(require,module,exports){
module.exports = function(callback) {
return (function() {
callback(this);
}).call(null);
};
},{}]},{},[1])(1)
});
\ No newline at end of file
app/assets/javascripts/filtered_search/dropdown_assignee.js.es6
View file @ 367a1588
......@@ -3,8 +3,8 @@
((global) => {
class DropdownAssignee extends gl.FilteredSearchDropdown {
constructor(dropdown, input) {
super(dropdown, input);
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-assignee';
}
......@@ -20,8 +20,13 @@
}
renderContent() {
super.renderContent();
droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=');
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, '#js-dropdown-assignee', [droplabAjax], {
droplabAjax: {
endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=',
method: 'setData',
}
});
}
filterMethod(item, query) {
......
app/assets/javascripts/filtered_search/dropdown_author.js.es6
View file @ 367a1588
......@@ -3,8 +3,8 @@
((global) => {
class DropdownAuthor extends gl.FilteredSearchDropdown {
constructor(dropdown, input) {
super(dropdown, input);
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-author';
}
......@@ -16,8 +16,13 @@
}
renderContent() {
super.renderContent();
droplab.setData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=');
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, '#js-dropdown-author', [droplabAjax], {
droplabAjax: {
endpoint: '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=',
method: 'setData',
}
});
}
filterMethod(item, query) {
......
app/assets/javascripts/filtered_search/dropdown_hint.js.es6
View file @ 367a1588
......@@ -21,10 +21,9 @@
}];
class DropdownHint extends gl.FilteredSearchDropdown {
constructor(dropdown, input, filterKeyword) {
super(dropdown, input);
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-hint';
this.filterKeyword = filterKeyword;
}
itemClicked(e) {
......@@ -39,8 +38,13 @@
}
renderContent() {
super.renderContent();
droplab.setData(this.hookId, dropdownData);
this.droplab.changeHookList(this.hookId, '#js-dropdown-hint', [droplabFilter], {
droplabFilter: {
template: 'hint',
filterFunction: this.filterMethod,
}
});
this.droplab.setData(this.hookId, dropdownData);
}
filterMethod(item, query) {
......@@ -54,6 +58,14 @@
return item;
}
configure() {
this.droplab.addHook(this.input, this.dropdown, [droplabFilter], {
droplabFilter: {
template: 'hint',
}
}).init();
}
}
global.DropdownHint = DropdownHint;
......
app/assets/javascripts/filtered_search/dropdown_label.js.es6
View file @ 367a1588
......@@ -3,9 +3,10 @@
((global) => {
class DropdownLabel extends gl.FilteredSearchDropdown {
constructor(dropdown, input) {
super(dropdown, input);
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-label';
this.filterSymbol = '~';
}
itemClicked(e) {
......@@ -21,20 +22,17 @@
}
renderContent() {
super.renderContent();
droplab.setData(this.hookId, 'labels.json');
// TODO: Pass elements instead of querySelectors
// TODO: Don't bind filterWithSymbol to (this), just pass the symbol
this.droplab.changeHookList(this.hookId, '#js-dropdown-label', [droplabAjax, droplabFilter], {
droplabAjax: {
endpoint: 'labels.json',
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this),
}
filterMethod(item, query) {
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const valueWithoutColon = value.slice(1).toLowerCase();
const valueWithoutPrefix = valueWithoutColon.slice(1);
const title = item.title.toLowerCase();
const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1;
item.droplab_hidden = noTitleMatch;
return item;
});
}
}
......
app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
View file @ 367a1588
......@@ -3,9 +3,10 @@
((global) => {
class DropdownMilestone extends gl.FilteredSearchDropdown {
constructor(dropdown, input) {
super(dropdown, input);
constructor(droplab, dropdown, input) {
super(droplab, dropdown, input);
this.listId = 'js-dropdown-milestone';
this.filterSymbol = '%';
}
itemClicked(e) {
......@@ -21,21 +22,16 @@
}
renderContent() {
super.renderContent();
droplab.setData(this.hookId, 'milestones.json');
// TODO: Pass elements instead of querySelectors
this.droplab.changeHookList(this.hookId, '#js-dropdown-milestone', [droplabAjax, droplabFilter], {
droplabAjax: {
endpoint: 'milestones.json',
method: 'setData',
},
droplabFilter: {
filterFunction: this.filterWithSymbol.bind(this),
}
filterMethod(item, query) {
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const valueWithoutColon = value.slice(1).toLowerCase();
const valueWithoutPrefix = valueWithoutColon.slice(1);
const title = item.title.toLowerCase();
const noTitleMatch = title.indexOf(valueWithoutPrefix) === -1 && title.indexOf(valueWithoutColon) === -1;
item.droplab_hidden = noTitleMatch;
return item;
});
}
}
......
app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
View file @ 367a1588
......@@ -3,7 +3,8 @@
const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
class FilteredSearchDropdown {
constructor(dropdown, input) {
constructor(droplab, dropdown, input) {
this.droplab = droplab;
this.hookId = 'filtered-search';
this.input = input;
this.dropdown = dropdown;
......@@ -66,25 +67,11 @@
destroy() {
this.input.setAttribute(DATA_DROPDOWN_TRIGGER, '');
droplab.setConfig(this.getFilterConfig());
droplab.setData(this.hookId, []);
this.droplab.setConfig(this.getFilterConfig());
this.droplab.setData(this.hookId, []);
this.unbindEvents();
}
show() {
const currentHook = this.getCurrentHook();
if (currentHook) {
currentHook.list.show();
}
}
hide() {
const currentHook = this.getCurrentHook();
if (currentHook) {
currentHook.list.hide();
}
}
dismissDropdown() {
this.input.focus();
// Propogate input change to FilteredSearchManager
......@@ -111,30 +98,24 @@
}
getCurrentHook() {
return droplab.hooks.filter(h => h.id === this.hookId)[0];
return this.droplab.hooks.filter(h => h.id === this.hookId)[0];
}
renderContent() {
droplab.setConfig(this.getFilterConfig(this.filterKeyword));
// Overriden by dropdown sub class
}
render(hide) {
render(forceRenderContent) {
this.setAsDropdown();
const firstTimeInitialized = this.getCurrentHook() === undefined;
if (firstTimeInitialized) {
if (firstTimeInitialized || forceRenderContent) {
this.renderContent();
} else if(this.getCurrentHook().list.list.id !== this.listId) {
droplab.changeHookList(this.hookId, `#${this.listId}`);
// this.droplab.changeHookList(this.hookId, `#${this.listId}`);
this.renderContent();
}
if (hide) {
this.hide();
} else {
this.show();
}
}
resetFilters() {
......@@ -152,6 +133,29 @@
}
}
}
hide() {
const currentHook = this.getCurrentHook();
if (currentHook) {
currentHook.list.hide();
}
}
filterWithSymbol(item, query) {
const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
const valueWithoutColon = value.slice(1).toLowerCase();
const prefix = valueWithoutColon[0];
const valueWithoutPrefix = valueWithoutColon.slice(1);
const title = item.title.toLowerCase();
// Eg. this.filterSymbol = ~ for labels
const matchWithoutPrefix = prefix === this.filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
const match = title.indexOf(valueWithoutColon) !== -1;
item.droplab_hidden = !match && !matchWithoutPrefix;
return item;
}
}
global.FilteredSearchDropdown = FilteredSearchDropdown;
......
app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
View file @ 367a1588
......@@ -101,11 +101,18 @@
}
loadDropdown(dropdownName = '', hideDropdown) {
let firstLoad = false;
const filteredSearch = document.querySelector('.filtered-search');
if(!this.droplab) {
firstLoad = true;
this.droplab = new DropLab();
}
dropdownName = dropdownName.toLowerCase();
const filterIconPadding = 27;
const match = gl.FilteredSearchTokenKeys.get().filter(value => value.key === dropdownName)[0];
const filteredSearch = document.querySelector('.filtered-search');
if (!this.font) {
this.font = window.getComputedStyle(filteredSearch).font;
......@@ -116,34 +123,38 @@
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(document.querySelector('#js-dropdown-author'), filteredSearch);
dropdownAuthor = new gl.DropdownAuthor(this.droplab, dropdownAuthorElement, filteredSearch);
}
dropdownAuthor.setOffset(dropdownOffset);
dropdownAuthor.render();
} else if (match.key === 'assignee') {
if (!dropdownAssignee) {
dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), filteredSearch);
dropdownAssignee = new gl.DropdownAssignee(this.droplab, dropdownAssigneeElement, filteredSearch);
}
dropdownAssignee.setOffset(dropdownOffset);
dropdownAssignee.render();
} else if (match.key === 'milestone') {
if (!dropdownMilestone) {
dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), filteredSearch);
dropdownMilestone = new gl.DropdownMilestone(this.droplab, dropdownMilestoneElement, filteredSearch);
}
dropdownMilestone.setOffset(dropdownOffset);
dropdownMilestone.render();
} else if (match.key === 'label') {
if (!dropdownLabel) {
dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), filteredSearch);
dropdownLabel = new gl.DropdownLabel(this.droplab, dropdownLabelElemenet, filteredSearch);
}
dropdownLabel.setOffset(dropdownOffset);
......@@ -154,22 +165,29 @@
console.log('🦄 load hint dropdown');
const dropdownOffset = gl.text.getTextWidth(filteredSearch.value, this.font) + filterIconPadding;
console.log(dropdownOffset)
const dropdownHintElement = document.querySelector('#js-dropdown-hint');
this.dismissCurrentDropdown();
this.currentDropdown = 'hint';
if (!dropdownHint) {
dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), filteredSearch, this.currentDropdown);
dropdownHint = new gl.DropdownHint(this.droplab, dropdownHintElement, filteredSearch);
}
if (firstLoad) {
dropdownHint.configure();
}
dropdownHint.setOffset(dropdownOffset);
dropdownHint.render(hideDropdown);
dropdownHint.render(firstLoad);
}
}
dismissCurrentDropdown() {
if (this.currentDropdown === 'hint') {
dropdownHint.destroy();
}
// if (this.currentDropdown === 'hint') {
// dropdownHint.hide();
// } else if (this.currentDropdown === 'author') {
// // dropdownAuthor.hide();
// }
}
setDropdown() {
......
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