https://loja.correios.com.br/public-resources/core/js/menu.js

1import { enterClick } from './events.js';
2
3const desktop = window.matchMedia('(min-width: 1024px)').matches;
4const hambuguer = document.querySelector('#menu .hamburger');
5const ctn = document.querySelector('#menu > .menu');
6const menuUsuario = document.querySelector('#menu button.nome');
7const ddUsu = document.querySelector('#menu > .dd');
8const menuUsuarioMob = document.querySelector('#menu > .menu section a.nome-usuario-logado');
9const ddUsuMob = document.querySelector('#menu .menu div.dd-mobile');
10let pilha = [];
11
12function abre () {
13  hambuguer.classList.add('aberto');
14  ctn.classList.remove('oculto');
15  document.body.classList.add('menu-aberto');
16  addHash();
17  conf.aberto = true;
18  saveConf();
19}
20
21function fecha () {
22  hambuguer.classList.remove('aberto');
23  ctn.classList.add('oculto');
24  document.body.classList.remove('menu-aberto');
25  const abertos = ctn.querySelectorAll('.aberto');
26  for (let a of abertos) {
27    a.classList.remove('aberto');
28  }
29  pilha = [];
30  removeHash();
31  conf.aberto = false;
32  conf.abertos = [];
33  saveConf();
34}
35
36function abreSubmenu (ev, anchor) {
37  let a;
38  if (ev) {
39    a = ev.currentTarget;
40  } else {
41    a = anchor;
42  }
43  if (a.classList.contains('nome-usuario-logado')) return;
44  let sub = a.nextSibling.nextSibling;
45  if (sub.tagName != 'DIV') return;
46  sub.classList.add('aberto');
47  pilha.push(sub.querySelector('.voltar'));
48  sub.querySelectorAll(':scope > a').forEach(a => a.tabIndex = 1);
49  setTimeout(() => {
50    sub.querySelector('.voltar').focus();
51  }, 0);
52  if (ev) {
53    addHash();
54    conf.abertos.push([...a.parentNode.childNodes].indexOf(a));
55    saveConf();
56  }
57  ctn.scrollTop = 0;
58}
59
60function fechaSubmenu (ev) {
61  let a;
62  if (ev) {
63    a = ev.currentTarget;
64  } else {
65    a = pilha.pop();
66  }
67  let sub = a.parentNode;
68  sub.classList.remove('aberto');
69  sub.querySelectorAll('a').forEach(a => a.tabIndex = -1);
70  if (ev) {
71    subHash();
72  }
73  conf.abertos.pop();
74  saveConf();
75}
76
77function getHash () {
78  const pars = new URLSearchParams(location.hash.substr(1));
79  return pars.get('menu');
80}
81
82function removeHash () {
83  if (desktop) return;
84  if (location.hash) {
85    const pars = new URLSearchParams(location.hash.substr(1));
86    if (pars.has('menu')) {
87      const newPars = new URLSearchParams();
88      for (let [k, v] of pars.entries()) {
89        if (k == 'menu') continue;
90        newPars.set(k, v);
91      }
92      history.pushState(null, null, '#' + newPars.toString());
93    }
94  }
95}
96
97function addHash () {
98  if (desktop) return;
99  const pars = new URLSearchParams(location.hash.substr(1));
100  let nivel = 1;
101  if (!pars.has('menu')) {
102    pars.set('menu', nivel.toString());
103  } else {
104    const nivel = parseInt(pars.get('menu')) + 1;
105    pars.set('menu', nivel.toString());
106  }
107  history.pushState(nivel.toString(), null, '#' + pars.toString());
108}
109
110function subHash () {
111  if (desktop) return;
112  const pars = new URLSearchParams(location.hash.substr(1));
113  if (!pars.has('menu')) return;
114  history.back();
115}
116
117function abreFechMenUsu (ev) {
118  ev.stopPropagation();
119  if (menuUsuario.classList.contains('aberto')) {
120    menuUsuario.classList.remove('aberto');
121    ddUsu.classList.remove('aberto');
122  } else {
123    menuUsuario.classList.add('aberto');
124    ddUsu.classList.add('aberto');
125  }
126}
127
128function abreFechMenUsuMob (ev) {
129  ev.stopPropagation();
130  if (menuUsuarioMob.classList.contains('aberto')) {
131    menuUsuarioMob.classList.remove('aberto');
132    ddUsuMob.classList.remove('aberto');
133  } else {
134    menuUsuarioMob.classList.add('aberto');
135    ddUsuMob.classList.add('aberto');
136  }
137}
138
139let conf = {
140  aberto: false,
141  abertos: [],
142};
143
144function readConf () {
145  const cnf = localStorage.getItem('menu');
146  if (!cnf) return;
147  conf = JSON.parse(cnf);
148}
149
150function saveConf () {
151  localStorage.setItem('menu', JSON.stringify(conf));
152}
153
154function ini () {
155  if (document.body.classList.contains('origin-app')) {
156    document.getElementById('menu').classList.add('oculto');
157    fecha();
158    return;
159  }
160  readConf();
161  hambuguer.addEventListener('click', ev => {
162    const ham = ev.currentTarget;
163    if (ham.classList.contains('aberto')) {
164      fecha();
165    } else {

166      abre();
167    }
168  });
169  ctn.classList.add('oculto');
170  setInterval(() => {
171    const altura = window.innerHeight - hambuguer.getBoundingClientRect().bottom;
172    ctn.style.height = (altura - 9) + 'px';
173  }, 500);
174  document.body.addEventListener('click', () => {
175    if (!desktop) {
176      fecha();
177    }
178  });
179  hambuguer.addEventListener('click', ev => ev.stopPropagation());
180  ctn.addEventListener('click', ev => ev.stopPropagation());
181  const subs = ctn.querySelectorAll('div');
182  for (let s of subs) {
183    if (s.classList.contains('dd-mobile')) {
184      continue;
185    }
186    let voltar = document.createElement('a');
187	let hr = document.createElement('hr');
188    voltar.innerHTML = `<i class="ic-marcador-esquerda"></i><span>Voltar</span>`;
189    voltar.className = 'link-btn btn-txt voltar';
190    s.insertAdjacentElement('afterbegin', voltar);
191	voltar.after(hr);
192  }
193  ctn.querySelectorAll('a').forEach(a => {
194    a.tabIndex = 1;
195  });
196  ctn.querySelectorAll(':scope > div a').forEach(a => {
197    a.tabIndex = -1;
198  });
199  const abriveis = ctn.querySelectorAll('a:not([href])');
200  for (let a of abriveis) {
201    if (a.classList.contains('voltar')) {
202      a.addEventListener('click', fechaSubmenu);
203    } else {
204      a.addEventListener('click', abreSubmenu);
205    }
206    enterClick(a);
207  }
208
209  window.addEventListener('popstate', ev => {
210    if (desktop) return;
211    const nivel = parseInt(getHash());
212    const n = pilha.length;
213    if (n == nivel) {
214      fechaSubmenu();
215    } else {
216      fecha();
217    }
218  });
219
220  removeHash();
221
222  if (desktop && conf.aberto) abre();
223  try {
224    let sub = ctn;
225    for (let i = 0; i < conf.abertos.length; i++) {
226      let a = sub.childNodes[conf.abertos[i]];
227      abreSubmenu(null, a);
228      if (!desktop) {
229        addHash();
230      }
231      sub = a.nextSibling.nextSibling;
232    }
233  } catch {
234    conf.abertos = [];
235    saveConf();
236  }
237  enterClick(hambuguer);
238  if (menuUsuario) {
239    menuUsuario.addEventListener('click', abreFechMenUsu);
240    menuUsuarioMob.addEventListener('click', abreFechMenUsuMob);
241    ddUsu.addEventListener('click', ev => ev.stopPropagation());
242    ddUsuMob.addEventListener('click', ev => ev.stopPropagation());
243    document.body.addEventListener('click', () => {
244      menuUsuario.classList.remove('aberto');
245      menuUsuarioMob.classList.remove('aberto');
246      ddUsu.classList.remove('aberto');
247      ddUsuMob.classList.remove('aberto');
248    });
249    enterClick(menuUsuario);
250  }
251}
252
253ini();
254
255export {abre,  fecha};