pinafore/routes/_components/NonAutoplayImg.html

56 lines
1.1 KiB
HTML
Raw Normal View History

<img
class={computedClass}
aria-hidden={ariaHidden}
{alt}
{title}
{width}
{height}
src={displaySrc}
on:mouseover="onMouseOver(event)"
2018-08-31 23:35:26 +00:00
ref:node
/>
<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 { classname } from '../_utils/classname'
export default {
async oncreate () {
try {
2018-08-31 23:35:26 +00:00
await decodeImage(this.refs.node)
this.fire('imgLoad')
} catch (e) {
this.fire('imgLoadError', e)
}
},
methods: {
2018-04-20 04:38:01 +00:00
onMouseOver (mouseOver) {
2018-08-31 23:35:26 +00:00
this.set({ mouseOver })
}
},
events: {
mouseover
},
data: () => ({
alt: '',
2018-08-31 23:35:26 +00:00
title: '',
mouseOver: false
}),
computed: {
computedClass: ({ className, src, staticSrc, isLink }) => (classname(
className,
src !== staticSrc && 'non-autoplay-zoom-in',
isLink && 'is-link'
2018-08-31 23:35:26 +00:00
)),
displaySrc: ({ src, staticSrc, mouseOver }) => (mouseOver ? src : staticSrc)
}
}
</script>