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 +- src/static/client3.js | 4 +- src/static/site6.css | 80 +++++++++++++-------- tap-snapshots/test/snapshot/image.js.test.cjs | 50 ++++++------- 6 files changed, 124 insertions(+), 113 deletions(-) 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), })), }; } diff --git a/src/static/client3.js b/src/static/client3.js index 865aa78a..51b1e7d7 100644 --- a/src/static/client3.js +++ b/src/static/client3.js @@ -205,9 +205,7 @@ function getScriptedLinkReferences() { document.querySelectorAll('[data-random]'); scriptedLinkInfo.revealLinks = - document.querySelectorAll( - '.reveal .image-container > .image-link, ' + - '.reveal .image-container > .image-inner-area'); + document.querySelectorAll('.reveal .image-outer-area > *'); scriptedLinkInfo.revealContainers = Array.from(scriptedLinkInfo.revealLinks) diff --git a/src/static/site6.css b/src/static/site6.css index 5ee062f5..b00dd595 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -3,6 +3,32 @@ * no need to re-run upd8.js when tweaking values here. Handy! */ +/* Squares */ + +/* This styling is kind of awkwardly placed at the very top. Sorry! + * We need to rework what order sets of styles get applied in to be + * much more explicit (so that overriding isn't a headache), and + * hopefully that can be done through @imports, but it'll take some + * reworking and cleaning up. + */ + +.square { + position: relative; + width: 100%; +} + +.square::after { + content: ""; + display: block; + padding-bottom: 100%; +} + +.square-content { + position: absolute; + width: 100%; + height: 100%; +} + /* Layout - Common */ body { @@ -1061,7 +1087,6 @@ h1 a[href="#additional-names-box"]:hover { box-sizing: border-box; position: relative; height: 100%; - padding: 5px; overflow: hidden; background-color: var(--dim-color); @@ -1094,6 +1119,13 @@ h1 a[href="#additional-names-box"]:hover { text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75); } +.image-outer-area { + width: 100%; + height: 100%; + padding: 5px; + box-sizing: border-box; +} + .image-link { border-bottom: 1px solid #ffffff03; border-radius: 2.5px 2.5px 3px 3px; @@ -1135,7 +1167,7 @@ img { 6px -6px 2px -4px white inset; } -img.pixelate { +img.pixelate, .pixelate img { image-rendering: crisp-edges; } @@ -1210,8 +1242,7 @@ img.pixelate { display: none; } -.reveal:not(.revealed) .image-container > .image-link, -.reveal:not(.revealed) .image-container > .image-inner-area { +.reveal:not(.revealed) .image-outer-area > * { box-sizing: border-box; border: 1px dotted var(--primary-color); border-radius: 6px; @@ -1222,19 +1253,16 @@ img.pixelate { background: var(--deep-color); } -.reveal:not(.revealed) .image-container > .image-link:hover, -.reveal:not(.revealed) .image-container > .image-inner-area:hover { +.reveal:not(.revealed) .image-outer-area > *:hover { border-style: solid; } -.reveal:not(.revealed) .image-container > .image-link:hover .image, -.reveal:not(.revealed) .image-container > .image-inner-area:hover .image { +.reveal:not(.revealed) .image-outer-area > *:hover .image { filter: blur(20px) brightness(0.6); opacity: 0.6; } -.reveal:not(.revealed) .image-container > .image-link:hover .reveal-interaction, -.reveal:not(.revealed) .image-container > .image-inner-area:hover .reveal-interaction { +.reveal:not(.revealed) .image-outer-area > *:hover .reveal-interaction { text-decoration-style: solid; } @@ -1272,6 +1300,10 @@ img.pixelate { margin: 10px; } +.grid-item .image-container { + width: 100%; +} + .grid-item .image-inner-area { border-radius: 0; box-shadow: none; @@ -1474,6 +1506,9 @@ html[data-url-key="localized.home"] .carousel-container { .carousel-item .image-container { border: none; +} + +.carousel-item .image-outer-area { padding: 0; } @@ -1490,25 +1525,6 @@ html[data-url-key="localized.home"] .carousel-container { background: var(--dim-color); } -/* Squares */ - -.square { - position: relative; - width: 100%; -} - -.square::after { - content: ""; - display: block; - padding-bottom: 100%; -} - -.square-content { - position: absolute; - width: 100%; - height: 100%; -} - /* Info card */ #info-card-container { @@ -1766,13 +1782,17 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r .content-sticky-heading-cover .image-container { border-width: 1px; - padding: 3px; border-radius: 1.25px; box-shadow: none; } +.content-sticky-heading-container .image-outer-area { + padding: 3px; +} + .content-sticky-heading-container .image-inner-area { border-radius: 1.75px; + overflow: hidden; } .content-sticky-heading-cover .image { diff --git a/tap-snapshots/test/snapshot/image.js.test.cjs b/tap-snapshots/test/snapshot/image.js.test.cjs index c68794fa..ffc7d43a 100644 --- a/tap-snapshots/test/snapshot/image.js.test.cjs +++ b/tap-snapshots/test/snapshot/image.js.test.cjs @@ -6,65 +6,67 @@ */ 'use strict' exports[`test/snapshot/image.js > TAP > image (snapshot) > content warnings via tags 1`] = ` -
-
-
- - - - -
- too cool for school -
- click to show +
+
+
+
+ + + + +
+ too cool for school +
+ click to show + - +
` exports[`test/snapshot/image.js > TAP > image (snapshot) > lazy with square 1`] = ` - -
+ +
` exports[`test/snapshot/image.js > TAP > image (snapshot) > link with file size 1`] = ` -
+
` exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path 1`] = ` -
(This image file is missing)
+
(This image file is missing)
` exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path w/ missingSourceContent 1`] = ` -
Cover's missing, whoops
+
Cover's missing, whoops
` exports[`test/snapshot/image.js > TAP > image (snapshot) > source missing 1`] = ` -
Example of missing source message.
+
Example of missing source message.
` exports[`test/snapshot/image.js > TAP > image (snapshot) > source via path 1`] = ` -
+
` exports[`test/snapshot/image.js > TAP > image (snapshot) > source via src 1`] = ` -
+
` exports[`test/snapshot/image.js > TAP > image (snapshot) > square 1`] = ` -
+
` exports[`test/snapshot/image.js > TAP > image (snapshot) > thumb requested but source is gif 1`] = ` -
+
` exports[`test/snapshot/image.js > TAP > image (snapshot) > thumbnail details 1`] = ` -
+
` exports[`test/snapshot/image.js > TAP > image (snapshot) > width & height 1`] = ` -
+
` -- cgit 1.3.0-6-gf8a5