94 lines
1.7 KiB
JavaScript
94 lines
1.7 KiB
JavaScript
import './select-box.css';
|
|
|
|
import { El } from '../../utils/dom';
|
|
import { Stack } from '../../core/Stack';
|
|
|
|
export class SelectBox {
|
|
|
|
/**
|
|
* Select Box, Constructor
|
|
*/
|
|
constructor(target) {
|
|
|
|
if (!target.length) {
|
|
return;
|
|
}
|
|
|
|
this.target = target;
|
|
|
|
this.labels = El('div', { class: 'labels hide' });
|
|
this.choices = El('div', { class: 'choices' });
|
|
|
|
this.ui = El('div', { class: 'sp-form-control sp-select-box' },
|
|
this.choices,
|
|
this.labels
|
|
);
|
|
|
|
let parent = this.target[0].dxParents('.form-field');
|
|
|
|
this.target.forEach(function(el) {
|
|
this.labels.append(el.parentElement);
|
|
}, this);
|
|
|
|
parent.append(this.ui);
|
|
|
|
Stack.add(this);
|
|
|
|
this.setEvents();
|
|
}
|
|
|
|
/**
|
|
* Select Box, Set Events
|
|
*/
|
|
setEvents() {
|
|
|
|
let that = this;
|
|
|
|
this.ui.dxOn('click', function(e) {
|
|
e.stopPropagation();
|
|
that.labels.classList.toggle('hide');
|
|
});
|
|
|
|
window.dxOn('resize.selectbox' + this.ekey + ' orientationchange.selectbox' + this.ekey, function() {
|
|
that.labels.classList.add('hide');
|
|
});
|
|
|
|
document.dxOn('click.selectbox' + this.ekey, function() {
|
|
that.labels.classList.add('hide');
|
|
});
|
|
|
|
this.labels.dxOn('click', function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
this.labels.dxOn('change', 'input', this.update.bind(this) );
|
|
}
|
|
|
|
/**
|
|
* Select Box, Update
|
|
*/
|
|
update() {
|
|
|
|
let checked = [];
|
|
|
|
this.labels.dxFind('input', input => {
|
|
|
|
if (input.checked) {
|
|
checked.push(input.parentElement.textContent);
|
|
}
|
|
});
|
|
|
|
this.choices.dxText(checked.join(', '));
|
|
}
|
|
|
|
/**
|
|
* Select Box, Destroy
|
|
*/
|
|
destroy() {
|
|
|
|
window.dxOff('resize.selectbox' + this.ekey + ' orientationchange.selectbox' + this.ekey);
|
|
document.dxOff('click.selectbox' + this.ekey);
|
|
|
|
Stack.delete(this);
|
|
}
|
|
} |