pinafore/routes/_components/NonAutoplayImg.html

43 lines
962 B
HTML
Raw Normal View History

{#if staticSrc === src}
<img class={className || ''}
aria-hidden={ariaHidden}
alt={alt || ''}
title={alt || ''}
{src}
on:imgLoad
on:imgLoadError />
{:else}
<img class="{className || ''} non-autoplay-zoom-in {isLink ? 'is-link' : ''}"
aria-hidden={ariaHidden}
alt={alt || ''}
title={alt || ''}
src={staticSrc}
on:imgLoad
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 { imgLoad, imgLoadError, mouseover } from '../_utils/events'
export default {
methods: {
2018-04-20 04:38:01 +00:00
onMouseOver (mouseOver) {
let { src, staticSrc } = this.get()
this.refs.node.src = mouseOver ? src : staticSrc
}
},
events: {
imgLoad,
imgLoadError,
mouseover
}
}
</script>