diff options
3 files changed, 159 insertions, 163 deletions
diff --git a/src/content/dependencies/generateFlashActSidebar.js b/src/content/dependencies/generateFlashActSidebar.js index 7c1aae7d..1421dde9 100644 --- a/src/content/dependencies/generateFlashActSidebar.js +++ b/src/content/dependencies/generateFlashActSidebar.js @@ -1,182 +1,30 @@ -import {stitchArrays} from '#sugar'; - export default { contentDependencies: [ + 'generateFlashActSidebarCurrentActBox', + 'generateFlashActSidebarSideMapBox', 'generatePageSidebar', - 'generatePageSidebarBox', - 'linkFlash', - 'linkFlashAct', - 'linkFlashIndex', ], - extraDependencies: ['getColors', 'html', 'language', 'wikiData'], - - sprawl: ({flashActData, flashSideData}) => ({flashActData, flashSideData}), - - query(sprawl, act, flash) { - const sideNames = - sprawl.flashSideData - .map(side => side.name); - - const sideColors = - sprawl.flashSideData - .map(side => side.color); - - const sideActs = - sprawl.flashSideData - .map(side => side.acts); - - const currentActFlashes = - act.flashes; - - const currentFlashIndex = - currentActFlashes.indexOf(flash); - - const currentSideIndex = - sideActs.findIndex(acts => acts.includes(act)); - - const currentSideActs = - sideActs[currentSideIndex]; - - const currentActIndex = - currentSideActs.indexOf(act); - - const fallbackListTerminology = - 'entriesInThisSection'; - - return { - sideNames, - sideColors, - sideActs, - - currentSideIndex, - currentSideActs, - currentActIndex, - currentActFlashes, - currentFlashIndex, - - fallbackListTerminology, - }; - }, - - relations: (relation, query, sprawl, act, _flash) => ({ + relations: (relation, act, flash) => ({ sidebar: relation('generatePageSidebar'), currentActBox: - relation('generatePageSidebarBox'), + relation('generateFlashActSidebarCurrentActBox', act, flash), sideMapBox: - relation('generatePageSidebarBox'), - - currentActLink: - relation('linkFlashAct', act), - - flashIndexLink: - relation('linkFlashIndex'), - - sideActLinks: - query.sideActs - .map(acts => acts - .map(act => relation('linkFlashAct', act))), - - currentActFlashLinks: - act.flashes - .map(flash => relation('linkFlash', flash)), + relation('generateFlashActSidebarSideMapBox', act, flash), }), - data: (query, sprawl, act, flash) => ({ + data: (_act, flash) => ({ isFlashActPage: !flash, - - sideColors: query.sideColors, - sideNames: query.sideNames, - - currentSideIndex: query.currentSideIndex, - currentActIndex: query.currentActIndex, - currentFlashIndex: query.currentFlashIndex, - - customListTerminology: act.listTerminology, - fallbackListTerminology: query.fallbackListTerminology, }), - generate(data, relations, {getColors, html, language}) { - const currentActBoxContent = html.tags([ - html.tag('h1', relations.currentActLink), - - html.tag('details', - (data.isFlashActPage - ? {} - : {class: 'current', open: true}), - [ - html.tag('summary', - html.tag('span', {class: 'group-name'}, - (data.customListTerminology - ? language.sanitize(data.customListTerminology) - : language.$('flashSidebar.flashList', data.fallbackListTerminology)))), - - html.tag('ul', - relations.currentActFlashLinks - .map((flashLink, index) => - html.tag('li', - index === data.currentFlashIndex && - {class: 'current'}, - - flashLink))), - ]), - ]); - - const sideMapBoxContent = html.tags([ - html.tag('h1', relations.flashIndexLink), - - stitchArrays({ - sideName: data.sideNames, - sideColor: data.sideColors, - actLinks: relations.sideActLinks, - }).map(({sideName, sideColor, actLinks}, sideIndex) => - html.tag('details', - sideIndex === data.currentSideIndex && - {class: 'current'}, - - data.isFlashActPage && - sideIndex === data.currentSideIndex && - {open: true}, - - sideColor && - {style: `--primary-color: ${getColors(sideColor).primary}`}, - - [ - html.tag('summary', - html.tag('span', {class: 'group-name'}, - sideName)), - - html.tag('ul', - actLinks.map((actLink, actIndex) => - html.tag('li', - sideIndex === data.currentSideIndex && - actIndex === data.currentActIndex && - {class: 'current'}, - - actLink))), - ])), - ]); - - const sideMapBox = - relations.sideMapBox.slots({ - attributes: {class: 'flash-act-map-sidebar-box'}, - content: sideMapBoxContent, - }); - - const currentActBox = - relations.currentActBox.slots({ - attributes: {class: 'flash-current-act-sidebar-box'}, - content: currentActBoxContent, - }); - - return relations.sidebar.slots({ + generate: (data, relations) => + relations.sidebar.slots({ boxes: (data.isFlashActPage - ? [sideMapBox, currentActBox] - : [currentActBox, sideMapBox]), - }); - }, + ? [relations.sideMapBox, relations.currentActBox] + : [relations.currentActBox, relations.sideMapBox]), + }), }; diff --git a/src/content/dependencies/generateFlashActSidebarCurrentActBox.js b/src/content/dependencies/generateFlashActSidebarCurrentActBox.js new file mode 100644 index 00000000..c5426a41 --- /dev/null +++ b/src/content/dependencies/generateFlashActSidebarCurrentActBox.js @@ -0,0 +1,63 @@ +export default { + contentDependencies: [ + 'generatePageSidebarBox', + 'linkFlash', + 'linkFlashAct', + ], + + extraDependencies: ['html', 'language'], + + relations: (relation, act, _flash) => ({ + box: + relation('generatePageSidebarBox'), + + actLink: + relation('linkFlashAct', act), + + flashLinks: + act.flashes + .map(flash => relation('linkFlash', flash)), + }), + + data: (act, flash) => ({ + isFlashActPage: + !flash, + + currentFlashIndex: + act.flashes.indexOf(flash), + + customListTerminology: + act.listTerminology, + }), + + generate: (data, relations, {html, language}) => + relations.box.slots({ + attributes: {class: 'flash-act-map-sidebar-box'}, + + content: [ + html.tag('h1', relations.actLink), + + html.tag('details', + (data.isFlashActPage + ? {} + : {class: 'current', open: true}), + + [ + html.tag('summary', + html.tag('span', {class: 'group-name'}, + (data.customListTerminology + ? language.sanitize(data.customListTerminology) + : language.$('flashSidebar.flashList.entriesInThisSection')))), + + html.tag('ul', + relations.flashLinks + .map((flashLink, index) => + html.tag('li', + index === data.currentFlashIndex && + {class: 'current'}, + + flashLink))), + ]), + ], + }), +}; diff --git a/src/content/dependencies/generateFlashActSidebarSideMapBox.js b/src/content/dependencies/generateFlashActSidebarSideMapBox.js new file mode 100644 index 00000000..7e41ae0a --- /dev/null +++ b/src/content/dependencies/generateFlashActSidebarSideMapBox.js @@ -0,0 +1,85 @@ +import {stitchArrays} from '#sugar'; + +export default { + contentDependencies: [ + 'generatePageSidebarBox', + 'linkFlashAct', + 'linkFlashIndex', + ], + + extraDependencies: ['getColors', 'html', 'wikiData'], + + sprawl: ({flashSideData}) => ({flashSideData}), + + relations: (relation, sprawl, _act, _flash) => ({ + box: + relation('generatePageSidebarBox'), + + flashIndexLink: + relation('linkFlashIndex'), + + sideActLinks: + sprawl.flashSideData + .map(side => side.acts + .map(act => relation('linkFlashAct', act))), + }), + + data: (sprawl, act, flash) => ({ + isFlashActPage: + !flash, + + sideNames: + sprawl.flashSideData + .map(side => side.name), + + sideColors: + sprawl.flashSideData + .map(side => side.color), + + currentSideIndex: + sprawl.flashSideData.indexOf(act.side), + + currentActIndex: + act.side.acts.indexOf(act), + }), + + generate: (data, relations, {getColors, html}) => + relations.box.slots({ + attributes: {class: 'flash-act-map-sidebar-box'}, + + content: [ + html.tag('h1', relations.flashIndexLink), + + stitchArrays({ + sideName: data.sideNames, + sideColor: data.sideColors, + actLinks: relations.sideActLinks, + }).map(({sideName, sideColor, actLinks}, sideIndex) => + html.tag('details', + sideIndex === data.currentSideIndex && + {class: 'current'}, + + data.isFlashActPage && + sideIndex === data.currentSideIndex && + {open: true}, + + sideColor && + {style: `--primary-color: ${getColors(sideColor).primary}`}, + + [ + html.tag('summary', + html.tag('span', {class: 'group-name'}, + sideName)), + + html.tag('ul', + actLinks.map((actLink, actIndex) => + html.tag('li', + sideIndex === data.currentSideIndex && + actIndex === data.currentActIndex && + {class: 'current'}, + + actLink))), + ])), + ], + }), +}; |