content, client: memorable details, collapsed crediting/ref sources preview

5 files changed, 167 insertions, 92 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index 1c5be6e6..8f8b921c 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -13,9 +13,9 @@ export default {
     'generateAlbumSocialEmbed',
     'generateAlbumStyleTags',
     'generateAlbumTrackList',
+    'generateCollapsedContentEntrySection',
     'generateCommentaryContentHeading',
     'generateCommentaryEntry',
-    'generateContentContentHeading',
     'generateContentHeading',
     'generatePageLayout',
     'generateReadCommentaryLine',
@@ -58,9 +58,6 @@ export default {
     contentHeading:
       relation('generateContentHeading'),
 
-    contentContentHeading:
-      relation('generateContentContentHeading', album),
-
     releaseInfo:
       relation('generateAlbumReleaseInfo', album),
 
@@ -90,9 +87,10 @@ export default {
       album.commentary
         .map(entry => relation('generateCommentaryEntry', entry)),
 
-    creditSourceEntries:
-      album.creditingSources
-        .map(entry => relation('generateCommentaryEntry', entry)),
+    creditingSourcesSection:
+      relation('generateCollapsedContentEntrySection',
+        album.creditingSources,
+        album),
   }),
 
   data: (album) => ({
@@ -172,7 +170,7 @@ export default {
               !html.isBlank(relations.artistCommentaryEntries) &&
                 relations.readCommentaryLine,
 
-              !html.isBlank(relations.creditSourceEntries) &&
+              !html.isBlank(relations.creditingSourcesSection) &&
                 language.encapsulate(capsule, 'readCreditingSources', capsule =>
                   language.$(capsule, {
                     link:
@@ -192,9 +190,7 @@ export default {
               date: language.formatDate(data.dateAddedToWiki),
             })),
 
-          (!html.isBlank(relations.artistCommentaryEntries) ||
-           !html.isBlank(relations.creditSourceEntries))
-          &&
+          !html.isBlank(relations.artistCommentaryEntries) &&
             html.tag('hr', {class: 'main-separator'}),
 
           language.encapsulate('releaseInfo.additionalFiles', capsule =>
@@ -213,15 +209,10 @@ export default {
             relations.artistCommentaryEntries,
           ]),
 
-          html.tags([
-            relations.contentContentHeading.clone()
-              .slots({
-                attributes: {id: 'crediting-sources'},
-                string: 'misc.creditingSources',
-              }),
-
-            relations.creditSourceEntries,
-          ]),
+          relations.creditingSourcesSection.slots({
+            id: 'crediting-sources',
+            string: 'misc.creditingSources',
+          }),
         ],
 
         navLinkStyle: 'hierarchical',
diff --git a/src/content/dependencies/generateCollapsedContentEntrySection.js b/src/content/dependencies/generateCollapsedContentEntrySection.js
new file mode 100644
index 00000000..ae3652c7
--- /dev/null
+++ b/src/content/dependencies/generateCollapsedContentEntrySection.js
@@ -0,0 +1,44 @@
+export default {
+  contentDependencies: [
+    'generateCommentaryEntry',
+    'generateContentContentHeading',
+  ],
+
+  extraDependencies: ['html'],
+
+  relations: (relation, entries, thing) => ({
+    contentContentHeading:
+      relation('generateContentContentHeading', thing),
+
+    entries:
+      entries
+        .map(entry => relation('generateCommentaryEntry', entry)),
+  }),
+
+  slots: {
+    id: {type: 'string'},
+    string: {type: 'string'},
+  },
+
+  generate: (relations, slots, {html}) =>
+    html.tag('details',
+      {[html.onlyIfContent]: true},
+
+      slots.id && [
+        {class: 'memorable'},
+        {'data-memorable-id': slots.id},
+      ],
+
+      [
+        relations.contentContentHeading.slots({
+          attributes: [
+            slots.id && {id: slots.id},
+          ],
+
+          string: slots.string,
+          summary: true,
+        }),
+
+        relations.entries,
+      ]),
+};
diff --git a/src/content/dependencies/generateContentContentHeading.js b/src/content/dependencies/generateContentContentHeading.js
index 555abb6b..54ffa205 100644
--- a/src/content/dependencies/generateContentContentHeading.js
+++ b/src/content/dependencies/generateContentContentHeading.js
@@ -9,7 +9,9 @@ export default {
 
   data: (thing) => ({
     name:
-      thing.name,
+      (thing
+        ? thing.name
+        : null),
   }),
 
   slots: {
@@ -21,6 +23,11 @@ export default {
     string: {
       type: 'string',
     },
+
+    summary: {
+      type: 'boolean',
+      default: false,
+    },
   },
 
   generate: (data, relations, slots, {html, language}) =>
@@ -28,14 +35,42 @@ export default {
       attributes: slots.attributes,
 
       title:
-        slots.string &&
-        language.$(slots.string, {
-          thing:
-            html.tag('i', data.name),
-        }),
+        (() => {
+          if (!slots.string) return html.blank();
+
+          const options = {};
+
+          if (slots.summary) {
+            options.cue =
+              html.tag('span', {class: 'cue'},
+                language.$(slots.string, 'cue'));
+          }
+
+          if (data.name) {
+            options.thing = html.tag('i', data.name);
+          }
+
+          if (slots.summary) {
+            return html.tags([
+              html.tag('span', {class: 'when-open'},
+                language.$(slots.string, options)),
+
+              html.tag('span', {class: 'when-collapsed'},
+                language.$(slots.string, 'collapsed', options)),
+            ]);
+          } else {
+            return language.$(slots.string, options);
+          }
+        })(),
 
       stickyTitle:
-        slots.string &&
-        language.$(slots.string, 'sticky'),
+        (slots.string
+          ? language.$(slots.string, 'sticky')
+          : html.blank()),
+
+      tag:
+        (slots.summary
+          ? 'summary'
+          : 'p'),
     }),
 };
diff --git a/src/content/dependencies/generateFlashInfoPage.js b/src/content/dependencies/generateFlashInfoPage.js
index a7c23eae..effc07ff 100644
--- a/src/content/dependencies/generateFlashInfoPage.js
+++ b/src/content/dependencies/generateFlashInfoPage.js
@@ -1,11 +1,24 @@
 import {empty} from '#sugar';
 
+function checkInterrupted(which, relations, {html}) {
+  if (
+    !html.isBlank(relations.contributorContributionList) ||
+    !html.isBlank(relations.featuredTracksList)
+  ) return true;
+
+  if (which === 'crediting-sources') {
+    if (!html.isBlank(relations.artistCommentaryEntries)) return true;
+  }
+
+  return false;
+}
+
 export default {
   contentDependencies: [
     'generateAdditionalNamesBox',
+    'generateCollapsedContentEntrySection',
     'generateCommentaryEntry',
     'generateCommentaryContentHeading',
-    'generateContentContentHeading',
     'generateContentHeading',
     'generateContributionList',
     'generateFlashActSidebar',
@@ -56,9 +69,6 @@ export default {
     contentHeading:
       relation('generateContentHeading'),
 
-    contentContentHeading:
-      relation('generateContentContentHeading', flash),
-
     commentaryContentHeading:
       relation('generateCommentaryContentHeading', flash),
 
@@ -81,9 +91,10 @@ export default {
       flash.commentary
         .map(entry => relation('generateCommentaryEntry', entry)),
 
-    creditSourceEntries:
-      flash.creditingSources
-        .map(entry => relation('generateCommentaryEntry', entry)),
+    creditingSourcesSection:
+      relation('generateCollapsedContentEntrySection',
+        flash.creditingSources,
+        flash),
   }),
 
   data: (_query, flash) => ({
@@ -135,11 +146,11 @@ export default {
             {[html.joinChildren]: html.tag('br')},
 
             language.encapsulate('releaseInfo', capsule => [
-              (!html.isBlank(relations.contributorContributionList) ||
-               !html.isBlank(relations.featuredTracksList)) &&
+              checkInterrupted('commentary', relations, {html}) &&
                 relations.readCommentaryLine,
 
-              !html.isBlank(relations.creditSourceEntries) &&
+              checkInterrupted('crediting-sources', relations, {html}) &&
+              !html.isBlank(relations.creditingSourcesSection) &&
                 language.encapsulate(capsule, 'readCreditingSources', capsule =>
                   language.$(capsule, {
                     link:
@@ -179,15 +190,10 @@ export default {
             relations.artistCommentaryEntries,
           ]),
 
-          html.tags([
-            relations.contentContentHeading.clone()
-              .slots({
-                attributes: {id: 'crediting-sources'},
-                string: 'misc.creditingSources',
-              }),
-
-            relations.creditSourceEntries,
-          ]),
+          relations.creditingSourcesSection.slots({
+            id: 'crediting-sources',
+            string: 'misc.creditingSources',
+          }),
         ],
 
         navLinkStyle: 'hierarchical',
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index efd0ec9f..bcae9748 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -1,3 +1,24 @@
+function checkInterrupted(which, relations, {html}) {
+  if (
+    !html.isBlank(relations.additionalFilesList) ||
+    !html.isBlank(relations.contributorContributionList) ||
+    !html.isBlank(relations.flashesThatFeatureList) ||
+    !html.isBlank(relations.lyricsSection) ||
+    !html.isBlank(relations.midiProjectFilesList) ||
+    !html.isBlank(relations.referencedByTracksList) ||
+    !html.isBlank(relations.referencedTracksList) ||
+    !html.isBlank(relations.sampledByTracksList) ||
+    !html.isBlank(relations.sampledTracksList) ||
+    !html.isBlank(relations.sheetMusicFilesList)
+  ) return true;
+
+  if (which === 'crediting-sources' || which === 'referencing-sources') {
+    if (!html.isBlank(relations.artistCommentarySection)) return true;
+  }
+
+  return false;
+}
+
 export default {
   contentDependencies: [
     'generateAdditionalFilesList',
@@ -8,7 +29,7 @@ export default {
     'generateAlbumSidebar',
     'generateAlbumStyleTags',
     'generateCommentaryEntry',
-    'generateContentContentHeading',
+    'generateCollapsedContentEntrySection',
     'generateContentHeading',
     'generateContributionList',
     'generateLyricsSection',
@@ -81,9 +102,6 @@ export default {
     contentHeading:
       relation('generateContentHeading'),
 
-    contentContentHeading:
-      relation('generateContentContentHeading', track),
-
     releaseInfo:
       relation('generateTrackReleaseInfo', track),
 
@@ -130,13 +148,15 @@ export default {
     artistCommentarySection:
       relation('generateTrackArtistCommentarySection', track),
 
-    creditingSourceEntries:
-      track.creditingSources
-        .map(entry => relation('generateCommentaryEntry', entry)),
+    creditingSourcesSection:
+      relation('generateCollapsedContentEntrySection',
+        track.creditingSources,
+        track),
 
-    referencingSourceEntries:
-      track.referencingSources
-        .map(entry => relation('generateCommentaryEntry', entry)),
+    referencingSourcesSection:
+      relation('generateCollapsedContentEntrySection',
+        track.referencingSources,
+        track),
   }),
 
   data: (query, track) => ({
@@ -212,21 +232,11 @@ export default {
                         language.$(capsule, 'link')),
                   })),
 
-              (!html.isBlank(relations.additionalFilesList) ||
-               !html.isBlank(relations.contributorContributionList) ||
-               !html.isBlank(relations.creditingSourceEntries) ||
-               !html.isBlank(relations.flashesThatFeatureList) ||
-               !html.isBlank(relations.lyricsSection) ||
-               !html.isBlank(relations.midiProjectFilesList) ||
-               !html.isBlank(relations.referencedByTracksList) ||
-               !html.isBlank(relations.referencedTracksList) ||
-               !html.isBlank(relations.referencingSourceEntries) ||
-               !html.isBlank(relations.sampledByTracksList) ||
-               !html.isBlank(relations.sampledTracksList) ||
-               !html.isBlank(relations.sheetMusicFilesList)) &&
+              checkInterrupted('commentary', relations, {html}) &&
                 relations.readCommentaryLine,
 
-              !html.isBlank(relations.creditingSourceEntries) &&
+              !html.isBlank(relations.creditingSourcesSection) &&
+              checkInterrupted('crediting-sources', relations, {html}) &&
                 language.encapsulate(capsule, 'readCreditingSources', capsule =>
                   language.$(capsule, {
                     link:
@@ -235,7 +245,8 @@ export default {
                         language.$(capsule, 'link')),
                   })),
 
-              !html.isBlank(relations.referencingSourceEntries) &&
+              !html.isBlank(relations.referencingSourcesSection) &&
+              checkInterrupted('referencing-sources', relations, {html}) &&
                 language.encapsulate(capsule, 'readReferencingSources', capsule =>
                   language.$(capsule, {
                     link:
@@ -368,9 +379,7 @@ export default {
 
           data.firstTrackInSingle &&
           (!html.isBlank(relations.lyricsSection) ||
-           !html.isBlank(relations.artistCommentarySection) ||
-           !html.isBlank(relations.creditingSourceEntries) ||
-           !html.isBlank(relations.referencingSourceEntries)) &&
+           !html.isBlank(relations.artistCommentarySection)) &&
             html.tag('hr', {class: 'main-separator'}),
 
           data.needsLyrics &&
@@ -412,25 +421,15 @@ export default {
 
           relations.artistCommentarySection,
 
-          html.tags([
-            relations.contentContentHeading.clone()
-              .slots({
-                attributes: {id: 'crediting-sources'},
-                string: 'misc.creditingSources',
-              }),
-
-            relations.creditingSourceEntries,
-          ]),
-
-          html.tags([
-            relations.contentContentHeading.clone()
-              .slots({
-                attributes: {id: 'referencing-sources'},
-                string: 'misc.referencingSources',
-              }),
+          relations.creditingSourcesSection.slots({
+            id: 'crediting-sources',
+            string: 'misc.creditingSources',
+          }),
 
-            relations.referencingSourceEntries,
-          ]),
+          relations.referencingSourcesSection.slots({
+            id: 'referencing-sources',
+            string: 'misc.referencingSources',
+          }),
         ],
 
         navLinkStyle: 'hierarchical',