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
81
82
83
|
/**
* Slide up/down
* Code from https://dev.to/bmsvieira/vanilla-js-slidedown-up-4dkn
* @param target
* @param duration
*/
let slideUp = (target: HTMLElement, duration = 500) => {
target.classList.add('transiting');
target.style.transitionProperty = 'height, margin, padding';
target.style.transitionDuration = duration + 'ms';
///target.style.boxSizing = 'border-box';
target.style.height = target.offsetHeight + 'px';
target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = "0";
target.style.paddingTop = "0";
target.style.paddingBottom = "0";
target.style.marginTop = "0";
target.style.marginBottom = "0";
window.setTimeout(() => {
target.classList.remove('show')
target.style.removeProperty('height');
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
target.classList.remove('transiting');
}, duration);
}
let slideDown = (target: HTMLElement, duration = 500) => {
target.classList.add('transiting');
target.style.removeProperty('display');
target.classList.add('show');
let height = target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = "0";
target.style.paddingTop = "0";
target.style.paddingBottom = "0";
target.style.marginTop = "0";
target.style.marginBottom = "0";
target.offsetHeight;
///target.style.boxSizing = 'border-box';
target.style.transitionProperty = "height, margin, padding";
target.style.transitionDuration = duration + 'ms';
target.style.height = height + 'px';
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
window.setTimeout(() => {
target.style.removeProperty('height');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
target.classList.remove('transiting');
}, duration);
}
let slideToggle = (target, duration = 500) => {
if (window.getComputedStyle(target).display === 'none') {
return slideDown(target, duration);
} else {
return slideUp(target, duration);
}
}
export default function () {
const toggleMenu = document.getElementById('toggle-menu');
if (toggleMenu) {
toggleMenu.addEventListener('click', () => {
if (document.getElementById('main-menu').classList.contains('transiting')) return;
document.body.classList.toggle('show-menu');
slideToggle(document.getElementById('main-menu'), 300);
toggleMenu.classList.toggle('is-active');
});
}
}
|
