diff options
Diffstat (limited to 'src')
7 files changed, 205 insertions, 152 deletions
diff --git a/src/content/dependencies/generateAlbumSidebar.js b/src/content/dependencies/generateAlbumSidebar.js index 266a2662..f014139c 100644 --- a/src/content/dependencies/generateAlbumSidebar.js +++ b/src/content/dependencies/generateAlbumSidebar.js @@ -1,74 +1,46 @@ export default { contentDependencies: [ 'generateAlbumSidebarGroupBox', - 'generateAlbumSidebarTrackSection', + 'generateAlbumSidebarTrackListBox', 'generatePageSidebar', - 'linkAlbum', + 'generatePageSidebarConjoinedBox', ], - extraDependencies: ['html'], + relations: (relation, album, track) => ({ + sidebar: + relation('generatePageSidebar'), - relations(relation, album, track) { - const relations = {}; + conjoinedBox: + relation('generatePageSidebarConjoinedBox'), - relations.sidebar = - relation('generatePageSidebar'); + trackListBox: + relation('generateAlbumSidebarTrackListBox', album, track), - relations.albumLink = - relation('linkAlbum', album); - - relations.groupBoxes = + groupBoxes: album.groups.map(group => - relation('generateAlbumSidebarGroupBox', album, group)); - - relations.trackSections = - album.trackSections.map(trackSection => - relation('generateAlbumSidebarTrackSection', album, track, trackSection)); - - return relations; - }, - - data(album, track) { - return {isAlbumPage: !track}; - }, - - generate(data, relations, {html}) { - const multipleContents = []; - const multipleAttributes = []; - - multipleAttributes.push({class: 'track-list-sidebar-box'}); - multipleContents.push( - html.tags([ - html.tag('h1', relations.albumLink), - relations.trackSections, - ])); - - if (data.isAlbumPage) { - multipleAttributes.push(... - relations.groupBoxes - .map(() => ({class: 'individual-group-sidebar-box'}))); - - multipleContents.push(... - relations.groupBoxes - .map(content => content.slot('mode', 'album'))); - } else { - multipleAttributes.push({class: 'conjoined-group-sidebar-box'}); - multipleContents.push( - relations.groupBoxes - .flatMap((content, i, {length}) => [ - content.slot('mode', 'track'), - i < length - 1 && - html.tag('hr', { - style: `border-color: var(--primary-color); border-style: none none dotted none` - }), - ]) - .filter(Boolean)); - } - - return relations.sidebar.slots({ - // stickyMode: 'column', - multipleContents, - multipleAttributes, - }); - }, + relation('generateAlbumSidebarGroupBox', album, group)), + }), + + data: (album, track) => ({ + isAlbumPage: !track, + }), + + generate: (data, relations) => + relations.sidebar.slots({ + boxes: [ + relations.trackListBox, + + (data.isAlbumPage + ? relations.groupBoxes + .map(box => box.slot('mode', 'album')) + + : relations.conjoinedBox.slots({ + attributes: {class: 'conjoined-group-sidebar-box'}, + boxes: + relations.groupBoxes + .map(box => box.slot('mode', 'track')) + .map(box => box.content), /* TODO: Kludge. */ + })), + ], + }), }; diff --git a/src/content/dependencies/generateAlbumSidebarGroupBox.js b/src/content/dependencies/generateAlbumSidebarGroupBox.js index 93ebf5d4..00a96c31 100644 --- a/src/content/dependencies/generateAlbumSidebarGroupBox.js +++ b/src/content/dependencies/generateAlbumSidebarGroupBox.js @@ -3,6 +3,7 @@ import {atOffset, empty} from '#sugar'; export default { contentDependencies: [ + 'generatePageSidebarBox', 'linkAlbum', 'linkExternal', 'linkGroup', @@ -40,6 +41,9 @@ export default { relations(relation, query, album, group) { const relations = {}; + relations.box = + relation('generatePageSidebarBox'); + relations.groupLink = relation('linkGroup', group); @@ -72,39 +76,41 @@ export default { }, }, - generate(relations, slots, {html, language}) { - return html.tags([ - html.tag('h1', - language.$('albumSidebar.groupBox.title', { - group: relations.groupLink, - })), - - slots.mode === 'album' && - relations.description - ?.slot('mode', 'multiline'), - - !empty(relations.externalLinks) && - html.tag('p', - language.$('releaseInfo.visitOn', { - links: - language.formatDisjunctionList( - relations.externalLinks - .map(link => link.slot('context', 'group'))), - })), - - slots.mode === 'album' && - relations.nextAlbumLink && - html.tag('p', {class: 'group-chronology-link'}, - language.$('albumSidebar.groupBox.next', { - album: relations.nextAlbumLink, + generate: (relations, slots, {html, language}) => + relations.box.slots({ + attributes: {class: 'individual-group-sidebar-box'}, + content: [ + html.tag('h1', + language.$('albumSidebar.groupBox.title', { + group: relations.groupLink, })), - slots.mode === 'album' && - relations.previousAlbumLink && - html.tag('p', {class: 'group-chronology-link'}, - language.$('albumSidebar.groupBox.previous', { - album: relations.previousAlbumLink, - })), - ]); - }, + slots.mode === 'album' && + relations.description + ?.slot('mode', 'multiline'), + + !empty(relations.externalLinks) && + html.tag('p', + language.$('releaseInfo.visitOn', { + links: + language.formatDisjunctionList( + relations.externalLinks + .map(link => link.slot('context', 'group'))), + })), + + slots.mode === 'album' && + relations.nextAlbumLink && + html.tag('p', {class: 'group-chronology-link'}, + language.$('albumSidebar.groupBox.next', { + album: relations.nextAlbumLink, + })), + + slots.mode === 'album' && + relations.previousAlbumLink && + html.tag('p', {class: 'group-chronology-link'}, + language.$('albumSidebar.groupBox.previous', { + album: relations.previousAlbumLink, + })), + ], + }), }; diff --git a/src/content/dependencies/generateAlbumSidebarTrackListBox.js b/src/content/dependencies/generateAlbumSidebarTrackListBox.js new file mode 100644 index 00000000..3a244e3a --- /dev/null +++ b/src/content/dependencies/generateAlbumSidebarTrackListBox.js @@ -0,0 +1,31 @@ +export default { + contentDependencies: [ + 'generateAlbumSidebarTrackSection', + 'generatePageSidebarBox', + 'linkAlbum', + ], + + extraDependencies: ['html'], + + relations: (relation, album, track) => ({ + box: + relation('generatePageSidebarBox'), + + albumLink: + relation('linkAlbum', album), + + trackSections: + album.trackSections.map(trackSection => + relation('generateAlbumSidebarTrackSection', album, track, trackSection)), + }), + + generate: (relations, {html}) => + relations.box.slots({ + attributes: {class: 'track-list-sidebar-box'}, + + content: [ + html.tag('h1', relations.albumLink), + relations.trackSections, + ], + }) +}; diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index 7fc6764c..318c8940 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -35,6 +35,7 @@ export default { 'generateColorStyleRules', 'generateFooterLocalizationLinks', 'generatePageSidebar', + 'generatePageSidebarBox', 'generateStickyHeadingContainer', 'transformContent', ], @@ -73,11 +74,11 @@ export default { relations.stickyHeadingContainer = relation('generateStickyHeadingContainer'); - relations.leftSidebar = + relations.sidebar = relation('generatePageSidebar'); - relations.rightSidebar = - relation('generatePageSidebar'); + relations.sidebarBox = + relation('generatePageSidebarBox'); if (sprawl.footerContent) { relations.defaultFooterContent = @@ -409,7 +410,7 @@ export default { ]); const applyLegacySidebarSlots = (side, id) => - relations[side].slots({ + relations.sidebar.clone().slots({ content: slots[side + 'Content'], attributes: [ @@ -418,16 +419,15 @@ export default { {class: slots[side + 'Class']}, ], - multipleContents: - (slots[side + 'Multiple'] - ? slots[side + 'Multiple'] - .map(({content}) => content) - : null), - - multipleAttributes: + boxes: (slots[side + 'Multiple'] - ? slots[side + 'Multiple'] - .map(({class: className}) => [{class: className}]) + ? slots[side + 'Multiple'].map(box => + relations.sidebarBox + .clone() + .slots({ + content: box.content, + attributes: {class: box.class}, + })) : null), stickyMode: slots[side + 'StickyMode'], diff --git a/src/content/dependencies/generatePageSidebar.js b/src/content/dependencies/generatePageSidebar.js index 10576270..a7da3d1d 100644 --- a/src/content/dependencies/generatePageSidebar.js +++ b/src/content/dependencies/generatePageSidebar.js @@ -1,10 +1,14 @@ -import {empty, filterMultipleArrays, stitchArrays} from '#sugar'; - export default { + contentDependencies: ['generatePageSidebarBox'], extraDependencies: ['html'], + relations: (relation) => ({ + box: + relation('generatePageSidebarBox'), + }), + slots: { - // Content is a flat HTML array. It'll generate one sidebar section + // Content is a flat HTML array. It'll all be placed into one sidebar box // if specified. content: { type: 'html', @@ -19,14 +23,10 @@ export default { mutable: false, }, - // Chunks of content to be split into separate sections or "boxes" in the - // sidebar. Each of these can also be associated with HTML attributes. - multipleContents: { - validate: v => v.strictArrayOf(v.isHTML), - }, - - multipleAttributes: { - validate: v => v.strictArrayOf(v.isAttributes), + // Chunks of content to be split into separate boxes in the sidebar. + boxes: { + type: 'html', + mutable: false, }, // Sticky mode controls which sidebar sections, if any, follow the @@ -62,9 +62,12 @@ export default { }, }, - generate(slots, {html}) { + generate(relations, slots, {html}) { const attributes = - html.attributes({class: 'sidebar-column'}); + html.attributes({class: [ + 'sidebar-column', + 'sidebar-multiple', + ]}); attributes.add(slots.attributes); @@ -84,38 +87,17 @@ export default { attributes.add('class', `sticky-${slots.stickyMode}`); } - let content = slots.content; + const boxes = + (!html.isBlank(slots.boxes) + ? slots.boxes + : !html.isBlank(slots.content) + ? relations.box.slot('content', slots.content) + : html.blank()); - if (html.isBlank(content)) { - if (!slots.multipleContents) { - return html.blank(); - } - - const multipleContents = slots.multipleContents.slice(); - const multipleAttributes = slots.multipleAttributes?.slice() ?? []; - - filterMultipleArrays( - multipleContents, - multipleAttributes, - content => !html.isBlank(content)); - - if (empty(multipleContents)) { - return html.blank(); - } - - attributes.add('class', 'sidebar-multiple'); - content = - stitchArrays({ - content: multipleContents, - attributes: multipleAttributes, - }).map(({content, attributes}) => - html.tag('div', {class: 'sidebar'}, - attributes, - content)); + if (html.isBlank(boxes)) { + return html.blank(); } else { - attributes.add('class', 'sidebar'); + return html.tag('div', attributes, boxes); } - - return html.tag('div', attributes, content); }, }; diff --git a/src/content/dependencies/generatePageSidebarBox.js b/src/content/dependencies/generatePageSidebarBox.js new file mode 100644 index 00000000..51835452 --- /dev/null +++ b/src/content/dependencies/generatePageSidebarBox.js @@ -0,0 +1,20 @@ +export default { + extraDependencies: ['html'], + + slots: { + content: { + type: 'html', + mutable: false, + }, + + attributes: { + type: 'attributes', + mutable: false, + }, + }, + + generate: (slots, {html}) => + html.tag('div', {class: 'sidebar'}, + slots.attributes, + slots.content), +}; diff --git a/src/content/dependencies/generatePageSidebarConjoinedBox.js b/src/content/dependencies/generatePageSidebarConjoinedBox.js new file mode 100644 index 00000000..05b1d469 --- /dev/null +++ b/src/content/dependencies/generatePageSidebarConjoinedBox.js @@ -0,0 +1,42 @@ +// This component is kind of unfortunately magical. It reads the content of +// various boxes and joins them together, discarding the boxes' attributes. +// Since it requires access to the actual box *templates* (rather than those +// templates' resolved content), take care when slotting into this. + +export default { + contentDependencies: ['generatePageSidebarBox'], + extraDependencies: ['html'], + + relations: (relation) => ({ + box: + relation('generatePageSidebarBox'), + }), + + slots: { + attributes: { + type: 'attributes', + mutable: false, + }, + + boxes: { + validate: v => v.looseArrayOf(v.isTemplate), + }, + }, + + generate: (relations, slots, {html}) => + relations.box.slots({ + attributes: slots.attributes, + content: + slots.boxes.slice() + .map(box => box.getSlotValue('content')) + .map((content, index, {length}) => [ + content, + index < length - 1 && + html.tag('hr', { + style: + `border-color: var(--primary-color); ` + + `border-style: none none dotted none`, + }), + ]), + }), +}; |