diff options
| -rw-r--r-- | src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js | 114 | ||||
| -rw-r--r-- | src/content/dependencies/generateGroupInfoPageAlbumsListItem.js | 77 |
2 files changed, 93 insertions, 98 deletions
diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js b/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js index 645e6a13..af6c3ed9 100644 --- a/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js +++ b/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js @@ -1,116 +1,34 @@ import {sortChronologically} from '#sort'; -import {empty, stitchArrays} from '#sugar'; export default { - contentDependencies: [ - 'generateAbsoluteDatetimestamp', - 'generateColorStyleAttribute', - 'linkAlbum', - 'linkGroup', - ], + contentDependencies: ['generateGroupInfoPageAlbumsListItem'], - extraDependencies: ['html', 'language'], + extraDependencies: ['html'], - query(group) { + query: (group) => ({ // Typically, a latestFirst: false (default) chronological sort would be // appropriate here, but navigation between adjacent albums in a group is a // rather "essential" movement or relationship in the wiki, and we consider // the sorting order of a group's gallery page (latestFirst: true) to be // "canonical" in this regard. We exactly match its sort here, but reverse // it, to still present earlier albums preceding later ones. - const albums = + albums: sortChronologically(group.albums.slice(), {latestFirst: true}) - .reverse(); - - const albumGroups = - albums - .map(album => album.groups); - - const albumOtherCategory = - albumGroups - .map(groups => groups - .map(group => group.category) - .find(category => category !== group.category)); - - const albumOtherGroups = - stitchArrays({ - groups: albumGroups, - category: albumOtherCategory, - }).map(({groups, category}) => - groups - .filter(group => group.category === category)); - - return {albums, albumOtherGroups}; - }, - - relations: (relation, query, _group) => ({ - albumColorStyles: - query.albums - .map(album => relation('generateColorStyleAttribute', album.color)), + .reverse(), + }), - albumLinks: + relations: (relation, query, group) => ({ + items: query.albums - .map(album => relation('linkAlbum', album)), - - otherGroupLinks: - query.albumOtherGroups - .map(groups => groups - .map(group => relation('linkGroup', group))), - - datetimestamps: - query.albums.map(album => - (album.date - ? relation('generateAbsoluteDatetimestamp', album.date) - : null)), + .map(album => + relation('generateGroupInfoPageAlbumsListItem', + album, + group)), }), - generate: (relations, {html, language}) => - language.encapsulate('groupInfoPage.albumList', listCapsule => - html.tag('ul', - {[html.onlyIfContent]: true}, - - stitchArrays({ - albumLink: relations.albumLinks, - otherGroupLinks: relations.otherGroupLinks, - datetimestamp: relations.datetimestamps, - albumColorStyle: relations.albumColorStyles, - }).map(({ - albumLink, - otherGroupLinks, - datetimestamp, - albumColorStyle, - }) => - 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))), - })); - } + generate: (relations, {html}) => + html.tag('ul', + {[html.onlyIfContent]: true}, - return language.$(workingCapsule, workingOptions); - })))))), + relations.items), }; diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js new file mode 100644 index 00000000..faa944ac --- /dev/null +++ b/src/content/dependencies/generateGroupInfoPageAlbumsListItem.js @@ -0,0 +1,77 @@ +import {empty} from '#sugar'; + +export default { + contentDependencies: [ + 'generateAbsoluteDatetimestamp', + 'generateColorStyleAttribute', + 'linkAlbum', + 'linkGroup', + ], + + extraDependencies: ['html', 'language'], + + query: (album, group) => { + const otherCategory = + album.groups + .map(group => group.category) + .find(category => category !== group.category); + + const otherGroups = + album.groups + .filter(group => group.category === otherCategory); + + return {otherGroups}; + }, + + relations: (relation, query, album) => ({ + colorStyle: + relation('generateColorStyleAttribute', album.color), + + albumLink: + relation('linkAlbum', album), + + datetimestamp: + (album.date + ? relation('generateAbsoluteDatetimestamp', album.date) + : null), + + otherGroupLinks: + query.otherGroups + .map(group => relation('linkGroup', group)), + }), + + generate: (relations, {html, language}) => + html.tag('li', + relations.colorStyle, + + language.encapsulate('groupInfoPage.albumList.item', itemCapsule => + language.encapsulate(itemCapsule, workingCapsule => { + const workingOptions = {}; + + workingOptions.album = + relations.albumLink.slot('color', false); + + if (relations.datetimestamp) { + workingCapsule += '.withYear'; + workingOptions.yearAccent = + language.$(itemCapsule, 'yearAccent', { + year: + relations.datetimestamp.slots({style: 'year', tooltip: true}), + }); + } + + if (!empty(relations.otherGroupLinks)) { + workingCapsule += '.withOtherGroup'; + workingOptions.otherGroupAccent = + html.tag('span', {class: 'other-group-accent'}, + language.$(itemCapsule, 'otherGroupAccent', { + groups: + language.formatConjunctionList( + relations.otherGroupLinks.map(groupLink => + groupLink.slot('color', false))), + })); + } + + return language.$(workingCapsule, workingOptions); + }))), +}; |