materio-d9/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

315 lines
9.0 KiB
Vue
Raw Normal View History

<template>
<div class="loading" v-if="!article || loading">
2021-06-01 22:46:15 +02:00
<span>{{ $t('default.Loading…') }}</span>
</div>
<article class="article" v-else>
2019-07-25 21:23:23 +02:00
<nav class="prevnext top">
<ul>
<li>
<a
v-if="prevnext.prev"
:href="prevnext.prev.view_node"
2019-07-25 21:23:23 +02:00
v-html="prevnext.prev.title"
@click.prevent="onPrevNext(prevnext.prev)"
2019-07-25 21:23:23 +02:00
/>
</li>
<li>
<a
v-if="prevnext.next"
:href="prevnext.next.view_node"
2019-07-25 21:23:23 +02:00
v-html="prevnext.next.title"
@click.prevent="onPrevNext(prevnext.next)"
2019-07-25 21:23:23 +02:00
/>
</li>
</ul>
</nav>
2020-02-20 10:36:49 +01:00
<div class="cols">
<div class="col col-left">
<section v-if="image_accroche" class="accroche">
2020-02-20 10:36:49 +01:00
<figure>
<img
:src="image_accroche.url"
:alt="image_accroche.alt"
:title="image_accroche.title"
@click="setLightboxIndex(0)"
2020-02-19 17:59:26 +01:00
/>
2020-02-20 10:36:49 +01:00
</figure>
</section>
<!-- <section class="taxonomy">
2020-02-20 10:36:49 +01:00
<div class="thesaurus">
<ul>
<li
v-for="term in article.thesaurus" v-bind:key="term.id"
2020-02-20 10:36:49 +01:00
>{{ term.name }}</li>
</ul>
</div>
<div class="tags">
<ul>
<li
v-for="term in article.tags" v-bind:key="term.id"
2020-02-20 10:36:49 +01:00
>{{ term.name }}</li>
</ul>
</div>
</section> -->
<section v-if="article.showroom" class="showroom">
<h2>{{ article.showroom.name }}</h2>
<a class="mail" :href="'mail:'+article.showroom.field_public_email">
{{ article.showroom.field_public_email }}</a>
2020-02-20 12:57:35 +01:00
<br/>
<a class="phone" :href="'tel:' + article.showroom.field_public_phone">
{{ article.showroom.field_public_phone }}</a>
2020-02-20 12:57:35 +01:00
</section>
2020-02-20 10:36:49 +01:00
</div> <!-- //col-left -->
<div class="col col-right">
<section class="body" v-html="article.body"></section>
<CoolLightBox
:items="lightbox_items"
:index="lightbox_index"
:loop="true"
srcName="url"
@close="lightbox_index = null">
</CoolLightBox>
<div class="gallery-wrapper">
<div
class="image"
v-for="(image, imageIndex) in lightbox_items"
v-if="imageIndex > 0"
:key="imageIndex"
@click="setLightboxIndex(imageIndex)"
:style="{ backgroundImage: 'url(' + image.thumb + ')' }"
></div>
</div>
<aside class="linked-materials">
2021-06-09 13:06:52 +02:00
<h3 class="field__label">{{ $t('materio.Linked Materials') }}</h3>
<div class="cards-list">
<ul class="">
<li v-for="node in article.linked_materials" v-bind:key="node.id">
<Card :item="node" />
</li>
</ul>
</div>
</aside>
2020-02-20 10:36:49 +01:00
</div> <!-- // col-right -->
</div> <!-- // cols -->
2019-07-25 21:23:23 +02:00
<nav class="prevnext bottom">
<ul>
<li>
<a
v-if="prevnext.prev"
:href="prevnext.prev.view_node"
2019-07-25 21:23:23 +02:00
v-html="prevnext.prev.title"
@click.prevent="onPrevNext(prevnext.prev)"
2019-07-25 21:23:23 +02:00
/>
</li>
<li>
<a
v-if="prevnext.next"
:href="prevnext.next.view_node"
2019-07-25 21:23:23 +02:00
v-html="prevnext.next.title"
@click.prevent="onPrevNext(prevnext.next)"
2019-07-25 21:23:23 +02:00
/>
</li>
</ul>
</nav>
</article>
</template>
<script>
import router from 'vuejs/route'
2019-07-25 21:23:23 +02:00
import store from 'vuejs/store'
// import JSONAPI from 'vuejs/api/json-axios'
// import REST from 'vuejs/api/rest-axios'
import MGQ from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
// import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
import articleFields from 'vuejs/api/gql/article.fragment.gql'
// import qs from 'querystring-es3'
2019-07-25 21:23:23 +02:00
import Card from 'vuejs/components/Content/Card'
2019-07-14 17:12:18 +02:00
import { mapState, mapActions } from 'vuex'
export default {
name: "Article",
router,
2019-07-25 21:23:23 +02:00
store,
props: ['item'],
data(){
return {
2019-07-14 17:12:18 +02:00
index:-1,
prevnext:{},
nid:null,
path: null,
article:{},
image_accroche: null,
lightbox_items: null,
2019-07-25 21:23:23 +02:00
loading:true,
lightbox_index:null,
}
},
metaInfo () {
return {
title: this.article.title
}
},
2019-07-25 21:23:23 +02:00
computed: {
...mapState({
items: state => state.Blabla.items
})
},
created(){
this.getArticle()
},
methods: {
2019-07-14 17:12:18 +02:00
...mapActions({
2019-07-25 21:23:23 +02:00
getItems: 'Blabla/getItems',
2019-07-14 17:12:18 +02:00
getItemIndex: 'Blabla/getItemIndex',
getPrevNextItems: 'Blabla/getPrevNextItems'
}),
getArticle(){
console.log('getArticle', this.$route)
if (this.$route.params.id) {
// we come from internal link with vuejs
// using path to load from route is hasardous
// this.path = this.$route.path
this.id = this.$route.params.id
} else if (drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article') {
// we landed in an internal page
// get the id from drupalDeclouped, provided by materio_decoupled.module
this.id = drupalDecoupled.entity_id
}
if (this.id) {
this.loadArticle()
} else {
// if for any reason we dont have the id redirect to home
this.$router.replace({name:'home'})
}
},
2019-07-25 21:23:23 +02:00
getIndex(){
console.log("Article getIndex article.id:", this.article.id)
this.getItemIndex(this.article.id).then((index) => {
2019-07-25 21:23:23 +02:00
this.index = index
console.log('article index', index, this)
2019-07-25 21:23:23 +02:00
this.getPrevNextItems(index).then((pn) => {
this.prevnext = pn
})
})
},
loadArticle(){
console.log('loadArticle')
this.loading = true
const ast = gql`{
article(id: ${this.id}, lang: "${drupalDecoupled.lang_code}") {
...ArticleFields
}
}
${articleFields}
`
MGQ.post('', { query: print(ast)
})
.then(({ data:{data:{article}}}) => {
console.log('loadArticle', article)
this.parseDataGQL(article)
})
.catch(error => {
console.warn('Issue with loadArticle', error)
Promise.reject(error)
})
},
parseDataGQL(article){
console.log('parseDataGQL article', article)
this.article = article
// get the prev next items
if (!this.items.length) {
// if items list not yet loaded preload them
this.getItems().then(() => {
// then get the index
this.getIndex()
})
} else {
// or directly get the index
this.getIndex()
}
this.image_accroche = article.images[0]
this.lightbox_items = [];
// fill the lightbox
for (let i = 0; i < article.images.length; i++) {
article.images[i].thumb = article.images[i].style_articlecardmedium.url
this.lightbox_items.push(article.images[i]);
}
// parse embeded videos pushing it in lightbox
for (let i = 0; i < article.videos.length; i++) {
let videoUrl = article.videos[i].url
let provider_regex = /https:\/\/(www\.)?(?<provider>youtube|vimeo)\.com\/.+/;
let match = provider_regex.exec(videoUrl)
// console.log('provider', match.groups.provider)
let video_id = null;
let video_thumb = null;
switch (match.groups.provider) {
case 'vimeo':
let vimeo_regex = /https:\/\/vimeo\.com\/(?<id>\d+)/;
video_id = vimeo_regex.exec(videoUrl).groups.id || null;
// TODO: get the vimeo thumb https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video
video_thumb = "http://blogpeda.ac-poitiers.fr/ent-lyc/files/2015/06/Vimeo_icon_block.png"
break
case 'youtube':
let youtube_regex = /https:\/\/(www\.)?youtube\.com\/watch\?v=(?<id>.+)/;
video_id = youtube_regex.exec(videoUrl).groups.id || null;
video_thumb = "http://img.youtube.com/vi/"+video_id+"/0.jpg"
break
}
// console.log('video_id', video_id)
this.lightbox_items.push({
url: videoUrl,
title: "",
description: "",
thumb: video_thumb
});
}
console.log('Article this.content.lightbox_items', this.lightbox_items)
// update main page title
this.$store.commit('Common/setPagetitle', article.title)
this.loading = false;
},
onPrevNext(pn){
console.log('clicked on prev/next; prevnext', pn)
let alias = pn.view_node.replace(/^\/\D{2,3}\/blabla\//g, '')
console.log('alias', alias)
2019-07-14 17:12:18 +02:00
this.$router.push({
name:`article`,
params: { alias:alias, id: pn.nid }
2019-07-14 17:12:18 +02:00
})
},
setLightboxIndex(index) {
this.lightbox_index = index
2019-07-14 17:12:18 +02:00
}
},
2019-07-25 21:23:23 +02:00
components: {
Card
},
2019-07-14 17:12:18 +02:00
watch: {
'$route' (to, from) {
console.log('route change')
this.getArticle()
}
}
}
</script>
<style lang="scss" scoped>
</style>