65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<script>
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { StaticsStore } from '@/stores/statics'
|
|
|
|
export default {
|
|
props: ['id'],
|
|
// data(){
|
|
// return {
|
|
// block: null
|
|
// }
|
|
// },
|
|
computed: {
|
|
...mapState(StaticsStore,['loaded', 'statics_byid'])
|
|
},
|
|
created () {
|
|
console.log("static created, id", this.id);
|
|
// this.loadStatics()
|
|
},
|
|
methods: {
|
|
...mapActions(StaticsStore,['loadStatics']),
|
|
getParsedText(){
|
|
let text = this.statics_byid[this.id].texte;
|
|
console.log('text', text);
|
|
let reg = /https:\/\/(vimeo\.com|www\.youtube\.com)\/(watch\?v=)?(\w+)/g;
|
|
let videolinks = [...text.matchAll(reg)];
|
|
// console.log('videolinks', videolinks);
|
|
for (let link of videolinks){
|
|
console.log('videolink', link);
|
|
let iframe;
|
|
switch (link[1]) {
|
|
case 'vimeo.com':
|
|
iframe = `<iframe src="${link[0]}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`
|
|
break;
|
|
case 'www.youtube.com':
|
|
iframe = `<iframe src="${link[0]}" frameborder="0" allowfullscreen></iframe>`
|
|
break;
|
|
}
|
|
console.log('iframe', iframe);
|
|
text = text.replace(link[0], iframe);
|
|
};
|
|
return text;
|
|
}
|
|
},
|
|
components: {
|
|
// MapConcernements
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section class="static">
|
|
<span v-if="!loaded">loading ...</span>
|
|
<!-- <h2 v-if="loaded">{{ this.id }}</h2> -->
|
|
<h2 v-if="loaded">{{ statics_byid[id].title }}</h2>
|
|
<div v-if="loaded" v-html="getParsedText()"/>
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|