140 lines
3.3 KiB
JavaScript
140 lines
3.3 KiB
JavaScript
/* 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) {
|
|
if (e.target.tagName === 'UL') return;
|
|
|
|
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;
|