-
Notifications
You must be signed in to change notification settings - Fork 920
/
footer.js
executable file
·59 lines (49 loc) · 1.53 KB
/
footer.js
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
const debounce = require('lodash.debounce');
const behavior = require('../utils/behavior');
const select = require('../utils/select');
const { CLICK } = require('../events');
const { prefix: PREFIX } = require('../config');
const HIDDEN = 'hidden';
const SCOPE = `.${PREFIX}-footer--big`;
const NAV = `${SCOPE} nav`;
const BUTTON = `${NAV} .${PREFIX}-footer__primary-link`;
const COLLAPSIBLE = `.${PREFIX}-footer__primary-content--collapsible`;
const HIDE_MAX_WIDTH = 480;
const DEBOUNCE_RATE = 180;
function showPanel() {
if (window.innerWidth < HIDE_MAX_WIDTH) {
const collapseEl = this.closest(COLLAPSIBLE);
collapseEl.classList.toggle(HIDDEN);
// NB: this *should* always succeed because the button
// selector is scoped to ".{prefix}-footer-big nav"
const collapsibleEls = select(COLLAPSIBLE, collapseEl.closest(NAV));
collapsibleEls.forEach((el) => {
if (el !== collapseEl) {
el.classList.add(HIDDEN);
}
});
}
}
let lastInnerWidth;
const resize = debounce(() => {
if (lastInnerWidth === window.innerWidth) return;
lastInnerWidth = window.innerWidth;
const hidden = window.innerWidth < HIDE_MAX_WIDTH;
select(COLLAPSIBLE).forEach(list => list.classList.toggle(HIDDEN, hidden));
}, DEBOUNCE_RATE);
module.exports = behavior({
[CLICK]: {
[BUTTON]: showPanel,
},
}, {
// export for use elsewhere
HIDE_MAX_WIDTH,
DEBOUNCE_RATE,
init() {
resize();
window.addEventListener('resize', resize);
},
teardown() {
window.removeEventListener('resize', resize);
},
});