30 lines
836 B
JavaScript
30 lines
836 B
JavaScript
const THUMB_MIN = 150;
|
|
const THUMB_MAX = 400;
|
|
|
|
let _thumbSizeHint;
|
|
let thumbSize = 250;
|
|
let thumbHintTimer = null;
|
|
|
|
export function init({ gridContainer, thumbSizeHint }) {
|
|
_thumbSizeHint = thumbSizeHint;
|
|
|
|
gridContainer.addEventListener('wheel', (e) => {
|
|
if (!e.ctrlKey) return;
|
|
e.preventDefault();
|
|
setThumbSize(thumbSize + (-e.deltaY * 0.8));
|
|
}, { passive: false });
|
|
}
|
|
|
|
export function setThumbSize(size) {
|
|
thumbSize = Math.round(Math.max(THUMB_MIN, Math.min(THUMB_MAX, size)));
|
|
document.documentElement.style.setProperty('--thumb-size', thumbSize + 'px');
|
|
_showHint(thumbSize);
|
|
}
|
|
|
|
function _showHint(size) {
|
|
_thumbSizeHint.textContent = `${size}px`;
|
|
_thumbSizeHint.classList.add('show');
|
|
clearTimeout(thumbHintTimer);
|
|
thumbHintTimer = setTimeout(() => _thumbSizeHint.classList.remove('show'), 1000);
|
|
}
|