From 535acb34613b5cf7e22654619f4337b94b70644d Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Mon, 12 Jun 2023 16:35:38 -0300 Subject: content: cut html.template boilerplate --- src/content/dependencies/image.js | 346 +++++++++++++++++++------------------- 1 file changed, 169 insertions(+), 177 deletions(-) (limited to 'src/content/dependencies/image.js') diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index bd7898b1..2fbe1188 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -24,189 +24,181 @@ export default { return data; }, - generate(data, { + slots: { + src: {type: 'string'}, + + path: { + validate: v => v.validateArrayItems(v.isString), + }, + + thumb: {type: 'string'}, + + reveal: {type: 'boolean', default: true}, + link: {type: 'boolean', default: false}, + lazy: {type: 'boolean', default: false}, + square: {type: 'boolean', default: false}, + + id: {type: 'string'}, + class: {type: 'string'}, + alt: {type: 'string'}, + width: {type: 'number'}, + height: {type: 'number'}, + + missingSourceContent: {type: 'html'}, + }, + + generate(data, slots, { getSizeOfImageFile, html, language, thumb, to, }) { - return html.template({ - annotation: 'image', - - slots: { - src: { - type: 'string', - }, - - path: { - validate: v => v.validateArrayItems(v.isString), - }, - - thumb: {type: 'string'}, - - reveal: {type: 'boolean', default: true}, - link: {type: 'boolean', default: false}, - lazy: {type: 'boolean', default: false}, - square: {type: 'boolean', default: false}, - - id: {type: 'string'}, - class: {type: 'string'}, - alt: {type: 'string'}, - width: {type: 'number'}, - height: {type: 'number'}, - - missingSourceContent: {type: 'html'}, - }, - - content(slots) { - let originalSrc; - - if (slots.src) { - originalSrc = slots.src; - } else if (!empty(slots.path)) { - originalSrc = to(...slots.path); - } else { - originalSrc = ''; - } - - const thumbSrc = - originalSrc && - (slots.thumb - ? thumb[slots.thumb](originalSrc) - : originalSrc); - - const willLink = typeof slots.link === 'string' || slots.link; - - const willReveal = - slots.reveal && - originalSrc && - !empty(data.contentWarnings); - - const willSquare = slots.square; - - const idOnImg = willLink ? null : slots.id; - const idOnLink = willLink ? slots.id : null; - const classOnImg = willLink ? null : slots.class; - const classOnLink = willLink ? slots.class : null; - - if (!originalSrc) { - return prepare( - html.tag('div', {class: 'image-text-area'}, - slots.missingSourceContent)); - } - - let fileSize = null; - if (willLink) { - const mediaRoot = to('media.root'); - if (originalSrc.startsWith(mediaRoot)) { - fileSize = - getSizeOfImageFile( - originalSrc - .slice(mediaRoot.length) - .replace(/^\//, '')); - } - } - - let reveal = null; - if (willReveal) { - reveal = [ - language.$('misc.contentWarnings', { - warnings: language.formatUnitList(data.contentWarnings), + let originalSrc; + + if (slots.src) { + originalSrc = slots.src; + } else if (!empty(slots.path)) { + originalSrc = to(...slots.path); + } else { + originalSrc = ''; + } + + const thumbSrc = + originalSrc && + (slots.thumb + ? thumb[slots.thumb](originalSrc) + : originalSrc); + + const willLink = typeof slots.link === 'string' || slots.link; + + const willReveal = + slots.reveal && + originalSrc && + !empty(data.contentWarnings); + + const willSquare = slots.square; + + const idOnImg = willLink ? null : slots.id; + const idOnLink = willLink ? slots.id : null; + const classOnImg = willLink ? null : slots.class; + const classOnLink = willLink ? slots.class : null; + + if (!originalSrc) { + return prepare( + html.tag('div', {class: 'image-text-area'}, + slots.missingSourceContent)); + } + + let fileSize = null; + if (willLink) { + const mediaRoot = to('media.root'); + if (originalSrc.startsWith(mediaRoot)) { + fileSize = + getSizeOfImageFile( + originalSrc + .slice(mediaRoot.length) + .replace(/^\//, '')); + } + } + + let reveal = null; + if (willReveal) { + reveal = [ + language.$('misc.contentWarnings', { + warnings: language.formatUnitList(data.contentWarnings), + }), + html.tag('br'), + html.tag('span', {class: 'reveal-interaction'}, + language.$('misc.contentWarnings.reveal')), + ]; + } + + const imgAttributes = { + id: idOnImg, + class: classOnImg, + alt: slots.alt, + width: slots.width, + height: slots.height, + 'data-original-size': fileSize, + }; + + const nonlazyHTML = + originalSrc && + prepare( + html.tag('img', { + ...imgAttributes, + src: thumbSrc, + })); + + if (slots.lazy) { + return html.tags([ + html.tag('noscript', nonlazyHTML), + prepare( + html.tag('img', + { + ...imgAttributes, + class: 'lazy', + 'data-original': thumbSrc, }), - html.tag('br'), - html.tag('span', {class: 'reveal-interaction'}, - language.$('misc.contentWarnings.reveal')), - ]; - } - - const imgAttributes = { - id: idOnImg, - class: classOnImg, - alt: slots.alt, - width: slots.width, - height: slots.height, - 'data-original-size': fileSize, - }; - - const nonlazyHTML = - originalSrc && - prepare( - html.tag('img', { - ...imgAttributes, - src: thumbSrc, - })); - - if (slots.lazy) { - return html.tags([ - html.tag('noscript', nonlazyHTML), - prepare( - html.tag('img', - { - ...imgAttributes, - class: 'lazy', - 'data-original': thumbSrc, - }), - true), + true), + ]); + } + + return nonlazyHTML; + + function prepare(content, hide = false) { + let wrapped = content; + + wrapped = + html.tag('div', {class: 'image-container'}, + html.tag('div', {class: 'image-inner-area'}, + wrapped)); + + if (willReveal) { + wrapped = + html.tag('div', {class: 'reveal'}, [ + wrapped, + html.tag('span', {class: 'reveal-text-container'}, + html.tag('span', {class: 'reveal-text'}, + reveal)), ]); - } - - return nonlazyHTML; - - function prepare(content, hide = false) { - let wrapped = content; - - wrapped = - html.tag('div', {class: 'image-container'}, - html.tag('div', {class: 'image-inner-area'}, - wrapped)); - - if (willReveal) { - wrapped = - html.tag('div', {class: 'reveal'}, [ - wrapped, - html.tag('span', {class: 'reveal-text-container'}, - html.tag('span', {class: 'reveal-text'}, - reveal)), - ]); - } - - if (willSquare) { - wrapped = - html.tag('div', - { - class: [ - 'square', - hide && !willLink && 'js-hide' - ], - }, - - html.tag('div', {class: 'square-content'}, - wrapped)); - } - - if (willLink) { - wrapped = html.tag('a', - { - id: idOnLink, - class: [ - 'box', - 'image-link', - hide && 'js-hide', - classOnLink, - ], - - href: - (typeof slots.link === 'string' - ? slots.link - : originalSrc), - }, - wrapped); - } - - return wrapped; - } - }, - }); - } + } + + if (willSquare) { + wrapped = + html.tag('div', + { + class: [ + 'square', + hide && !willLink && 'js-hide' + ], + }, + + html.tag('div', {class: 'square-content'}, + wrapped)); + } + + if (willLink) { + wrapped = html.tag('a', + { + id: idOnLink, + class: [ + 'box', + 'image-link', + hide && 'js-hide', + classOnLink, + ], + + href: + (typeof slots.link === 'string' + ? slots.link + : originalSrc), + }, + wrapped); + } + + return wrapped; + } + }, }; -- cgit 1.3.0-6-gf8a5