71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
|
<div class="thinglink-block">
|
|
<div class="thinglink-block__wrapper">
|
|
<iframe
|
|
:src="src"
|
|
class="thinglink-block__iframe"
|
|
frameborder="0"
|
|
width="800px"
|
|
height="600px"
|
|
type="text/html"
|
|
webkitallowfullscreen
|
|
mozallowfullscreen
|
|
scrolling="no"
|
|
allowscriptaccess="always"
|
|
allowfullscreen="true"
|
|
allownetworking="all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['value'],
|
|
|
|
computed: {
|
|
src() {
|
|
return `https://www.thinglink.com/card/${this.value.id}`;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
openFullscreen() {
|
|
this.$store.dispatch('showFullscreenInfographic', {
|
|
id: this.value.id,
|
|
type: 'thinglink-block'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
// Styling and structure taken from original iframe
|
|
.thinglink-block {
|
|
width: 100%;
|
|
margin-bottom: $large-spacing;
|
|
|
|
&__wrapper {
|
|
position: relative;
|
|
padding-bottom: 75%;
|
|
padding-top: 0;
|
|
height: 0;
|
|
}
|
|
|
|
&__iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__link {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|