Skip to content

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

Update droplab

parent ceb79e3c
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 212 deletions
app/assets/javascripts/droplab/droplab.js
View file @ 367a1588
......@@ -53,6 +53,7 @@ Object.assign(DropDown.prototype, {
this.list.addEventListener('click', function(e) {
// climb up the tree to find the LI
var selected = utils.closest(e.target, 'LI');
if(selected) {
e.preventDefault();
self.hide();
......@@ -158,17 +159,22 @@ require('./window')(function(w){
this.ready = false;
this.hooks = [];
this.queuedData = [];
this.plugins = [];
this.config = {};
this.loadWrapper;
if(typeof hook !== 'undefined'){
this.addHook(hook);
}
this.addEvents();
};
Object.assign(DropLab.prototype, {
plugin: function (plugin) {
this.plugins.push(plugin)
load: function() {
this.loadWrapper();
},
loadWrapper: function(){
var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']'));
this.addHooks(dropdownTriggers).init();
},
addData: function () {
......@@ -181,6 +187,14 @@ require('./window')(function(w){
this.applyArgs(args, '_setData');
},
destroy: function() {
this.hooks.forEach(function(h){
h.destroy();
});
this.hooks = [];
this.removeEvents();
},
applyArgs: function(args, methodName) {
if(this.ready) {
this[methodName].apply(this, args);
......@@ -210,7 +224,7 @@ require('./window')(function(w){
addEvents: function() {
var self = this;
window.addEventListener('click', function(e){
this.windowClickedWrapper = function(e){
var thisTag = e.target;
if(thisTag.tagName === 'LI' || thisTag.tagName === 'A'
|| thisTag.tagName === 'BUTTON'){
......@@ -222,10 +236,16 @@ require('./window')(function(w){
self.hooks.forEach(function(hook) {
hook.list.hide();
});
});
}.bind(this);
w.addEventListener('click', this.windowClickedWrapper);
},
removeEvents: function(){
w.removeEventListener('click', this.windowClickedWrapper);
w.removeEventListener('load', this.loadWrapper);
},
changeHookList: function(trigger, list) {
changeHookList: function(trigger, list, plugins, config) {
trigger = document.querySelector('[data-id="'+trigger+'"]');
list = document.querySelector(list);
this.hooks.every(function(hook, i) {
......@@ -234,19 +254,16 @@ require('./window')(function(w){
hook.list.list.innerHTML = hook.list.initialState;
hook.list.hide();
hook.trigger.removeEventListener('mousedown', hook.events.mousedown);
hook.trigger.removeEventListener('input', hook.events.input);
hook.trigger.removeEventListener('keyup', hook.events.keyup);
hook.trigger.removeEventListener('keydown', hook.events.keydown);
hook.destroy();
this.hooks.splice(i, 1);
this.addHook(trigger, list);
this.addHook(trigger, list, plugins, config);
return false;
}
return true
}.bind(this));
},
addHook: function(hook, list) {
addHook: function(hook, list, plugins, config) {
if(!(hook instanceof HTMLElement) && typeof hook === 'string'){
hook = document.querySelector(hook);
}
......@@ -256,17 +273,17 @@ require('./window')(function(w){
if(hook) {
if(hook.tagName === 'A' || hook.tagName === 'BUTTON') {
this.hooks.push(new HookButton(hook, list));
this.hooks.push(new HookButton(hook, list, plugins, config));
} else if(hook.tagName === 'INPUT') {
this.hooks.push(new HookInput(hook, list));
this.hooks.push(new HookInput(hook, list, plugins, config));
}
}
return this;
},
addHooks: function(hooks) {
addHooks: function(hooks, plugins, config) {
hooks.forEach(function(hook) {
this.addHook(hook, null);
this.addHook(hook, null, plugins, config);
}.bind(this));
return this;
},
......@@ -276,9 +293,7 @@ require('./window')(function(w){
},
init: function () {
this.plugins.forEach(function(plugin) {
plugin(DropLab);
})
this.addEvents();
var readyEvent = new CustomEvent('ready.dl', {
detail: {
dropdown: this,
......@@ -301,15 +316,18 @@ require('./window')(function(w){
},{"./constants":1,"./custom_event_polyfill":2,"./hook_button":6,"./hook_input":7,"./utils":10,"./window":11}],5:[function(require,module,exports){
var DropDown = require('./dropdown');
var Hook = function(trigger, list){
var Hook = function(trigger, list, plugins, config){
this.trigger = trigger;
this.list = new DropDown(list);
this.type = 'Hook';
this.event = 'click';
this.plugins = plugins || [];
this.config = config || {};
this.id = trigger.dataset.id;
};
Object.assign(Hook.prototype, {
addEvents: function(){},
constructor: Hook,
......@@ -321,31 +339,61 @@ module.exports = Hook;
var CustomEvent = require('./custom_event_polyfill');
var Hook = require('./hook');
var HookButton = function(trigger, list) {
Hook.call(this, trigger, list);
var HookButton = function(trigger, list, plugins, config) {
Hook.call(this, trigger, list, plugins, config);
this.type = 'button';
this.event = 'click';
this.addEvents();
this.addPlugins();
};
HookButton.prototype = Object.create(Hook.prototype);
Object.assign(HookButton.prototype, {
addPlugins: function() {
this.plugins.forEach(function(plugin) {
plugin.init(this);
});
},
clicked: function(e){
var buttonEvent = new CustomEvent('click.dl', {
detail: {
hook: this,
},
bubbles: true,
cancelable: true
});
this.list.show();
e.target.dispatchEvent(buttonEvent);
},
addEvents: function(){
var self = this;
this.trigger.addEventListener('click', function(e){
var buttonEvent = new CustomEvent('click.dl', {
detail: {
hook: self,
},
bubbles: true,
cancelable: true
});
self.list.show();
e.target.dispatchEvent(buttonEvent);
this.clickedWrapper = this.clicked.bind(this);
this.trigger.addEventListener('click', this.clickedWrapper);
},
removeEvents: function(){
this.trigger.removeEventListener('click', this.clickedWrapper);
},
restoreInitialState: function() {
this.list.list.innerHTML = this.list.initialState;
},
removePlugins: function() {
this.plugins.forEach(function(plugin) {
plugin.destroy();
});
},
destroy: function() {
this.restoreInitialState();
this.removeEvents();
this.removePlugins();
},
constructor: HookButton,
});
......@@ -356,18 +404,26 @@ module.exports = HookButton;
var CustomEvent = require('./custom_event_polyfill');
var Hook = require('./hook');
var HookInput = function(trigger, list) {
Hook.call(this, trigger, list);
var HookInput = function(trigger, list, plugins, config) {
Hook.call(this, trigger, list, plugins, config);
this.type = 'input';
this.event = 'input';
this.addPlugins();
this.addEvents();
};
Object.assign(HookInput.prototype, {
addPlugins: function() {
var self = this;
this.plugins.forEach(function(plugin) {
plugin.init(self);
});
},
addEvents: function(){
var self = this;
function mousedown(e) {
this.mousedown = function mousedown(e) {
var mouseEvent = new CustomEvent('mousedown.dl', {
detail: {
hook: self,
......@@ -379,7 +435,7 @@ Object.assign(HookInput.prototype, {
e.target.dispatchEvent(mouseEvent);
}
function input(e) {
this.input = function input(e) {
var inputEvent = new CustomEvent('input.dl', {
detail: {
hook: self,
......@@ -392,11 +448,11 @@ Object.assign(HookInput.prototype, {
self.list.show();
}
function keyup(e) {
this.keyup = function keyup(e) {
keyEvent(e, 'keyup.dl');
}
function keydown(e) {
this.keydown = function keydown(e) {
keyEvent(e, 'keydown.dl');
}
......@@ -416,15 +472,38 @@ Object.assign(HookInput.prototype, {
}
this.events = this.events || {};
this.events.mousedown = mousedown;
this.events.input = input;
this.events.keyup = keyup;
this.events.keydown = keydown;
this.trigger.addEventListener('mousedown', mousedown);
this.trigger.addEventListener('input', input);
this.trigger.addEventListener('keyup', keyup);
this.trigger.addEventListener('keydown', keydown);
this.events.mousedown = this.mousedown;
this.events.input = this.input;
this.events.keyup = this.keyup;
this.events.keydown = this.keydown;
this.trigger.addEventListener('mousedown', this.mousedown);
this.trigger.addEventListener('input', this.input);
this.trigger.addEventListener('keyup', this.keyup);
this.trigger.addEventListener('keydown', this.keydown);
},
removeEvents: function(){
this.trigger.removeEventListener('mousedown', this.mousedown);
this.trigger.removeEventListener('input', this.input);
this.trigger.removeEventListener('keyup', this.keyup);
this.trigger.removeEventListener('keydown', this.keydown);
},
restoreInitialState: function() {
this.list.list.innerHTML = this.list.initialState;
},
removePlugins: function() {
this.plugins.forEach(function(plugin) {
plugin.destroy();
});
},
destroy: function() {
this.restoreInitialState();
this.removeEvents();
this.removePlugins();
}
});
module.exports = HookInput;
......@@ -433,21 +512,14 @@ module.exports = HookInput;
var DropLab = require('./droplab')();
var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
var keyboard = require('./keyboard')();
var setup = function() {
var droplab = DropLab();
require('./window')(function(w) {
w.addEventListener('load', function() {
var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']'));
droplab.addHooks(dropdownTriggers).init();
});
});
return droplab;
window.DropLab = DropLab;
};
module.exports = setup();
},{"./constants":1,"./droplab":4,"./keyboard":9,"./window":11}],9:[function(require,module,exports){
},{"./constants":1,"./droplab":4,"./keyboard":9}],9:[function(require,module,exports){
require('./window')(function(w){
module.exports = function(){
var currentKey;
......@@ -557,7 +629,7 @@ var camelize = function(str) {
};
var closest = function(thisTag, stopTag) {
while(thisTag !== null && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
while(thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
thisTag = thisTag.parentNode;
}
return thisTag;
......
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) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest;
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
return resolve(data);
} else {
return reject([xhr.responseText, xhr.status]);
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);
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
return resolve(data);
} else {
return reject([xhr.responseText, xhr.status]);
}
}
}
};
xhr.send();
});
};
Object.assign(DropLab.prototype, {
addData: function(trigger, data) {
this.processData(trigger, data, _addData);
},
setData: function(trigger, data) {
this.processData(trigger, data, _setData);
};
xhr.send();
});
},
processData: function(trigger, data, methodName) {
var _this = this;
if('string' === typeof data) {
_loadUrlData(data).then(function(d) {
methodName.call(_this, trigger, d);
}).catch(function(e) {
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);
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) {
console.error(e.message, e.stack); // eslint-disable-line no-console
} else {
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) {
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 matches = [];
// will only work on dynamically set data
// and if a config text property is set
if(!data || (!config.hasOwnProperty('text') && !config.hasOwnProperty('filter'))){
return;
}
var filterFunction = function(o){
// cheap string search
o.droplab_hidden = o[config.text].toLowerCase().indexOf(value) === -1;
return o;
};
require('../window')(function(w){
w.droplabFilter = {
if (config.hasOwnProperty('filter') && config.filter !== undefined) {
filterFunction = config.filter;
}
keydownWrapper: function(e){
var list = e.detail.hook.list;
var data = list.data;
var value = e.detail.hook.trigger.value.toLowerCase();
var config = e.detail.hook.config.droplabFilter;
var matches = [];
var filterFunction;
// will only work on dynamically set data
if(!data){
return;
}
if (config && config.filterFunction && typeof config.filterFunction === 'function') {
filterFunction = config.filterFunction;
} else {
filterFunction = function(o){
// cheap string search
o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
return o;
};
}
matches = data.map(function(o) {
return filterFunction(o, value);
});
list.render(matches);
},
init: function init(hookInput) {
var config = hookInput.config.droplabFilter;
matches = data.map(function(o) {
return filterFunction(o, value);
});
list.render(matches);
}
window.addEventListener('keyup.dl', keydown);
if (!config || (!config.template && !config.filterFunction)) {
return;
}
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');
}
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;
// 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),
}
});
}
}
......
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');
}
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;
// 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),
}
});
}
}
......
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