content: generateChronologyLinksScopeSwitcher

3 files changed, 85 insertions, 52 deletions

diff --git a/src/content/dependencies/generateChronologyLinksScopeSwitcher.js b/src/content/dependencies/generateChronologyLinksScopeSwitcher.js
new file mode 100644
index 00000000..53ec87a6
--- /dev/null
+++ b/src/content/dependencies/generateChronologyLinksScopeSwitcher.js
@@ -0,0 +1,52 @@
+import {stitchArrays} from '#sugar';
+
+export default {
+  extraDependencies: ['html', 'language'],
+
+  slots: {
+    scopes: {
+      validate: v => v.strictArrayOf(v.isStringNonEmpty),
+    },
+
+    contents: {
+      validate: v => v.strictArrayOf(v.isHTML),
+    },
+
+    open: {
+      type: 'boolean',
+      default: true,
+    },
+  },
+
+  generate: (slots, {html, language}) =>
+    html.tag('details', {class: 'scoped-chronology-switcher'},
+      slots.open &&
+        {open: true},
+
+      [
+        html.tag('summary',
+          language.$('trackPage.nav.chronology.scope.title', {
+            scope:
+              slots.scopes.map((scope, index) =>
+                html.tag('a', {class: 'switcher-link'},
+                  {href: '#'},
+
+                  (index === 0
+                    ? {style: 'display: inline'}
+                    : {style: 'display: none'}),
+
+                  language.$('trackPage.nav.chronology.scope', scope))),
+          })),
+
+        stitchArrays({
+          scope: slots.scopes,
+          content: slots.contents,
+        }).map(({scope, content}, index) =>
+            html.tag('div', {class: 'scope-' + scope},
+              (index === 0
+                ? {style: 'display: block'}
+                : {style: 'display: none'}),
+
+              content)),
+      ]),
+};
diff --git a/src/content/dependencies/generateScopedTrackChronologyLinks.js b/src/content/dependencies/generateScopedTrackChronologyLinks.js
index 7cb9ee63..87a7c0fd 100644
--- a/src/content/dependencies/generateScopedTrackChronologyLinks.js
+++ b/src/content/dependencies/generateScopedTrackChronologyLinks.js
@@ -10,8 +10,6 @@ export default {
     'linkTrack',
   ],
 
-  extraDependencies: ['html', 'language'],
-
   relations(relation, album, track) {
     const albumFilter =
       (album
@@ -73,41 +71,19 @@ export default {
     };
   },
 
-  slots: {
-    scope: {
-      validate: v => v.is('wiki', 'album'),
-    },
-
-    visible: {type: 'boolean'},
-  },
-
-  generate: (relations, slots, {html, language}) =>
-    html.tag('div', {class: 'scoped-chronology'},
-      {class: 'scope-' + slots.scope},
-      slots.visible && {style: 'display: block'},
-
-      [
-        html.tag('p',
-          language.$('trackPage.nav.chronology.scope', {
-            scope:
-              html.tag('a', {class: 'scoped-chronology-switcher'},
-                {href: '#'},
-                language.$('trackPage.nav.chronology.scope', slots.scope)),
-          })),
-
-        relations.chronologyLinks.slots({
-          showOnly: true,
-
-          chronologyInfoSets: [
-            {
-              headingString: 'misc.chronology.heading.track',
-              contributions: relations.artistChronologyContributions,
-            },
-            {
-              headingString: 'misc.chronology.heading.coverArt',
-              contributions: relations.coverArtistChronologyContributions,
-            },
-          ],
-        }),
-      ]),
+  generate: (relations) =>
+    relations.chronologyLinks.slots({
+      showOnly: true,
+
+      chronologyInfoSets: [
+        {
+          headingString: 'misc.chronology.heading.track',
+          contributions: relations.artistChronologyContributions,
+        },
+        {
+          headingString: 'misc.chronology.heading.coverArt',
+          contributions: relations.coverArtistChronologyContributions,
+        },
+      ],
+    }),
 };
diff --git a/src/content/dependencies/generateTrackChronologyLinks.js b/src/content/dependencies/generateTrackChronologyLinks.js
index 33911c79..accb9ef1 100644
--- a/src/content/dependencies/generateTrackChronologyLinks.js
+++ b/src/content/dependencies/generateTrackChronologyLinks.js
@@ -1,8 +1,13 @@
 export default {
-  contentDependencies: ['generateScopedTrackChronologyLinks'],
-  extraDependencies: ['html'],
+  contentDependencies: [
+    'generateChronologyLinksScopeSwitcher',
+    'generateScopedTrackChronologyLinks',
+  ],
 
   relations: (relation, track) => ({
+    scopeSwitcher:
+      relation('generateChronologyLinksScopeSwitcher'),
+
     wikiChronologyLinks:
       relation('generateScopedTrackChronologyLinks', null, track),
 
@@ -10,16 +15,16 @@ export default {
       relation('generateScopedTrackChronologyLinks', track.album, track),
   }),
 
-  generate: (relations, {html}) =>
-    html.tags([
-      relations.wikiChronologyLinks.slots({
-        scope: 'wiki',
-        visible: true,
-      }),
+  generate: (relations) =>
+    relations.scopeSwitcher.slots({
+      scopes: [
+        'wiki',
+        'album',
+      ],
 
-      relations.albumChronologyLinks.slots({
-        scope: 'album',
-        visible: false,
-      }),
-    ]),
+      contents: [
+        relations.wikiChronologyLinks,
+        relations.albumChronologyLinks,
+      ],
+    }),
 };