From 0be86304d24a5f11a64e9120c8ae1ce9121e64e8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 6 Oct 2019 23:28:30 +0300 Subject: Fix tests, more replacing with mergedConfig --- src/components/attachment/attachment.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/components/attachment/attachment.js') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index e93921fe..21cd0351 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -15,8 +15,8 @@ const Attachment = { data () { return { nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage, - hideNsfwLocal: this.$store.state.config.hideNsfw, - preloadImage: this.$store.state.config.preloadImage, + hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw, + preloadImage: this.$store.getters.mergedConfig.preloadImage, loading: false, img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), modalOpen: false, @@ -57,7 +57,7 @@ const Attachment = { } }, openModal (event) { - const modalTypes = this.$store.state.config.playVideosInModal + const modalTypes = this.$store.getters.mergedConfig.playVideosInModal ? ['image', 'video'] : ['image'] if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) || @@ -70,7 +70,7 @@ const Attachment = { } }, toggleHidden (event) { - if (this.$store.state.config.useOneClickNsfw && !this.showHidden) { + if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) { this.openModal(event) return } -- cgit v1.2.3-70-g09d2 From 0396c6f29d29f3c9d743e00955a25e2d844b02da Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 18 Oct 2019 16:04:17 -0400 Subject: 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(-) (limited to 'src/components/attachment/attachment.js') 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 -- cgit v1.2.3-70-g09d2