wip 2

3 files changed, 61 insertions, 69 deletions

diff --git a/src/content/dependencies/generateIntrapageDotSwitcher.js b/src/content/dependencies/generateIntrapageDotSwitcher.js
index 3f300676..1d58367d 100644
--- a/src/content/dependencies/generateIntrapageDotSwitcher.js
+++ b/src/content/dependencies/generateIntrapageDotSwitcher.js
@@ -42,6 +42,8 @@ export default {
         }).map(({title, targetID}) =>
             html.tag('a', {href: '#'},
               {'data-target-id': targetID},
+              {[html.onlyIfContent]: true},
+
               language.sanitize(title))),
     }),
 };
diff --git a/src/content/dependencies/generateLyricsSection.js b/src/content/dependencies/generateLyricsSection.js
index 7e7718c7..f6b719a9 100644
--- a/src/content/dependencies/generateLyricsSection.js
+++ b/src/content/dependencies/generateLyricsSection.js
@@ -1,8 +1,10 @@
+import {stitchArrays} from '#sugar';
+
 export default {
   contentDependencies: [
     'generateContentHeading',
+    'generateIntrapageDotSwitcher',
     'generateLyricsEntry',
-    'generateLyricsSwitcher',
     'transformContent',
   ],
 
@@ -13,30 +15,67 @@ export default {
       relation('generateContentHeading'),
 
     switcher:
-      relation('generateLyricsSwitcher', entries),
+      relation('generateIntrapageDotSwitcher'),
 
     entries:
       entries
         .map(entry => relation('generateLyricsEntry', entry)),
+
+    annotations:
+      entries
+        .map(entry => entry.annotation)
+        .map(annotation => relation('transformContent', annotation)),
   }),
 
-  generate: (relations, {html, language}) =>
-    html.tags([
-      relations.heading
-        .slots({
-          attributes: {id: 'lyrics'},
-          title: language.$('releaseInfo.lyrics'),
-        }),
-
-      relations.switcher,
-
-      relations.entries
-        .map((entry, index) =>
-          entry.slots({
-            attributes: [
-              index >= 1 &&
-                {style: 'display: none'},
-            ],
+  data: (entries) => ({
+    ids:
+      Array.from(
+        {length: entries.length},
+        (_, index) => 'lyrics-entry-' + index),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('releaseInfo.lyrics', capsule =>
+      html.tags([
+        relations.heading
+          .slots({
+            attributes: {id: 'lyrics'},
+            title: language.$(capsule),
+          }),
+
+        html.tag('p', {class: 'lyrics-switcher'},
+          {[html.onlyIfContent]: true},
+
+          language.$(capsule, 'switcher', {
+            [language.onlyIfOptions]: ['entries'],
+
+            entries:
+              relations.switcher.slots({
+                initialOptionIndex: 0,
+
+                titles:
+                  relations.annotations.map(annotation =>
+                    annotation.slots({
+                      mode: 'inline',
+                      textOnly: true,
+                    })),
+
+                targetIDs:
+                  data.ids,
+              }),
           })),
-    ]),
+
+        stitchArrays({
+          entry: relations.entries,
+          id: data.ids,
+        }).map(({entry, id}, index) =>
+            entry.slots({
+              attributes: [
+                {id},
+
+                index >= 1 &&
+                  {style: 'display: none'},
+              ],
+            })),
+      ])),
 };
diff --git a/src/content/dependencies/generateLyricsSwitcher.js b/src/content/dependencies/generateLyricsSwitcher.js
deleted file mode 100644
index 1c9ee6a3..00000000
--- a/src/content/dependencies/generateLyricsSwitcher.js
+++ /dev/null
@@ -1,49 +0,0 @@
-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,
-                      })),
-                ]))),
-      })),
-};