akkoma-fe/src/components/gallery/gallery.js

119 lines
3.3 KiB
JavaScript
Raw Normal View History

2019-01-26 15:45:03 +00:00
import Attachment from '../attachment/attachment.vue'
2022-03-18 11:32:36 +00:00
import { sumBy, set } from 'lodash'
2019-01-26 15:45:03 +00:00
const Gallery = {
props: [
'attachments',
2021-06-17 23:04:01 +00:00
'limitRows',
'descriptions',
'limit',
2019-01-26 15:45:03 +00:00
'nsfw',
'setMedia',
2021-06-17 23:04:01 +00:00
'size',
'editable',
'removeAttachment',
'shiftUpAttachment',
'shiftDnAttachment',
2021-06-17 23:04:01 +00:00
'editAttachment',
'grid'
2019-01-26 15:45:03 +00:00
],
data () {
return {
sizes: {},
hidingLong: true
}
2019-01-26 15:45:03 +00:00
},
components: { Attachment },
computed: {
rows () {
if (!this.attachments) {
return []
}
const attachments = this.limit > 0
? this.attachments.slice(0, this.limit)
: this.attachments
if (this.size === 'hide') {
return attachments.map(item => ({ minimal: true, items: [item] }))
2019-01-26 15:45:03 +00:00
}
const rows = this.grid
? [{ grid: true, items: attachments }]
: attachments.reduce((acc, attachment, i) => {
if (attachment.mimetype.includes('audio')) {
return [...acc, { audio: true, items: [attachment] }, { items: [] }]
}
if (!(
attachment.mimetype.includes('image') ||
attachment.mimetype.includes('video') ||
attachment.mimetype.includes('flash')
)) {
return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
}
const maxPerRow = 3
const attachmentsRemaining = this.attachments.length - i + 1
const currentRow = acc[acc.length - 1].items
currentRow.push(attachment)
if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
return [...acc, { items: [] }]
} else {
return acc
}
}, [{ items: [] }]).filter(_ => _.items.length > 0)
2019-01-26 15:45:03 +00:00
return rows
},
attachmentsDimensionalScore () {
return this.rows.reduce((acc, row) => {
let size = 0
if (row.minimal) {
size += 1 / 8
} else if (row.audio) {
size += 1 / 4
} else {
size += 1 / (row.items.length + 0.6)
}
return acc + size
}, 0)
},
tooManyAttachments () {
2021-06-17 23:04:01 +00:00
if (this.editable || this.size === 'small') {
return false
} else if (this.size === 'hide') {
return this.attachments.length > 8
} else {
return this.attachmentsDimensionalScore > 1
}
2019-01-26 15:45:03 +00:00
}
},
methods: {
2021-06-17 23:04:01 +00:00
onNaturalSizeLoad ({ id, width, height }) {
2022-03-18 11:32:36 +00:00
set(this.sizes, id, { width, height })
},
rowStyle (row) {
if (row.audio) {
return { 'padding-bottom': '25%' } // fixed reduced height for audio
} else if (!row.minimal && !row.grid) {
return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
}
},
2019-10-21 19:13:11 +00:00
itemStyle (id, row) {
const total = sumBy(row, item => this.getAspectRatio(item.id))
return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
2019-10-21 19:13:11 +00:00
},
getAspectRatio (id) {
const size = this.sizes[id]
2019-10-21 19:13:11 +00:00
return size ? size.width / size.height : 1
},
toggleHidingLong (event) {
this.hidingLong = event
},
openGallery () {
2021-06-17 23:04:01 +00:00
this.$store.dispatch('setMedia', this.attachments)
this.$store.dispatch('setCurrentMedia', this.attachments[0])
},
onMedia () {
this.$store.dispatch('setMedia', this.attachments)
2019-01-26 15:45:03 +00:00
}
}
}
export default Gallery