diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2024-01-11 19:30:44 -0400 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2024-01-11 19:30:44 -0400 |
commit | 2016bd4c6f966f2ac80e958656829371419d3bba (patch) | |
tree | e967e8ad8d7e4c8963c0f8d6f0b4f63cdd403daf /src/content | |
parent | cb379596c5cbaeb98480cc727ea6639d938e28d9 (diff) |
content, thumbs, css, client: general reveal interaction refactor
Diffstat (limited to 'src/content')
-rw-r--r-- | src/content/dependencies/image.js | 97 |
1 files changed, 69 insertions, 28 deletions
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index 7ef50e5b..9de58dce 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -221,6 +221,10 @@ export default { let displaySrc = originalSrc; + // This is only distinguished from displaySrc by being a thumbnail, + // so it won't be set if thumbnails aren't available. + let revealSrc = null; + // If thumbnails are available *and* being used, calculate thumbSrc, // and provide some attributes relevant to the large image overlay. if (hasThumbnails && slots.thumb) { @@ -233,6 +237,17 @@ export default { displaySrc = to('thumb.path', mediaSrcJpeg); + if (willReveal) { + const miniSize = + getThumbnailEqualOrSmaller('mini', mediaSrc); + + const mediaSrcJpeg = + mediaSrc.replace(/\.(png|jpg)$/, `.${miniSize}.jpg`); + + revealSrc = + to('thumb.path', mediaSrcJpeg); + } + const dimensions = getDimensionsOfImagePath(mediaSrc); const availableThumbs = getThumbnailsAvailableForDimensions(dimensions); @@ -261,40 +276,66 @@ export default { if (!displaySrc) { return ( - prepareVisible( - html.tag('img', imgAttributes))); + prepare( + html.tag('img', imgAttributes), + 'visible')); } - const nonlazyHTML = - prepareVisible( + const images = { + displayStatic: html.tag('img', imgAttributes, - {src: displaySrc})); + {src: displaySrc}), + + displayLazy: + slots.lazy && + html.tag('img', + imgAttributes, + {class: 'lazy', 'data-original': displaySrc}), + + revealStatic: + revealSrc && + html.tag('img', {class: 'reveal-thumbnail'}, + imgAttributes, + {src: revealSrc}), + + revealLazy: + slots.lazy && + revealSrc && + html.tag('img', {class: 'reveal-thumbnail'}, + imgAttributes, + {class: 'lazy', 'data-original': revealSrc}), + }; + + const staticImageContent = + html.tags([images.displayStatic, images.revealStatic]); if (slots.lazy) { + const lazyImageContent = + html.tags([images.displayLazy, images.revealLazy]); + return html.tags([ html.tag('noscript', - nonlazyHTML), + prepare(staticImageContent, 'visible')), - prepareHidden( - html.tag('img', {class: 'lazy'}, - imgAttributes, - {'data-original': displaySrc})), + prepare(lazyImageContent, 'hidden'), ]); } else { - return nonlazyHTML; + return prepare(staticImageContent, 'visible'); } - function prepareVisible(content) { - return prepare(content, false); - } + function prepare(imageContent, visibility) { + let wrapped = imageContent; - function prepareHidden(content) { - return prepare(content, true); - } - - function prepare(content, hide) { - let wrapped = content; + if (willReveal) { + wrapped = + html.tags([ + wrapped, + html.tag('span', {class: 'reveal-text-container'}, + html.tag('span', {class: 'reveal-text'}, + reveal)), + ]); + } wrapped = html.tag('div', {class: 'image-container'}, @@ -308,18 +349,18 @@ export default { if (willReveal) { wrapped = - html.tag('div', {class: 'reveal'}, [ - wrapped, - html.tag('span', {class: 'reveal-text-container'}, - html.tag('span', {class: 'reveal-text'}, - reveal)), - ]); + html.tag('div', {class: 'reveal'}, + images.revealStatic && + {class: 'has-reveal-thumbnail'}, + + wrapped); } if (willSquare) { wrapped = html.tag('div', {class: 'square'}, - hide && !willLink && + visibility === 'hidden' && + !willLink && {class: 'js-hide'}, html.tag('div', {class: 'square-content'}, @@ -331,7 +372,7 @@ export default { html.tag('a', {class: ['box', 'image-link']}, linkAttributes, - hide && + visibility === 'hidden' && {class: 'js-hide'}, wrapped); |