43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
function setupBars(selector) {
|
|
document.querySelectorAll(selector).forEach(el => {
|
|
const fill = el.querySelector('.fill');
|
|
const pct = parseInt(el.dataset.percent) || 0;
|
|
const percentText = el.querySelector('.percent');
|
|
|
|
function activate() {
|
|
fill.style.width = pct + '%';
|
|
el.classList.add('active');
|
|
if (percentText) percentText.style.opacity = '1';
|
|
}
|
|
|
|
function deactivate() {
|
|
fill.style.width = '0%';
|
|
el.classList.remove('active');
|
|
if (percentText) percentText.style.opacity = '0';
|
|
}
|
|
|
|
el.addEventListener('mouseenter', activate);
|
|
el.addEventListener('mouseleave', deactivate);
|
|
el.addEventListener('focus', activate);
|
|
el.addEventListener('blur', deactivate);
|
|
|
|
el.addEventListener('click', (e) => {
|
|
if (el.classList.contains('active')) {
|
|
deactivate();
|
|
} else {
|
|
document.querySelectorAll(selector + '.active').forEach(other => {
|
|
if (other !== el) {
|
|
other.classList.remove('active');
|
|
other.querySelector('.fill').style.width = '0%';
|
|
const pt = other.querySelector('.percent');
|
|
if (pt) pt.style.opacity = '0';
|
|
}
|
|
});
|
|
activate();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
setupBars('.skill');
|
|
setupBars('.lang'); |