Add hamburger menu to house Song List and Waveform Styles

assets/js/player.js

@@ -39,14 +39,17 @@
     lyricsLines:  $('lyrics-lines'),
     lyricsSync:   $('lyrics-sync'),
     lyricsOffset: $('lyrics-offset'),
-    historyToggle:$('history-toggle'),
     historyBody:  $('history-body'),
     history:      $('history'),
     listeners:    $('listeners'),
     canvas:       $('tint-canvas'),
     waveform:     $('waveform'),
     artRing:      $('art-ring'),
-    wavePicker:   $('waveform-picker')
+    wavePicker:   $('waveform-picker'),
+    menuToggle:   $('menu-toggle'),
+    menuList:     $('menu-list'),
+    menuHistory:  $('menu-history'),
+    menuWaveform: $('menu-waveform')
   };
 
   var ICON = {
@@ -768,13 +771,47 @@
     while (el.historyBody.children.length > 100) el.historyBody.removeChild(el.historyBody.lastChild);
   }
 
-  if (el.historyToggle && el.history) {
-    el.historyToggle.addEventListener('click', function () {
-      var open = el.history.classList.toggle('open');
-      el.historyToggle.classList.toggle('open', open);
-      el.historyToggle.textContent = open ? 'Close' : 'Song list';
+  /* --------------------------------------------------------- menu / popovers */
+  function closeMenu() {
+    if (!el.menuList) return;
+    el.menuList.hidden = true;
+    if (el.menuToggle) el.menuToggle.setAttribute('aria-expanded', 'false');
+  }
+
+  if (el.menuToggle && el.menuList) {
+    el.menuToggle.addEventListener('click', function (e) {
+      e.stopPropagation();
+      var open = el.menuList.hidden;
+      el.menuList.hidden = !open;
+      el.menuToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
     });
   }
+  if (el.menuHistory && el.history) {
+    el.menuHistory.addEventListener('click', function (e) {
+      e.stopPropagation();
+      el.history.classList.toggle('open');
+      closeMenu();
+    });
+  }
+  if (el.menuWaveform && el.wavePicker) {
+    el.menuWaveform.addEventListener('click', function (e) {
+      e.stopPropagation();
+      el.wavePicker.hidden = !el.wavePicker.hidden;
+      closeMenu();
+    });
+  }
+  // Clicking anywhere outside the menu / history pane / waveform picker
+  // closes whichever of them is open (the triggers above stop propagation
+  // so this only fires for genuine outside clicks).
+  document.addEventListener('click', function (e) {
+    closeMenu();
+    if (el.history && el.history.classList.contains('open') && !el.history.contains(e.target)) {
+      el.history.classList.remove('open');
+    }
+    if (el.wavePicker && !el.wavePicker.hidden && !el.wavePicker.contains(e.target)) {
+      el.wavePicker.hidden = true;
+    }
+  });
 
   /* ----------------------------------------------------------- listeners */
   function updateListeners(data) {