pinafore/routes/_components/dialog/components/ImageDialog.html

49 lines
987 B
HTML
Raw Normal View History

<ModalDialog
:id
:label
background="var(--muted-modal-bg)"
muted="true"
className="image-modal-dialog"
2018-04-01 01:46:44 +00:00
>
{{#if type === 'gifv'}}
2018-03-31 17:45:11 +00:00
<AutoplayVideo
ariaLabel="Animated GIF: {{description || ''}}"
:poster
:src
:width
:height
/>
{{else}}
<img
src="{{src}}"
width="{{width}}"
height="{{height}}"
2018-02-05 16:44:46 +00:00
alt="{{description || ''}}"
/>
{{/if}}
</ModalDialog>
<style>
2018-04-01 01:46:44 +00:00
:global(.image-modal-dialog img, .image-modal-dialog video) {
object-fit: contain;
max-width: calc(100vw - 20px);
2018-02-23 04:04:19 +00:00
max-height: calc(100% - 20px);
overflow: hidden;
}
</style>
<script>
2018-02-05 17:43:45 +00:00
import ModalDialog from './ModalDialog.html'
import AutoplayVideo from '../../AutoplayVideo.html'
import { show } from '../helpers/showDialog'
import { oncreate } from '../helpers/onCreateDialog'
export default {
oncreate,
components: {
2018-03-31 17:45:11 +00:00
ModalDialog,
AutoplayVideo
},
methods: {
show
}
}
</script>