diff options
Diffstat (limited to 'src')
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, |