https://www.ssl.com/wp-content/themes/generatepress_child/nav-rebuild/sslnav.js

1(function(){
2  var nav=document.querySelector('.sslnav');
3  if(!nav)return;
4  var items=nav.querySelectorAll('.sslnav-has-panel');
5  var burger=nav.querySelector('.sslnav-burger');
6
7  function closeAll(except){
8    items.forEach(function(li){
9      if(li===except)return;
10      li.setAttribute('data-open','false');
11      li.querySelector('.sslnav-top').setAttribute('aria-expanded','false');
12    });
13  }
14  items.forEach(function(li,idx){
15    var btn=li.querySelector('.sslnav-top');
16    var panel=li.querySelector('.sslnav-panel');
17    if(panel){
18      if(!panel.id) panel.id='sslnav-panel-'+idx;
19      btn.setAttribute('aria-controls',panel.id);
20      btn.setAttribute('aria-haspopup','true');
21    }
22    btn.addEventListener('click',function(e){
23      e.stopPropagation();
24      var open=li.getAttribute('data-open')==='true';
25      closeAll(li);
26      li.setAttribute('data-open',open?'false':'true');
27      btn.setAttribute('aria-expanded',open?'false':'true');
28    });
29  });
30  // click-away closes
31  document.addEventListener('click',function(e){ if(!nav.contains(e.target)) closeAll(); });
32  // Esc closes
33  document.addEventListener('keydown',function(e){
34    if(e.key!=='Escape')return;
35    var openLi=null;
36    items.forEach(function(li){ if(li.getAttribute('data-open')==='true') openLi=li; });
37    closeAll();
38    if(nav.classList.contains('is-open'))setOpen(false);
39    if(openLi && nav.contains(document.activeElement)) openLi.querySelector('.sslnav-top').focus();
40  });
41
42  // mobile burger
43  function setBurger(open){
44    burger.setAttribute('aria-expanded',open?'true':'false');
45    burger.setAttribute('aria-label',open?'Close menu':'Open menu');
46  }
47  var scrim=nav.querySelector('.sslnav-scrim');
48  function navH(){
49    var inner=nav.querySelector('.sslnav-inner');
50    var h=inner?Math.round(inner.getBoundingClientRect().height):68;
51    nav.style.setProperty('--nav-h',h+'px');
52  }
53  function setOpen(open){
54    if(open)navH();
55    nav.classList.toggle('is-open',open);
56    document.body.classList.toggle('sslnav-locked',open&&window.matchMedia('(max-width:900px)').matches);
57    if(scrim){ if(open){scrim.removeAttribute('hidden');} else {setTimeout(function(){ if(!nav.classList.contains('is-open')) scrim.setAttribute('hidden',''); },300);} }
58    setBurger(open);
59    if(!open)closeAll();
60  }
61  if(burger){
62    burger.addEventListener('click',function(){ setOpen(!nav.classList.contains('is-open')); });
63  }
64  if(scrim){ scrim.addEventListener('click',function(){ setOpen(false); }); }
65  window.addEventListener('resize',function(){
66    if(!window.matchMedia('(max-width:900px)').matches){ setOpen(false); }
67    else if(nav.classList.contains('is-open')) navH();
68  });
69
70  // Products mega: switch product list on category hover/focus
71  nav.querySelectorAll('.sslnav-mega-cats').forEach(function(cats){
72    var mega=cats.closest('.sslnav-mega');
73    var buttons=cats.querySelectorAll('.sslnav-cat');
74    var subs=mega.querySelectorAll('.sslnav-sub-panel');
75    var pinned=null; // desktop: a clicked category stays open, hover no longer switches
76    var wrap=cats.closest('.sslnav-has-panel');
77    if(wrap&&window.MutationObserver){
78      new MutationObserver(function(){ if(wrap.dataset.open!=='true') pinned=null; })
79        .observe(wrap,{attributes:true,attributeFilter:['data-open']});
80    }
81    function show(cat){
82      buttons.forEach(function(b){
83        var on=b.dataset.cat===cat;
84        b.classList.toggle('is-active',on);
85        b.setAttribute('aria-selected',on?'true':'false');
86        b.setAttribute('tabindex',on?'0':'-1');
87      });
88      subs.forEach(function(s){s.classList.toggle('is-active',s.dataset.sub===cat);});
89    }
90    cats.addEventListener('keydown',function(e){
91      var keys=['ArrowDown','ArrowUp','Home','End'];
92      if(keys.indexOf(e.key)<0)return;
93      var list=Array.prototype.slice.call(buttons);
94      var cur=list.indexOf(document.activeElement);
95      if(cur<0)return;
96      e.preventDefault();
97      var next=cur;
98      if(e.key==='ArrowDown')next=(cur+1)%list.length;
99      if(e.key==='ArrowUp')next=(cur-1+list.length)%list.length;
100      if(e.key==='Home')next=0;
101      if(e.key==='End')next=list.length-1;
102      show(list[next].dataset.cat);
103      list[next].focus();
104    });
105    buttons.forEach(function(b){
106      b.addEventListener('mouseenter',function(){ if(!pinned && !window.matchMedia('(max-width:900px

106)').matches) show(b.dataset.cat); });
107      b.addEventListener('focus',function(){ if(!window.matchMedia('(max-width:900px)').matches){ pinned=null; show(b.dataset.cat); } });
108      b.addEventListener('click',function(e){
109        e.preventDefault();
110        var mobile=window.matchMedia('(max-width:900px)').matches;
111        if(mobile && b.classList.contains('is-active')){
112          b.classList.remove('is-active');
113          var p=mega.querySelector('.sslnav-sub-panel[data-sub="'+b.dataset.cat+'"]');
114          if(p)p.classList.remove('is-active');
115          return;
116        }
117        pinned=b.dataset.cat;
118        show(b.dataset.cat);
119      });
120    });
121
122    // accordion on mobile: move each sub-panel directly beneath its category
123    function layoutMega(){
124      var mobile=window.matchMedia('(max-width:900px)').matches;
125      buttons.forEach(function(b){
126        var panel=mega.querySelector('.sslnav-sub-panel[data-sub="'+b.dataset.cat+'"]');
127        if(!panel)return;
128        if(mobile){
129          if(b.nextElementSibling!==panel) b.after(panel);
130        }else{
131          var subWrap=mega.querySelector('.sslnav-mega-sub');
132          if(subWrap && panel.parentElement!==subWrap) subWrap.appendChild(panel);
133        }
134      });
135      if(mobile){
136        buttons.forEach(function(b){b.classList.remove('is-active');});
137        subs.forEach(function(s){s.classList.remove('is-active');});
138      }else if(!mega.querySelector('.sslnav-cat.is-active')){
139        show(buttons[0].dataset.cat);
140      }
141    }
142    layoutMega();
143    window.addEventListener('resize',layoutMega);
144  });
145
146
147  // mobile: log in joins the icon row (inline with cart/chat)
148  (function(){
149    var actions=nav.querySelector('.sslnav-actions');
150    var iconsWrap=nav.querySelector('.sslnav-icons');
151    var cta=nav.querySelector('.sslnav-cta');
152    if(!actions||!iconsWrap||!cta)return;
153    function layoutCta(){
154      var mobile=window.matchMedia('(max-width:900px)').matches;
155      if(mobile){
156        if(cta.parentNode!==iconsWrap) iconsWrap.appendChild(cta);
157      }else{
158        if(cta.parentNode!==actions) actions.appendChild(cta);
159      }
160    }
161    layoutCta();
162    window.addEventListener('resize',layoutCta);
163  })();
164
165  // expanding search
166  var searchWrap=nav.querySelector('.sslnav-search');
167  if(searchWrap){
168    var sBtn=searchWrap.querySelector('.sslnav-search-btn');
169    var sField=searchWrap.querySelector('.sslnav-search-field');
170    var sForm=searchWrap.querySelector('.sslnav-search-form');
171    sBtn.addEventListener('click',function(e){
172      e.stopPropagation();
173      searchWrap.classList.add('open');
174      sBtn.setAttribute('aria-expanded','true');
175      setTimeout(function(){sField.focus();},60);
176    });
177    document.addEventListener('click',function(e){

178      if(!searchWrap.contains(e.target) && !sField.value){
179        searchWrap.classList.remove('open');
180        sBtn.setAttribute('aria-expanded','false');
181      }
182    });
183    sField.addEventListener('keydown',function(e){
184      if(e.key==='Escape'){ searchWrap.classList.remove('open'); sBtn.setAttribute('aria-expanded','false'); sBtn.focus(); }
185    });
186    sForm.addEventListener('submit',function(){ if(!sField.value.trim()){return false;} });
187  }
188})();