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

471 lines
15 KiB
Vue

<template>
<div class="loading" v-if="!article || loading">
<span>Loading ...</span>
</div>
<article class="article" v-else>
<nav class="prevnext top">
<ul>
<li>
<a
@click.prevent="onPrev"
href="#"
v-if="prevnext.prev"
v-html="prevnext.prev.title"
/>
</li>
<li>
<a
@click.prevent="onNext"
href="#"
v-if="prevnext.next"
v-html="prevnext.next.title"
/>
</li>
</ul>
</nav>
<div class="cols">
<div class="col col-left">
<section v-if="image_accroche" class="accroche">
<figure>
<img
:src="image_accroche.url"
:alt="image_accroche.alt"
:title="image_accroche.title"
@click="setLightboxIndex(0)"
/>
</figure>
</section>
<section class="taxonomy">
<div class="thesaurus">
<ul>
<li
v-for="term in article.thesaurus" v-bind:key="term.id"
>{{ term.name }}</li>
</ul>
</div>
<div class="tags">
<ul>
<li
v-for="term in article.tags" v-bind:key="term.id"
>{{ 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>
<br/>
<a class="phone" :href="'tel:' + article.showroom.field_public_phone">
{{ article.showroom.field_public_phone }}</a>
</section>
</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">
<h3 class="field__label">{{$t("materio.Linked Materials")}}</h3>
<div class="card-list">
<ul class="">
<li v-for="node in article.linked_materials" v-bind:key="node.id">
<Card :item="node" />
</li>
</ul>
</div>
</aside>
</div> <!-- // col-right -->
</div> <!-- // cols -->
<nav class="prevnext bottom">
<ul>
<li>
<a
@click.prevent="onPrev"
href="#"
v-if="prevnext.prev"
v-html="prevnext.prev.title"
/>
</li>
<li>
<a
@click.prevent="onNext"
href="#"
v-if="prevnext.next"
v-html="prevnext.next.title"
/>
</li>
</ul>
</nav>
</article>
</template>
<script>
import router from 'vuejs/route'
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'
import Card from 'vuejs/components/Content/Card'
import { mapState, mapActions } from 'vuex'
export default {
name: "Article",
router,
store,
props: ['item'],
data(){
return {
index:-1,
prevnext:{},
uuid:null,
article:null,
image_accroche: null,
lightbox_items: null,
loading:true,
lightbox_index:null,
}
},
computed: {
...mapState({
items: state => state.Blabla.items
})
},
created(){
this.getArticle()
},
methods: {
...mapActions({
getItems: 'Blabla/getItems',
getItemIndex: 'Blabla/getItemIndex',
getPrevNextItems: 'Blabla/getPrevNextItems'
}),
getArticle(){
console.log(this.$route);
// get the article uuid
if(this.$route.query.nid){
// we come from internal link with vuejs
// directly record uuid
this.nid = this.$route.query.nid
}else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
// we landed in an internal page
// get the uuid from drupalDeclouped, provided by materio_decoupled.module
this.nid = drupalDecoupled.entity_id
}
if(this.nid){
this.loadArticle()
// 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()
}
}else{
// if for any reason we dont have the uuid
// redirect to home
this.$route.replace('home')
}
},
getIndex(){
console.log("Article getIndex");
this.getItemIndex(this.nid).then((index) => {
this.index = index
// console.log('article index', index, this);
this.getPrevNextItems(index).then((pn) => {
this.prevnext = pn
})
})
},
loadArticle(){
console.log('loadArticle', this.nid)
this.loading = true;
// let params = {
// include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
// }
// let q = qs.stringify(params)
// JSONAPI.get(`node/article/${this.uuid}?${q}`)
// .then(({ data }) => {
// console.log('loadArticle data', data)
// this.parseDataJSONAPI(data)
// })
// .catch(( error ) => {
// console.warn('Issue with loadArticle', error)
// Promise.reject(error)
// })
let ast = gql`{
article(id: ${this.nid}) {
...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
this.image_accroche = article.images[0]
this.lightbox_items = [];
// fill the lightbox
for (var 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 (var 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('this.content.lightbox_items', this.lightbox_items);
// update main page title
this.$store.commit('Common/setPagetitle', article.title)
this.loading = false;
},
parseDataJSONAPI(data){
let attrs = data.data.attributes
let relations = data.data.relationships
console.log('relations', relations);
let inc = data.included
console.log('included', inc);
this.content = {
title:attrs.title,
body: attrs.body.value
}
// build lightbox array
// will be filled by videos and field_visuel
this.content.lightbox_items = [];
// parse embeded videos pushing it in lightbox
for(let key in attrs.field_video){
let videolink = attrs.field_video[key]
// console.log('videolink', videolink);
let provider_regex = /https:\/\/(www\.)?(?<provider>youtube|vimeo)\.com\/.+/;
let match = provider_regex.exec(videolink)
// 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(videolink).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(videolink).groups.id || null;
video_thumb = "http://img.youtube.com/vi/"+video_id+"/0.jpg"
break;
}
// console.log('video_id', video_id);
this.content.lightbox_items.push({
src: videolink,
title: "",
description: "",
thumb: video_thumb
});
// this.content.videos.push({
// provider: match.groups.provider,
// id: video_id,
// href: videolink
// });
}
// parse all relationships
for (let key in relations) {
// skip loop if the property is from prototype
if (!relations.hasOwnProperty(key)) continue;
let relation_obj = relations[key]
console.log("relation", key, relation_obj);
// console.log('typeof relation_obj.data', typeof relation_obj.data);
if(!relation_obj.data) continue;
// showroom is unique field so no array in data
// we parse it here
switch (key) {
case 'field_showroom':
let included = inc.find((i) => { return i.id == relation_obj.data.id })
// console.log('included',included);
this.content[key] = included.attributes;
break
}
// skip relation_obj if data is not array
if(!Array.isArray(relation_obj.data)) continue
// create empty field array
this.content[key] = []
// parse relationship values using included
let field = {}
// loop through all relation items
relation_obj.data.forEach((e) => {
// get the included values for each item using id
let included = inc.find((i) => { return i.id == e.id })
// if we not found an included item skip the item
if(typeof included != 'undefined'){
// fill the item values
switch (key) {
case 'field_visuel':
// build the field object (not used for now)
field = e.meta
field.id = e.id
field.src = included.attributes.uri.url
field.thumb = included.links.article_card_medium.href
break;
case 'field_linked_materials':
field = included.attributes
field.id = field.uuid = included.id
// get the linked material included images
field.images = [];
included.relationships.images.data.forEach((img) => {
// console.log('href', img.meta.imageDerivatives.links.card_medium.href);
if(img.meta.imageDerivatives){
field.images.push({
title:img.meta.title,
src: img.meta.imageDerivatives.links.hd.href,
img_styles: {
card_medium: img.meta.imageDerivatives.links.card_medium.href,
card_full: img.meta.imageDerivatives.links.card_full.href
}
})
}
})
break;
case 'field_thesaurus':
case 'field_tags':
field = included.attributes
field.id = included.id
break;
default:
}
this.content[key].push(field)
}
})
}
// extract first visuel as accroche
this.content.image_accroche = this.content.field_visuel.shift()
// fill the lightbox
for(let visuel of this.content.field_visuel){
this.content.lightbox_items.push(visuel);
}
console.log('this.content.lightbox_items', this.content.lightbox_items);
// update main page title
this.$store.commit('Common/setPagetitle', this.content.title)
this.loading = false;
console.log('article.content',this.content);
},
onNext(){
// console.log('clicked on next', this.prevnext.next);
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
this.$router.push({
name:`article`,
params: { alias:alias },
query: { uuid: this.prevnext.next.uuid }
})
},
onPrev(){
// console.log('clicked on prev', this.prevnext.next);
let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
this.$router.push({
name:`article`,
params: { alias:alias },
query: { uuid: this.prevnext.prev.uuid }
})
},
setLightboxIndex(index) {
this.lightbox_index = index
}
},
components: {
Card
},
watch: {
'$route' (to, from) {
console.log('route change')
this.getArticle()
}
}
}
</script>
<style lang="scss" scoped>
</style>