nfp_sites/nfp_moe/app/media.js

120 lines
2.8 KiB
JavaScript
Raw Normal View History

const m = require('mithril')
2022-08-08 07:22:41 +00:00
export function generatePictureSource(item, cover) {
if (!item || !item.media_alt_prefix) return null
2022-08-08 07:22:41 +00:00
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
2022-08-08 07:22:41 +00:00
}
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' : ''),
2022-08-08 07:22:41 +00:00
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,
}),
])
2022-08-08 07:22:41 +00:00
])
}