pinafore/routes/_components/NonAutoplayImg.html
Nolan Lawson 8d5690d63d
remove get() with string from Svelte calls (#169)
* remove get() with string pt 1

* remove get() with string pt 2

* fix typo

* fix some null exceptions in get()

* fixup code style
2018-04-19 09:37:05 -07:00

40 lines
950 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>