natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replaced the selectbox with native HTML <select>

This commit is contained in:
rcmainak 2018-03-13 18:43:07 +05:30 committed by Danny Coates
parent 0ed5c7f1e7
commit 77e3b5a3e6
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
2 changed files with 35 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/templates/selectbox/index.js
View File

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

51
app/templates/selectbox/selectbox.css
View File

@ -1,36 +1,27 @@
.selectbox { .select {
display: inline-block;
position: relative;
cursor: pointer;
}
.selectbox__options {
display: none;
}
.selectbox__options--active {
display: block;
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 40px 0;
background-color: var(--pageBGColor); background-color: var(--pageBGColor);
border: 1px solid rgba(12, 12, 13, 0.3); overflow: hidden;
border-radius: 4px;
box-shadow: 1px 2px 4px rgba(12, 12, 13, 0.3);
} }
.selectbox__option { select {
color: var(--lightTextColor); appearance: none;
font-size: 12pt; outline: 0;
list-style: none; box-shadow: none;
user-select: none; border: 0;
white-space: nowrap; background: #fff;
padding: 0 60px; background-image: none;
border-bottom: 1px solid rgba(12, 12, 13, 0.3); font-size: 1em;
margin: 0;
color: #0094fb;
cursor: pointer;
border-color: none;
} }
.selectbox__option:hover { select:active {
background-color: #f4f4f4; background-color: var(--pageBGColor);
border: 0;
}
#arrow {
position: relative;
} }