const m = require('mithril') export function generatePictureSource(item, cover) { if (!item || !item.media_alt_prefix) return null return { fallback: item.media_alt_prefix + '_small.jpg', jpeg: item.media_alt_prefix + '_small.jpg' + ' 720w, ' + item.media_alt_prefix + '_medium.jpg' + ' 1300w, ' + item.media_alt_prefix + '_large.jpg 1920w', avif: item.media_alt_prefix + '_small.avif' + ' 720w, ' + item.media_alt_prefix + '_medium.avif' + ' 1300w, ' + item.media_alt_prefix + '_large.avif 1920w', cover: cover, preview: item.media_avif_preview, } } let loadingImage = null let loader = null function cancelLoader() { if (loader) { loader.src = '' } loader = null } export function smartBanner(item) { if (!item) { if (loader) { cancelLoader() } loadingImage = null return null } if (!item.preview) { loadingImage = null cancelLoader() return item.banner } if (loadingImage !== item.banner && loader) { cancelLoader() } if (loadingImage === item.banner && !loader) { return item.banner } if (loadingImage === item.banner) { return item.preview } loadingImage = item.banner loader = new Image(); loader.src = item.banner; loader.onload = loader.onerror = function() { loader = null m.redraw() } return item.preview } export function getBannerImage(item, prefix) { if (!item || !item.banner_alt_prefix) return null let out = { path: prefix + item.path, name: item.name, original: item.banner_path, banner: item.banner_alt_prefix, preview: item.banner_avif_preview, } var deviceWidth = window.innerWidth var pixelRatio = window.devicePixelRatio || 1 if ((deviceWidth < 720 && pixelRatio <= 1) || (deviceWidth < 360 && pixelRatio <= 2)) { out.banner += '_small' } else if ((deviceWidth < 1300 && pixelRatio <= 1) || (deviceWidth < 650 && pixelRatio <= 2)) { out.banner += '_medium' } else { out.banner += '_large' } if (window.supportsavif) { out.banner += '.avif' } else { out.banner += '.jpg' } return out } export function getArticlePicture(pictureData, useRouteLink, path, altText, fallback) { if (!pictureData) return fallback || null return m(useRouteLink ? m.route.Link : 'a', { class: 'cover ' + (pictureData.preview ? 'haspreview' : ''), rel: useRouteLink ? null : 'noopener', target: useRouteLink ? null : '_blank', href: path, }, [ pictureData.preview ? m('img', { src: pictureData.preview }) : null, m('picture', [ m('source', { srcset: pictureData.avif, sizes: pictureData.cover, type: 'image/avif', }), m('img', { srcset: pictureData.jpeg, sizes: pictureData.cover, alt: altText, src: pictureData.fallback, }), ]) ]) }