keep image natural ratio in gallery row

This commit is contained in:
taehoon 2019-10-18 16:04:17 -04:00
parent 6c4d23714a
commit 0396c6f29d
5 changed files with 34 additions and 5 deletions

View file

@ -10,7 +10,8 @@ const Attachment = {
'statusId',
'size',
'allowPlay',
'setMedia'
'setMedia',
'naturalSizeLoad'
],
data () {
return {
@ -88,6 +89,11 @@ const Attachment = {
} else {
this.showHidden = !this.showHidden
}
},
onImageLoad (image) {
const width = image.naturalWidth
const height = image.naturalHeight
this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
}
}
}

View file

@ -58,6 +58,7 @@
:referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url"
:image-load-handler="onImageLoad"
/>
</a>

View file

@ -7,6 +7,11 @@ const Gallery = {
'nsfw',
'setMedia'
],
data () {
return {
sizes: {}
}
},
components: { Attachment },
computed: {
rows () {
@ -23,12 +28,25 @@ const Gallery = {
}
return rows
},
rowStyle () {
return itemsPerRow => ({ 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` })
},
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))}%` }
},
itemStyle (id) {
const size = this.sizes[id]
if (size) {
return { flex: size.width / size.height }
} else {
return {}
}
}
}
}

View file

@ -18,6 +18,8 @@
:nsfw="nsfw"
:attachment="attachment"
:allow-play="false"
:natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
:style="itemStyle(attachment.id)"
/>
</div>
</div>

View file

@ -3,7 +3,8 @@ const StillImage = {
'src',
'referrerpolicy',
'mimetype',
'imageLoadError'
'imageLoadError',
'imageLoadHandler'
],
data () {
return {
@ -17,6 +18,7 @@ const StillImage = {
},
methods: {
onLoad () {
this.imageLoadHandler && this.imageLoadHandler(this.$refs.src)
const canvas = this.$refs.canvas
if (!canvas) return
const width = this.$refs.src.naturalWidth