forked from cybrespace/pinafore
40 lines
No EOL
951 B
HTML
40 lines
No EOL
951 B
HTML
{{#if staticSrc === src}}
|
|
<img class="{{className || ''}}"
|
|
aria-hidden="{{ariaHidden}}"
|
|
alt="{{alt || ''}}"
|
|
title="{{alt || ''}}"
|
|
src="{{src}}"
|
|
on:imgLoadError />
|
|
{{else}}
|
|
<img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
|
|
aria-hidden="{{ariaHidden}}"
|
|
alt="{{alt || ''}}"
|
|
title="{{alt || ''}}"
|
|
src="{{staticSrc}}"
|
|
on:imgLoadError
|
|
on:mouseover="onMouseOver(event)"
|
|
ref:node />
|
|
{{/if}}
|
|
<style>
|
|
.non-autoplay-zoom-in {
|
|
cursor: zoom-in;
|
|
}
|
|
.non-autoplay-zoom-in.is-link {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { imgLoadError, mouseover } from '../_utils/events'
|
|
export default {
|
|
methods: {
|
|
onMouseOver (mouseOver) {
|
|
let { src, staticSrc } = this.get()
|
|
this.refs.node.src = mouseOver ? src : staticSrc
|
|
}
|
|
},
|
|
events: {
|
|
imgLoadError,
|
|
mouseover
|
|
}
|
|
}
|
|
</script> |