diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/content/dependencies/generateAlbumTrackListItem.js | 8 | ||||
| -rw-r--r-- | src/content/dependencies/generateContentHeading.js | 4 | ||||
| -rw-r--r-- | src/content/dependencies/image.js | 160 | ||||
| -rw-r--r-- | src/content/dependencies/linkTemplate.js | 52 |
4 files changed, 112 insertions, 112 deletions
diff --git a/src/content/dependencies/generateAlbumTrackListItem.js b/src/content/dependencies/generateAlbumTrackListItem.js index 4cfa5cb0..a66414db 100644 --- a/src/content/dependencies/generateAlbumTrackListItem.js +++ b/src/content/dependencies/generateAlbumTrackListItem.js @@ -44,11 +44,10 @@ export default { }, generate(data, relations, {getColors, html, language}) { - let style; - + let colorStyle; if (data.color) { const {primary} = getColors(data.color); - style = `--primary-color: ${primary}`; + colorStyle = {style: `--primary-color: ${primary}`}; } const parts = ['trackList.item.withDuration']; @@ -70,7 +69,8 @@ export default { })); } - return html.tag('li', {style}, + return html.tag('li', + colorStyle, language.formatString(...parts, options)); }, }; diff --git a/src/content/dependencies/generateContentHeading.js b/src/content/dependencies/generateContentHeading.js index 816cc98a..1c7ef1f1 100644 --- a/src/content/dependencies/generateContentHeading.js +++ b/src/content/dependencies/generateContentHeading.js @@ -18,9 +18,11 @@ export default { generate: (relations, slots, {html}) => html.tag(slots.tag, {class: 'content-heading'}, - {id: slots.id}, {tabindex: '0'}, + slots.id && + {id: slots.id}, + slots.color && relations.colorStyle.slot('color', slots.color), 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); } diff --git a/src/content/dependencies/linkTemplate.js b/src/content/dependencies/linkTemplate.js index a361a4e7..f3744bdf 100644 --- a/src/content/dependencies/linkTemplate.js +++ b/src/content/dependencies/linkTemplate.js @@ -30,26 +30,18 @@ export default { language, to, }) { - let href; - let style; - let title; + const attributes = html.attributes(); - if (slots.linkless) { - href = null; - } else { - if (slots.href) { - href = encodeURI(slots.href); - } else if (!empty(slots.path)) { - href = to(...slots.path); - } else { - href = ''; - } + if (!slots.linkless) { + let href = + (slots.href + ? encodeURI(slots.href) + : !empty(slots.path) + ? to(...slots.path) + : ''); if (appendIndexHTML) { - if ( - /^(?!https?:\/\/).+\/$/.test(href) && - href.endsWith('/') - ) { + if (/^(?!https?:\/\/).+\/$/.test(href) && href.endsWith('/')) { href += 'index.html'; } } @@ -57,23 +49,18 @@ export default { if (slots.hash) { href += (slots.hash.startsWith('#') ? '' : '#') + slots.hash; } + + attributes.add({href}); } if (slots.color) { const {primary, dim} = getColors(slots.color); - style = `--primary-color: ${primary}; --dim-color: ${dim}`; - } - - if (slots.attributes?.style) { - if (style) { - style += '; ' + slots.attributes.style; - } else { - style = slots.attributes.style; - } + attributes.set('style', + `--primary-color: ${primary}; --dim-color: ${dim}`); } if (slots.tooltip) { - title = slots.tooltip; + attributes.set('title', slots.tooltip); } const content = @@ -83,11 +70,10 @@ export default { disallowedTags: new Set(['a']), })); - return html.tag('a', { - ...slots.attributes ?? {}, - href, - style, - title, - }, content); + return ( + html.tag('a', + attributes, + slots.attributes, + content)); }, } |