diff options
Diffstat (limited to 'src/content/dependencies/generateGroupInfoPageAlbumsSection.js')
-rw-r--r-- | src/content/dependencies/generateGroupInfoPageAlbumsSection.js | 128 |
1 files changed, 66 insertions, 62 deletions
diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsSection.js b/src/content/dependencies/generateGroupInfoPageAlbumsSection.js index d1dab542..8899e98e 100644 --- a/src/content/dependencies/generateGroupInfoPageAlbumsSection.js +++ b/src/content/dependencies/generateGroupInfoPageAlbumsSection.js @@ -66,67 +66,71 @@ export default { }), generate: (relations, {html, language}) => - html.tags([ - relations.contentHeading - .slots({ - tag: 'h2', - title: language.$('groupInfoPage.albumList.title'), - }), - - html.tag('p', - {[html.onlyIfSiblings]: true}, - language.$('groupInfoPage.viewAlbumGallery', { - link: - relations.galleryLink - .slot('content', language.$('groupInfoPage.viewAlbumGallery.link')), - })), - - html.tag('ul', - {[html.onlyIfContent]: true}, - - stitchArrays({ - albumLink: relations.albumLinks, - otherGroupLinks: relations.otherGroupLinks, - datetimestamp: relations.datetimestamps, - albumColorStyle: relations.albumColorStyles, - }).map(({ - albumLink, - otherGroupLinks, - datetimestamp, - albumColorStyle, - }) => { - const prefix = 'groupInfoPage.albumList.item'; - const parts = [prefix]; - const options = {}; - - options.album = - albumLink.slot('color', false); - - if (datetimestamp) { - parts.push('withYear'); - options.yearAccent = - language.$(prefix, 'yearAccent', { - year: - datetimestamp.slots({style: 'year', tooltip: true}), - }); - } - - if (!empty(otherGroupLinks)) { - parts.push('withOtherGroup'); - options.otherGroupAccent = - html.tag('span', {class: 'other-group-accent'}, - language.$(prefix, 'otherGroupAccent', { - groups: - language.formatConjunctionList( - otherGroupLinks.map(groupLink => - groupLink.slot('color', false))), - })); - } - - return ( - html.tag('li', + language.encapsulate('groupInfoPage', pageCapsule => + language.encapsulate(pageCapsule, 'albumList', listCapsule => + html.tags([ + relations.contentHeading + .slots({ + tag: 'h2', + title: language.$(listCapsule, 'title'), + }), + + html.tag('p', + {[html.onlyIfSiblings]: true}, + + language.encapsulate(pageCapsule, 'viewAlbumGallery', capsule => + language.$(capsule, { + link: + relations.galleryLink + .slot('content', language.$(capsule, 'link')), + }))), + + html.tag('ul', + {[html.onlyIfContent]: true}, + + stitchArrays({ + albumLink: relations.albumLinks, + otherGroupLinks: relations.otherGroupLinks, + datetimestamp: relations.datetimestamps, + albumColorStyle: relations.albumColorStyles, + }).map(({ + albumLink, + otherGroupLinks, + datetimestamp, albumColorStyle, - language.$(...parts, options))); - })), - ]), + }) => + html.tag('li', + albumColorStyle, + + language.encapsulate(listCapsule, 'item', itemCapsule => + language.encapsulate(itemCapsule, workingCapsule => { + const workingOptions = {}; + + workingOptions.album = + albumLink.slot('color', false); + + if (datetimestamp) { + workingCapsule += '.withYear'; + workingOptions.yearAccent = + language.$(itemCapsule, 'yearAccent', { + year: + datetimestamp.slots({style: 'year', tooltip: true}), + }); + } + + if (!empty(otherGroupLinks)) { + workingCapsule += '.withOtherGroup'; + workingOptions.otherGroupAccent = + html.tag('span', {class: 'other-group-accent'}, + language.$(itemCapsule, 'otherGroupAccent', { + groups: + language.formatConjunctionList( + otherGroupLinks.map(groupLink => + groupLink.slot('color', false))), + })); + } + + return language.$(workingCapsule, workingOptions); + }))))), + ]))), }; |