From 62d7e0146d471e7623e4ec384a928a828b8780e9 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 5 Oct 2023 23:22:43 -0300 Subject: content, data: experimental art tag sidebar --- .../generateArtTagAncestorDescendantMapList.js | 129 +++++++++++++++++++++ .../generateArtTagAncestorSidebarBox.js | 27 +++++ src/content/dependencies/generateArtTagInfoPage.js | 9 +- src/content/dependencies/generateArtTagSidebar.js | 31 +++++ 4 files changed, 192 insertions(+), 4 deletions(-) create mode 100644 src/content/dependencies/generateArtTagAncestorDescendantMapList.js create mode 100644 src/content/dependencies/generateArtTagAncestorSidebarBox.js create mode 100644 src/content/dependencies/generateArtTagSidebar.js (limited to 'src/content/dependencies') diff --git a/src/content/dependencies/generateArtTagAncestorDescendantMapList.js b/src/content/dependencies/generateArtTagAncestorDescendantMapList.js new file mode 100644 index 00000000..6b4e52df --- /dev/null +++ b/src/content/dependencies/generateArtTagAncestorDescendantMapList.js @@ -0,0 +1,129 @@ +import {stitchArrays} from '#sugar'; +import {filterMultipleArrays, sortMultipleArrays} from '#wiki-data'; + +export default { + contentDependencies: ['linkArtTagDynamically'], + extraDependencies: ['html', 'language'], + + // Recursion ain't too pretty! + + query(ancestorArtTag, targetArtTag) { + const recursive = artTag => { + const artTags = + artTag.directDescendantArtTags.slice(); + + const displayBriefly = + !artTags.includes(targetArtTag) && + artTags.length > 3; + + const artTagsIncludeTargetArtTag = + artTags.map(artTag => artTag.allDescendantArtTags.includes(targetArtTag)); + + const numExemptArtTags = + (displayBriefly + ? artTagsIncludeTargetArtTag + .filter(includesTargetArtTag => !includesTargetArtTag) + .length + : null); + + const sublists = + stitchArrays({ + artTag: artTags, + includesTargetArtTag: artTagsIncludeTargetArtTag, + }).map(({artTag, includesTargetArtTag}) => + (includesTargetArtTag + ? recursive(artTag) + : null)); + + if (displayBriefly) { + filterMultipleArrays(artTags, sublists, + (artTag, sublist) => + artTag === targetArtTag || + sublist !== null); + } else { + sortMultipleArrays(artTags, sublists, + (artTagA, artTagB, sublistA, sublistB) => + (sublistA && sublistB + ? 0 + : !sublistA && !sublistB + ? 0 + : sublistA + ? 1 + : -1)); + } + + return { + displayBriefly, + numExemptArtTags, + artTags, + sublists, + }; + }; + + return {root: recursive(ancestorArtTag)}; + }, + + relations(relation, query, _ancestorArtTag, _targetArtTag) { + const recursive = ({artTags, sublists}) => ({ + artTagLinks: + artTags + .map(artTag => relation('linkArtTagDynamically', artTag)), + + sublists: + sublists + .map(sublist => (sublist ? recursive(sublist) : null)), + }); + + return {root: recursive(query.root)}; + }, + + data(query, _ancestorArtTag, targetArtTag) { + const recursive = ({displayBriefly, numExemptArtTags, artTags, sublists}) => ({ + displayBriefly, + numExemptArtTags, + + artTagsAreTargetTag: + artTags + .map(artTag => artTag === targetArtTag), + + sublists: + sublists + .map(sublist => (sublist ? recursive(sublist) : null)), + }); + + return {root: recursive(query.root)}; + }, + + generate(data, relations, {html, language}) { + const recursive = (dataNode, relationsNode) => + html.tag('dl', [ + dataNode.displayBriefly && + html.tag('dt', + language.$('artTagSidebar.otherTagsExempt', { + tags: + language.countArtTags(dataNode.numExemptArtTags, {unit: true}), + })), + + stitchArrays({ + isTargetTag: dataNode.artTagsAreTargetTag, + dataSublist: dataNode.sublists, + + artTagLink: relationsNode.artTagLinks, + relationsSublist: relationsNode.sublists, + }).map(({ + isTargetTag, dataSublist, + artTagLink, relationsSublist, + }) => [ + html.tag('dt', + {class: (dataSublist || isTargetTag) && 'current'}, + artTagLink), + + dataSublist && + html.tag('dd', + recursive(dataSublist, relationsSublist)), + ]), + ]); + + return recursive(data.root, relations.root); + }, +}; diff --git a/src/content/dependencies/generateArtTagAncestorSidebarBox.js b/src/content/dependencies/generateArtTagAncestorSidebarBox.js new file mode 100644 index 00000000..ea85c2b2 --- /dev/null +++ b/src/content/dependencies/generateArtTagAncestorSidebarBox.js @@ -0,0 +1,27 @@ +export default { + contentDependencies: [ + 'generateArtTagAncestorDescendantMapList', + 'linkArtTagDynamically', + ], + + extraDependencies: ['html'], + + relations: (relation, ancestorArtTag, descendantArtTag) => ({ + ancestorArtTagLink: + relation('linkArtTagDynamically', ancestorArtTag), + + ancestorArtTagMapList: + relation('generateArtTagAncestorDescendantMapList', + ancestorArtTag, + descendantArtTag), + }), + + generate: (relations, {html}) => ({ + content: html.tags([ + html.tag('h2', + relations.ancestorArtTagLink), + + relations.ancestorArtTagMapList, + ]), + }), +}; diff --git a/src/content/dependencies/generateArtTagInfoPage.js b/src/content/dependencies/generateArtTagInfoPage.js index 7b9d47b9..be25cd97 100644 --- a/src/content/dependencies/generateArtTagInfoPage.js +++ b/src/content/dependencies/generateArtTagInfoPage.js @@ -3,6 +3,7 @@ import {empty, unique} from '#sugar'; export default { contentDependencies: [ 'generateArtTagNavLinks', + 'generateArtTagSidebar', 'generateContentHeading', 'generatePageLayout', 'linkArtTagGallery', @@ -37,6 +38,9 @@ export default { relations.navLinks = relation('generateArtTagNavLinks', artTag); + relations.sidebar = + relation('generateArtTagSidebar', artTag); + const info = sec.info = {}; if (artTag.description) { @@ -180,10 +184,7 @@ export default { navLinkStyle: 'hierarchical', navLinks: relations.navLinks.content, - leftSidebarMultiple: [ - {content: `I'm a sidebar.`}, - {content: `I am another sidebar.`}, - ], + ...relations.sidebar, }); }, }; diff --git a/src/content/dependencies/generateArtTagSidebar.js b/src/content/dependencies/generateArtTagSidebar.js new file mode 100644 index 00000000..51e53d20 --- /dev/null +++ b/src/content/dependencies/generateArtTagSidebar.js @@ -0,0 +1,31 @@ +import {collectTreeLeaves} from '#wiki-data'; + +export default { + contentDependencies: ['generateArtTagAncestorSidebarBox'], + extraDependencies: ['wikiData'], + + sprawl: ({artTagData}) => + ({artTagData}), + + query(sprawl, artTag) { + const baobab = artTag.ancestorArtTagBaobabTree; + const uniqueLeaves = new Set(collectTreeLeaves(baobab)); + + // Just match the order in tag data. + const furthestAncestorArtTags = + sprawl.artTagData + .filter(artTag => uniqueLeaves.has(artTag)); + + return {furthestAncestorArtTags}; + }, + + relations: (relation, query, sprawl, artTag) => ({ + ancestorBoxes: + query.furthestAncestorArtTags + .map(ancestorArtTag => + relation('generateArtTagAncestorSidebarBox', ancestorArtTag, artTag)), + }), + + generate: (relations) => + ({leftSidebarMultiple: relations.ancestorBoxes}), +}; -- cgit 1.3.0-6-gf8a5