https://www.ndlalaarena.co.za/assets/nav-events.js

1/* ============================================================
2   Ndlala Arena — nav Events dropdown
3   Fills the "Events" nav item with a dropdown of the nights, straight from
4   /api/public/events (via NDLALA_EVENTS), so it stays correct if a night is
5   added or removed. No day is hand-written into the header.
6
7   Desktop is hover/focus. On touch the dropdown does not open; tapping Events
8   still follows its href to the calendar, which lists every night. That is the
9   deliberate fallback, not a bug.
10   ============================================================ */
11(function () {
12  'use strict';
13
14  function eventsLi() {
15    var li = null;
16    var links = document.querySelectorAll('.nav ul .navlink');
17    Array.prototype.forEach.call(links, function (a) {
18      if (a.textContent.trim().toLowerCase() === 'events') li = a.parentNode;
19    });
20    return li;
21  }
22
23  function build(all) {
24    // Past nights are dropped before anything is numbered. They were being
25    // listed as Night 1, 2 and 3, linking to event.html, which is a booking page
26    // for a night that has already happened, and pushing December to Night 4.
27    var events = (all || []).filter(function (e) { return e.status !== 'past'; });
28    var li = eventsLi();
29    if (!li || !events.length) return;                 // leave the plain link
30    li.classList.add('has-dd');
31
32    // Lucide chevron-down, appended to the Events link. Not a CSS triangle.
33    var link = li.querySelector('.navlink');
34    if (link && !link.querySelector('.dd-caret')) {
35      link.insertAdjacentHTML('beforeend',
36        '<svg class="dd-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +
37        ' stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
38        '<path d="m6 9 6 6 6-6"/></svg>');
39    }
40
41    var dd = document.createElement('ul');
42    dd.className = 'nav-dd';
43    dd.innerHTML = events.map(function (e, i) {
44      var d = window.NDLALA_EV.fmtDate(e.date);
45      return '<li><a href="event.html?e=' + encodeURIComponent(e.slug) + '">' +
46               '<span class="nd-n">Night ' + (i + 1) + '</span>' +
47               '<span class="nd-d">' + d.d + ' ' + d.m + '</span>' +
48             '</a></li>';
49    }).join('');
50    li.appendChild(dd);
51  }
52
53  document.addEventListener('DOMContentLoaded', function () {
54    if (window.NDLALA_EVENTS) window.NDLALA_EVENTS.then(build).catch(function () {});
55  });
56})();