content: generateStickyHeadingContainer

5 files changed, 90 insertions, 25 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index f5dc6bfd..07649a23 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -34,6 +34,8 @@ export default {
     return relations.layout
       .slots({
         title: language.$('albumPage.title', {album: data.name}),
+        headingMode: 'sticky',
+
         styleRules: [
           relations.albumStyleRules,
           relations.colorStyleRules,
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 2d18fed3..68680060 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -34,26 +34,47 @@ export default {
         alt: {
           type: 'string',
         },
+
+        displayMode: {
+          validate: v => v.is('primary', 'thumbnail'),
+          default: 'primary',
+        },
       },
 
       content(slots) {
-        return html.tag('div', {id: 'cover-art-container'}, [
-          relations.image
-            .slots({
-              path: slots.path,
-              alt: slots.alt,
-              thumb: 'medium',
-              id: 'cover-art',
-              link: true,
-              square: true,
-            }),
-
-          !empty(relations.tagLinks) &&
-            html.tag('p',
-              language.$('releaseInfo.artTags.inline', {
-                tags: language.formatUnitList(relations.tagLinks),
-              })),
-          ]);
+        switch (slots.displayMode) {
+          case 'primary':
+            return html.tag('div', {id: 'cover-art-container'}, [
+              relations.image
+                .slots({
+                  path: slots.path,
+                  alt: slots.alt,
+                  thumb: 'medium',
+                  id: 'cover-art',
+                  link: true,
+                  square: true,
+                }),
+
+              !empty(relations.tagLinks) &&
+                html.tag('p',
+                  language.$('releaseInfo.artTags.inline', {
+                    tags: language.formatUnitList(relations.tagLinks),
+                  })),
+              ]);
+
+          case 'thumbnail':
+            return relations.image
+              .slots({
+                path: slots.path,
+                alt: slots.alt,
+                thumb: 'small',
+                link: false,
+                square: true,
+              });
+
+          case 'default':
+            return html.blank();
+        }
       },
     });
   },
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index 86054437..e9de61df 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -3,6 +3,7 @@ import {empty, openAggregate} from '../../util/sugar.js';
 export default {
   contentDependencies: [
     'generateFooterLocalizationLinks',
+    'generateStickyHeadingContainer',
   ],
 
   extraDependencies: [
@@ -20,6 +21,9 @@ export default {
     relations.footerLocalizationLinks =
       relation('generateFooterLocalizationLinks');
 
+    relations.stickyHeadingContainer =
+      relation('generateStickyHeadingContainer');
+
     return relations;
   },
 
@@ -168,14 +172,11 @@ export default {
         if (!html.isBlank(slots.title)) {
           switch (slots.headingMode) {
             case 'sticky':
-              /*
-                generateStickyHeadingContainer({
-                  coverSrc: cover.src,
-                  coverAlt: cover.alt,
-                  coverArtTags: cover.artTags,
-                  title,
-                })
-              */
+              titleHTML =
+                relations.stickyHeadingContainer.slots({
+                  title: slots.title,
+                  cover: slots.cover,
+                });
               break;
             case 'static':
               titleHTML = html.tag('h1', slots.title);
diff --git a/src/content/dependencies/generateStickyHeadingContainer.js b/src/content/dependencies/generateStickyHeadingContainer.js
new file mode 100644
index 00000000..c08ca08d
--- /dev/null
+++ b/src/content/dependencies/generateStickyHeadingContainer.js
@@ -0,0 +1,39 @@
+export default {
+  extraDependencies: ['html'],
+
+  generate({html}) {
+    return html.template({
+      annotation: `generateStickyHeadingContainer`,
+
+      slots: {
+        title: {type: 'html'},
+        cover: {type: 'html'},
+      },
+
+      content(slots) {
+        const hasCover = !html.isBlank(slots.cover);
+
+        return html.tag('div',
+          {
+            class: [
+              'content-sticky-heading-container',
+              hasCover && 'has-cover',
+            ],
+          },
+          [
+            html.tag('div', {class: 'content-sticky-heading-row'}, [
+              html.tag('h1', slots.title),
+
+              hasCover &&
+                html.tag('div', {class: 'content-sticky-heading-cover-container'},
+                  html.tag('div', {class: 'content-sticky-heading-cover'},
+                    slots.cover.slot('displayMode', 'thumbnail')))
+            ]),
+
+            html.tag('div', {class: 'content-sticky-subheading-row'},
+              html.tag('h2', {class: 'content-sticky-subheading'})),
+          ]);
+      },
+    });
+  },
+};
diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js
index 570aac9d..98321d4f 100644
--- a/src/content/dependencies/generateTrackInfoPage.js
+++ b/src/content/dependencies/generateTrackInfoPage.js
@@ -75,6 +75,8 @@ export default {
     return relations.layout
       .slots({
         title: language.$('trackPage.title', {track: data.name}),
+        headingMode: 'sticky',
+
         styleRules: [
           relations.albumStyleRules,
           relations.colorStyleRules,