Spaces:
Runtime error
Runtime error
File size: 2,567 Bytes
c2ea21f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
const menubox4 = document.querySelector('.menubox4');
const menulabel4 = menubox4.querySelector('.menubox__label4');
const menuchecks4 = menubox4.querySelectorAll('input[type=checkbox]');
const menuboxRect4 = menubox4.getBoundingClientRect();
const menulabelRect4 = menulabel4.getBoundingClientRect();
const frameTime4 = 3000 / 60;
const duration4 = 350;
const frames4 = Math.ceil(duration4 / frameTime4);
const slideHeight4 = menuboxRect4.height - menulabelRect4.height;
let timer4 = null;
let currentItem4 = 0;
const debouncedFn4 = (fn) => {
timer4 && clearTimeout(timer4);
timer4 = setTimeout(fn, 250);
}
const documentanimateHeight44 = (e) => {
if (e.target === menubox4 || menubox4.contains(e.target)) {
e.stopPropagation();
return;
}
debouncedFn4(() => {
animateHeight4(true);
});
};
document.addEventListener('click', documentanimateHeight44);
function animateHeight4 (collapsing, done) {
let i = 0;
function __animate4 () {
// const scale = (collapsing ? frames4 - (i++) : i++) / frames4;
// const height = menulabelRect4.height + (scale * slideHeight4);
const factor = Math.pow((i++) / frames4 - 1, 3) + 1;
const height = 2 + menulabelRect4.height + (collapsing ? 1 - factor : factor) * slideHeight4;
menubox4.style.maxHeight = `${height}px`;
if (i <= frames4) {
requestAnimationFrame(__animate4);
} else {
if (collapsing) {
const transitionEnded = () => {
menubox4.removeEventListener('transitionend', transitionEnded);
document.removeEventListener('click', documentanimateHeight44);
(typeof done === 'function') && done();
}
menubox4.classList.add('menubox--collapsed');
menubox4.addEventListener('transitionend', transitionEnded, false);
} else {
menuchecks4.item(currentItem4 = currentItem4 || 0).focus();
(typeof done === 'function') && done();
}
timer4 && clearTimeout(timer4);
timer4 = null;
}
}
if (collapsing) {
requestAnimationFrame(__animate4);
} else {
const transitionEnded = () => {
menubox4.removeEventListener('transitionend', transitionEnded);
requestAnimationFrame(__animate4);
}
menubox4.classList.remove('menubox--collapsed');
menubox4.addEventListener('transitionend', transitionEnded, false);
document.addEventListener('click', documentanimateHeight44);
}
}
menulabel4.addEventListener('click', () => {
debouncedFn4(() => {
animateHeight4(!menubox4.classList.contains('menubox--collapsed'));
});
});
|