2 files changed, 72 insertions, 0 deletions
diff --git a/src/static/js/client/index.js b/src/static/js/client/index.js
index 81ea3415..b2343f07 100644
--- a/src/static/js/client/index.js
+++ b/src/static/js/client/index.js
@@ -15,6 +15,7 @@ import * as hoverableTooltipModule from './hoverable-tooltip.js';
 import * as imageOverlayModule from './image-overlay.js';
 import * as intrapageDotSwitcherModule from './intrapage-dot-switcher.js';
 import * as liveMousePositionModule from './live-mouse-position.js';
+import * as lyricsSwitcherModule from './lyrics-switcher.js';
 import * as quickDescriptionModule from './quick-description.js';
 import * as scriptedLinkModule from './scripted-link.js';
 import * as sidebarSearchModule from './sidebar-search.js';
@@ -37,6 +38,7 @@ export const modules = [
   imageOverlayModule,
   intrapageDotSwitcherModule,
   liveMousePositionModule,
+  lyricsSwitcherModule,
   quickDescriptionModule,
   scriptedLinkModule,
   sidebarSearchModule,
diff --git a/src/static/js/client/lyrics-switcher.js b/src/static/js/client/lyrics-switcher.js
new file mode 100644
index 00000000..b350ea50
--- /dev/null
+++ b/src/static/js/client/lyrics-switcher.js
@@ -0,0 +1,70 @@
+/* eslint-env browser */
+
+import {stitchArrays} from '../../shared-util/sugar.js';
+
+import {cssProp} from '../client-util.js';
+
+export const info = {
+  id: 'lyricsSwitcherInfo',
+
+  entries: null,
+  switchLinks: null,
+  currentLinks: null,
+};
+
+export function getPageReferences() {
+  const content = document.getElementById('content');
+
+  if (!content) return;
+
+  const switcher = content.querySelector('.lyrics-switcher');
+
+  if (!switcher) return;
+
+  info.entries =
+    Array.from(content.querySelectorAll('.lyrics-entry'));
+
+  info.currentLinks =
+    Array.from(switcher.querySelectorAll('a.current'));
+
+  info.switchLinks =
+    Array.from(switcher.querySelectorAll('a:not(.current)'));
+}
+
+export function addPageListeners() {
+  if (!info.switchLinks) return;
+
+  for (const {switchLink, entry} of stitchArrays({
+    switchLink: info.switchLinks,
+    entry: info.entries,
+  })) {
+    switchLink.addEventListener('click', domEvent => {
+      domEvent.preventDefault();
+      showLyricsEntry(entry);
+    });
+  }
+}
+
+function showLyricsEntry(entry) {
+  const entryToShow = entry;
+
+  stitchArrays({
+    entry: info.entries,
+    currentLink: info.currentLinks,
+    switchLink: info.switchLinks,
+  }).forEach(({
+      entry,
+      currentLink,
+      switchLink,
+    }) => {
+      if (entry === entryToShow) {
+        cssProp(entry, 'display', null);
+        cssProp(currentLink, 'display', null);
+        cssProp(switchLink, 'display', 'none');
+      } else {
+        cssProp(entry, 'display', 'none');
+        cssProp(currentLink, 'display', 'none');
+        cssProp(switchLink, 'display', null);
+      }
+    });
+}