60 lines
1.3 KiB
HTML
60 lines
1.3 KiB
HTML
<img
|
|
class={computedClass}
|
|
aria-hidden={ariaHidden}
|
|
{alt}
|
|
{title}
|
|
{width}
|
|
{height}
|
|
src={displaySrc}
|
|
on:mouseover="onMouseOver(event)"
|
|
/>
|
|
<style>
|
|
.non-autoplay-zoom-in {
|
|
cursor: zoom-in;
|
|
}
|
|
.non-autoplay-zoom-in.is-link {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { mouseover } from '../_utils/events'
|
|
import { decodeImage } from '../_utils/decodeImage'
|
|
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
|
|
import { classname } from '../_utils/classname'
|
|
|
|
export default {
|
|
async oncreate () {
|
|
let { staticSrc } = this.get()
|
|
try {
|
|
await decodeImage(staticSrc)
|
|
this.set({ displaySrc: staticSrc })
|
|
this.fire('imgLoad')
|
|
} catch (e) {
|
|
this.fire('imgLoadError', e)
|
|
}
|
|
},
|
|
methods: {
|
|
onMouseOver (mouseOver) {
|
|
let { src, staticSrc, displaySrc } = this.get()
|
|
if (displaySrc !== ONE_TRANSPARENT_PIXEL) {
|
|
this.set({ displaySrc: mouseOver ? src : staticSrc })
|
|
}
|
|
}
|
|
},
|
|
events: {
|
|
mouseover
|
|
},
|
|
data: () => ({
|
|
displaySrc: ONE_TRANSPARENT_PIXEL,
|
|
alt: '',
|
|
title: ''
|
|
}),
|
|
computed: {
|
|
computedClass: ({ className, src, staticSrc, isLink }) => (classname(
|
|
className,
|
|
src !== staticSrc && 'non-autoplay-zoom-in',
|
|
isLink && 'is-link'
|
|
))
|
|
}
|
|
}
|
|
</script> |