From 0396c6f29d29f3c9d743e00955a25e2d844b02da Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 18 Oct 2019 16:04:17 -0400 Subject: [PATCH] keep image natural ratio in gallery row --- src/components/attachment/attachment.js | 8 +++++++- src/components/attachment/attachment.vue | 1 + src/components/gallery/gallery.js | 24 ++++++++++++++++++++--- src/components/gallery/gallery.vue | 2 ++ src/components/still-image/still-image.js | 4 +++- 5 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index e93921fe..0880bd7f 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -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 }) } } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index af16e302..0748b2f0 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -58,6 +58,7 @@ :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url" + :image-load-handler="onImageLoad" /> diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 3610f53d..e8cbb526 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -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 {} + } + } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 3877987a..803ec471 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -18,6 +18,8 @@ :nsfw="nsfw" :attachment="attachment" :allow-play="false" + :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)" + :style="itemStyle(attachment.id)" /> diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 02e98f19..9c2d446b 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -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