pinafore/routes/_components/LazyImage.html

76 lines
1.7 KiB
HTML
Raw Normal View History

<div class="lazy-image {fillFixSize ? 'fixed-size': ''}" style={computedStyle} >
2018-08-31 23:35:26 +00:00
<img
class="{fillFixSize ? 'fixed-size-img': ''}"
2018-08-31 23:35:26 +00:00
aria-hidden={ariaHidden}
{alt}
{title}
{width}
{height}
src={displaySrc}
style={focusStyle}
2018-08-31 23:35:26 +00:00
ref:node
/>
2018-03-14 06:07:30 +00:00
</div>
<style>
.lazy-image {
margin: 0;
padding: 0;
2018-03-14 06:07:30 +00:00
overflow: hidden;
display: flex;
2018-03-14 06:07:30 +00:00
}
.fixed-size-img {
width: 100%;
height: 100%;
}
.fixed-size {
position: absolute;
width: 100%;
height: 100%;
}
2018-03-14 06:07:30 +00:00
</style>
<script>
import { decodeImage } from '../_utils/decodeImage'
import { coordsToPercent } from '../_utils/coordsToPercent'
2018-03-14 14:24:16 +00:00
export default {
async oncreate () {
try {
2018-08-31 23:35:26 +00:00
await decodeImage(this.refs.node)
} catch (e) {
2018-08-31 23:35:26 +00:00
this.set({ error: true })
2018-03-14 14:24:16 +00:00
}
},
data: () => ({
2018-08-31 23:35:26 +00:00
error: false,
forceSize: false,
fallback: void 0,
focus: void 0,
background: '',
width: void 0,
height: void 0,
ariaHidden: false,
alt: '',
title: ''
}),
computed: {
computedStyle: ({ background }) => {
return [
background && `background: ${background};`
].filter(Boolean).join('')
2018-08-31 23:35:26 +00:00
},
focusStyle: ({ focus }) => {
// Here we do a pure css version instead of using
// https://github.com/jonom/jquery-focuspoint#1-calculate-your-images-focus-point
if (!focus) return 'background-position: center;'
return `object-position: ${coordsToPercent(focus.x)}% ${100 - coordsToPercent(focus.y)}%;`
},
fillFixSize: ({ forceSize, $largeInlineMedia }) => !$largeInlineMedia && !forceSize,
2018-08-31 23:35:26 +00:00
displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
}
2018-03-14 06:07:30 +00:00
}
</script>