added vue-meta plugin, fixed article prev next, fixed page title on articles

This commit is contained in:
Bachir Soussi Chiadmi 2020-12-24 19:05:45 +01:00
parent 78155f83b8
commit c1f117d7bb
7 changed files with 114 additions and 51 deletions

View File

@ -190,6 +190,7 @@ module:
filefield_sources: 1 filefield_sources: 1
menu_admin_per_menu: 1 menu_admin_per_menu: 1
menu_link_content: 1 menu_link_content: 1
pathauto: 1
content_translation: 10 content_translation: 10
views: 10 views: 10
materio_id: 11 materio_id: 11

4
package-lock.json generated
View File

@ -5348,7 +5348,8 @@
"deepmerge": { "deepmerge": {
"version": "4.2.2", "version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==" "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
"dev": true
}, },
"define-properties": { "define-properties": {
"version": "1.1.3", "version": "1.1.3",
@ -11807,6 +11808,7 @@
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz", "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz",
"integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==", "integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==",
"dev": true,
"requires": { "requires": {
"deepmerge": "^4.2.2" "deepmerge": "^4.2.2"
} }

View File

@ -23,7 +23,6 @@
"vue-autofocus-directive": "^1.0.4", "vue-autofocus-directive": "^1.0.4",
"vue-cool-lightbox": "^2.6.9", "vue-cool-lightbox": "^2.6.9",
"vue-infinite-loading": "^2.4.5", "vue-infinite-loading": "^2.4.5",
"vue-meta": "^2.4.0",
"vue-router": "^3.4.9", "vue-router": "^3.4.9",
"vue-vimeo-player": "^0.1.0", "vue-vimeo-player": "^0.1.0",
"vue-youtube-embed": "^2.2.2", "vue-youtube-embed": "^2.2.2",
@ -68,6 +67,7 @@
"vue-jest": "^3.0.7", "vue-jest": "^3.0.7",
"vue-js-modal": "^2.0.0-rc.6", "vue-js-modal": "^2.0.0-rc.6",
"vue-loader": "^15.9.5", "vue-loader": "^15.9.5",
"vue-meta": "^2.4.0",
"vue-server-renderer": "^2.6.12", "vue-server-renderer": "^2.6.12",
"vue-style-loader": "^4.1.2", "vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12", "vue-template-compiler": "^2.6.12",

File diff suppressed because one or more lines are too long

View File

@ -31,6 +31,9 @@ import router from 'vuejs/route'
// import * as Locales from 'assets/i18n/locales.json' // import * as Locales from 'assets/i18n/locales.json'
import { i18n, loadLanguageAsync } from 'vuejs/i18n' import { i18n, loadLanguageAsync } from 'vuejs/i18n'
import VueMeta from 'vue-meta'
Vue.use(VueMeta)
import VUserBlock from 'vuejs/components/Block/UserBlock' import VUserBlock from 'vuejs/components/Block/UserBlock'
import VMainContent from 'vuejs/components/Content/MainContent' import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock' import VSearchBlock from 'vuejs/components/Block/SearchBlock'
@ -273,6 +276,12 @@ import 'theme/assets/styles/main.scss'
_v_main_content = new Vue({ _v_main_content = new Vue({
store, store,
i18n, i18n,
metaInfo: {
// if no subcomponents specify a metaInfo.title, this title will be used
title: "materiO'",
// all titles will be injected into this template
titleTemplate: "%s | materiO'"
},
render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } }) render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
}).$mount('#' + id) }).$mount('#' + id)
} }

View File

@ -7,18 +7,18 @@
<ul> <ul>
<li> <li>
<a <a
@click.prevent="onPrev"
href="#"
v-if="prevnext.prev" v-if="prevnext.prev"
:href="prevnext.prev.view_node"
v-html="prevnext.prev.title" v-html="prevnext.prev.title"
@click.prevent="onPrevNext(prevnext.prev.view_node)"
/> />
</li> </li>
<li> <li>
<a <a
@click.prevent="onNext"
href="#"
v-if="prevnext.next" v-if="prevnext.next"
:href="prevnext.next.view_node"
v-html="prevnext.next.title" v-html="prevnext.next.title"
@click.prevent="onPrevNext(prevnext.next.view_node)"
/> />
</li> </li>
</ul> </ul>
@ -95,18 +95,18 @@
<ul> <ul>
<li> <li>
<a <a
@click.prevent="onPrev"
href="#"
v-if="prevnext.prev" v-if="prevnext.prev"
:href="prevnext.prev.view_node"
v-html="prevnext.prev.title" v-html="prevnext.prev.title"
@click.prevent="onPrevNext(prevnext.prev.view_node)"
/> />
</li> </li>
<li> <li>
<a <a
@click.prevent="onNext"
href="#"
v-if="prevnext.next" v-if="prevnext.next"
:href="prevnext.next.view_node"
v-html="prevnext.next.title" v-html="prevnext.next.title"
@click.prevent="onPrevNext(prevnext.next.view_node)"
/> />
</li> </li>
</ul> </ul>
@ -142,13 +142,18 @@ export default {
prevnext:{}, prevnext:{},
nid:null, nid:null,
path: null, path: null,
article:null, article:{},
image_accroche: null, image_accroche: null,
lightbox_items: null, lightbox_items: null,
loading:true, loading:true,
lightbox_index:null, lightbox_index:null,
} }
}, },
metaInfo () {
return {
title: this.article.title
}
},
computed: { computed: {
...mapState({ ...mapState({
items: state => state.Blabla.items items: state => state.Blabla.items
@ -187,17 +192,6 @@ export default {
if(this.path){ if(this.path){
this.loadArticle() 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{ }else{
// if for any reason we dont have the uuid // if for any reason we dont have the uuid
// redirect to home // redirect to home
@ -205,10 +199,10 @@ export default {
} }
}, },
getIndex(){ getIndex(){
console.log("Article getIndex"); console.log("Article getIndex article.id:", this.article.id);
this.getItemIndex(this.nid).then((index) => { this.getItemIndex(this.article.id).then((index) => {
this.index = index this.index = index
// console.log('article index', index, this); console.log('article index', index, this);
this.getPrevNextItems(index).then((pn) => { this.getPrevNextItems(index).then((pn) => {
this.prevnext = pn this.prevnext = pn
}) })
@ -218,13 +212,6 @@ export default {
console.log('loadArticle') console.log('loadArticle')
this.loading = true this.loading = true
// let ast = gql`{
// article(id: ${this.nid}) {
// ...ArticleFields
// }
// }
// ${ articleFields }
// `
let ast = gql`{ let ast = gql`{
route(path: "${this.path}") { route(path: "${this.path}") {
...ArticleFields ...ArticleFields
@ -232,7 +219,6 @@ export default {
} }
${ articleFields } ${ articleFields }
` `
MGQ.post('', { query: print(ast) MGQ.post('', { query: print(ast)
}) })
.then(({ data:{data:{route}}}) => { .then(({ data:{data:{route}}}) => {
@ -248,6 +234,18 @@ export default {
console.log('parseDataGQL article', article) console.log('parseDataGQL article', article)
this.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.image_accroche = article.images[0]
this.lightbox_items = []; this.lightbox_items = [];
@ -296,24 +294,34 @@ export default {
this.loading = false; this.loading = false;
}, },
onNext(){ onPrevNext(a){
// console.log('clicked on next', this.prevnext.next); // console.log('clicked on next', this.prevnext.next);
let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '') // let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
let alias = a.replace(/^.?\/blabla\//g, '')
this.$router.push({ this.$router.push({
name:`article`, name:`article`,
params: { alias:alias }, params: { alias:alias }
query: { uuid: this.prevnext.next.uuid } // 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 }
}) })
}, },
// 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) { setLightboxIndex(index) {
this.lightbox_index = index this.lightbox_index = index
} }

View File

@ -68,11 +68,14 @@ export default {
dispatch('getItems') dispatch('getItems')
}, },
getItemIndex ({ dispatch, commit, state }, nid) { getItemIndex ({ dispatch, commit, state }, nid) {
console.log('getItemIndex nid', nid)
return state.items.findIndex((e) => { return state.items.findIndex((e) => {
return e.nid == nid // console.log('findIndex', e, nid);
return e.nid === nid
}) })
}, },
getPrevNextItems ({ dispatch, commit, state }, index) { getPrevNextItems ({ dispatch, commit, state }, index) {
// TODO: preload prev and next items
return { return {
prev: state.items[index - 1], prev: state.items[index - 1],
next: state.items[index + 1] next: state.items[index + 1]