diff options
Diffstat (limited to 'src/content/dependencies/generateCoverArtwork.js')
| -rw-r--r-- | src/content/dependencies/generateCoverArtwork.js | 226 |
1 files changed, 125 insertions, 101 deletions
diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js index 3d5a614f..78a6103b 100644 --- a/src/content/dependencies/generateCoverArtwork.js +++ b/src/content/dependencies/generateCoverArtwork.js @@ -1,58 +1,57 @@ -import {stitchArrays} from '#sugar'; - export default { - contentDependencies: ['image', 'linkArtTag'], + contentDependencies: [ + 'generateColorStyleAttribute', + 'generateCoverArtworkArtTagDetails', + 'generateCoverArtworkArtistDetails', + 'generateCoverArtworkOriginDetails', + 'generateCoverArtworkReferenceDetails', + 'image', + ], + extraDependencies: ['html'], - query: (artTags) => ({ - linkableArtTags: - (artTags - ? artTags.filter(tag => !tag.isContentWarning) - : []), - }), + relations: (relation, artwork) => ({ + colorStyleAttribute: + relation('generateColorStyleAttribute'), - relations: (relation, query, artTags) => ({ image: - relation('image', artTags), + relation('image', artwork), - tagLinks: - query.linkableArtTags - .filter(tag => !tag.isContentWarning) - .map(tag => relation('linkArtTag', tag)), - }), + originDetails: + relation('generateCoverArtworkOriginDetails', artwork), - data: (query) => { - const data = {}; + artTagDetails: + relation('generateCoverArtworkArtTagDetails', artwork), - const seenShortNames = new Set(); - const duplicateShortNames = new Set(); + artistDetails: + relation('generateCoverArtworkArtistDetails', artwork), - for (const {nameShort: shortName} of query.linkableArtTags) { - if (seenShortNames.has(shortName)) { - duplicateShortNames.add(shortName); - } else { - seenShortNames.add(shortName); - } - } + referenceDetails: + relation('generateCoverArtworkReferenceDetails', artwork), + }), - data.preferShortName = - query.linkableArtTags - .map(artTag => !duplicateShortNames.has(artTag.nameShort)); + data: (artwork) => ({ + attachAbove: + artwork.attachAbove, - return data; - }, + attachedArtworkIsMainArtwork: + (artwork.attachAbove + ? artwork.attachedArtwork.isMainArtwork + : null), - slots: { - path: { - validate: v => v.validateArrayItems(v.isString), - }, + color: + artwork.thing.color ?? null, - alt: { - type: 'string', - }, + dimensions: + artwork.dimensions, + }), + + slots: { + alt: {type: 'string'}, color: { - validate: v => v.isColor, + validate: v => v.anyOf(v.isBoolean, v.isColor), + default: false, }, mode: { @@ -60,74 +59,99 @@ export default { default: 'primary', }, - dimensions: { - validate: v => v.isDimensions, + showOriginDetails: {type: 'boolean', default: false}, + showArtTagDetails: {type: 'boolean', default: false}, + showArtistDetails: {type: 'boolean', default: false}, + showReferenceDetails: {type: 'boolean', default: false}, + + details: { + type: 'html', + mutable: false, }, }, generate(data, relations, slots, {html}) { + const {image} = relations; + + image.setSlot('alt', slots.alt); + const square = - (slots.dimensions - ? slots.dimensions[0] === slots.dimensions[1] + (data.dimensions + ? data.dimensions[0] === data.dimensions[1] : true); - const sizeSlots = - (square - ? {square: true} - : {dimensions: slots.dimensions}); - - switch (slots.mode) { - case 'primary': - return html.tags([ - relations.image.slots({ - path: slots.path, - alt: slots.alt, - color: slots.color, - thumb: 'medium', - reveal: true, - link: true, - ...sizeSlots, - }), - - html.tag('ul', {class: 'image-details'}, - {[html.onlyIfContent]: true}, - - stitchArrays({ - tagLink: relations.tagLinks, - preferShortName: data.preferShortName, - }).map(({tagLink, preferShortName}) => - html.tag('li', - tagLink.slot('preferShortName', preferShortName)))), - ]); - - case 'thumbnail': - return relations.image.slots({ - path: slots.path, - alt: slots.alt, - color: slots.color, - thumb: 'small', - reveal: false, - link: false, - ...sizeSlots, - }); - - case 'commentary': - return relations.image.slots({ - path: slots.path, - alt: slots.alt, - color: slots.color, - thumb: 'medium', - reveal: true, - link: true, - lazy: true, - ...sizeSlots, - - attributes: - {class: 'commentary-art'}, - }); - - default: - return html.blank(); + if (square) { + image.setSlot('square', true); + } else { + image.setSlot('dimensions', data.dimensions); + } + + const attributes = html.attributes(); + + let color = null; + if (typeof slots.color === 'boolean') { + if (slots.color) { + color = data.color; + } + } else if (slots.color) { + color = slots.color; + } + + if (color) { + relations.colorStyleAttribute.setSlot('color', color); + attributes.add(relations.colorStyleAttribute); } + + return html.tags([ + data.attachAbove && + html.tag('div', {class: 'cover-artwork-joiner'}), + + html.tag('div', {class: 'cover-artwork'}, + slots.mode === 'commentary' && + {class: 'commentary-art'}, + + data.attachAbove && + data.attachedArtworkIsMainArtwork && + {class: 'attached-artwork-is-main-artwork'}, + + attributes, + + (slots.mode === 'primary' + ? [ + relations.image.slots({ + thumb: 'medium', + reveal: true, + link: true, + }), + + slots.showOriginDetails && + relations.originDetails, + + slots.showArtTagDetails && + relations.artTagDetails, + + slots.showArtistDetails && + relations.artistDetails, + + slots.showReferenceDetails && + relations.referenceDetails, + + slots.details, + ] + : slots.mode === 'thumbnail' + ? relations.image.slots({ + thumb: 'small', + reveal: false, + link: false, + }) + : slots.mode === 'commentary' + ? relations.image.slots({ + thumb: 'medium', + reveal: true, + link: true, + lazy: true, + }) + : html.blank())), + ]); }, }; |