Added droplab back to static assets
This commit is contained in:
parent
a6c615990d
commit
7db45ca3b8
|
@ -0,0 +1,11 @@
|
|||
const DATA_TRIGGER = 'data-dropdown-trigger';
|
||||
const DATA_DROPDOWN = 'data-dropdown';
|
||||
const SELECTED_CLASS = 'droplab-item-selected';
|
||||
const ACTIVE_CLASS = 'droplab-item-active';
|
||||
|
||||
export {
|
||||
DATA_TRIGGER,
|
||||
DATA_DROPDOWN,
|
||||
SELECTED_CLASS,
|
||||
ACTIVE_CLASS,
|
||||
};
|
|
@ -0,0 +1,137 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import utils from './utils';
|
||||
import { SELECTED_CLASS } from './constants';
|
||||
|
||||
var DropDown = function(list) {
|
||||
this.currentIndex = 0;
|
||||
this.hidden = true;
|
||||
this.list = typeof list === 'string' ? document.querySelector(list) : list;
|
||||
this.items = [];
|
||||
|
||||
this.eventWrapper = {};
|
||||
|
||||
this.getItems();
|
||||
this.initTemplateString();
|
||||
this.addEvents();
|
||||
|
||||
this.initialState = list.innerHTML;
|
||||
};
|
||||
|
||||
Object.assign(DropDown.prototype, {
|
||||
getItems: function() {
|
||||
this.items = [].slice.call(this.list.querySelectorAll('li'));
|
||||
return this.items;
|
||||
},
|
||||
|
||||
initTemplateString: function() {
|
||||
var items = this.items || this.getItems();
|
||||
|
||||
var templateString = '';
|
||||
if (items.length > 0) templateString = items[items.length - 1].outerHTML;
|
||||
this.templateString = templateString;
|
||||
|
||||
return this.templateString;
|
||||
},
|
||||
|
||||
clickEvent: function(e) {
|
||||
var selected = utils.closest(e.target, 'LI');
|
||||
if (!selected) return;
|
||||
|
||||
this.addSelectedClass(selected);
|
||||
|
||||
e.preventDefault();
|
||||
this.hide();
|
||||
|
||||
var listEvent = new CustomEvent('click.dl', {
|
||||
detail: {
|
||||
list: this,
|
||||
selected: selected,
|
||||
data: e.target.dataset,
|
||||
},
|
||||
});
|
||||
this.list.dispatchEvent(listEvent);
|
||||
},
|
||||
|
||||
addSelectedClass: function (selected) {
|
||||
this.removeSelectedClasses();
|
||||
selected.classList.add(SELECTED_CLASS);
|
||||
},
|
||||
|
||||
removeSelectedClasses: function () {
|
||||
const items = this.items || this.getItems();
|
||||
|
||||
items.forEach(item => item.classList.remove(SELECTED_CLASS));
|
||||
},
|
||||
|
||||
addEvents: function() {
|
||||
this.eventWrapper.clickEvent = this.clickEvent.bind(this)
|
||||
this.list.addEventListener('click', this.eventWrapper.clickEvent);
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
this.hidden ? this.show() : this.hide();
|
||||
},
|
||||
|
||||
setData: function(data) {
|
||||
this.data = data;
|
||||
this.render(data);
|
||||
},
|
||||
|
||||
addData: function(data) {
|
||||
this.data = (this.data || []).concat(data);
|
||||
this.render(this.data);
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
const children = data ? data.map(this.renderChildren.bind(this)) : [];
|
||||
const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
|
||||
|
||||
renderableList.innerHTML = children.join('');
|
||||
},
|
||||
|
||||
renderChildren: function(data) {
|
||||
var html = utils.t(this.templateString, data);
|
||||
var template = document.createElement('div');
|
||||
|
||||
template.innerHTML = html;
|
||||
this.setImagesSrc(template);
|
||||
template.firstChild.style.display = data.droplab_hidden ? 'none' : 'block';
|
||||
|
||||
return template.firstChild.outerHTML;
|
||||
},
|
||||
|
||||
setImagesSrc: function(template) {
|
||||
const images = [].slice.call(template.querySelectorAll('img[data-src]'));
|
||||
|
||||
images.forEach((image) => {
|
||||
image.src = image.getAttribute('data-src');
|
||||
image.removeAttribute('data-src');
|
||||
});
|
||||
},
|
||||
|
||||
show: function() {
|
||||
if (!this.hidden) return;
|
||||
this.list.style.display = 'block';
|
||||
this.currentIndex = 0;
|
||||
this.hidden = false;
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
if (this.hidden) return;
|
||||
this.list.style.display = 'none';
|
||||
this.currentIndex = 0;
|
||||
this.hidden = true;
|
||||
},
|
||||
|
||||
toggle: function () {
|
||||
this.hidden ? this.show() : this.hide();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.hide();
|
||||
this.list.removeEventListener('click', this.eventWrapper.clickEvent);
|
||||
}
|
||||
});
|
||||
|
||||
export default DropDown;
|
|
@ -0,0 +1,152 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import HookButton from './hook_button';
|
||||
import HookInput from './hook_input';
|
||||
import utils from './utils';
|
||||
import Keyboard from './keyboard';
|
||||
import { DATA_TRIGGER } from './constants';
|
||||
|
||||
var DropLab = function() {
|
||||
this.ready = false;
|
||||
this.hooks = [];
|
||||
this.queuedData = [];
|
||||
this.config = {};
|
||||
|
||||
this.eventWrapper = {};
|
||||
};
|
||||
|
||||
Object.assign(DropLab.prototype, {
|
||||
loadStatic: function(){
|
||||
var dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
|
||||
this.addHooks(dropdownTriggers);
|
||||
},
|
||||
|
||||
addData: function () {
|
||||
var args = [].slice.apply(arguments);
|
||||
this.applyArgs(args, '_addData');
|
||||
},
|
||||
|
||||
setData: function() {
|
||||
var args = [].slice.apply(arguments);
|
||||
this.applyArgs(args, '_setData');
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.hooks.forEach(hook => hook.destroy());
|
||||
this.hooks = [];
|
||||
this.removeEvents();
|
||||
},
|
||||
|
||||
applyArgs: function(args, methodName) {
|
||||
if (this.ready) return this[methodName].apply(this, args);
|
||||
|
||||
this.queuedData = this.queuedData || [];
|
||||
this.queuedData.push(args);
|
||||
},
|
||||
|
||||
_addData: function(trigger, data) {
|
||||
this._processData(trigger, data, 'addData');
|
||||
},
|
||||
|
||||
_setData: function(trigger, data) {
|
||||
this._processData(trigger, data, 'setData');
|
||||
},
|
||||
|
||||
_processData: function(trigger, data, methodName) {
|
||||
this.hooks.forEach((hook) => {
|
||||
if (Array.isArray(trigger)) hook.list[methodName](trigger);
|
||||
|
||||
if (hook.trigger.id === trigger) hook.list[methodName](data);
|
||||
});
|
||||
},
|
||||
|
||||
addEvents: function() {
|
||||
this.eventWrapper.documentClicked = this.documentClicked.bind(this)
|
||||
document.addEventListener('click', this.eventWrapper.documentClicked);
|
||||
},
|
||||
|
||||
documentClicked: function(e) {
|
||||
let thisTag = e.target;
|
||||
|
||||
if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL');
|
||||
if (utils.isDropDownParts(thisTag, this.hooks) || utils.isDropDownParts(e.target, this.hooks)) return;
|
||||
|
||||
this.hooks.forEach(hook => hook.list.hide());
|
||||
},
|
||||
|
||||
removeEvents: function(){
|
||||
document.removeEventListener('click', this.eventWrapper.documentClicked);
|
||||
},
|
||||
|
||||
changeHookList: function(trigger, list, plugins, config) {
|
||||
const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
|
||||
|
||||
|
||||
this.hooks.forEach((hook, i) => {
|
||||
hook.list.list.dataset.dropdownActive = false;
|
||||
|
||||
if (hook.trigger !== availableTrigger) return;
|
||||
|
||||
hook.destroy();
|
||||
this.hooks.splice(i, 1);
|
||||
this.addHook(availableTrigger, list, plugins, config);
|
||||
});
|
||||
},
|
||||
|
||||
addHook: function(hook, list, plugins, config) {
|
||||
const availableHook = typeof hook === 'string' ? document.querySelector(hook) : hook;
|
||||
let availableList;
|
||||
|
||||
if (typeof list === 'string') {
|
||||
availableList = document.querySelector(list);
|
||||
} else if (list instanceof Element) {
|
||||
availableList = list;
|
||||
} else {
|
||||
availableList = document.querySelector(hook.dataset[utils.toCamelCase(DATA_TRIGGER)]);
|
||||
}
|
||||
|
||||
availableList.dataset.dropdownActive = true;
|
||||
|
||||
const HookObject = availableHook.tagName === 'INPUT' ? HookInput : HookButton;
|
||||
this.hooks.push(new HookObject(availableHook, availableList, plugins, config));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
addHooks: function(hooks, plugins, config) {
|
||||
hooks.forEach(hook => this.addHook(hook, null, plugins, config));
|
||||
return this;
|
||||
},
|
||||
|
||||
setConfig: function(obj){
|
||||
this.config = obj;
|
||||
},
|
||||
|
||||
fireReady: function() {
|
||||
const readyEvent = new CustomEvent('ready.dl', {
|
||||
detail: {
|
||||
dropdown: this,
|
||||
},
|
||||
});
|
||||
document.dispatchEvent(readyEvent);
|
||||
|
||||
this.ready = true;
|
||||
},
|
||||
|
||||
init: function (hook, list, plugins, config) {
|
||||
hook ? this.addHook(hook, list, plugins, config) : this.loadStatic();
|
||||
|
||||
this.addEvents();
|
||||
|
||||
Keyboard();
|
||||
|
||||
this.fireReady();
|
||||
|
||||
this.queuedData.forEach(data => this.addData(data));
|
||||
this.queuedData = [];
|
||||
|
||||
return this;
|
||||
},
|
||||
});
|
||||
|
||||
export default DropLab;
|
|
@ -0,0 +1,22 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import DropDown from './drop_down';
|
||||
|
||||
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.id;
|
||||
};
|
||||
|
||||
Object.assign(Hook.prototype, {
|
||||
|
||||
addEvents: function(){},
|
||||
|
||||
constructor: Hook,
|
||||
});
|
||||
|
||||
export default Hook;
|
|
@ -0,0 +1,65 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import Hook from './hook';
|
||||
|
||||
var HookButton = function(trigger, list, plugins, config) {
|
||||
Hook.call(this, trigger, list, plugins, config);
|
||||
|
||||
this.type = 'button';
|
||||
this.event = 'click';
|
||||
|
||||
this.eventWrapper = {};
|
||||
|
||||
this.addEvents();
|
||||
this.addPlugins();
|
||||
};
|
||||
|
||||
HookButton.prototype = Object.create(Hook.prototype);
|
||||
|
||||
Object.assign(HookButton.prototype, {
|
||||
addPlugins: function() {
|
||||
this.plugins.forEach(plugin => plugin.init(this));
|
||||
},
|
||||
|
||||
clicked: function(e){
|
||||
var buttonEvent = new CustomEvent('click.dl', {
|
||||
detail: {
|
||||
hook: this,
|
||||
},
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
e.target.dispatchEvent(buttonEvent);
|
||||
|
||||
this.list.toggle();
|
||||
},
|
||||
|
||||
addEvents: function(){
|
||||
this.eventWrapper.clicked = this.clicked.bind(this);
|
||||
this.trigger.addEventListener('click', this.eventWrapper.clicked);
|
||||
},
|
||||
|
||||
removeEvents: function(){
|
||||
this.trigger.removeEventListener('click', this.eventWrapper.clicked);
|
||||
},
|
||||
|
||||
restoreInitialState: function() {
|
||||
this.list.list.innerHTML = this.list.initialState;
|
||||
},
|
||||
|
||||
removePlugins: function() {
|
||||
this.plugins.forEach(plugin => plugin.destroy());
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.restoreInitialState();
|
||||
|
||||
this.removeEvents();
|
||||
this.removePlugins();
|
||||
},
|
||||
|
||||
constructor: HookButton,
|
||||
});
|
||||
|
||||
|
||||
export default HookButton;
|
|
@ -0,0 +1,119 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import Hook from './hook';
|
||||
|
||||
var HookInput = function(trigger, list, plugins, config) {
|
||||
Hook.call(this, trigger, list, plugins, config);
|
||||
|
||||
this.type = 'input';
|
||||
this.event = 'input';
|
||||
|
||||
this.eventWrapper = {};
|
||||
|
||||
this.addEvents();
|
||||
this.addPlugins();
|
||||
};
|
||||
|
||||
Object.assign(HookInput.prototype, {
|
||||
addPlugins: function() {
|
||||
this.plugins.forEach(plugin => plugin.init(this));
|
||||
},
|
||||
|
||||
addEvents: function(){
|
||||
this.eventWrapper.mousedown = this.mousedown.bind(this);
|
||||
this.eventWrapper.input = this.input.bind(this);
|
||||
this.eventWrapper.keyup = this.keyup.bind(this);
|
||||
this.eventWrapper.keydown = this.keydown.bind(this);
|
||||
|
||||
this.trigger.addEventListener('mousedown', this.eventWrapper.mousedown);
|
||||
this.trigger.addEventListener('input', this.eventWrapper.input);
|
||||
this.trigger.addEventListener('keyup', this.eventWrapper.keyup);
|
||||
this.trigger.addEventListener('keydown', this.eventWrapper.keydown);
|
||||
},
|
||||
|
||||
removeEvents: function() {
|
||||
this.hasRemovedEvents = true;
|
||||
|
||||
this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown);
|
||||
this.trigger.removeEventListener('input', this.eventWrapper.input);
|
||||
this.trigger.removeEventListener('keyup', this.eventWrapper.keyup);
|
||||
this.trigger.removeEventListener('keydown', this.eventWrapper.keydown);
|
||||
},
|
||||
|
||||
input: function(e) {
|
||||
if(this.hasRemovedEvents) return;
|
||||
|
||||
this.list.show();
|
||||
|
||||
const inputEvent = new CustomEvent('input.dl', {
|
||||
detail: {
|
||||
hook: this,
|
||||
text: e.target.value,
|
||||
},
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
e.target.dispatchEvent(inputEvent);
|
||||
},
|
||||
|
||||
mousedown: function(e) {
|
||||
if (this.hasRemovedEvents) return;
|
||||
|
||||
const mouseEvent = new CustomEvent('mousedown.dl', {
|
||||
detail: {
|
||||
hook: this,
|
||||
text: e.target.value,
|
||||
},
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
});
|
||||
e.target.dispatchEvent(mouseEvent);
|
||||
},
|
||||
|
||||
keyup: function(e) {
|
||||
if (this.hasRemovedEvents) return;
|
||||
|
||||
this.keyEvent(e, 'keyup.dl');
|
||||
},
|
||||
|
||||
keydown: function(e) {
|
||||
if (this.hasRemovedEvents) return;
|
||||
|
||||
this.keyEvent(e, 'keydown.dl');
|
||||
},
|
||||
|
||||
keyEvent: function(e, eventName) {
|
||||
this.list.show();
|
||||
|
||||
const keyEvent = new CustomEvent(eventName, {
|
||||
detail: {
|
||||
hook: this,
|
||||
text: e.target.value,
|
||||
which: e.which,
|
||||
key: e.key,
|
||||
},
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
});
|
||||
e.target.dispatchEvent(keyEvent);
|
||||
},
|
||||
|
||||
restoreInitialState: function() {
|
||||
this.list.list.innerHTML = this.list.initialState;
|
||||
},
|
||||
|
||||
removePlugins: function() {
|
||||
this.plugins.forEach(plugin => plugin.destroy());
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.restoreInitialState();
|
||||
|
||||
this.removeEvents();
|
||||
this.removePlugins();
|
||||
|
||||
this.list.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
export default HookInput;
|
|
@ -0,0 +1,113 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import { ACTIVE_CLASS } from './constants';
|
||||
|
||||
const Keyboard = function () {
|
||||
var currentKey;
|
||||
var currentFocus;
|
||||
var isUpArrow = false;
|
||||
var isDownArrow = false;
|
||||
var removeHighlight = function removeHighlight(list) {
|
||||
var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
|
||||
var listItems = [];
|
||||
for(var i = 0; i < itemElements.length; i++) {
|
||||
var listItem = itemElements[i];
|
||||
listItem.classList.remove(ACTIVE_CLASS);
|
||||
|
||||
if (listItem.style.display !== 'none') {
|
||||
listItems.push(listItem);
|
||||
}
|
||||
}
|
||||
return listItems;
|
||||
};
|
||||
|
||||
var setMenuForArrows = function setMenuForArrows(list) {
|
||||
var listItems = removeHighlight(list);
|
||||
if(list.currentIndex>0){
|
||||
if(!listItems[list.currentIndex-1]){
|
||||
list.currentIndex = list.currentIndex-1;
|
||||
}
|
||||
|
||||
if (listItems[list.currentIndex-1]) {
|
||||
var el = listItems[list.currentIndex-1];
|
||||
var filterDropdownEl = el.closest('.filter-dropdown');
|
||||
el.classList.add(ACTIVE_CLASS);
|
||||
|
||||
if (filterDropdownEl) {
|
||||
var filterDropdownBottom = filterDropdownEl.offsetHeight;
|
||||
var elOffsetTop = el.offsetTop - 30;
|
||||
|
||||
if (elOffsetTop > filterDropdownBottom) {
|
||||
filterDropdownEl.scrollTop = elOffsetTop - filterDropdownBottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var mousedown = function mousedown(e) {
|
||||
var list = e.detail.hook.list;
|
||||
removeHighlight(list);
|
||||
list.show();
|
||||
list.currentIndex = 0;
|
||||
isUpArrow = false;
|
||||
isDownArrow = false;
|
||||
};
|
||||
var selectItem = function selectItem(list) {
|
||||
var listItems = removeHighlight(list);
|
||||
var currentItem = listItems[list.currentIndex-1];
|
||||
var listEvent = new CustomEvent('click.dl', {
|
||||
detail: {
|
||||
list: list,
|
||||
selected: currentItem,
|
||||
data: currentItem.dataset,
|
||||
},
|
||||
});
|
||||
list.list.dispatchEvent(listEvent);
|
||||
list.hide();
|
||||
}
|
||||
|
||||
var keydown = function keydown(e){
|
||||
var typedOn = e.target;
|
||||
var list = e.detail.hook.list;
|
||||
var currentIndex = list.currentIndex;
|
||||
isUpArrow = false;
|
||||
isDownArrow = false;
|
||||
|
||||
if(e.detail.which){
|
||||
currentKey = e.detail.which;
|
||||
if(currentKey === 13){
|
||||
selectItem(e.detail.hook.list);
|
||||
return;
|
||||
}
|
||||
if(currentKey === 38) {
|
||||
isUpArrow = true;
|
||||
}
|
||||
if(currentKey === 40) {
|
||||
isDownArrow = true;
|
||||
}
|
||||
} else if(e.detail.key) {
|
||||
currentKey = e.detail.key;
|
||||
if(currentKey === 'Enter'){
|
||||
selectItem(e.detail.hook.list);
|
||||
return;
|
||||
}
|
||||
if(currentKey === 'ArrowUp') {
|
||||
isUpArrow = true;
|
||||
}
|
||||
if(currentKey === 'ArrowDown') {
|
||||
isDownArrow = true;
|
||||
}
|
||||
}
|
||||
if(isUpArrow){ currentIndex--; }
|
||||
if(isDownArrow){ currentIndex++; }
|
||||
if(currentIndex < 0){ currentIndex = 0; }
|
||||
list.currentIndex = currentIndex;
|
||||
setMenuForArrows(e.detail.hook.list);
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown.dl', mousedown);
|
||||
document.addEventListener('keydown.dl', keydown);
|
||||
};
|
||||
|
||||
export default Keyboard;
|
|
@ -0,0 +1,71 @@
|
|||
/* eslint-disable */
|
||||
|
||||
function droplabAjaxException(message) {
|
||||
this.message = message;
|
||||
}
|
||||
|
||||
const Ajax = {
|
||||
_loadUrlData: function _loadUrlData(url) {
|
||||
var self = this;
|
||||
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);
|
||||
self.cache[url] = data;
|
||||
return resolve(data);
|
||||
} else {
|
||||
return reject([xhr.responseText, xhr.status]);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
});
|
||||
},
|
||||
_loadData: function _loadData(data, config, self) {
|
||||
if (config.loadingTemplate) {
|
||||
var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
|
||||
if (dataLoadingTemplate) dataLoadingTemplate.outerHTML = self.listTemplate;
|
||||
}
|
||||
|
||||
if (!self.destroyed) self.hook.list[config.method].call(self.hook.list, data);
|
||||
},
|
||||
init: function init(hook) {
|
||||
var self = this;
|
||||
self.destroyed = false;
|
||||
self.cache = self.cache || {};
|
||||
var config = hook.config.Ajax;
|
||||
this.hook = hook;
|
||||
if (!config || !config.endpoint || !config.method) {
|
||||
return;
|
||||
}
|
||||
if (config.method !== 'setData' && config.method !== 'addData') {
|
||||
return;
|
||||
}
|
||||
if (config.loadingTemplate) {
|
||||
var dynamicList = hook.list.list.querySelector('[data-dynamic]');
|
||||
var loadingTemplate = document.createElement('div');
|
||||
loadingTemplate.innerHTML = config.loadingTemplate;
|
||||
loadingTemplate.setAttribute('data-loading-template', '');
|
||||
this.listTemplate = dynamicList.outerHTML;
|
||||
dynamicList.outerHTML = loadingTemplate.outerHTML;
|
||||
}
|
||||
if (self.cache[config.endpoint]) {
|
||||
self._loadData(self.cache[config.endpoint], config, self);
|
||||
} else {
|
||||
this._loadUrlData(config.endpoint)
|
||||
.then(function(d) {
|
||||
self._loadData(d, config, self);
|
||||
}, config.onError).catch(function(e) {
|
||||
throw new droplabAjaxException(e.message || e);
|
||||
});
|
||||
}
|
||||
},
|
||||
destroy: function() {
|
||||
this.destroyed = true;
|
||||
}
|
||||
};
|
||||
|
||||
export default Ajax;
|
|
@ -0,0 +1,133 @@
|
|||
/* eslint-disable */
|
||||
|
||||
const AjaxFilter = {
|
||||
init: function(hook) {
|
||||
this.destroyed = false;
|
||||
this.hook = hook;
|
||||
this.notLoading();
|
||||
|
||||
this.eventWrapper = {};
|
||||
this.eventWrapper.debounceTrigger = this.debounceTrigger.bind(this);
|
||||
this.hook.trigger.addEventListener('keydown.dl', this.eventWrapper.debounceTrigger);
|
||||
this.hook.trigger.addEventListener('focus', this.eventWrapper.debounceTrigger);
|
||||
|
||||
this.trigger(true);
|
||||
},
|
||||
|
||||
notLoading: function notLoading() {
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
debounceTrigger: function debounceTrigger(e) {
|
||||
var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93];
|
||||
var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1;
|
||||
var focusEvent = e.type === 'focus';
|
||||
if (invalidKeyPressed || this.loading) {
|
||||
return;
|
||||
}
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
}
|
||||
this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200);
|
||||
},
|
||||
|
||||
trigger: function trigger(getEntireList) {
|
||||
var config = this.hook.config.AjaxFilter;
|
||||
var searchValue = this.trigger.value;
|
||||
if (!config || !config.endpoint || !config.searchKey) {
|
||||
return;
|
||||
}
|
||||
if (config.searchValueFunction) {
|
||||
searchValue = config.searchValueFunction();
|
||||
}
|
||||
if (config.loadingTemplate && this.hook.list.data === undefined ||
|
||||
this.hook.list.data.length === 0) {
|
||||
var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
|
||||
var loadingTemplate = document.createElement('div');
|
||||
loadingTemplate.innerHTML = config.loadingTemplate;
|
||||
loadingTemplate.setAttribute('data-loading-template', true);
|
||||
this.listTemplate = dynamicList.outerHTML;
|
||||
dynamicList.outerHTML = loadingTemplate.outerHTML;
|
||||
}
|
||||
if (getEntireList) {
|
||||
searchValue = '';
|
||||
}
|
||||
if (config.searchKey === searchValue) {
|
||||
return this.list.show();
|
||||
}
|
||||
this.loading = true;
|
||||
var params = config.params || {};
|
||||
params[config.searchKey] = searchValue;
|
||||
var self = this;
|
||||
self.cache = self.cache || {};
|
||||
var url = config.endpoint + this.buildParams(params);
|
||||
var urlCachedData = self.cache[url];
|
||||
if (urlCachedData) {
|
||||
self._loadData(urlCachedData, config, self);
|
||||
} else {
|
||||
this._loadUrlData(url)
|
||||
.then(function(data) {
|
||||
self._loadData(data, config, self);
|
||||
}, config.onError);
|
||||
}
|
||||
},
|
||||
|
||||
_loadUrlData: function _loadUrlData(url) {
|
||||
var self = this;
|
||||
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);
|
||||
self.cache[url] = data;
|
||||
return resolve(data);
|
||||
} else {
|
||||
return reject([xhr.responseText, xhr.status]);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
});
|
||||
},
|
||||
|
||||
_loadData: function _loadData(data, config, self) {
|
||||
const list = self.hook.list;
|
||||
if (config.loadingTemplate && list.data === undefined ||
|
||||
list.data.length === 0) {
|
||||
const dataLoadingTemplate = list.list.querySelector('[data-loading-template]');
|
||||
if (dataLoadingTemplate) {
|
||||
dataLoadingTemplate.outerHTML = self.listTemplate;
|
||||
}
|
||||
}
|
||||
if (!self.destroyed) {
|
||||
var hookListChildren = list.list.children;
|
||||
var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
|
||||
if (onlyDynamicList && data.length === 0) {
|
||||
list.hide();
|
||||
}
|
||||
list.setData.call(list, data);
|
||||
}
|
||||
self.notLoading();
|
||||
list.currentIndex = 0;
|
||||
},
|
||||
|
||||
buildParams: function(params) {
|
||||
if (!params) return '';
|
||||
var paramsArray = Object.keys(params).map(function(param) {
|
||||
return param + '=' + (params[param] || '');
|
||||
});
|
||||
return '?' + paramsArray.join('&');
|
||||
},
|
||||
|
||||
destroy: function destroy() {
|
||||
if (this.timeout)clearTimeout(this.timeout);
|
||||
this.destroyed = true;
|
||||
|
||||
this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceTrigger);
|
||||
this.hook.trigger.removeEventListener('focus', this.eventWrapper.debounceTrigger);
|
||||
}
|
||||
};
|
||||
|
||||
export default AjaxFilter;
|
|
@ -0,0 +1,95 @@
|
|||
/* eslint-disable */
|
||||
|
||||
const Filter = {
|
||||
keydown: function(e){
|
||||
if (this.destroyed) return;
|
||||
|
||||
var hiddenCount = 0;
|
||||
var dataHiddenCount = 0;
|
||||
|
||||
var list = e.detail.hook.list;
|
||||
var data = list.data;
|
||||
var value = e.detail.hook.trigger.value.toLowerCase();
|
||||
var config = e.detail.hook.config.Filter;
|
||||
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;
|
||||
};
|
||||
}
|
||||
|
||||
dataHiddenCount = data.filter(function(o) {
|
||||
return !o.droplab_hidden;
|
||||
}).length;
|
||||
|
||||
matches = data.map(function(o) {
|
||||
return filterFunction(o, value);
|
||||
});
|
||||
|
||||
hiddenCount = matches.filter(function(o) {
|
||||
return !o.droplab_hidden;
|
||||
}).length;
|
||||
|
||||
if (dataHiddenCount !== hiddenCount) {
|
||||
list.setData(matches);
|
||||
list.currentIndex = 0;
|
||||
}
|
||||
},
|
||||
|
||||
debounceKeydown: function debounceKeydown(e) {
|
||||
if ([
|
||||
13, // enter
|
||||
16, // shift
|
||||
17, // ctrl
|
||||
18, // alt
|
||||
20, // caps lock
|
||||
37, // left arrow
|
||||
38, // up arrow
|
||||
39, // right arrow
|
||||
40, // down arrow
|
||||
91, // left window
|
||||
92, // right window
|
||||
93, // select
|
||||
].indexOf(e.detail.which || e.detail.keyCode) > -1) return;
|
||||
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(this.keydown.bind(this, e), 200);
|
||||
},
|
||||
|
||||
init: function init(hook) {
|
||||
var config = hook.config.Filter;
|
||||
|
||||
if (!config || !config.template) return;
|
||||
|
||||
this.hook = hook;
|
||||
this.destroyed = false;
|
||||
|
||||
this.eventWrapper = {};
|
||||
this.eventWrapper.debounceKeydown = this.debounceKeydown.bind(this);
|
||||
|
||||
this.hook.trigger.addEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
|
||||
this.hook.trigger.addEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
|
||||
|
||||
this.debounceKeydown({ detail: { hook: this.hook } });
|
||||
},
|
||||
|
||||
destroy: function destroy() {
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
this.destroyed = true;
|
||||
|
||||
this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
|
||||
this.hook.trigger.removeEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
|
||||
}
|
||||
};
|
||||
|
||||
export default Filter;
|
|
@ -0,0 +1,51 @@
|
|||
/* eslint-disable */
|
||||
|
||||
const InputSetter = {
|
||||
init(hook) {
|
||||
this.hook = hook;
|
||||
this.destroyed = false;
|
||||
this.config = hook.config.InputSetter || (this.hook.config.InputSetter = {});
|
||||
|
||||
this.eventWrapper = {};
|
||||
|
||||
this.addEvents();
|
||||
},
|
||||
|
||||
addEvents() {
|
||||
this.eventWrapper.setInputs = this.setInputs.bind(this);
|
||||
this.hook.list.list.addEventListener('click.dl', this.eventWrapper.setInputs);
|
||||
},
|
||||
|
||||
removeEvents() {
|
||||
this.hook.list.list.removeEventListener('click.dl', this.eventWrapper.setInputs);
|
||||
},
|
||||
|
||||
setInputs(e) {
|
||||
if (this.destroyed) return;
|
||||
|
||||
const selectedItem = e.detail.selected;
|
||||
|
||||
if (!Array.isArray(this.config)) this.config = [this.config];
|
||||
|
||||
this.config.forEach(config => this.setInput(config, selectedItem));
|
||||
},
|
||||
|
||||
setInput(config, selectedItem) {
|
||||
const input = config.input || this.hook.trigger;
|
||||
const newValue = selectedItem.getAttribute(config.valueAttribute);
|
||||
|
||||
if (input.tagName === 'INPUT') {
|
||||
input.value = newValue;
|
||||
} else {
|
||||
input.textContent = newValue;
|
||||
}
|
||||
},
|
||||
|
||||
destroy() {
|
||||
this.destroyed = true;
|
||||
|
||||
this.removeEvents();
|
||||
},
|
||||
};
|
||||
|
||||
export default InputSetter;
|
|
@ -0,0 +1,38 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import { DATA_TRIGGER, DATA_DROPDOWN } from './constants';
|
||||
|
||||
const utils = {
|
||||
toCamelCase(attr) {
|
||||
return this.camelize(attr.split('-').slice(1).join(' '));
|
||||
},
|
||||
|
||||
t(s, d) {
|
||||
for (const p in d) {
|
||||
if (Object.prototype.hasOwnProperty.call(d, p)) {
|
||||
s = s.replace(new RegExp(`{{${p}}}`, 'g'), d[p]);
|
||||
}
|
||||
}
|
||||
return s;
|
||||
},
|
||||
|
||||
camelize(str) {
|
||||
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => {
|
||||
return index === 0 ? letter.toLowerCase() : letter.toUpperCase();
|
||||
}).replace(/\s+/g, '');
|
||||
},
|
||||
|
||||
closest(thisTag, stopTag) {
|
||||
while (thisTag && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML') {
|
||||
thisTag = thisTag.parentNode;
|
||||
}
|
||||
return thisTag;
|
||||
},
|
||||
|
||||
isDropDownParts(target) {
|
||||
if (!target || target.tagName === 'HTML') return false;
|
||||
return target.hasAttribute(DATA_TRIGGER) || target.hasAttribute(DATA_DROPDOWN);
|
||||
},
|
||||
};
|
||||
|
||||
export default utils;
|
|
@ -1,4 +1,4 @@
|
|||
import Filter from '@gitlab-org/droplab/dist/plugins/Filter';
|
||||
import Filter from '~/droplab/plugins/filter';
|
||||
|
||||
require('./filtered_search_dropdown');
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import Ajax from '@gitlab-org/droplab/dist/plugins/Ajax';
|
||||
import Filter from '@gitlab-org/droplab/dist/plugins/Filter';
|
||||
import Ajax from '~/droplab/plugins/ajax';
|
||||
import Filter from '~/droplab/plugins/filter';
|
||||
|
||||
require('./filtered_search_dropdown');
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import AjaxFilter from '@gitlab-org/droplab/dist/plugins/AjaxFilter';
|
||||
import AjaxFilter from '~/droplab/plugins/ajax_filter';
|
||||
|
||||
require('./filtered_search_dropdown');
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import DropLab from '@gitlab-org/droplab';
|
||||
import DropLab from '~/droplab/drop_lab';
|
||||
import FilteredSearchContainer from './container';
|
||||
|
||||
(() => {
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
"webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gitlab-org/droplab": "^0.1.0",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-plugin-transform-define": "^1.2.0",
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import * as constants from '~/droplab/constants';
|
||||
|
||||
describe('constants', function () {
|
||||
describe('DATA_TRIGGER', function () {
|
||||
it('should be `data-dropdown-trigger`', function() {
|
||||
expect(constants.DATA_TRIGGER).toBe('data-dropdown-trigger');
|
||||
});
|
||||
});
|
||||
|
||||
describe('DATA_DROPDOWN', function () {
|
||||
it('should be `data-dropdown`', function() {
|
||||
expect(constants.DATA_DROPDOWN).toBe('data-dropdown');
|
||||
});
|
||||
});
|
||||
|
||||
describe('SELECTED_CLASS', function () {
|
||||
it('should be `droplab-item-selected`', function() {
|
||||
expect(constants.SELECTED_CLASS).toBe('droplab-item-selected');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ACTIVE_CLASS', function () {
|
||||
it('should be `droplab-item-active`', function() {
|
||||
expect(constants.ACTIVE_CLASS).toBe('droplab-item-active');
|
||||
});
|
||||
});
|
||||
});
|
|
@ -0,0 +1,578 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import DropDown from '~/droplab/drop_down';
|
||||
import utils from '~/droplab/utils';
|
||||
import { SELECTED_CLASS } from '~/droplab/constants';
|
||||
|
||||
describe('DropDown', function () {
|
||||
describe('class constructor', function () {
|
||||
beforeEach(function () {
|
||||
spyOn(DropDown.prototype, 'getItems');
|
||||
spyOn(DropDown.prototype, 'initTemplateString');
|
||||
spyOn(DropDown.prototype, 'addEvents');
|
||||
|
||||
this.list = { innerHTML: 'innerHTML' };
|
||||
this.dropdown = new DropDown(this.list);
|
||||
});
|
||||
|
||||
it('sets the .hidden property to true', function () {
|
||||
expect(this.dropdown.hidden).toBe(true);
|
||||
})
|
||||
|
||||
it('sets the .list property', function () {
|
||||
expect(this.dropdown.list).toBe(this.list);
|
||||
});
|
||||
|
||||
it('calls .getItems', function () {
|
||||
expect(DropDown.prototype.getItems).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('calls .initTemplateString', function () {
|
||||
expect(DropDown.prototype.initTemplateString).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('calls .addEvents', function () {
|
||||
expect(DropDown.prototype.addEvents).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('sets the .initialState property to the .list.innerHTML', function () {
|
||||
expect(this.dropdown.initialState).toBe(this.list.innerHTML);
|
||||
});
|
||||
|
||||
describe('if the list argument is a string', function () {
|
||||
beforeEach(function () {
|
||||
this.element = {};
|
||||
this.selector = '.selector';
|
||||
|
||||
spyOn(Document.prototype, 'querySelector').and.returnValue(this.element);
|
||||
|
||||
this.dropdown = new DropDown(this.selector);
|
||||
});
|
||||
|
||||
it('calls .querySelector with the selector string', function () {
|
||||
expect(Document.prototype.querySelector).toHaveBeenCalledWith(this.selector);
|
||||
});
|
||||
|
||||
it('sets the .list property element', function () {
|
||||
expect(this.dropdown.list).toBe(this.element);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('getItems', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { querySelectorAll: () => {} };
|
||||
this.dropdown = { list: this.list };
|
||||
this.nodeList = [];
|
||||
|
||||
spyOn(this.list, 'querySelectorAll').and.returnValue(this.nodeList);
|
||||
|
||||
this.getItems = DropDown.prototype.getItems.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('calls .querySelectorAll with a list item query', function () {
|
||||
expect(this.list.querySelectorAll).toHaveBeenCalledWith('li');
|
||||
});
|
||||
|
||||
it('sets the .items property to the returned list items', function () {
|
||||
expect(this.dropdown.items).toEqual(jasmine.any(Array));
|
||||
});
|
||||
|
||||
it('returns the .items', function () {
|
||||
expect(this.getItems).toEqual(jasmine.any(Array));
|
||||
});
|
||||
});
|
||||
|
||||
describe('initTemplateString', function () {
|
||||
beforeEach(function () {
|
||||
this.items = [{ outerHTML: '<a></a>' }, { outerHTML: '<img>' }];
|
||||
this.dropdown = { items: this.items };
|
||||
|
||||
DropDown.prototype.initTemplateString.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should set .templateString to the last items .outerHTML', function () {
|
||||
expect(this.dropdown.templateString).toBe(this.items[1].outerHTML);
|
||||
});
|
||||
|
||||
it('should not set .templateString to a non-last items .outerHTML', function () {
|
||||
expect(this.dropdown.templateString).not.toBe(this.items[0].outerHTML);
|
||||
});
|
||||
|
||||
describe('if .items is not set', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = { getItems: () => {} };
|
||||
|
||||
spyOn(this.dropdown, 'getItems').and.returnValue([]);
|
||||
|
||||
DropDown.prototype.initTemplateString.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call .getItems', function () {
|
||||
expect(this.dropdown.getItems).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('if items array is empty', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = { items: [] };
|
||||
|
||||
DropDown.prototype.initTemplateString.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should set .templateString to an empty string', function () {
|
||||
expect(this.dropdown.templateString).toBe('');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('clickEvent', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { dispatchEvent: () => {} };
|
||||
this.dropdown = { hide: () => {}, list: this.list, addSelectedClass: () => {} };
|
||||
this.event = { preventDefault: () => {}, target: 'target' };
|
||||
this.customEvent = {};
|
||||
this.closestElement = {};
|
||||
|
||||
spyOn(this.dropdown, 'hide');
|
||||
spyOn(this.dropdown, 'addSelectedClass');
|
||||
spyOn(this.list, 'dispatchEvent');
|
||||
spyOn(this.event, 'preventDefault');
|
||||
spyOn(window, 'CustomEvent').and.returnValue(this.customEvent);
|
||||
spyOn(utils, 'closest').and.returnValues(this.closestElement, undefined);
|
||||
|
||||
DropDown.prototype.clickEvent.call(this.dropdown, this.event);
|
||||
});
|
||||
|
||||
it('should call utils.closest', function () {
|
||||
expect(utils.closest).toHaveBeenCalledWith(this.event.target, 'LI');
|
||||
});
|
||||
|
||||
it('should call addSelectedClass', function () {
|
||||
expect(this.dropdown.addSelectedClass).toHaveBeenCalledWith(this.closestElement);
|
||||
})
|
||||
|
||||
it('should call .preventDefault', function () {
|
||||
expect(this.event.preventDefault).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call .hide', function () {
|
||||
expect(this.dropdown.hide).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should construct CustomEvent', function () {
|
||||
expect(window.CustomEvent).toHaveBeenCalledWith('click.dl', jasmine.any(Object));
|
||||
});
|
||||
|
||||
it('should call .dispatchEvent with the customEvent', function () {
|
||||
expect(this.list.dispatchEvent).toHaveBeenCalledWith(this.customEvent);
|
||||
});
|
||||
|
||||
describe('if no selected element exists', function () {
|
||||
beforeEach(function () {
|
||||
this.event.preventDefault.calls.reset();
|
||||
this.clickEvent = DropDown.prototype.clickEvent.call(this.dropdown, this.event);
|
||||
});
|
||||
|
||||
it('should return undefined', function () {
|
||||
expect(this.clickEvent).toBe(undefined);
|
||||
});
|
||||
|
||||
it('should return before .preventDefault is called', function () {
|
||||
expect(this.event.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('addSelectedClass', function () {
|
||||
beforeEach(function () {
|
||||
this.items = Array(4).forEach((item, i) => {
|
||||
this.items[i] = { classList: { add: () => {} } };
|
||||
spyOn(this.items[i].classList, 'add');
|
||||
});
|
||||
this.selected = { classList: { add: () => {} } };
|
||||
this.dropdown = { removeSelectedClasses: () => {} };
|
||||
|
||||
spyOn(this.dropdown, 'removeSelectedClasses');
|
||||
spyOn(this.selected.classList, 'add');
|
||||
|
||||
DropDown.prototype.addSelectedClass.call(this.dropdown, this.selected);
|
||||
});
|
||||
|
||||
it('should call .removeSelectedClasses', function () {
|
||||
expect(this.dropdown.removeSelectedClasses).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call .classList.add', function () {
|
||||
expect(this.selected.classList.add).toHaveBeenCalledWith(SELECTED_CLASS);
|
||||
});
|
||||
});
|
||||
|
||||
describe('removeSelectedClasses', function () {
|
||||
beforeEach(function () {
|
||||
this.items = Array(4);
|
||||
this.items.forEach((item, i) => {
|
||||
this.items[i] = { classList: { add: () => {} } };
|
||||
spyOn(this.items[i].classList, 'add');
|
||||
});
|
||||
this.dropdown = { items: this.items };
|
||||
|
||||
DropDown.prototype.removeSelectedClasses.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call .classList.remove for all items', function () {
|
||||
this.items.forEach((item, i) => {
|
||||
expect(this.items[i].classList.add).toHaveBeenCalledWith(SELECTED_CLASS);
|
||||
});
|
||||
});
|
||||
|
||||
describe('if .items is not set', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = { getItems: () => {} };
|
||||
|
||||
spyOn(this.dropdown, 'getItems').and.returnValue([]);
|
||||
|
||||
DropDown.prototype.removeSelectedClasses.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call .getItems', function () {
|
||||
expect(this.dropdown.getItems).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('addEvents', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { addEventListener: () => {} };
|
||||
this.dropdown = { list: this.list, clickEvent: () => {}, eventWrapper: {} };
|
||||
|
||||
spyOn(this.list, 'addEventListener');
|
||||
|
||||
DropDown.prototype.addEvents.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call .addEventListener', function () {
|
||||
expect(this.list.addEventListener).toHaveBeenCalledWith('click', jasmine.any(Function));
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggle', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = { hidden: true, show: () => {}, hide: () => {} };
|
||||
|
||||
spyOn(this.dropdown, 'show');
|
||||
spyOn(this.dropdown, 'hide');
|
||||
|
||||
DropDown.prototype.toggle.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call .show if hidden is true', function () {
|
||||
expect(this.dropdown.show).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('if hidden is false', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = { hidden: false, show: () => {}, hide: () => {} };
|
||||
|
||||
spyOn(this.dropdown, 'show');
|
||||
spyOn(this.dropdown, 'hide');
|
||||
|
||||
DropDown.prototype.toggle.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call .show if hidden is true', function () {
|
||||
expect(this.dropdown.hide).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('setData', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = { render: () => {} };
|
||||
this.data = ['data'];
|
||||
|
||||
spyOn(this.dropdown, 'render');
|
||||
|
||||
DropDown.prototype.setData.call(this.dropdown, this.data);
|
||||
});
|
||||
|
||||
it('should set .data', function () {
|
||||
expect(this.dropdown.data).toBe(this.data);
|
||||
});
|
||||
|
||||
it('should call .render with the .data', function () {
|
||||
expect(this.dropdown.render).toHaveBeenCalledWith(this.data);
|
||||
});
|
||||
});
|
||||
|
||||
describe('addData', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = { render: () => {}, data: ['data1'] };
|
||||
this.data = ['data2'];
|
||||
|
||||
spyOn(this.dropdown, 'render');
|
||||
spyOn(Array.prototype, 'concat').and.callThrough();
|
||||
|
||||
DropDown.prototype.addData.call(this.dropdown, this.data);
|
||||
});
|
||||
|
||||
it('should call .concat with data', function () {
|
||||
expect(Array.prototype.concat).toHaveBeenCalledWith(this.data);
|
||||
});
|
||||
|
||||
it('should set .data with concatination', function () {
|
||||
expect(this.dropdown.data).toEqual(['data1', 'data2']);
|
||||
});
|
||||
|
||||
it('should call .render with the .data', function () {
|
||||
expect(this.dropdown.render).toHaveBeenCalledWith(['data1', 'data2']);
|
||||
});
|
||||
|
||||
describe('if .data is undefined', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = { render: () => {}, data: undefined };
|
||||
this.data = ['data2'];
|
||||
|
||||
spyOn(this.dropdown, 'render');
|
||||
|
||||
DropDown.prototype.addData.call(this.dropdown, this.data);
|
||||
});
|
||||
|
||||
it('should set .data with concatination', function () {
|
||||
expect(this.dropdown.data).toEqual(['data2']);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('render', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { querySelector: () => {} };
|
||||
this.dropdown = { renderChildren: () => {}, list: this.list };
|
||||
this.renderableList = {};
|
||||
this.data = [0, 1];
|
||||
|
||||
spyOn(this.dropdown, 'renderChildren').and.callFake(data => data);
|
||||
spyOn(this.list, 'querySelector').and.returnValue(this.renderableList);
|
||||
spyOn(this.data, 'map').and.callThrough();
|
||||
|
||||
DropDown.prototype.render.call(this.dropdown, this.data);
|
||||
});
|
||||
|
||||
it('should call .map', function () {
|
||||
expect(this.data.map).toHaveBeenCalledWith(jasmine.any(Function));
|
||||
});
|
||||
|
||||
it('should call .renderChildren for each data item', function() {
|
||||
expect(this.dropdown.renderChildren.calls.count()).toBe(this.data.length);
|
||||
});
|
||||
|
||||
it('sets the renderableList .innerHTML', function () {
|
||||
expect(this.renderableList.innerHTML).toBe('01');
|
||||
});
|
||||
|
||||
describe('if no data argument is passed' , function () {
|
||||
beforeEach(function () {
|
||||
this.data.map.calls.reset();
|
||||
this.dropdown.renderChildren.calls.reset();
|
||||
|
||||
DropDown.prototype.render.call(this.dropdown, undefined);
|
||||
});
|
||||
|
||||
it('should not call .map', function () {
|
||||
expect(this.data.map).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not call .renderChildren', function () {
|
||||
expect(this.dropdown.renderChildren).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('if no dynamic list is present', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { querySelector: () => {} };
|
||||
this.dropdown = { renderChildren: () => {}, list: this.list };
|
||||
this.data = [0, 1];
|
||||
|
||||
spyOn(this.dropdown, 'renderChildren').and.callFake(data => data);
|
||||
spyOn(this.list, 'querySelector');
|
||||
spyOn(this.data, 'map').and.callThrough();
|
||||
|
||||
DropDown.prototype.render.call(this.dropdown, this.data);
|
||||
});
|
||||
|
||||
it('sets the .list .innerHTML', function () {
|
||||
expect(this.list.innerHTML).toBe('01');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('renderChildren', function () {
|
||||
beforeEach(function () {
|
||||
this.templateString = 'templateString';
|
||||
this.dropdown = { setImagesSrc: () => {}, templateString: this.templateString };
|
||||
this.data = { droplab_hidden: true };
|
||||
this.html = 'html';
|
||||
this.template = { firstChild: { outerHTML: 'outerHTML', style: {} } };
|
||||
|
||||
spyOn(utils, 't').and.returnValue(this.html);
|
||||
spyOn(document, 'createElement').and.returnValue(this.template);
|
||||
spyOn(this.dropdown, 'setImagesSrc');
|
||||
|
||||
this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data);
|
||||
});
|
||||
|
||||
it('should call utils.t with .templateString and data', function () {
|
||||
expect(utils.t).toHaveBeenCalledWith(this.templateString, this.data);
|
||||
});
|
||||
|
||||
it('should call document.createElement', function () {
|
||||
expect(document.createElement).toHaveBeenCalledWith('div');
|
||||
});
|
||||
|
||||
it('should set the templates .innerHTML to the HTML', function () {
|
||||
expect(this.template.innerHTML).toBe(this.html);
|
||||
});
|
||||
|
||||
it('should call .setImagesSrc with the template', function () {
|
||||
expect(this.dropdown.setImagesSrc).toHaveBeenCalledWith(this.template);
|
||||
});
|
||||
|
||||
it('should set the template display to none', function () {
|
||||
expect(this.template.firstChild.style.display).toBe('none');
|
||||
});
|
||||
|
||||
it('should return the templates .firstChild.outerHTML', function () {
|
||||
expect(this.renderChildren).toBe(this.template.firstChild.outerHTML);
|
||||
});
|
||||
|
||||
describe('if droplab_hidden is false', function () {
|
||||
beforeEach(function () {
|
||||
this.data = { droplab_hidden: false };
|
||||
this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data);
|
||||
});
|
||||
|
||||
it('should set the template display to block', function () {
|
||||
expect(this.template.firstChild.style.display).toBe('block');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('setImagesSrc', function () {
|
||||
beforeEach(function () {
|
||||
this.dropdown = {};
|
||||
this.template = { querySelectorAll: () => {} };
|
||||
|
||||
spyOn(this.template, 'querySelectorAll').and.returnValue([]);
|
||||
|
||||
DropDown.prototype.setImagesSrc.call(this.dropdown, this.template);
|
||||
});
|
||||
|
||||
it('should call .querySelectorAll', function () {
|
||||
expect(this.template.querySelectorAll).toHaveBeenCalledWith('img[data-src]');
|
||||
});
|
||||
});
|
||||
|
||||
describe('show', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { style: {} };
|
||||
this.dropdown = { list: this.list, hidden: true };
|
||||
|
||||
DropDown.prototype.show.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('it should set .list display to block', function () {
|
||||
expect(this.list.style.display).toBe('block');
|
||||
});
|
||||
|
||||
it('it should set .hidden to false', function () {
|
||||
expect(this.dropdown.hidden).toBe(false);
|
||||
});
|
||||
|
||||
describe('if .hidden is false', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { style: {} };
|
||||
this.dropdown = { list: this.list, hidden: false };
|
||||
|
||||
this.show = DropDown.prototype.show.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should return undefined', function () {
|
||||
expect(this.show).toEqual(undefined);
|
||||
});
|
||||
|
||||
it('should not set .list display to block', function () {
|
||||
expect(this.list.style.display).not.toEqual('block');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('hide', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { style: {} };
|
||||
this.dropdown = { list: this.list };
|
||||
|
||||
DropDown.prototype.hide.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('it should set .list display to none', function () {
|
||||
expect(this.list.style.display).toBe('none');
|
||||
});
|
||||
|
||||
it('it should set .hidden to true', function () {
|
||||
expect(this.dropdown.hidden).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggle', function () {
|
||||
beforeEach(function () {
|
||||
this.hidden = true
|
||||
this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} };
|
||||
|
||||
spyOn(this.dropdown, 'show');
|
||||
spyOn(this.dropdown, 'hide');
|
||||
|
||||
DropDown.prototype.toggle.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call .show', function () {
|
||||
expect(this.dropdown.show).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('if .hidden is false', function () {
|
||||
beforeEach(function () {
|
||||
this.hidden = false
|
||||
this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} };
|
||||
|
||||
spyOn(this.dropdown, 'show');
|
||||
spyOn(this.dropdown, 'hide');
|
||||
|
||||
DropDown.prototype.toggle.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call .hide', function () {
|
||||
expect(this.dropdown.hide).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('destroy', function () {
|
||||
beforeEach(function () {
|
||||
this.list = { removeEventListener: () => {} };
|
||||
this.eventWrapper = { clickEvent: 'clickEvent' };
|
||||
this.dropdown = { list: this.list, hide: () => {}, eventWrapper: this.eventWrapper };
|
||||
|
||||
spyOn(this.list, 'removeEventListener');
|
||||
spyOn(this.dropdown, 'hide');
|
||||
|
||||
DropDown.prototype.destroy.call(this.dropdown);
|
||||
});
|
||||
|
||||
it('it should call .hide', function () {
|
||||
expect(this.dropdown.hide).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('it should call .removeEventListener', function () {
|
||||
expect(this.list.removeEventListener).toHaveBeenCalledWith('click', this.eventWrapper.clickEvent);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -0,0 +1,82 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import Hook from '~/droplab/hook';
|
||||
import * as dropdownSrc from '~/droplab/drop_down';
|
||||
|
||||
describe('Hook', function () {
|
||||
describe('class constructor', function () {
|
||||
beforeEach(function () {
|
||||
this.trigger = { id: 'id' };
|
||||
this.list = {};
|
||||
this.plugins = {};
|
||||
this.config = {};
|
||||
this.dropdown = {};
|
||||
|
||||
spyOn(dropdownSrc, 'default').and.returnValue(this.dropdown);
|
||||
|
||||
this.hook = new Hook(this.trigger, this.list, this.plugins, this.config);
|
||||
});
|
||||
|
||||
it('should set .trigger', function () {
|
||||
expect(this.hook.trigger).toBe(this.trigger);
|
||||
});
|
||||
|
||||
it('should set .list', function () {
|
||||
expect(this.hook.list).toBe(this.dropdown);
|
||||
});
|
||||
|
||||
it('should call DropDown constructor', function () {
|
||||
expect(dropdownSrc.default).toHaveBeenCalledWith(this.list);
|
||||
});
|
||||
|
||||
it('should set .type', function () {
|
||||
expect(this.hook.type).toBe('Hook');
|
||||
});
|
||||
|
||||
it('should set .event', function () {
|
||||
expect(this.hook.event).toBe('click');
|
||||
});
|
||||
|
||||
it('should set .plugins', function () {
|
||||
expect(this.hook.plugins).toBe(this.plugins);
|
||||
});
|
||||
|
||||
it('should set .config', function () {
|
||||
expect(this.hook.config).toBe(this.config);
|
||||
});
|
||||
|
||||
it('should set .id', function () {
|
||||
expect(this.hook.id).toBe(this.trigger.id);
|
||||
});
|
||||
|
||||
describe('if config argument is undefined', function () {
|
||||
beforeEach(function () {
|
||||
this.config = undefined;
|
||||
|
||||
this.hook = new Hook(this.trigger, this.list, this.plugins, this.config);
|
||||
});
|
||||
|
||||
it('should set .config to an empty object', function () {
|
||||
expect(this.hook.config).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
describe('if plugins argument is undefined', function () {
|
||||
beforeEach(function () {
|
||||
this.plugins = undefined;
|
||||
|
||||
this.hook = new Hook(this.trigger, this.list, this.plugins, this.config);
|
||||
});
|
||||
|
||||
it('should set .plugins to an empty array', function () {
|
||||
expect(this.hook.plugins).toEqual([]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('addEvents', function () {
|
||||
it('should exist', function () {
|
||||
expect(Hook.prototype.hasOwnProperty('addEvents')).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
|
@ -0,0 +1,177 @@
|
|||
/* eslint-disable */
|
||||
|
||||
import InputSetter from '~/droplab/plugins/input_setter';
|
||||
|
||||
describe('InputSetter', function () {
|
||||
describe('init', function () {
|
||||
beforeEach(function () {
|
||||
this.config = { InputSetter: {} };
|
||||
this.hook = { config: this.config };
|
||||
this.inputSetter = jasmine.createSpyObj('inputSetter', ['addEvents']);
|
||||
|
||||
InputSetter.init.call(this.inputSetter, this.hook);
|
||||
});
|
||||
|
||||
it('should set .hook', function () {
|
||||
expect(this.inputSetter.hook).toBe(this.hook);
|
||||
});
|
||||
|
||||
it('should set .config', function () {
|
||||
expect(this.inputSetter.config).toBe(this.config.InputSetter);
|
||||
});
|
||||
|
||||
it('should set .eventWrapper', function () {
|
||||
expect(this.inputSetter.eventWrapper).toEqual({});
|
||||
});
|
||||
|
||||
it('should call .addEvents', function () {
|
||||
expect(this.inputSetter.addEvents).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('if config.InputSetter is not set', function () {
|
||||
beforeEach(function () {
|
||||
this.config = { InputSetter: undefined };
|
||||
this.hook = { config: this.config };
|
||||
|
||||
InputSetter.init.call(this.inputSetter, this.hook);
|
||||
});
|
||||
|
||||
it('should set .config to an empty object', function () {
|
||||
expect(this.inputSetter.config).toEqual({});
|
||||
});
|
||||
|
||||
it('should set hook.config to an empty object', function () {
|
||||
expect(this.hook.config.InputSetter).toEqual({});
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
describe('addEvents', function () {
|
||||
beforeEach(function () {
|
||||
this.hook = { list: { list: jasmine.createSpyObj('list', ['addEventListener']) } };
|
||||
this.inputSetter = { eventWrapper: {}, hook: this.hook, setInputs: () => {} };
|
||||
|
||||
InputSetter.addEvents.call(this.inputSetter);
|
||||
});
|
||||
|
||||
it('should set .eventWrapper.setInputs', function () {
|
||||
expect(this.inputSetter.eventWrapper.setInputs).toEqual(jasmine.any(Function));
|
||||
});
|
||||
|
||||
it('should call .addEventListener', function () {
|
||||
expect(this.hook.list.list.addEventListener)
|
||||
.toHaveBeenCalledWith('click.dl', this.inputSetter.eventWrapper.setInputs);
|
||||
});
|
||||
});
|
||||
|
||||
describe('removeEvents', function () {
|
||||
beforeEach(function () {
|
||||
this.hook = { list: { list: jasmine.createSpyObj('list', ['removeEventListener']) } };
|
||||
this.eventWrapper = jasmine.createSpyObj('eventWrapper', ['setInputs']);
|
||||
this.inputSetter = { eventWrapper: this.eventWrapper, hook: this.hook };
|
||||
|
||||
InputSetter.removeEvents.call(this.inputSetter);
|
||||
});
|
||||
|
||||
it('should call .removeEventListener', function () {
|
||||
expect(this.hook.list.list.removeEventListener)
|
||||
.toHaveBeenCalledWith('click.dl', this.eventWrapper.setInputs);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setInputs', function () {
|
||||
beforeEach(function () {
|
||||
this.event = { detail: { selected: {} } };
|
||||
this.config = [0, 1];
|
||||
this.inputSetter = { config: this.config, setInput: () => {} };
|
||||
|
||||
spyOn(this.inputSetter, 'setInput');
|
||||
|
||||
InputSetter.setInputs.call(this.inputSetter, this.event);
|
||||
});
|
||||
|
||||
it('should call .setInput for each config element', function () {
|
||||
const allArgs = this.inputSetter.setInput.calls.allArgs();
|
||||
|
||||
expect(allArgs.length).toEqual(2);
|
||||
|
||||
allArgs.forEach((args, i) => {
|
||||
expect(args[0]).toBe(this.config[i]);
|
||||
expect(args[1]).toBe(this.event.detail.selected);
|
||||
});
|
||||
});
|
||||
|
||||
describe('if config isnt an array', function () {
|
||||
beforeEach(function () {
|
||||
this.inputSetter = { config: {}, setInput: () => {} };
|
||||
|
||||
InputSetter.setInputs.call(this.inputSetter, this.event);
|
||||
});
|
||||
|
||||
it('should set .config to an array with .config as the first element', function () {
|
||||
expect(this.inputSetter.config).toEqual([{}]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('setInput', function () {
|
||||
beforeEach(function () {
|
||||
this.selectedItem = { getAttribute: () => {} };
|
||||
this.input = { value: 'oldValue', tagName: 'INPUT' };
|
||||
this.config = { valueAttribute: {}, input: this.input };
|
||||
this.inputSetter = { hook: { trigger: {} } };
|
||||
this.newValue = 'newValue';
|
||||
|
||||
spyOn(this.selectedItem, 'getAttribute').and.returnValue(this.newValue);
|
||||
|
||||
InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem);
|
||||
});
|
||||
|
||||
it('should call .getAttribute', function () {
|
||||
expect(this.selectedItem.getAttribute).toHaveBeenCalledWith(this.config.valueAttribute);
|
||||
});
|
||||
|
||||
it('should set the value of the input', function () {
|
||||
expect(this.input.value).toBe(this.newValue);
|
||||
})
|
||||
|
||||
describe('if no config.input is provided', function () {
|
||||
beforeEach(function () {
|
||||
this.config = { valueAttribute: {} };
|
||||
this.trigger = { value: 'oldValue', tagName: 'INPUT' };
|
||||
this.inputSetter = { hook: { trigger: this.trigger } };
|
||||
|
||||
InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem);
|
||||
});
|
||||
|
||||
it('should set the value of the hook.trigger', function () {
|
||||
expect(this.trigger.value).toBe(this.newValue);
|
||||
});
|
||||
});
|
||||
|
||||
describe('if the input tag is not INPUT', function () {
|
||||
beforeEach(function () {
|
||||
this.input = { textContent: 'oldValue', tagName: 'SPAN' };
|
||||
this.config = { valueAttribute: {}, input: this.input };
|
||||
|
||||
InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem);
|
||||
});
|
||||
|
||||
it('should set the textContent of the input', function () {
|
||||
expect(this.config.input.textContent).toBe(this.newValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('destroy', function () {
|
||||
beforeEach(function () {
|
||||
this.inputSetter = jasmine.createSpyObj('inputSetter', ['removeEvents']);
|
||||
|
||||
InputSetter.destroy.call(this.inputSetter);
|
||||
});
|
||||
|
||||
it('should call .removeEvents', function () {
|
||||
expect(this.inputSetter.removeEvents).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
|
@ -33,7 +33,7 @@ require('~/filtered_search/dropdown_user');
|
|||
});
|
||||
});
|
||||
|
||||
describe('config droplabAjaxFilter\'s endpoint', () => {
|
||||
describe('config AjaxFilter\'s endpoint', () => {
|
||||
beforeEach(() => {
|
||||
spyOn(gl.DropdownUser.prototype, 'bindEvents').and.callFake(() => {});
|
||||
spyOn(gl.DropdownUser.prototype, 'getProjectId').and.callFake(() => {});
|
||||
|
@ -45,13 +45,13 @@ require('~/filtered_search/dropdown_user');
|
|||
};
|
||||
const dropdown = new gl.DropdownUser();
|
||||
|
||||
expect(dropdown.config.droplabAjaxFilter.endpoint).toBe('/autocomplete/users.json');
|
||||
expect(dropdown.config.AjaxFilter.endpoint).toBe('/autocomplete/users.json');
|
||||
});
|
||||
|
||||
it('should return endpoint when relative_url_root is undefined', () => {
|
||||
const dropdown = new gl.DropdownUser();
|
||||
|
||||
expect(dropdown.config.droplabAjaxFilter.endpoint).toBe('/autocomplete/users.json');
|
||||
expect(dropdown.config.AjaxFilter.endpoint).toBe('/autocomplete/users.json');
|
||||
});
|
||||
|
||||
it('should return endpoint with relative url when available', () => {
|
||||
|
@ -60,7 +60,7 @@ require('~/filtered_search/dropdown_user');
|
|||
};
|
||||
const dropdown = new gl.DropdownUser();
|
||||
|
||||
expect(dropdown.config.droplabAjaxFilter.endpoint).toBe('/gitlab_directory/autocomplete/users.json');
|
||||
expect(dropdown.config.AjaxFilter.endpoint).toBe('/gitlab_directory/autocomplete/users.json');
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
|
34
yarn.lock
34
yarn.lock
|
@ -2,12 +2,6 @@
|
|||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@gitlab-org/droplab@^0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@gitlab-org/droplab/-/droplab-0.1.0.tgz#934889d0f19417198e277415fdd336616b2e2c87"
|
||||
dependencies:
|
||||
custom-event-polyfill "^0.3.0"
|
||||
|
||||
abbrev@1, abbrev@1.0.x:
|
||||
version "1.0.9"
|
||||
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
|
||||
|
@ -1307,10 +1301,6 @@ crypto-browserify@^3.11.0:
|
|||
public-encrypt "^4.0.0"
|
||||
randombytes "^2.0.0"
|
||||
|
||||
custom-event-polyfill@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-0.3.0.tgz#99807839be62edb446b645832e0d80ead6fa1888"
|
||||
|
||||
custom-event@~1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
|
||||
|
@ -3773,7 +3763,7 @@ read-pkg@^1.0.0:
|
|||
normalize-package-data "^2.3.2"
|
||||
path-type "^1.0.0"
|
||||
|
||||
"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
|
||||
"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.2, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
|
||||
version "2.2.6"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.6.tgz#8b43aed76e71483938d12a8d46c6cf1a00b1f816"
|
||||
dependencies:
|
||||
|
@ -3785,6 +3775,17 @@ read-pkg@^1.0.0:
|
|||
string_decoder "~0.10.x"
|
||||
util-deprecate "~1.0.1"
|
||||
|
||||
readable-stream@^2.0.1, readable-stream@^2.0.5, readable-stream@~2.0.0, readable-stream@~2.0.6:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
|
||||
dependencies:
|
||||
core-util-is "~1.0.0"
|
||||
inherits "~2.0.1"
|
||||
isarray "~1.0.0"
|
||||
process-nextick-args "~1.0.6"
|
||||
string_decoder "~0.10.x"
|
||||
util-deprecate "~1.0.1"
|
||||
|
||||
readable-stream@~1.0.2:
|
||||
version "1.0.34"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
|
||||
|
@ -3794,17 +3795,6 @@ readable-stream@~1.0.2:
|
|||
isarray "0.0.1"
|
||||
string_decoder "~0.10.x"
|
||||
|
||||
readable-stream@~2.0.0, readable-stream@~2.0.6:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
|
||||
dependencies:
|
||||
core-util-is "~1.0.0"
|
||||
inherits "~2.0.1"
|
||||
isarray "~1.0.0"
|
||||
process-nextick-args "~1.0.6"
|
||||
string_decoder "~0.10.x"
|
||||
util-deprecate "~1.0.1"
|
||||
|
||||
readdirp@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
|
||||
|
|
Loading…
Reference in New Issue