Removed all instances of Object.assign by using es6 classes, also includes some …
This commit is contained in:
parent
bec9ec9a6e
commit
0a86eba506
|
@ -1,44 +1,42 @@
|
||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import utils from './utils';
|
import utils from './utils';
|
||||||
import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
|
import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
|
||||||
|
|
||||||
var DropDown = function(list) {
|
class DropDown {
|
||||||
this.currentIndex = 0;
|
constructor(list) {
|
||||||
this.hidden = true;
|
this.currentIndex = 0;
|
||||||
this.list = typeof list === 'string' ? document.querySelector(list) : list;
|
this.hidden = true;
|
||||||
this.items = [];
|
this.list = typeof list === 'string' ? document.querySelector(list) : list;
|
||||||
|
this.items = [];
|
||||||
|
|
||||||
this.eventWrapper = {};
|
this.eventWrapper = {};
|
||||||
|
|
||||||
this.getItems();
|
this.getItems();
|
||||||
this.initTemplateString();
|
this.initTemplateString();
|
||||||
this.addEvents();
|
this.addEvents();
|
||||||
|
|
||||||
this.initialState = list.innerHTML;
|
this.initialState = list.innerHTML;
|
||||||
};
|
}
|
||||||
|
|
||||||
Object.assign(DropDown.prototype, {
|
getItems() {
|
||||||
getItems: function() {
|
|
||||||
this.items = [].slice.call(this.list.querySelectorAll('li'));
|
this.items = [].slice.call(this.list.querySelectorAll('li'));
|
||||||
return this.items;
|
return this.items;
|
||||||
},
|
}
|
||||||
|
|
||||||
initTemplateString: function() {
|
initTemplateString() {
|
||||||
var items = this.items || this.getItems();
|
const items = this.items || this.getItems();
|
||||||
|
|
||||||
var templateString = '';
|
let templateString = '';
|
||||||
if (items.length > 0) templateString = items[items.length - 1].outerHTML;
|
if (items.length > 0) templateString = items[items.length - 1].outerHTML;
|
||||||
this.templateString = templateString;
|
this.templateString = templateString;
|
||||||
|
|
||||||
return this.templateString;
|
return this.templateString;
|
||||||
},
|
}
|
||||||
|
|
||||||
clickEvent: function(e) {
|
clickEvent(e) {
|
||||||
if (e.target.tagName === 'UL') return;
|
if (e.target.tagName === 'UL') return;
|
||||||
if (e.target.classList.contains(IGNORE_CLASS)) return;
|
if (e.target.classList.contains(IGNORE_CLASS)) return;
|
||||||
|
|
||||||
var selected = utils.closest(e.target, 'LI');
|
const selected = utils.closest(e.target, 'LI');
|
||||||
if (!selected) return;
|
if (!selected) return;
|
||||||
|
|
||||||
this.addSelectedClass(selected);
|
this.addSelectedClass(selected);
|
||||||
|
@ -46,95 +44,95 @@ Object.assign(DropDown.prototype, {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.hide();
|
this.hide();
|
||||||
|
|
||||||
var listEvent = new CustomEvent('click.dl', {
|
const listEvent = new CustomEvent('click.dl', {
|
||||||
detail: {
|
detail: {
|
||||||
list: this,
|
list: this,
|
||||||
selected: selected,
|
selected,
|
||||||
data: e.target.dataset,
|
data: e.target.dataset,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
this.list.dispatchEvent(listEvent);
|
this.list.dispatchEvent(listEvent);
|
||||||
},
|
}
|
||||||
|
|
||||||
addSelectedClass: function (selected) {
|
addSelectedClass(selected) {
|
||||||
this.removeSelectedClasses();
|
this.removeSelectedClasses();
|
||||||
selected.classList.add(SELECTED_CLASS);
|
selected.classList.add(SELECTED_CLASS);
|
||||||
},
|
}
|
||||||
|
|
||||||
removeSelectedClasses: function () {
|
removeSelectedClasses() {
|
||||||
const items = this.items || this.getItems();
|
const items = this.items || this.getItems();
|
||||||
|
|
||||||
items.forEach(item => item.classList.remove(SELECTED_CLASS));
|
items.forEach(item => item.classList.remove(SELECTED_CLASS));
|
||||||
},
|
}
|
||||||
|
|
||||||
addEvents: function() {
|
addEvents() {
|
||||||
this.eventWrapper.clickEvent = this.clickEvent.bind(this)
|
this.eventWrapper.clickEvent = this.clickEvent.bind(this);
|
||||||
this.list.addEventListener('click', this.eventWrapper.clickEvent);
|
this.list.addEventListener('click', this.eventWrapper.clickEvent);
|
||||||
},
|
}
|
||||||
|
|
||||||
toggle: function() {
|
setData(data) {
|
||||||
this.hidden ? this.show() : this.hide();
|
|
||||||
},
|
|
||||||
|
|
||||||
setData: function(data) {
|
|
||||||
this.data = data;
|
this.data = data;
|
||||||
this.render(data);
|
this.render(data);
|
||||||
},
|
}
|
||||||
|
|
||||||
addData: function(data) {
|
addData(data) {
|
||||||
this.data = (this.data || []).concat(data);
|
this.data = (this.data || []).concat(data);
|
||||||
this.render(this.data);
|
this.render(this.data);
|
||||||
},
|
}
|
||||||
|
|
||||||
render: function(data) {
|
render(data) {
|
||||||
const children = data ? data.map(this.renderChildren.bind(this)) : [];
|
const children = data ? data.map(this.renderChildren.bind(this)) : [];
|
||||||
const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
|
const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
|
||||||
|
|
||||||
renderableList.innerHTML = children.join('');
|
renderableList.innerHTML = children.join('');
|
||||||
},
|
}
|
||||||
|
|
||||||
renderChildren: function(data) {
|
renderChildren(data) {
|
||||||
var html = utils.template(this.templateString, data);
|
const html = utils.template(this.templateString, data);
|
||||||
var template = document.createElement('div');
|
const template = document.createElement('div');
|
||||||
|
|
||||||
template.innerHTML = html;
|
template.innerHTML = html;
|
||||||
this.setImagesSrc(template);
|
DropDown.setImagesSrc(template);
|
||||||
template.firstChild.style.display = data.droplab_hidden ? 'none' : 'block';
|
template.firstChild.style.display = data.droplab_hidden ? 'none' : 'block';
|
||||||
|
|
||||||
return template.firstChild.outerHTML;
|
return template.firstChild.outerHTML;
|
||||||
},
|
}
|
||||||
|
|
||||||
setImagesSrc: function(template) {
|
show() {
|
||||||
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;
|
if (!this.hidden) return;
|
||||||
this.list.style.display = 'block';
|
this.list.style.display = 'block';
|
||||||
this.currentIndex = 0;
|
this.currentIndex = 0;
|
||||||
this.hidden = false;
|
this.hidden = false;
|
||||||
},
|
}
|
||||||
|
|
||||||
hide: function() {
|
hide() {
|
||||||
if (this.hidden) return;
|
if (this.hidden) return;
|
||||||
this.list.style.display = 'none';
|
this.list.style.display = 'none';
|
||||||
this.currentIndex = 0;
|
this.currentIndex = 0;
|
||||||
this.hidden = true;
|
this.hidden = true;
|
||||||
},
|
}
|
||||||
|
|
||||||
toggle: function () {
|
toggle() {
|
||||||
this.hidden ? this.show() : this.hide();
|
if (this.hidden) return this.show();
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
return this.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
this.hide();
|
this.hide();
|
||||||
this.list.removeEventListener('click', this.eventWrapper.clickEvent);
|
this.list.removeEventListener('click', this.eventWrapper.clickEvent);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
static setImagesSrc(template) {
|
||||||
|
const images = [...template.querySelectorAll('img[data-src]')];
|
||||||
|
|
||||||
|
images.forEach((image) => {
|
||||||
|
const img = image;
|
||||||
|
|
||||||
|
img.src = img.getAttribute('data-src');
|
||||||
|
img.removeAttribute('data-src');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default DropDown;
|
export default DropDown;
|
||||||
|
|
|
@ -1,99 +1,99 @@
|
||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import HookButton from './hook_button';
|
import HookButton from './hook_button';
|
||||||
import HookInput from './hook_input';
|
import HookInput from './hook_input';
|
||||||
import utils from './utils';
|
import utils from './utils';
|
||||||
import Keyboard from './keyboard';
|
import Keyboard from './keyboard';
|
||||||
import { DATA_TRIGGER } from './constants';
|
import { DATA_TRIGGER } from './constants';
|
||||||
|
|
||||||
var DropLab = function() {
|
class DropLab {
|
||||||
this.ready = false;
|
constructor() {
|
||||||
this.hooks = [];
|
this.ready = false;
|
||||||
this.queuedData = [];
|
this.hooks = [];
|
||||||
this.config = {};
|
this.queuedData = [];
|
||||||
|
this.config = {};
|
||||||
|
|
||||||
this.eventWrapper = {};
|
this.eventWrapper = {};
|
||||||
};
|
}
|
||||||
|
|
||||||
Object.assign(DropLab.prototype, {
|
loadStatic() {
|
||||||
loadStatic: function(){
|
const dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
|
||||||
var dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
|
|
||||||
this.addHooks(dropdownTriggers);
|
this.addHooks(dropdownTriggers);
|
||||||
},
|
}
|
||||||
|
|
||||||
addData: function () {
|
addData(...args) {
|
||||||
var args = [].slice.apply(arguments);
|
this.applyArgs(args, 'processAddData');
|
||||||
this.applyArgs(args, '_addData');
|
}
|
||||||
},
|
|
||||||
|
|
||||||
setData: function() {
|
setData(...args) {
|
||||||
var args = [].slice.apply(arguments);
|
this.applyArgs(args, 'processSetData');
|
||||||
this.applyArgs(args, '_setData');
|
}
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function() {
|
destroy() {
|
||||||
this.hooks.forEach(hook => hook.destroy());
|
this.hooks.forEach(hook => hook.destroy());
|
||||||
this.hooks = [];
|
this.hooks = [];
|
||||||
this.removeEvents();
|
this.removeEvents();
|
||||||
},
|
}
|
||||||
|
|
||||||
applyArgs: function(args, methodName) {
|
applyArgs(args, methodName) {
|
||||||
if (this.ready) return this[methodName].apply(this, args);
|
if (this.ready) return this[methodName](...args);
|
||||||
|
|
||||||
this.queuedData = this.queuedData || [];
|
this.queuedData = this.queuedData || [];
|
||||||
this.queuedData.push(args);
|
this.queuedData.push(args);
|
||||||
},
|
|
||||||
|
|
||||||
_addData: function(trigger, data) {
|
return this.ready;
|
||||||
this._processData(trigger, data, 'addData');
|
}
|
||||||
},
|
|
||||||
|
|
||||||
_setData: function(trigger, data) {
|
processAddData(trigger, data) {
|
||||||
this._processData(trigger, data, 'setData');
|
this.processData(trigger, data, 'addData');
|
||||||
},
|
}
|
||||||
|
|
||||||
_processData: function(trigger, data, methodName) {
|
processSetData(trigger, data) {
|
||||||
|
this.processData(trigger, data, 'setData');
|
||||||
|
}
|
||||||
|
|
||||||
|
processData(trigger, data, methodName) {
|
||||||
this.hooks.forEach((hook) => {
|
this.hooks.forEach((hook) => {
|
||||||
if (Array.isArray(trigger)) hook.list[methodName](trigger);
|
if (Array.isArray(trigger)) hook.list[methodName](trigger);
|
||||||
|
|
||||||
if (hook.trigger.id === trigger) hook.list[methodName](data);
|
if (hook.trigger.id === trigger) hook.list[methodName](data);
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
|
|
||||||
addEvents: function() {
|
addEvents() {
|
||||||
this.eventWrapper.documentClicked = this.documentClicked.bind(this)
|
this.eventWrapper.documentClicked = this.documentClicked.bind(this);
|
||||||
document.addEventListener('click', this.eventWrapper.documentClicked);
|
document.addEventListener('click', this.eventWrapper.documentClicked);
|
||||||
},
|
}
|
||||||
|
|
||||||
documentClicked: function(e) {
|
documentClicked(e) {
|
||||||
let thisTag = e.target;
|
let thisTag = e.target;
|
||||||
|
|
||||||
if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL');
|
if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL');
|
||||||
if (utils.isDropDownParts(thisTag, this.hooks) || utils.isDropDownParts(e.target, this.hooks)) return;
|
if (utils.isDropDownParts(thisTag, this.hooks)) return;
|
||||||
|
if (utils.isDropDownParts(e.target, this.hooks)) return;
|
||||||
|
|
||||||
this.hooks.forEach(hook => hook.list.hide());
|
this.hooks.forEach(hook => hook.list.hide());
|
||||||
},
|
}
|
||||||
|
|
||||||
removeEvents: function(){
|
removeEvents() {
|
||||||
document.removeEventListener('click', this.eventWrapper.documentClicked);
|
document.removeEventListener('click', this.eventWrapper.documentClicked);
|
||||||
},
|
}
|
||||||
|
|
||||||
changeHookList: function(trigger, list, plugins, config) {
|
|
||||||
const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
|
|
||||||
|
|
||||||
|
changeHookList(trigger, list, plugins, config) {
|
||||||
|
const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
|
||||||
|
|
||||||
this.hooks.forEach((hook, i) => {
|
this.hooks.forEach((hook, i) => {
|
||||||
hook.list.list.dataset.dropdownActive = false;
|
const aHook = hook;
|
||||||
|
|
||||||
if (hook.trigger !== availableTrigger) return;
|
aHook.list.list.dataset.dropdownActive = false;
|
||||||
|
|
||||||
hook.destroy();
|
if (aHook.trigger !== availableTrigger) return;
|
||||||
|
|
||||||
|
aHook.destroy();
|
||||||
this.hooks.splice(i, 1);
|
this.hooks.splice(i, 1);
|
||||||
this.addHook(availableTrigger, list, plugins, config);
|
this.addHook(availableTrigger, list, plugins, config);
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
|
|
||||||
addHook: function(hook, list, plugins, config) {
|
addHook(hook, list, plugins, config) {
|
||||||
const availableHook = typeof hook === 'string' ? document.querySelector(hook) : hook;
|
const availableHook = typeof hook === 'string' ? document.querySelector(hook) : hook;
|
||||||
let availableList;
|
let availableList;
|
||||||
|
|
||||||
|
@ -111,18 +111,18 @@ Object.assign(DropLab.prototype, {
|
||||||
this.hooks.push(new HookObject(availableHook, availableList, plugins, config));
|
this.hooks.push(new HookObject(availableHook, availableList, plugins, config));
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
},
|
}
|
||||||
|
|
||||||
addHooks: function(hooks, plugins, config) {
|
addHooks(hooks, plugins, config) {
|
||||||
hooks.forEach(hook => this.addHook(hook, null, plugins, config));
|
hooks.forEach(hook => this.addHook(hook, null, plugins, config));
|
||||||
return this;
|
return this;
|
||||||
},
|
}
|
||||||
|
|
||||||
setConfig: function(obj){
|
setConfig(obj) {
|
||||||
this.config = obj;
|
this.config = obj;
|
||||||
},
|
}
|
||||||
|
|
||||||
fireReady: function() {
|
fireReady() {
|
||||||
const readyEvent = new CustomEvent('ready.dl', {
|
const readyEvent = new CustomEvent('ready.dl', {
|
||||||
detail: {
|
detail: {
|
||||||
dropdown: this,
|
dropdown: this,
|
||||||
|
@ -131,10 +131,14 @@ Object.assign(DropLab.prototype, {
|
||||||
document.dispatchEvent(readyEvent);
|
document.dispatchEvent(readyEvent);
|
||||||
|
|
||||||
this.ready = true;
|
this.ready = true;
|
||||||
},
|
}
|
||||||
|
|
||||||
init: function (hook, list, plugins, config) {
|
init(hook, list, plugins, config) {
|
||||||
hook ? this.addHook(hook, list, plugins, config) : this.loadStatic();
|
if (hook) {
|
||||||
|
this.addHook(hook, list, plugins, config);
|
||||||
|
} else {
|
||||||
|
this.loadStatic();
|
||||||
|
}
|
||||||
|
|
||||||
this.addEvents();
|
this.addEvents();
|
||||||
|
|
||||||
|
@ -146,7 +150,7 @@ Object.assign(DropLab.prototype, {
|
||||||
this.queuedData = [];
|
this.queuedData = [];
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
},
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
export default DropLab;
|
export default DropLab;
|
||||||
|
|
|
@ -1,22 +1,15 @@
|
||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import DropDown from './drop_down';
|
import DropDown from './drop_down';
|
||||||
|
|
||||||
var Hook = function(trigger, list, plugins, config){
|
class Hook {
|
||||||
this.trigger = trigger;
|
constructor(trigger, list, plugins, config) {
|
||||||
this.list = new DropDown(list);
|
this.trigger = trigger;
|
||||||
this.type = 'Hook';
|
this.list = new DropDown(list);
|
||||||
this.event = 'click';
|
this.type = 'Hook';
|
||||||
this.plugins = plugins || [];
|
this.event = 'click';
|
||||||
this.config = config || {};
|
this.plugins = plugins || [];
|
||||||
this.id = trigger.id;
|
this.config = config || {};
|
||||||
};
|
this.id = trigger.id;
|
||||||
|
}
|
||||||
Object.assign(Hook.prototype, {
|
}
|
||||||
|
|
||||||
addEvents: function(){},
|
|
||||||
|
|
||||||
constructor: Hook,
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Hook;
|
export default Hook;
|
||||||
|
|
|
@ -1,65 +1,58 @@
|
||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import Hook from './hook';
|
import Hook from './hook';
|
||||||
|
|
||||||
var HookButton = function(trigger, list, plugins, config) {
|
class HookButton extends Hook {
|
||||||
Hook.call(this, trigger, list, plugins, config);
|
constructor(trigger, list, plugins, config) {
|
||||||
|
super(trigger, list, plugins, config);
|
||||||
|
|
||||||
this.type = 'button';
|
this.type = 'button';
|
||||||
this.event = 'click';
|
this.event = 'click';
|
||||||
|
|
||||||
this.eventWrapper = {};
|
this.eventWrapper = {};
|
||||||
|
|
||||||
this.addEvents();
|
this.addEvents();
|
||||||
this.addPlugins();
|
this.addPlugins();
|
||||||
};
|
}
|
||||||
|
|
||||||
HookButton.prototype = Object.create(Hook.prototype);
|
addPlugins() {
|
||||||
|
|
||||||
Object.assign(HookButton.prototype, {
|
|
||||||
addPlugins: function() {
|
|
||||||
this.plugins.forEach(plugin => plugin.init(this));
|
this.plugins.forEach(plugin => plugin.init(this));
|
||||||
},
|
}
|
||||||
|
|
||||||
clicked: function(e){
|
clicked(e) {
|
||||||
var buttonEvent = new CustomEvent('click.dl', {
|
const buttonEvent = new CustomEvent('click.dl', {
|
||||||
detail: {
|
detail: {
|
||||||
hook: this,
|
hook: this,
|
||||||
},
|
},
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true
|
cancelable: true,
|
||||||
});
|
});
|
||||||
e.target.dispatchEvent(buttonEvent);
|
e.target.dispatchEvent(buttonEvent);
|
||||||
|
|
||||||
this.list.toggle();
|
this.list.toggle();
|
||||||
},
|
}
|
||||||
|
|
||||||
addEvents: function(){
|
addEvents() {
|
||||||
this.eventWrapper.clicked = this.clicked.bind(this);
|
this.eventWrapper.clicked = this.clicked.bind(this);
|
||||||
this.trigger.addEventListener('click', this.eventWrapper.clicked);
|
this.trigger.addEventListener('click', this.eventWrapper.clicked);
|
||||||
},
|
}
|
||||||
|
|
||||||
removeEvents: function(){
|
removeEvents() {
|
||||||
this.trigger.removeEventListener('click', this.eventWrapper.clicked);
|
this.trigger.removeEventListener('click', this.eventWrapper.clicked);
|
||||||
},
|
}
|
||||||
|
|
||||||
restoreInitialState: function() {
|
restoreInitialState() {
|
||||||
this.list.list.innerHTML = this.list.initialState;
|
this.list.list.innerHTML = this.list.initialState;
|
||||||
},
|
}
|
||||||
|
|
||||||
removePlugins: function() {
|
removePlugins() {
|
||||||
this.plugins.forEach(plugin => plugin.destroy());
|
this.plugins.forEach(plugin => plugin.destroy());
|
||||||
},
|
}
|
||||||
|
|
||||||
destroy: function() {
|
destroy() {
|
||||||
this.restoreInitialState();
|
this.restoreInitialState();
|
||||||
|
|
||||||
this.removeEvents();
|
this.removeEvents();
|
||||||
this.removePlugins();
|
this.removePlugins();
|
||||||
},
|
}
|
||||||
|
}
|
||||||
constructor: HookButton,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
export default HookButton;
|
export default HookButton;
|
||||||
|
|
|
@ -1,25 +1,23 @@
|
||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import Hook from './hook';
|
import Hook from './hook';
|
||||||
|
|
||||||
var HookInput = function(trigger, list, plugins, config) {
|
class HookInput extends Hook {
|
||||||
Hook.call(this, trigger, list, plugins, config);
|
constructor(trigger, list, plugins, config) {
|
||||||
|
super(trigger, list, plugins, config);
|
||||||
|
|
||||||
this.type = 'input';
|
this.type = 'input';
|
||||||
this.event = 'input';
|
this.event = 'input';
|
||||||
|
|
||||||
this.eventWrapper = {};
|
this.eventWrapper = {};
|
||||||
|
|
||||||
this.addEvents();
|
this.addEvents();
|
||||||
this.addPlugins();
|
this.addPlugins();
|
||||||
};
|
}
|
||||||
|
|
||||||
Object.assign(HookInput.prototype, {
|
addPlugins() {
|
||||||
addPlugins: function() {
|
|
||||||
this.plugins.forEach(plugin => plugin.init(this));
|
this.plugins.forEach(plugin => plugin.init(this));
|
||||||
},
|
}
|
||||||
|
|
||||||
addEvents: function(){
|
addEvents() {
|
||||||
this.eventWrapper.mousedown = this.mousedown.bind(this);
|
this.eventWrapper.mousedown = this.mousedown.bind(this);
|
||||||
this.eventWrapper.input = this.input.bind(this);
|
this.eventWrapper.input = this.input.bind(this);
|
||||||
this.eventWrapper.keyup = this.keyup.bind(this);
|
this.eventWrapper.keyup = this.keyup.bind(this);
|
||||||
|
@ -29,19 +27,19 @@ Object.assign(HookInput.prototype, {
|
||||||
this.trigger.addEventListener('input', this.eventWrapper.input);
|
this.trigger.addEventListener('input', this.eventWrapper.input);
|
||||||
this.trigger.addEventListener('keyup', this.eventWrapper.keyup);
|
this.trigger.addEventListener('keyup', this.eventWrapper.keyup);
|
||||||
this.trigger.addEventListener('keydown', this.eventWrapper.keydown);
|
this.trigger.addEventListener('keydown', this.eventWrapper.keydown);
|
||||||
},
|
}
|
||||||
|
|
||||||
removeEvents: function() {
|
removeEvents() {
|
||||||
this.hasRemovedEvents = true;
|
this.hasRemovedEvents = true;
|
||||||
|
|
||||||
this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown);
|
this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown);
|
||||||
this.trigger.removeEventListener('input', this.eventWrapper.input);
|
this.trigger.removeEventListener('input', this.eventWrapper.input);
|
||||||
this.trigger.removeEventListener('keyup', this.eventWrapper.keyup);
|
this.trigger.removeEventListener('keyup', this.eventWrapper.keyup);
|
||||||
this.trigger.removeEventListener('keydown', this.eventWrapper.keydown);
|
this.trigger.removeEventListener('keydown', this.eventWrapper.keydown);
|
||||||
},
|
}
|
||||||
|
|
||||||
input: function(e) {
|
input(e) {
|
||||||
if(this.hasRemovedEvents) return;
|
if (this.hasRemovedEvents) return;
|
||||||
|
|
||||||
this.list.show();
|
this.list.show();
|
||||||
|
|
||||||
|
@ -51,12 +49,12 @@ Object.assign(HookInput.prototype, {
|
||||||
text: e.target.value,
|
text: e.target.value,
|
||||||
},
|
},
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true
|
cancelable: true,
|
||||||
});
|
});
|
||||||
e.target.dispatchEvent(inputEvent);
|
e.target.dispatchEvent(inputEvent);
|
||||||
},
|
}
|
||||||
|
|
||||||
mousedown: function(e) {
|
mousedown(e) {
|
||||||
if (this.hasRemovedEvents) return;
|
if (this.hasRemovedEvents) return;
|
||||||
|
|
||||||
const mouseEvent = new CustomEvent('mousedown.dl', {
|
const mouseEvent = new CustomEvent('mousedown.dl', {
|
||||||
|
@ -68,21 +66,21 @@ Object.assign(HookInput.prototype, {
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
});
|
});
|
||||||
e.target.dispatchEvent(mouseEvent);
|
e.target.dispatchEvent(mouseEvent);
|
||||||
},
|
}
|
||||||
|
|
||||||
keyup: function(e) {
|
keyup(e) {
|
||||||
if (this.hasRemovedEvents) return;
|
if (this.hasRemovedEvents) return;
|
||||||
|
|
||||||
this.keyEvent(e, 'keyup.dl');
|
this.keyEvent(e, 'keyup.dl');
|
||||||
},
|
}
|
||||||
|
|
||||||
keydown: function(e) {
|
keydown(e) {
|
||||||
if (this.hasRemovedEvents) return;
|
if (this.hasRemovedEvents) return;
|
||||||
|
|
||||||
this.keyEvent(e, 'keydown.dl');
|
this.keyEvent(e, 'keydown.dl');
|
||||||
},
|
}
|
||||||
|
|
||||||
keyEvent: function(e, eventName) {
|
keyEvent(e, eventName) {
|
||||||
this.list.show();
|
this.list.show();
|
||||||
|
|
||||||
const keyEvent = new CustomEvent(eventName, {
|
const keyEvent = new CustomEvent(eventName, {
|
||||||
|
@ -96,17 +94,17 @@ Object.assign(HookInput.prototype, {
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
});
|
});
|
||||||
e.target.dispatchEvent(keyEvent);
|
e.target.dispatchEvent(keyEvent);
|
||||||
},
|
}
|
||||||
|
|
||||||
restoreInitialState: function() {
|
restoreInitialState() {
|
||||||
this.list.list.innerHTML = this.list.initialState;
|
this.list.list.innerHTML = this.list.initialState;
|
||||||
},
|
}
|
||||||
|
|
||||||
removePlugins: function() {
|
removePlugins() {
|
||||||
this.plugins.forEach(plugin => plugin.destroy());
|
this.plugins.forEach(plugin => plugin.destroy());
|
||||||
},
|
}
|
||||||
|
|
||||||
destroy: function() {
|
destroy() {
|
||||||
this.restoreInitialState();
|
this.restoreInitialState();
|
||||||
|
|
||||||
this.removeEvents();
|
this.removeEvents();
|
||||||
|
@ -114,6 +112,6 @@ Object.assign(HookInput.prototype, {
|
||||||
|
|
||||||
this.list.destroy();
|
this.list.destroy();
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
export default HookInput;
|
export default HookInput;
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import DropDown from '~/droplab/drop_down';
|
import DropDown from '~/droplab/drop_down';
|
||||||
import utils from '~/droplab/utils';
|
import utils from '~/droplab/utils';
|
||||||
import { SELECTED_CLASS, IGNORE_CLASS } from '~/droplab/constants';
|
import { SELECTED_CLASS, IGNORE_CLASS } from '~/droplab/constants';
|
||||||
|
@ -17,7 +15,7 @@ describe('DropDown', function () {
|
||||||
|
|
||||||
it('sets the .hidden property to true', function () {
|
it('sets the .hidden property to true', function () {
|
||||||
expect(this.dropdown.hidden).toBe(true);
|
expect(this.dropdown.hidden).toBe(true);
|
||||||
})
|
});
|
||||||
|
|
||||||
it('sets the .list property', function () {
|
it('sets the .list property', function () {
|
||||||
expect(this.dropdown.list).toBe(this.list);
|
expect(this.dropdown.list).toBe(this.list);
|
||||||
|
@ -152,7 +150,7 @@ describe('DropDown', function () {
|
||||||
|
|
||||||
it('should call addSelectedClass', function () {
|
it('should call addSelectedClass', function () {
|
||||||
expect(this.dropdown.addSelectedClass).toHaveBeenCalledWith(this.closestElement);
|
expect(this.dropdown.addSelectedClass).toHaveBeenCalledWith(this.closestElement);
|
||||||
})
|
});
|
||||||
|
|
||||||
it('should call .preventDefault', function () {
|
it('should call .preventDefault', function () {
|
||||||
expect(this.event.preventDefault).toHaveBeenCalled();
|
expect(this.event.preventDefault).toHaveBeenCalled();
|
||||||
|
@ -293,36 +291,6 @@ describe('DropDown', 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 () {
|
describe('setData', function () {
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
this.dropdown = { render: () => {} };
|
this.dropdown = { render: () => {} };
|
||||||
|
@ -399,7 +367,7 @@ describe('DropDown', function () {
|
||||||
expect(this.data.map).toHaveBeenCalledWith(jasmine.any(Function));
|
expect(this.data.map).toHaveBeenCalledWith(jasmine.any(Function));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should call .renderChildren for each data item', function() {
|
it('should call .renderChildren for each data item', function () {
|
||||||
expect(this.dropdown.renderChildren.calls.count()).toBe(this.data.length);
|
expect(this.dropdown.renderChildren.calls.count()).toBe(this.data.length);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -407,7 +375,7 @@ describe('DropDown', function () {
|
||||||
expect(this.renderableList.innerHTML).toBe('01');
|
expect(this.renderableList.innerHTML).toBe('01');
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('if no data argument is passed' , function () {
|
describe('if no data argument is passed', function () {
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
this.data.map.calls.reset();
|
this.data.map.calls.reset();
|
||||||
this.dropdown.renderChildren.calls.reset();
|
this.dropdown.renderChildren.calls.reset();
|
||||||
|
@ -446,14 +414,14 @@ describe('DropDown', function () {
|
||||||
describe('renderChildren', function () {
|
describe('renderChildren', function () {
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
this.templateString = 'templateString';
|
this.templateString = 'templateString';
|
||||||
this.dropdown = { setImagesSrc: () => {}, templateString: this.templateString };
|
this.dropdown = { templateString: this.templateString };
|
||||||
this.data = { droplab_hidden: true };
|
this.data = { droplab_hidden: true };
|
||||||
this.html = 'html';
|
this.html = 'html';
|
||||||
this.template = { firstChild: { outerHTML: 'outerHTML', style: {} } };
|
this.template = { firstChild: { outerHTML: 'outerHTML', style: {} } };
|
||||||
|
|
||||||
spyOn(utils, 'template').and.returnValue(this.html);
|
spyOn(utils, 'template').and.returnValue(this.html);
|
||||||
spyOn(document, 'createElement').and.returnValue(this.template);
|
spyOn(document, 'createElement').and.returnValue(this.template);
|
||||||
spyOn(this.dropdown, 'setImagesSrc');
|
spyOn(DropDown, 'setImagesSrc');
|
||||||
|
|
||||||
this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data);
|
this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data);
|
||||||
});
|
});
|
||||||
|
@ -471,7 +439,7 @@ describe('DropDown', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should call .setImagesSrc with the template', function () {
|
it('should call .setImagesSrc with the template', function () {
|
||||||
expect(this.dropdown.setImagesSrc).toHaveBeenCalledWith(this.template);
|
expect(DropDown.setImagesSrc).toHaveBeenCalledWith(this.template);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should set the template display to none', function () {
|
it('should set the template display to none', function () {
|
||||||
|
@ -496,12 +464,11 @@ describe('DropDown', function () {
|
||||||
|
|
||||||
describe('setImagesSrc', function () {
|
describe('setImagesSrc', function () {
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
this.dropdown = {};
|
|
||||||
this.template = { querySelectorAll: () => {} };
|
this.template = { querySelectorAll: () => {} };
|
||||||
|
|
||||||
spyOn(this.template, 'querySelectorAll').and.returnValue([]);
|
spyOn(this.template, 'querySelectorAll').and.returnValue([]);
|
||||||
|
|
||||||
DropDown.prototype.setImagesSrc.call(this.dropdown, this.template);
|
DropDown.setImagesSrc(this.template);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should call .querySelectorAll', function () {
|
it('should call .querySelectorAll', function () {
|
||||||
|
@ -562,7 +529,7 @@ describe('DropDown', function () {
|
||||||
|
|
||||||
describe('toggle', function () {
|
describe('toggle', function () {
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
this.hidden = true
|
this.hidden = true;
|
||||||
this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} };
|
this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} };
|
||||||
|
|
||||||
spyOn(this.dropdown, 'show');
|
spyOn(this.dropdown, 'show');
|
||||||
|
@ -577,7 +544,7 @@ describe('DropDown', function () {
|
||||||
|
|
||||||
describe('if .hidden is false', function () {
|
describe('if .hidden is false', function () {
|
||||||
beforeEach(function () {
|
beforeEach(function () {
|
||||||
this.hidden = false
|
this.hidden = false;
|
||||||
this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} };
|
this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} };
|
||||||
|
|
||||||
spyOn(this.dropdown, 'show');
|
spyOn(this.dropdown, 'show');
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import Hook from '~/droplab/hook';
|
import Hook from '~/droplab/hook';
|
||||||
import * as dropdownSrc from '~/droplab/drop_down';
|
import * as dropdownSrc from '~/droplab/drop_down';
|
||||||
|
|
||||||
|
@ -73,10 +71,4 @@ describe('Hook', function () {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('addEvents', function () {
|
|
||||||
it('should exist', function () {
|
|
||||||
expect(Hook.prototype.hasOwnProperty('addEvents')).toBe(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue