commit: f5c37231e14a0d55753505ccf7991714e8cf9057
parent: cd956185207aca84666d38f516b6c4b666ee846b
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Wed, 23 Oct 2019 16:17:56 +0000
Merge branch 'improve-gallery-sizing-logic' into 'develop'
Improve gallery sizing logic
See merge request pleroma/pleroma-fe!975
Diffstat:
5 files changed, 57 insertions(+), 37 deletions(-)
diff --git 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
@@ -58,6 +58,7 @@
:referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url"
+ :image-load-handler="onImageLoad"
/>
</a>
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
@@ -1,23 +1,18 @@
import Attachment from '../attachment/attachment.vue'
-import { chunk, last, dropRight } from 'lodash'
+import { chunk, last, dropRight, sumBy } from 'lodash'
const Gallery = {
- data: () => ({
- width: 500
- }),
props: [
'attachments',
'nsfw',
'setMedia'
],
- components: { Attachment },
- mounted () {
- this.resize()
- window.addEventListener('resize', this.resize)
- },
- destroyed () {
- window.removeEventListener('resize', this.resize)
+ data () {
+ return {
+ sizes: {}
+ }
},
+ components: { Attachment },
computed: {
rows () {
if (!this.attachments) {
@@ -33,21 +28,24 @@ const Gallery = {
}
return rows
},
- rowHeight () {
- return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
- },
useContainFit () {
return this.$store.state.config.useContainFit
}
},
methods: {
- resize () {
- // Quick optimization to make resizing not always trigger state change,
- // only update attachment size in 10px steps
- const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10
- if (this.width !== width) {
- this.width = width
- }
+ onNaturalSizeLoad (id, size) {
+ this.$set(this.sizes, id, size)
+ },
+ rowStyle (itemsPerRow) {
+ return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
+ },
+ itemStyle (id, row) {
+ const total = sumBy(row, item => this.getAspectRatio(item.id))
+ return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
+ },
+ getAspectRatio (id) {
+ const size = this.sizes[id]
+ return size ? size.width / size.height : 1
}
}
}
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
@@ -7,17 +7,21 @@
v-for="(row, index) in rows"
:key="index"
class="gallery-row"
- :style="rowHeight(row.length)"
+ :style="rowStyle(row.length)"
:class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
>
- <attachment
- v-for="attachment in row"
- :key="attachment.id"
- :set-media="setMedia"
- :nsfw="nsfw"
- :attachment="attachment"
- :allow-play="false"
- />
+ <div class="gallery-row-inner">
+ <attachment
+ v-for="attachment in row"
+ :key="attachment.id"
+ :set-media="setMedia"
+ :nsfw="nsfw"
+ :attachment="attachment"
+ :allow-play="false"
+ :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
+ :style="itemStyle(attachment.id, row)"
+ />
+ </div>
</div>
</div>
</template>
@@ -28,15 +32,24 @@
@import '../../_variables.scss';
.gallery-row {
- height: 200px;
+ position: relative;
+ height: 0;
width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-content: stretch;
flex-grow: 1;
margin-top: 0.5em;
+ .gallery-row-inner {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-content: stretch;
+ }
+
// FIXME: specificity problem with this and .attachments.attachment
// we shouldn't have the need for .image here
.attachment.image {
diff --git 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
