mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
fb4f487abd
- we still add the imageAspectRatio for new posts, but we don't do anything with the layout until we figure out how to add imageAspectRatios for every post with an image in the database without causing a big downtime
47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
|
<ds-grid-item :rowSpan="rowSpan">
|
|
<slot></slot>
|
|
</ds-grid-item>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
imageAspectRatio: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
rowSpan: 10,
|
|
}
|
|
},
|
|
methods: {
|
|
calculateItemHeight() {
|
|
this.$parent.$emit('calculating-item-height')
|
|
|
|
this.$nextTick(() => {
|
|
const gridStyle = this.$parent.$el.style
|
|
const rowHeight = parseInt(gridStyle.gridAutoRows)
|
|
const rowGapValue = gridStyle.rowGap || gridStyle.gridRowGap
|
|
const rowGap = parseInt(rowGapValue)
|
|
const itemHeight = this.$el.clientHeight
|
|
|
|
this.rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
|
|
this.$parent.$emit('finished-calculating-item-height')
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
const image = this.$el.querySelector('img')
|
|
if (image) {
|
|
image.onload = () => this.calculateItemHeight()
|
|
} else {
|
|
// use timeout to make sure layout is set up before calculation
|
|
setTimeout(() => this.calculateItemHeight(), 0)
|
|
}
|
|
},
|
|
}
|
|
</script>
|