Jonatan Nilsson
6565409e52
nfp_moe: Complete re-thinking of all loading. Smarter loading and lighter site. Better user experience among other things.
120 lines
No EOL
2.8 KiB
JavaScript
120 lines
No EOL
2.8 KiB
JavaScript
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,
|
|
}),
|
|
])
|
|
])
|
|
} |