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

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

@ -1,59 +1,32 @@
const html = require('choo/html');
const number = require('../../utils').number;
module.exports = function(selected, options, translate, changed) {
const id = `select-${Math.random()}`;
let x = selected;
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="selectbox__options">
<span class="select">
<select id="${id}" onchange=${choose}>
${options.map(
i => html`
<li
class="selectbox__option"
onclick=${choose}
data-value="${i}">${number(i)}</li>`
i =>
html`<option value="${i}" ${
i === selected ? 'selected' : ''
}>${translate(i)}</option>`
)}
</ul>
</div>`;
</select>
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);
}
}
<svg id="arrow" width="32" height="32">
<polygon points="8 18 17 28 26 18" fill="#0094fb"/>
</svg>
</span>`;
function choose(event) {
event.stopPropagation();
const target = event.target;
const value = +target.dataset.value;
target.parentNode.previousSibling.firstElementChild.textContent = translate(
value
);
const value = +target.value;
if (x !== value) {
x = value;
changed(value);
}
close();
}
};

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

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