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

54 lines
1.3 KiB
JavaScript
Raw Normal View History

2019-01-26 15:45:03 +00:00
import Attachment from '../attachment/attachment.vue'
2019-10-21 19:13:11 +00:00
import { chunk, last, dropRight, sumBy } from 'lodash'
2019-01-26 15:45:03 +00:00
const Gallery = {
props: [
'attachments',
'nsfw',
'setMedia'
],
data () {
return {
sizes: {}
}
},
2019-01-26 15:45:03 +00:00
components: { Attachment },
computed: {
rows () {
if (!this.attachments) {
return []
}
const rows = chunk(this.attachments, 3)
if (last(rows).length === 1 && rows.length > 1) {
// if 1 attachment on last row -> add it to the previous row instead
const lastAttachment = last(rows)[0]
const allButLastRow = dropRight(rows)
last(allButLastRow).push(lastAttachment)
return allButLastRow
}
return rows
},
useContainFit () {
return this.$store.state.config.useContainFit
}
},
methods: {
onNaturalSizeLoad (id, size) {
this.$set(this.sizes, id, size)
},
rowStyle (itemsPerRow) {
return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
},
2019-10-21 19:13:11 +00:00
itemStyle (id, row) {
const total = sumBy(row, item => this.getAspectRatio(item.id))
return { flexGrow: this.getAspectRatio(id) / total }
},
getAspectRatio (id) {
const size = this.sizes[id]
2019-10-21 19:13:11 +00:00
return size ? size.width / size.height : 1
}
2019-01-26 15:45:03 +00:00
}
}
export default Gallery