content: generateAlbumSidebar: move track sections into own function

For cleaner dependencies and finer-grained refreshing.

2 files changed, 110 insertions, 111 deletions

diff --git a/src/content/dependencies/generateAlbumSidebar.js b/src/content/dependencies/generateAlbumSidebar.js
index 36785f2..ab659b9 100644
--- a/src/content/dependencies/generateAlbumSidebar.js
+++ b/src/content/dependencies/generateAlbumSidebar.js
@@ -1,139 +1,40 @@
 export default {
   contentDependencies: [
     'generateAlbumSidebarGroupBox',
+    'generateAlbumSidebarTrackSection',
     'linkAlbum',
-    'linkTrack',
   ],
 
-  extraDependencies: [
-    'getColors',
-    'html',
-    'language',
-  ],
+  extraDependencies: ['html'],
+
 
-  relations(relation, album, _track) {
+  relations(relation, album, track) {
     const relations = {};
 
     relations.albumLink =
       relation('linkAlbum', album);
 
-    relations.trackLinks =
-      album.trackSections.map(trackSection =>
-        trackSection.tracks.map(track =>
-          relation('linkTrack', track)));
-
     relations.groupBoxes =
       album.groups.map(group =>
         relation('generateAlbumSidebarGroupBox', album, group));
 
+    relations.trackSections =
+      album.trackSections.map(trackSection =>
+        relation('generateAlbumSidebarTrackSection', album, track, trackSection));
+
     return relations;
   },
 
   data(album, track) {
-    const data = {};
-
-    data.isAlbumPage = !track;
-    data.isTrackPage = !!track;
-
-    data.hasTrackNumbers = album.hasTrackNumbers;
-
-    data.trackSectionInfo =
-      album.trackSections.map(trackSection => ({
-        name: trackSection.name,
-        color: trackSection.color,
-        isDefaultTrackSection: trackSection.isDefaultTrackSection,
-
-        firstTrackNumber: trackSection.startIndex + 1,
-        lastTrackNumber: trackSection.startIndex + trackSection.tracks.length,
-
-        includesCurrentTrack: track && trackSection.tracks.includes(track),
-        currentTrackIndex: trackSection.tracks.indexOf(track),
-      }));
-
-    return data;
+    return {isAlbumPage: !track};
   },
 
-  generate(data, relations, {
-    getColors,
-    html,
-    language,
-  }) {
-    const {isTrackPage, isAlbumPage} = data;
+  generate(data, relations, {html}) {
+    const {isAlbumPage} = data;
 
     const trackListPart = html.tags([
       html.tag('h1', relations.albumLink),
-      data.trackSectionInfo.map(
-        ({
-          name,
-          color,
-          isDefaultTrackSection,
-
-          firstTrackNumber,
-          lastTrackNumber,
-
-          includesCurrentTrack,
-          currentTrackIndex,
-        }, index) => {
-          const trackLinks = relations.trackLinks[index];
-
-          const sectionName =
-            html.tag('span', {class: 'group-name'},
-              (isDefaultTrackSection
-                ? language.$('albumSidebar.trackList.fallbackSectionName')
-                : name));
-
-          let style;
-          if (color) {
-            const {primary} = getColors(color);
-            style = `--primary-color: ${primary}`;
-          }
-
-          const trackListItems =
-            trackLinks.map((trackLink, index) =>
-              html.tag('li',
-                {
-                  class:
-                    includesCurrentTrack &&
-                    index === currentTrackIndex &&
-                    'current',
-                },
-                language.$('albumSidebar.trackList.item', {
-                  track: trackLink,
-                })));
-
-          return html.tag('details',
-            {
-              class: includesCurrentTrack && 'current',
-
-              open: (
-                // Leave sidebar track sections collapsed on album info page,
-                // since there's already a view of the full track listing
-                // in the main content area.
-                isTrackPage &&
-
-                // Only expand the track section which includes the track
-                // currently being viewed by default.
-                includesCurrentTrack),
-            },
-            [
-              html.tag('summary', {style},
-                html.tag('span',
-                  (data.hasTrackNumbers
-                    ? language.$('albumSidebar.trackList.group.withRange', {
-                        group: sectionName,
-                        range: `${firstTrackNumber}–${lastTrackNumber}`
-                      })
-                    : language.$('albumSidebar.trackList.group', {
-                        group: sectionName,
-                      })))),
-
-              (data.hasTrackNumbers
-                ? html.tag('ol',
-                    {start: firstTrackNumber},
-                    trackListItems)
-                : html.tag('ul', trackListItems)),
-            ]);
-        }),
+      relations.trackSections,
     ]);
 
     if (isAlbumPage) {
diff --git a/src/content/dependencies/generateAlbumSidebarTrackSection.js b/src/content/dependencies/generateAlbumSidebarTrackSection.js
new file mode 100644
index 0000000..2aca6da
--- /dev/null
+++ b/src/content/dependencies/generateAlbumSidebarTrackSection.js
@@ -0,0 +1,98 @@
+export default {
+  contentDependencies: ['linkTrack'],
+  extraDependencies: ['getColors', 'html', 'language'],
+
+  relations(relation, album, track, trackSection) {
+    const relations = {};
+
+    relations.trackLinks =
+      trackSection.tracks.map(track =>
+        relation('linkTrack', track));
+
+    return relations;
+  },
+
+  data(album, track, trackSection) {
+    const data = {};
+
+    data.hasTrackNumbers = album.hasTrackNumbers;
+    data.isTrackPage = !!track;
+
+    data.name = trackSection.name;
+    data.color = trackSection.color;
+    data.isDefaultTrackSection = trackSection.isDefaultTrackSection;
+
+    data.firstTrackNumber = trackSection.startIndex + 1;
+    data.lastTrackNumber = trackSection.startIndex + trackSection.tracks.length;
+
+    if (track) {
+      const index = trackSection.tracks.indexOf(track);
+      if (index !== -1) {
+        data.includesCurrentTrack = true;
+        data.currentTrackIndex = index;
+      }
+    }
+
+    return data;
+  },
+
+  generate(data, relations, {getColors, html, language}) {
+    const sectionName =
+      html.tag('span', {class: 'group-name'},
+        (data.isDefaultTrackSection
+          ? language.$('albumSidebar.trackList.fallbackSectionName')
+          : data.name));
+
+    let style;
+    if (data.color) {
+      const {primary} = getColors(data.color);
+      style = `--primary-color: ${primary}`;
+    }
+
+    const trackListItems =
+      relations.trackLinks.map((trackLink, index) =>
+        html.tag('li',
+          {
+            class:
+              data.includesCurrentTrack &&
+              index === data.currentTrackIndex &&
+              'current',
+          },
+          language.$('albumSidebar.trackList.item', {
+            track: trackLink,
+          })));
+
+    return html.tag('details',
+      {
+        class: data.includesCurrentTrack && 'current',
+
+        open: (
+          // Leave sidebar track sections collapsed on album info page,
+          // since there's already a view of the full track listing
+          // in the main content area.
+          data.isTrackPage &&
+
+          // Only expand the track section which includes the track
+          // currently being viewed by default.
+          data.includesCurrentTrack),
+      },
+      [
+        html.tag('summary', {style},
+          html.tag('span',
+            (data.hasTrackNumbers
+              ? language.$('albumSidebar.trackList.group.withRange', {
+                  group: sectionName,
+                  range: `${data.firstTrackNumber}–${data.lastTrackNumber}`
+                })
+              : language.$('albumSidebar.trackList.group', {
+                  group: sectionName,
+                })))),
+
+        (data.hasTrackNumbers
+          ? html.tag('ol',
+              {start: data.firstTrackNumber},
+              trackListItems)
+          : html.tag('ul', trackListItems)),
+      ]);
+  },
+};