2019-07-12 11:02:37 +00:00
|
|
|
<template>
|
2019-07-19 11:21:20 +00:00
|
|
|
<masonry>
|
2019-07-19 15:11:49 +00:00
|
|
|
<div v-for="(item, index) in attachments" :key="index">
|
2019-07-20 16:34:02 +00:00
|
|
|
<img :src="OC.generateUrl('/apps/social/document/get/resized?id=' + item.id)" @click="showModal(index)">
|
2019-07-19 15:11:49 +00:00
|
|
|
</div>
|
2019-07-20 16:34:02 +00:00
|
|
|
<modal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
|
2019-07-20 20:15:37 +00:00
|
|
|
size="full" @close="closeModal" @previous="showPrevious"
|
2019-07-20 16:34:02 +00:00
|
|
|
@next="showNext">
|
|
|
|
<div class="modal__content">
|
2019-07-20 20:26:51 +00:00
|
|
|
<canvas ref="modalCanvas" />
|
2019-07-20 16:34:02 +00:00
|
|
|
</div>
|
2019-07-19 15:11:49 +00:00
|
|
|
</modal>
|
2019-07-19 11:21:20 +00:00
|
|
|
</masonry>
|
2019-07-12 11:02:37 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-07-15 15:31:38 +00:00
|
|
|
|
2019-11-05 15:41:02 +00:00
|
|
|
import Modal from '@nextcloud/vue/dist/Components/Modal'
|
2019-07-19 13:43:28 +00:00
|
|
|
|
2019-07-12 11:02:37 +00:00
|
|
|
export default {
|
|
|
|
name: 'PostAttachment',
|
|
|
|
components: {
|
2019-07-20 16:34:02 +00:00
|
|
|
Modal
|
2019-07-12 11:02:37 +00:00
|
|
|
},
|
|
|
|
mixins: [],
|
2019-07-15 13:13:35 +00:00
|
|
|
props: {
|
2019-07-20 16:44:08 +00:00
|
|
|
attachments: {
|
|
|
|
type: Array,
|
|
|
|
default: Array
|
|
|
|
}
|
2019-07-15 13:13:35 +00:00
|
|
|
},
|
2019-07-12 11:02:37 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2019-07-19 15:11:49 +00:00
|
|
|
modal: false,
|
|
|
|
current: ''
|
2019-07-12 11:02:37 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2019-07-20 20:15:37 +00:00
|
|
|
displayResizedImage() {
|
|
|
|
var canvas = this.$refs.modalCanvas
|
2019-07-20 20:26:51 +00:00
|
|
|
var ctx = canvas.getContext('2d')
|
2019-07-20 20:15:37 +00:00
|
|
|
var img = new Image()
|
|
|
|
img.onload = function() {
|
2019-07-20 20:26:51 +00:00
|
|
|
var width = img.width
|
2019-07-20 20:15:37 +00:00
|
|
|
var height = img.height
|
2019-07-20 20:26:51 +00:00
|
|
|
if (width > window.innerWidth) {
|
|
|
|
height = height * (window.innerWidth / width)
|
2019-07-20 20:15:37 +00:00
|
|
|
width = window.innerWidth
|
|
|
|
}
|
2019-07-20 20:26:51 +00:00
|
|
|
if (height > window.innerHeight) {
|
|
|
|
width = width * (window.innerHeight / height)
|
2019-07-20 20:15:37 +00:00
|
|
|
height = window.innerHeight
|
|
|
|
}
|
|
|
|
canvas.width = width
|
|
|
|
canvas.height = height
|
|
|
|
ctx.drawImage(img, 0, 0, width, height)
|
|
|
|
}
|
|
|
|
img.src = OC.generateUrl('/apps/social/document/get?id=' + this.attachments[this.current].id)
|
|
|
|
},
|
2019-07-19 15:11:49 +00:00
|
|
|
showModal(idx) {
|
2019-07-20 16:34:02 +00:00
|
|
|
this.current = idx
|
2019-07-20 20:15:37 +00:00
|
|
|
this.displayResizedImage()
|
2019-07-19 13:43:28 +00:00
|
|
|
this.modal = true
|
|
|
|
},
|
|
|
|
closeModal() {
|
|
|
|
this.modal = false
|
2019-07-19 15:11:49 +00:00
|
|
|
},
|
|
|
|
showPrevious() {
|
2019-07-20 16:34:02 +00:00
|
|
|
this.current--
|
2019-07-20 20:15:37 +00:00
|
|
|
this.displayResizedImage()
|
2019-07-19 15:11:49 +00:00
|
|
|
},
|
|
|
|
showNext() {
|
2019-07-20 16:34:02 +00:00
|
|
|
this.current++
|
2019-07-20 20:15:37 +00:00
|
|
|
this.displayResizedImage()
|
2019-07-19 13:43:28 +00:00
|
|
|
}
|
2019-07-12 11:02:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|