aboutsummaryrefslogtreecommitdiff
path: root/src/components/gallery
diff options
context:
space:
mode:
authorHenry Jameson <me@hjkos.com>2021-06-18 02:04:01 +0300
committerHenry Jameson <me@hjkos.com>2021-06-18 02:04:01 +0300
commitf15599e6e57477131ba5592e2874916ed1da06e2 (patch)
treec93759edaf658cabbdc8c3974a00c4495b8e8ba7 /src/components/gallery
parent90345f158ff2eb12e619dbd7406f2fa81c379637 (diff)
gallery in post status form!
Diffstat (limited to 'src/components/gallery')
-rw-r--r--src/components/gallery/gallery.js38
-rw-r--r--src/components/gallery/gallery.vue9
2 files changed, 29 insertions, 18 deletions
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 134ea77e..cca67dbd 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -4,9 +4,15 @@ import { sumBy } from 'lodash'
const Gallery = {
props: [
'attachments',
+ 'limitRows',
+ 'descriptions',
'nsfw',
'setMedia',
- 'size'
+ 'size',
+ 'editable',
+ 'removeAttachment',
+ 'editAttachment',
+ 'maxPerRow'
],
data () {
return {
@@ -20,24 +26,19 @@ const Gallery = {
if (!this.attachments) {
return []
}
- console.log(this.size)
if (this.size === 'hide') {
return this.attachments.map(item => ({ minimal: true, items: [item] }))
}
const rows = this.attachments.reduce((acc, attachment, i) => {
+ if (this.size === 'small' && acc.length === 2) return acc
if (attachment.mimetype.includes('audio')) {
return [...acc, { audio: true, items: [attachment] }, { items: [] }]
}
- const maxPerRow = 3
- const attachmentsRemaining = this.attachments.length - i - 1
+ const maxPerRow = this.maxPerRow || 3
+ const attachmentsRemaining = this.attachments.length - i + 1
const currentRow = acc[acc.length - 1].items
- if (
- currentRow.length <= maxPerRow ||
- attachmentsRemaining === 1
- ) {
- currentRow.push(attachment)
- }
- if (currentRow.length === maxPerRow && attachmentsRemaining > 1) {
+ currentRow.push(attachment)
+ if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
return [...acc, { items: [] }]
} else {
return acc
@@ -51,7 +52,9 @@ const Gallery = {
}, 0)
},
tooManyAttachments () {
- if (this.size === 'hide') {
+ if (this.editable || this.size === 'small') {
+ return false
+ } else if (this.size === 'hide') {
return this.attachments.length > 8
} else {
return this.attachmentsDimensionalScore > 1
@@ -59,8 +62,8 @@ const Gallery = {
}
},
methods: {
- onNaturalSizeLoad (id, size) {
- this.$set(this.sizes, id, size)
+ onNaturalSizeLoad ({ id, width, height }) {
+ this.$set(this.sizes, id, { width, height })
},
rowStyle (row) {
if (row.audio) {
@@ -81,8 +84,11 @@ const Gallery = {
this.hidingLong = event
},
openGallery () {
- this.setMedia()
- this.$store.dispatch('setCurrent', this.attachments[0])
+ this.$store.dispatch('setMedia', this.attachments)
+ this.$store.dispatch('setCurrentMedia', this.attachments[0])
+ },
+ onMedia () {
+ this.$store.dispatch('setMedia', this.attachments)
}
}
}
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 8e08e514..cedf64d3 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -17,13 +17,18 @@
v-for="attachment in row.items"
class="gallery-item"
:key="attachment.id"
- :set-media="setMedia"
:nsfw="nsfw"
:attachment="attachment"
:allow-play="false"
:size="size"
- :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
+ :editable="editable"
+ :remove="removeAttachment"
+ :edit="editAttachment"
+ :description="descriptions && descriptions[attachment.id]"
+ :hideDescription="tooManyAttachments && hidingLong"
:style="itemStyle(attachment.id, row.items)"
+ @setMedia="onMedia"
+ @naturalSizeLoad="onNaturalSizeLoad"
/>
</div>
</div>