From afd52b5db6436e86eefd8a1c090e1e656ca35c6a Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 13 Jan 2024 16:56:33 -0400 Subject: content, css, test: refactor image layout once again --- src/content/dependencies/generateCoverArtwork.js | 4 +- src/content/dependencies/image.js | 92 ++++++++++-------------- src/content/dependencies/transformContent.js | 7 +- 3 files changed, 47 insertions(+), 56 deletions(-) (limited to 'src/content') diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js index e333b190..7f720093 100644 --- a/src/content/dependencies/generateCoverArtwork.js +++ b/src/content/dependencies/generateCoverArtwork.js @@ -80,11 +80,13 @@ export default { alt: slots.alt, color: slots.color, thumb: 'medium', - class: 'commentary-art', reveal: true, link: true, square: true, lazy: true, + + attributes: + {class: 'commentary-art'}, }); default: diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index 3121aca3..bc52321a 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -59,11 +59,15 @@ export default { lazy: {type: 'boolean', default: false}, square: {type: 'boolean', default: false}, - class: {type: 'string'}, alt: {type: 'string'}, width: {type: 'number'}, height: {type: 'number'}, + attributes: { + type: 'attributes', + mutable: false, + }, + missingSourceContent: { type: 'html', mutable: false, @@ -116,9 +120,6 @@ export default { !isMissingImageFile && (typeof slots.link === 'string' || slots.link); - const customLink = - typeof slots.link === 'string'; - const willReveal = slots.reveal && originalSrc && @@ -135,36 +136,6 @@ export default { slots.height && {height: slots.height}, ]); - const linkAttributes = html.attributes([ - (customLink - ? {href: slots.link} - : {href: originalSrc}), - ]); - - const containerAttributes = html.attributes(); - - if (slots.class) { - if (willLink) { - linkAttributes.set('class', slots.class); - } else { - imgAttributes.set('class', slots.class); - } - } - - if (slots.color) { - const colorStyle = - relations.colorStyle.slots({ - color: slots.color, - context: 'image-box', - }); - - if (willLink) { - linkAttributes.add(colorStyle); - } else { - containerAttributes.add(colorStyle); - } - } - if (!originalSrc || isMissingImageFile) { return prepare( html.tag('div', {class: 'image-text-area'}, @@ -332,24 +303,15 @@ export default { if (willLink) { wrapped = html.tag('a', {class: 'image-link'}, - linkAttributes, + (typeof slots.link === 'string' + ? {href: slots.link} + : {href: originalSrc}), wrapped); } wrapped = - html.tag('div', {class: 'image-container'}, - containerAttributes, - - willLink && - {class: 'has-link'}, - - customLink && - {class: 'no-image-preview'}, - - !originalSrc && - {class: 'placeholder-image'}, - + html.tag('div', {class: 'image-outer-area'}, wrapped); if (willReveal) { @@ -363,15 +325,37 @@ export default { if (willSquare) { wrapped = - html.tag('div', {class: 'square'}, - visibility === 'hidden' && - !willLink && - {class: 'js-hide'}, - - html.tag('div', {class: 'square-content'}, - wrapped)); + html.tag('div', {class: 'square-content'}, + wrapped); } + wrapped = + html.tag('div', {class: 'image-container'}, + willLink && + {class: 'has-link'}, + + willSquare && + {class: 'square'}, + + typeof slots.link === 'string' && + {class: 'no-image-preview'}, + + !originalSrc && + {class: 'placeholder-image'}, + + visibility === 'hidden' && + {class: 'js-hide'}, + + slots.color && + relations.colorStyle.slots({ + color: slots.color, + context: 'image-box', + }), + + slots.attributes, + + wrapped); + return wrapped; } }, diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js index 52fe0024..ff893896 100644 --- a/src/content/dependencies/transformContent.js +++ b/src/content/dependencies/transformContent.js @@ -388,11 +388,16 @@ export default { html.tag('div', {class: 'content-image'}, image.slots({ src, + link: link ?? true, width: width ?? null, height: height ?? null, thumb: slots.thumb, - class: pixelate ? 'pixelate' : null, + + attributes: + (pixelate + ? {class: 'pixelate'} + : null), })), }; } -- cgit 1.3.0-6-gf8a5