1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<template>
<masonry>
<div v-for="(item, index) in attachments" :key="index">
<img :src="OC.generateUrl('/apps/social/document/get/resized?id=' + item.id)" @click="showModal(index)">
</div>
<modal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
size="full" @close="closeModal" @previous="showPrevious"
@next="showNext">
<div class="modal__content">
<canvas ref="modalCanvas"></canvas>
</div>
</modal>
</masonry>
</template>
<script>
import Modal from 'nextcloud-vue/dist/Components/Modal'
export default {
name: 'PostAttachment',
components: {
Modal
},
mixins: [],
props: {
attachments: {
type: Array,
default: Array
}
},
data() {
return {
modal: false,
current: ''
}
},
methods: {
displayResizedImage() {
var canvas = this.$refs.modalCanvas
var ctx = canvas.getContext("2d")
var img = new Image()
img.onload = function() {
var width= img.width
var height = img.height
if ( width > window.innerWidth ) {
height = height * ( window.innerWidth / width )
width = window.innerWidth
}
if ( height > window.innerHeight ) {
width = width * ( window.innerHeight / height )
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)
},
showModal(idx) {
this.current = idx
this.displayResizedImage()
this.modal = true
},
closeModal() {
this.modal = false
},
showPrevious() {
this.current--
this.displayResizedImage()
},
showNext() {
this.current++
this.displayResizedImage()
}
}
}
</script>
|
