diff options
| -rw-r--r-- | src/content/dependencies/generateCoverArtwork.js | 4 | ||||
| -rw-r--r-- | src/content/dependencies/image.js | 92 | ||||
| -rw-r--r-- | src/content/dependencies/transformContent.js | 7 | ||||
| -rw-r--r-- | src/static/client3.js | 4 | ||||
| -rw-r--r-- | src/static/site6.css | 80 | ||||
| -rw-r--r-- | 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`] = ` -<div class="reveal"> - <div class="image-container"> - <div class="image-inner-area"> - <img class="image" src="media/album-art/beyond-canon/cover.png"> - <span class="reveal-text-container"> - <span class="reveal-text"> - <img class="reveal-symbol" src="static/warning.svg?413"> - <br> - <span class="reveal-warnings">too cool for school</span> - <br> - <span class="reveal-interaction">click to show</span> +<div class="image-container"> + <div class="reveal"> + <div class="image-outer-area"> + <div class="image-inner-area"> + <img class="image" src="media/album-art/beyond-canon/cover.png"> + <span class="reveal-text-container"> + <span class="reveal-text"> + <img class="reveal-symbol" src="static/warning.svg?413"> + <br> + <span class="reveal-warnings">too cool for school</span> + <br> + <span class="reveal-interaction">click to show</span> + </span> </span> - </span> + </div> </div> </div> </div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > lazy with square 1`] = ` -<noscript><div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></div></noscript> -<div class="square js-hide"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img class="image lazy" data-original="foobar"></div></div></div></div> +<noscript><div class="image-container square"><div class="square-content"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></div></noscript> +<div class="image-container square js-hide"><div class="square-content"><div class="image-outer-area"><div class="image-inner-area"><img class="image lazy" data-original="foobar"></div></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > link with file size 1`] = ` -<div class="image-container has-link"><a class="image-link" href="media/album-art/pingas/cover.png"><div class="image-inner-area"><img class="image" src="media/album-art/pingas/cover.png"></div></a></div> +<div class="image-container has-link"><div class="image-outer-area"><a class="image-link" href="media/album-art/pingas/cover.png"><div class="image-inner-area"><img class="image" src="media/album-art/pingas/cover.png"></div></a></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path 1`] = ` -<div class="image-container"><div class="image-inner-area"><div class="image-text-area">(This image file is missing)</div></div></div> +<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">(This image file is missing)</div></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path w/ missingSourceContent 1`] = ` -<div class="image-container"><div class="image-inner-area"><div class="image-text-area">Cover's missing, whoops</div></div></div> +<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">Cover's missing, whoops</div></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > source missing 1`] = ` -<div class="image-container placeholder-image"><div class="image-inner-area"><div class="image-text-area">Example of missing source message.</div></div></div> +<div class="image-container placeholder-image"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">Example of missing source message.</div></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > source via path 1`] = ` -<div class="image-container"><div class="image-inner-area"><img class="image" src="media/album-art/beyond-canon/cover.png"></div></div> +<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="media/album-art/beyond-canon/cover.png"></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > source via src 1`] = ` -<div class="image-container"><div class="image-inner-area"><img class="image" src="https://example.com/bananas.gif"></div></div> +<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="https://example.com/bananas.gif"></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > square 1`] = ` -<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></div> +<div class="image-container square"><div class="square-content"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > thumb requested but source is gif 1`] = ` -<div class="image-container"><div class="image-inner-area"><img class="image" src="media/flash-art/5426.gif"></div></div> +<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="media/flash-art/5426.gif"></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > thumbnail details 1`] = ` -<div class="image-container"><div class="image-inner-area"><img class="image" data-original-length="1200" data-thumbs="voluminous:1200 middling:900 petite:20" src="thumb/album-art/beyond-canon/cover.voluminous.jpg"></div></div> +<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" data-original-length="1200" data-thumbs="voluminous:1200 middling:900 petite:20" src="thumb/album-art/beyond-canon/cover.voluminous.jpg"></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > width & height 1`] = ` -<div class="image-container"><div class="image-inner-area"><img class="image" width="600" height="400" src="foobar"></div></div> +<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" width="600" height="400" src="foobar"></div></div></div> ` |