From 51b04c86147f1405c33829cc339b8c045dcafc4f Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 30 Dec 2023 10:14:17 -0400 Subject: content: various higher-level attribute processing cleanup --- src/content/dependencies/image.js | 160 ++++++++++++++++++++------------------ 1 file changed, 86 insertions(+), 74 deletions(-) (limited to 'src/content/dependencies/image.js') diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index 9fa2ba1c..a271ceec 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -121,21 +121,51 @@ export default { !isMissingImageFile && !empty(data.contentWarnings); - const colorStyle = - slots.color && - relations.colorStyle - .slot('color', slots.color); - const willSquare = slots.square; - const idOnImg = willLink ? null : slots.id; - const idOnLink = willLink ? slots.id : null; + const imgAttributes = html.attributes([ + slots.alt && {alt: slots.alt}, + slots.width && {width: slots.width}, + slots.height && {height: slots.height}, + + customLink && + {'data-no-image-preview': true}, + ]); + + const linkAttributes = html.attributes([ + (customLink + ? {href: slots.link} + : {href: originalSrc}), + ]); + + const containerAttributes = html.attributes(); + + if (slots.id) { + if (willLink) { + linkAttributes.set('id', slots.id); + } else { + imgAttributes.set('id', slots.id); + } + } + + if (slots.class) { + if (willLink) { + linkAttributes.set('class', slots.class); + } else { + imgAttributes.set('class', slots.class); + } + } - const classOnImg = willLink ? null : slots.class; - const classOnLink = willLink ? slots.class : null; + if (slots.color) { + const colorStyle = + relations.colorStyle.slot('color', slots.color); - const styleOnContainer = willLink ? null : colorStyle; - const styleOnLink = willLink ? colorStyle : null; + if (willLink) { + linkAttributes.add(colorStyle); + } else { + containerAttributes.add(colorStyle); + } + } if (!originalSrc || isMissingImageFile) { return prepare( @@ -171,84 +201,72 @@ export default { logWarn`No thumbnail info cached: ${mediaSrc} - displaying original image here (instead of ${slots.thumb})`; } - // Important to note that these might not be set at all, even if - // slots.thumb was provided. - let thumbSrc = null; - let availableThumbs = null; - let originalLength = null; + let displaySrc = originalSrc; + // If thumbnails are available *and* being used, calculate thumbSrc, + // and provide some attributes relevant to the large image overlay. if (hasThumbnails && slots.thumb) { - // Note: This provides mediaSrc to getThumbnailEqualOrSmaller, since - // it's the identifier which thumbnail utilities use to query from the - // thumbnail cache. But we use the result to operate on originalSrc, - // which is the HTML output-appropriate path including `../../` or - // another alternate base path. - const selectedSize = getThumbnailEqualOrSmaller(slots.thumb, mediaSrc); - thumbSrc = to('thumb.path', mediaSrc.replace(/\.(png|jpg)$/, `.${selectedSize}.jpg`)); + const selectedSize = + getThumbnailEqualOrSmaller(slots.thumb, mediaSrc); + + const mediaSrcJpeg = + mediaSrc.replace(/\.(png|jpg)$/, `.${selectedSize}.jpg`); + + displaySrc = + to('thumb.path', mediaSrcJpeg); const dimensions = getDimensionsOfImagePath(mediaSrc); - availableThumbs = getThumbnailsAvailableForDimensions(dimensions); + const availableThumbs = getThumbnailsAvailableForDimensions(dimensions); const [width, height] = dimensions; - originalLength = Math.max(width, height) - } + const originalLength = Math.max(width, height) - let fileSize = null; - if (willLink && mediaSrc) { - fileSize = getSizeOfImagePath(mediaSrc); - } - - const imgAttributes = { - id: idOnImg, - class: classOnImg, - alt: slots.alt, - width: slots.width, - height: slots.height, - }; + const fileSize = + (willLink && mediaSrc + ? getSizeOfImagePath(mediaSrc) + : null); - if (customLink) { - imgAttributes['data-no-image-preview'] = true; - } + imgAttributes.add([ + fileSize && + {'data-original-size': fileSize}, - // These attributes are only relevant when a thumbnail is available *and* - // being used. - if (hasThumbnails && slots.thumb) { - if (fileSize) { - imgAttributes['data-original-size'] = fileSize; - } + originalLength && + {'data-original-length': originalLength}, - if (originalLength) { - imgAttributes['data-original-length'] = originalLength; - } + !empty(availableThumbs) && + {'data-thumbs': + availableThumbs + .map(([name, size]) => `${name}:${size}`) + .join(' ')}, + ]); + } - if (!empty(availableThumbs)) { - imgAttributes['data-thumbs'] = - availableThumbs - .map(([name, size]) => `${name}:${size}`) - .join(' '); - } + if (!displaySrc) { + return ( + prepareVisible( + html.tag('img', imgAttributes))); } const nonlazyHTML = - originalSrc && - prepareVisible( - html.tag('img', - imgAttributes, - {src: thumbSrc ?? originalSrc})); + prepareVisible( + html.tag('img', + imgAttributes, + {src: displaySrc})); if (slots.lazy) { return html.tags([ - html.tag('noscript', nonlazyHTML), + html.tag('noscript', + nonlazyHTML), + prepareHidden( html.tag('img', {class: 'lazy'}, imgAttributes, - {'data-original': thumbSrc ?? originalSrc}), - true), + {'data-original': displaySrc})), ]); + } else { + return nonlazyHTML; } - return nonlazyHTML; - function prepareVisible(content) { return prepare(content, false); } @@ -262,7 +280,7 @@ export default { wrapped = html.tag('div', {class: 'image-container'}, - styleOnContainer, + containerAttributes, !originalSrc && {style: 'placeholder-image'}, @@ -293,17 +311,11 @@ export default { if (willLink) { wrapped = html.tag('a', {class: ['box', 'image-link']}, - {id: idOnLink}, - {class: classOnLink}, - styleOnLink, + linkAttributes, hide && {class: 'js-hide'}, - (typeof slots.link === 'string' - ? {href: slots.link} - : {href: originalSrc}), - wrapped); } -- cgit 1.3.0-6-gf8a5