diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/PostAttachment.vue | 78 | ||||
| -rw-r--r-- | src/components/TimelinePost.vue | 10 | ||||
| -rw-r--r-- | src/main.js | 2 |
3 files changed, 89 insertions, 1 deletions
diff --git a/src/components/PostAttachment.vue b/src/components/PostAttachment.vue new file mode 100644 index 00000000..471f6e69 --- /dev/null +++ b/src/components/PostAttachment.vue @@ -0,0 +1,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" /> + </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> diff --git a/src/components/TimelinePost.vue b/src/components/TimelinePost.vue index 6a37fb92..c97546bc 100644 --- a/src/components/TimelinePost.vue +++ b/src/components/TimelinePost.vue @@ -24,6 +24,9 @@ </div> <!-- eslint-disable-next-line vue/no-v-html --> <div class="post-message" v-html="formatedMessage" /> + <div v-if="hasAttachments" class="post-attachments"> + <post-attachment :attachments="item.attachment" /> + </div> <div v-click-outside="hidePopoverMenu" class="post-actions"> <a v-tooltip.bottom="t('social', 'Reply')" class="icon-reply" @click.prevent="reply" /> <a v-if="item.actor_info.account !== cloudId" v-tooltip.bottom="t('social', 'Boost')" @@ -54,6 +57,7 @@ import pluginMention from 'linkifyjs/plugins/mention' import 'linkifyjs/string' import popoverMenu from './../mixins/popoverMenu' import currentUser from './../mixins/currentUserMixin' +import PostAttachment from './PostAttachment' pluginTag(linkify) pluginMention(linkify) @@ -61,7 +65,8 @@ pluginMention(linkify) export default { name: 'TimelinePost', components: { - Avatar + Avatar, + PostAttachment }, mixins: [popoverMenu, currentUser], props: { @@ -118,6 +123,9 @@ export default { avatarUrl() { return OC.generateUrl('/apps/social/api/v1/global/actor/avatar?id=' + this.item.attributedTo) }, + hasAttachments() { + return (typeof this.item.attachment !== 'undefined') + }, isBoosted() { if (typeof this.item.action === 'undefined') { return false diff --git a/src/main.js b/src/main.js index cc235656..a81726bf 100644 --- a/src/main.js +++ b/src/main.js @@ -30,6 +30,7 @@ import vuetwemoji from 'vue-twemoji' import contenteditableDirective from 'vue-contenteditable-directive' import ClickOutside from 'vue-click-outside' import VTooltip from 'nextcloud-vue/dist/Directives/Tooltip' +import VueMasonry from 'vue-masonry-css' sync(store, router) @@ -56,6 +57,7 @@ Vue.use(vuetwemoji, { className: 'emoji', // custom className for image output size: 'twemoji' // image size }) +Vue.use(VueMasonry) /* eslint-disable-next-line no-new */ new Vue({ |