86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
|
<div class="infogram-block">
|
|
<iframe
|
|
:src="src"
|
|
:title="title"
|
|
:height="height"
|
|
class="infogram-block__iframe"
|
|
scrolling="no"
|
|
frameborder="0"
|
|
style="border:none;"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['value'],
|
|
|
|
data() {
|
|
return {
|
|
height: 0
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
src() {
|
|
return `https://e.infogram.com/${this.id}?src=embed`;
|
|
},
|
|
href() {
|
|
return `https://infogram.com/${this.id}`;
|
|
},
|
|
id() {
|
|
return this.value.id;
|
|
},
|
|
title() {
|
|
return this.value.title || 'Infografik';
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
// from https://developers.infogr.am/oembed/
|
|
window.addEventListener('message', event => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
if (data.context === 'iframe.resize' && this.parseId(data.src) === this.id) {
|
|
this.height = data.height;
|
|
}
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
parseId(src) {
|
|
// src will be in the format of something like https://e.infogram.com/0ccf86bc-1afe-4026-b313-1f1b5992452b?src=embed
|
|
let last = src.split('/').pop();
|
|
return last.substring(0, last.indexOf('?')); // we're only interested in the id part before the '?'
|
|
},
|
|
openFullscreen() {
|
|
this.$store.dispatch('showFullscreenInfographic', {
|
|
id: this.value.id,
|
|
type: 'infogram-block'
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
.infogram-block {
|
|
margin-bottom: $large-spacing;
|
|
|
|
&__link {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__iframe {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|