diff options
Diffstat (limited to 'src/content/dependencies')
4 files changed, 123 insertions, 14 deletions
diff --git a/src/content/dependencies/generateArtistInfoPageChunkItem.js b/src/content/dependencies/generateArtistInfoPageChunkItem.js index af24e150..7987b642 100644 --- a/src/content/dependencies/generateArtistInfoPageChunkItem.js +++ b/src/content/dependencies/generateArtistInfoPageChunkItem.js @@ -28,6 +28,11 @@ export default { type: 'html', mutable: false, }, + + firstReleaseTooltip: { + type: 'html', + mutable: false, + }, }, generate: (relations, slots, {html, language}) => @@ -50,6 +55,18 @@ export default { return language.$(workingCapsule, workingOptions); } + if (!html.isBlank(slots.firstReleaseTooltip)) { + workingCapsule += '.firstRelease'; + workingOptions.firstRelease = + relations.textWithTooltip.slots({ + attributes: {class: 'first-release'}, + text: language.$(entryCapsule, 'firstRelease.term'), + tooltip: slots.firstReleaseTooltip, + }); + + return language.$(workingCapsule, workingOptions); + } + let anyAccent = false; if (!empty(slots.otherArtistLinks)) { diff --git a/src/content/dependencies/generateArtistInfoPageFirstReleaseTooltip.js b/src/content/dependencies/generateArtistInfoPageFirstReleaseTooltip.js new file mode 100644 index 00000000..e5ea3065 --- /dev/null +++ b/src/content/dependencies/generateArtistInfoPageFirstReleaseTooltip.js @@ -0,0 +1,80 @@ +import {sortChronologically} from '#sort'; +import {stitchArrays} from '#sugar'; + +export default { + contentDependencies: ['generateColorStyleAttribute', 'generateTooltip'], + extraDependencies: ['html', 'language'], + + query: (track) => ({ + rereleases: + sortChronologically(track.allReleases).slice(1), + }), + + relations: (relation, query, track) => ({ + tooltip: + relation('generateTooltip'), + + firstReleaseColorStyle: + relation('generateColorStyleAttribute', track.color), + + rereleaseColorStyles: + query.rereleases + .map(rerelease => + relation('generateColorStyleAttribute', rerelease.album.color)), + }), + + data: (query, track) => ({ + firstReleaseDate: + track.dateFirstReleased ?? + track.album.date, + + rereleaseAlbumNames: + query.rereleases + .map(rerelease => rerelease.album.name), + + rereleaseDates: + query.rereleases + .map(rerelease => + rerelease.dateFirstReleased ?? + rerelease.album.date), + }), + + generate: (data, relations, {html, language}) => + language.encapsulate('artistPage.creditList.entry.firstRelease', capsule => + relations.tooltip.slots({ + attributes: [ + {class: 'first-release-tooltip'}, + relations.firstReleaseColorStyle, + ], + + contentAttributes: [ + {[html.joinChildren]: html.tag('hr', {class: 'cute'})}, + ], + + content: + stitchArrays({ + colorStyle: relations.rereleaseColorStyles, + albumName: data.rereleaseAlbumNames, + date: data.rereleaseDates, + }).map(({colorStyle, albumName, date}) => + html.tags([ + language.$(capsule, 'rerelease', { + album: + html.metatag('blockwrap', + html.tag('a', + {href: '#'}, + colorStyle.slot('context', 'primary-only'), + + language.sanitize(albumName))), + }), + + html.tag('br'), + + language.formatRelativeDate(date, data.firstReleaseDate, { + considerRoundingDays: true, + approximate: true, + absolute: true, + }), + ])), + })), +}; diff --git a/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js b/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js index 8be3f404..744e7c5f 100644 --- a/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js +++ b/src/content/dependencies/generateArtistInfoPageTracksChunkItem.js @@ -4,6 +4,7 @@ import {empty} from '#sugar'; export default { contentDependencies: [ 'generateArtistInfoPageChunkItem', + 'generateArtistInfoPageFirstReleaseTooltip', 'generateArtistInfoPageOtherArtistLinks', 'generateArtistInfoPageRereleaseTooltip', 'linkTrack', @@ -63,16 +64,25 @@ export default { ]; } + // It's kinda awkward to perform this chronological sort here, + // per track, rather than just reusing the one that's done to + // sort all the items on the page altogether... but then, the + // sort for the page is actually *a different* sort, on purpsoe. + // That sort is according to the dates of the contributions; + // this is according to the dates of the tracks. Those can be + // different - and it's the latter that determines whether the + // track is a rerelease! + const allReleasesChronologically = + sortChronologically(query.track.allReleases); + + query.isFirstRelease = + allReleasesChronologically[0] === query.track; + query.isRerelease = - // It's kinda awkward to perform this chronological sort here, - // per track, rather than just reusing the one that's done to - // sort all the items on the page altogether... but then, the - // sort for the page is actually *a different* sort, on purpsoe. - // That sort is according to the dates of the contributions; - // this is according to the dates of the tracks. Those can be - // different - and it's the latter that determines whether the - // track is a rerelease! - sortChronologically(query.track.allReleases)[0] !== query.track; + allReleasesChronologically[0] !== query.track; + + query.hasOtherReleases = + !empty(query.track.otherReleases); return query; }, @@ -91,6 +101,11 @@ export default { (query.isRerelease ? relation('generateArtistInfoPageRereleaseTooltip', query.track) : null), + + firstReleaseTooltip: + (query.isFirstRelease && query.hasOtherReleases + ? relation('generateArtistInfoPageFirstReleaseTooltip', query.track) + : null), }), data: (query) => ({ @@ -108,6 +123,7 @@ export default { relations.template.slots({ otherArtistLinks: relations.otherArtistLinks, rereleaseTooltip: relations.rereleaseTooltip, + firstReleaseTooltip: relations.firstReleaseTooltip, annotation: (data.contribAnnotations diff --git a/src/content/dependencies/generatePageSidebarConjoinedBox.js b/src/content/dependencies/generatePageSidebarConjoinedBox.js index 05b1d469..7974c707 100644 --- a/src/content/dependencies/generatePageSidebarConjoinedBox.js +++ b/src/content/dependencies/generatePageSidebarConjoinedBox.js @@ -32,11 +32,7 @@ export default { .map((content, index, {length}) => [ content, index < length - 1 && - html.tag('hr', { - style: - `border-color: var(--primary-color); ` + - `border-style: none none dotted none`, - }), + html.tag('hr', {class: 'cute'}), ]), }), }; |