This commit is contained in:
tamaina 2020-02-15 21:20:01 +09:00
parent 9cb3882efa
commit 65704bbf01
2 changed files with 21 additions and 19 deletions

View file

@ -33,8 +33,9 @@ export default Vue.extend({
raw: { raw: {
default: false default: false
}, },
width: { // specify the parent element
type: Number parentElement: {
type: Object
} }
}, },
data() { data() {
@ -43,31 +44,32 @@ export default Vue.extend({
} }
}, },
mounted() { mounted() {
// for Safari bug this.size();
if (this.$refs.gridOuter.clientHeight) { window.addEventListener('resize', this.size);
this.gridInnerStyle = { height: `${this.$refs.gridOuter.clientHeight}px` } this.$on('resize', this.size);
} },
} beforeDestroy() {
window.removeEventListener('resize', this.size);
},
methods: { methods: {
previewable(file) { previewable(file) {
return file.type.startsWith('video') || file.type.startsWith('image'); return file.type.startsWith('video') || file.type.startsWith('image');
} },
}, size() {
watch: {
width(width) {
// for Safari bug // for Safari bug
if (this.$refs.gridOuter) { if (this.$refs.gridOuter) {
let height = 287 let height = 287;
const parent = this.$props.parentElement || this.$parent.$el;
if (width) { if (this.$refs.gridOuter.clientHeight) {
height = width * 9 / 16;
} else if (this.$refs.gridOuter.clientHeight) {
height = this.$refs.gridOuter.clientHeight; height = this.$refs.gridOuter.clientHeight;
} else if (parent) {
height = parent.getBoundingClientRect().width * 9 / 16;
} }
this.gridInnerStyle = { height: `${height}px` } this.gridInnerStyle = { height: `${height}px` };
} else { } else {
this.gridInnerStyle = {} this.gridInnerStyle = {};
} }
} }
} }

View file

@ -9,7 +9,7 @@
</div> </div>
<details v-if="note.files.length > 0"> <details v-if="note.files.length > 0">
<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary> <summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
<x-media-list :media-list="note.files" :width="width"/> <x-media-list :media-list="note.files"/>
</details> </details>
<details v-if="note.poll"> <details v-if="note.poll">
<summary>{{ $t('poll') }}</summary> <summary>{{ $t('poll') }}</summary>
@ -39,7 +39,7 @@ export default Vue.extend({
}, },
data() { data() {
return { return {
width: 0, i: this.$refs.i,
faReply faReply
}; };