57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
|
const html = require('choo/html');
|
||
|
|
|
||
|
|
module.exports = function(selected, options, translate, changed) {
|
||
|
|
const id = `select-${Math.random()}`;
|
||
|
|
let x = selected;
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
const ul = document.getElementById(id);
|
||
|
|
const body = document.querySelector('body');
|
||
|
|
ul.classList.remove('active');
|
||
|
|
body.removeEventListener('click', close);
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggle(event) {
|
||
|
|
event.stopPropagation();
|
||
|
|
const ul = document.getElementById(id);
|
||
|
|
if (ul.classList.contains('active')) {
|
||
|
|
close();
|
||
|
|
} else {
|
||
|
|
ul.classList.add('active');
|
||
|
|
const body = document.querySelector('body');
|
||
|
|
body.addEventListener('click', close);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function choose(event) {
|
||
|
|
event.stopPropagation();
|
||
|
|
const target = event.target;
|
||
|
|
const value = +target.dataset.value;
|
||
|
|
target.parentNode.previousSibling.firstElementChild.textContent = translate(
|
||
|
|
value
|
||
|
|
);
|
||
|
|
if (x !== value) {
|
||
|
|
x = value;
|
||
|
|
changed(value);
|
||
|
|
}
|
||
|
|
close();
|
||
|
|
}
|
||
|
|
return html`
|
||
|
|
<div class="selectbox">
|
||
|
|
<div onclick=${toggle}>
|
||
|
|
<span class="link">${translate(selected)}</span>
|
||
|
|
<svg width="32" height="32">
|
||
|
|
<polygon points="8 18 17 28 26 18" fill="#0094fb"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<ul id="${id}" class="selectOptions">
|
||
|
|
${options.map(
|
||
|
|
i =>
|
||
|
|
html`<li class="selectOption" onclick=${choose} data-value="${i}">${
|
||
|
|
i
|
||
|
|
}</li>`
|
||
|
|
)}
|
||
|
|
</ul>
|
||
|
|
</div>`;
|
||
|
|
};
|