« get me outta code hell

hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/content/dependencies/generateLyricsSwitcher.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/content/dependencies/generateLyricsSwitcher.js')
-rw-r--r--src/content/dependencies/generateLyricsSwitcher.js49
1 files changed, 49 insertions, 0 deletions
diff --git a/src/content/dependencies/generateLyricsSwitcher.js b/src/content/dependencies/generateLyricsSwitcher.js
new file mode 100644
index 00000000..1c9ee6a3
--- /dev/null
+++ b/src/content/dependencies/generateLyricsSwitcher.js
@@ -0,0 +1,49 @@
+export default {
+  contentDependencies: ['transformContent'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, entries) => ({
+    annotations:
+      entries
+        .map(entry => entry.annotation)
+        .map(annotation => relation('transformContent', annotation)),
+  }),
+
+  slots: {
+    tag: {type: 'string', default: 'p'},
+  },
+
+  generate: (relations, slots, {html, language}) =>
+    html.tag(slots.tag, {class: 'lyrics-switcher'},
+      language.$('releaseInfo.lyrics.switcher', {
+        entries:
+          language.formatListWithoutSeparator(
+            relations.annotations
+              .map((annotation, index) =>
+                html.tag('span', {[html.joinChildren]: ''}, [
+                  html.tag('a',
+                    {href: '#'},
+
+                    index === 0 &&
+                      {style: 'display: none'},
+
+                    annotation
+                      .slots({
+                        mode: 'inline',
+                        textOnly: true,
+                      })),
+
+                  html.tag('a',
+                    {class: 'current'},
+
+                    index >= 1 &&
+                      {style: 'display: none'},
+
+                    annotation
+                      .slots({
+                        mode: 'inline',
+                        textOnly: true,
+                      })),
+                ]))),
+      })),
+};