@@ -120,8 +123,8 @@ 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 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'
@@ -138,7 +141,9 @@ export default {
index:-1,
prevnext:{},
uuid:null,
- content:null,
+ article:null,
+ image_accroche: null,
+ lightbox_items: null,
loading:true,
lightbox_index:null,
}
@@ -160,17 +165,17 @@ export default {
getArticle(){
console.log(this.$route);
// get the article uuid
- if(this.$route.query.uuid){
+ if(this.$route.query.nid){
// we come from internal link with vuejs
// directly record uuid
- this.uuid = this.$route.query.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.uuid = drupalDecoupled.entity_uuid
+ this.nid = drupalDecoupled.entity_id
}
- if(this.uuid){
+ if(this.nid){
this.loadArticle()
// get the prev next items
if(!this.items.length){
@@ -191,7 +196,7 @@ export default {
},
getIndex(){
console.log("Article getIndex");
- this.getItemIndex(this.uuid).then((index) => {
+ this.getItemIndex(this.nid).then((index) => {
this.index = index
// console.log('article index', index, this);
this.getPrevNextItems(index).then((pn) => {
@@ -200,42 +205,91 @@ export default {
})
},
loadArticle(){
- console.log('loadArticle', this.uuid)
+ 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.uuid}) {
- // ...ArticleFields
- // }
+ // let params = {
+ // include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
// }
- // ${ articleFields }
- // `
- // MGQ.post('', { query: print(ast)
- // })
- // .then((data) => {
- // console.log('loadArticle', data )
- // this.parseDataGQL(data.data.article)
+ // 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)
+ // .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\.)?(?
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\/(?\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=(?.+)/;
+ 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;
},
- // parseDataGQL(data){
- // console.log('parseDataGQL data', data)
- // },
parseDataJSONAPI(data){
let attrs = data.data.attributes
let relations = data.data.relationships
@@ -376,48 +430,8 @@ export default {
this.loading = false;
console.log('article.content',this.content);
- this.getFieldDefinition()
},
- getFieldDefinition(field){
- // // JSONAPI.get(`field_config/${field}`)
- // // .then(({ data }) => {
- // // console.log('getFieldDefinition data', data)
- // // })
- // // .catch(( error ) => {
- // // console.warn('Issue with getFieldDefinition', error)
- // // Promise.reject(error)
- // // })
- // REST.get('/entity/node_type/materiau?_format=json')
- // .then((data) => {
- // console.log('getFieldDefiintion', data)
- // })
- // .catch(error => {
- // console.warn('Issue with getFieldDefiintion', error)
- // Promise.reject(error)
- // })
- //
- // https://stackoverflow.com/a/52612632
- // https://stackoverflow.com/a/57873339
- let ast = gql`{
- materiau(id: 5150) {
- ...MateriauFields
- }
- }
- ${ materiauFields }
- `
- MGQ.post('', { query: print(ast)
- })
- .then((data) => {
- console.log('getFieldDefinition', data )
- })
- .catch(error => {
- console.warn('Issue with getFieldDefiintion', error)
- Promise.reject(error)
- })
-
-
- },
onNext(){
// console.log('clicked on next', this.prevnext.next);
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Blabla.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Blabla.vue
index 447b4bc3..97146c93 100644
--- a/web/themes/custom/materiotheme/vuejs/components/Pages/Blabla.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Blabla.vue
@@ -5,7 +5,7 @@
diff --git a/web/themes/custom/materiotheme/vuejs/store/modules/blabla.js b/web/themes/custom/materiotheme/vuejs/store/modules/blabla.js
index e124fba7..563f495a 100644
--- a/web/themes/custom/materiotheme/vuejs/store/modules/blabla.js
+++ b/web/themes/custom/materiotheme/vuejs/store/modules/blabla.js
@@ -67,9 +67,9 @@ export default {
commit('setInfiniteState', $infiniteLoadingstate)
dispatch('getItems')
},
- getItemIndex ({ dispatch, commit, state }, uuid) {
+ getItemIndex ({ dispatch, commit, state }, nid) {
return state.items.findIndex((e) => {
- return e.uuid == uuid
+ return e.nid == nid
})
},
getPrevNextItems ({ dispatch, commit, state }, index) {