added vue-meta plugin, fixed article prev next, fixed page title on articles
This commit is contained in:
		@@ -190,6 +190,7 @@ module:
 | 
			
		||||
  filefield_sources: 1
 | 
			
		||||
  menu_admin_per_menu: 1
 | 
			
		||||
  menu_link_content: 1
 | 
			
		||||
  pathauto: 1
 | 
			
		||||
  content_translation: 10
 | 
			
		||||
  views: 10
 | 
			
		||||
  materio_id: 11
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										4
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										4
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							@@ -5348,7 +5348,8 @@
 | 
			
		||||
    "deepmerge": {
 | 
			
		||||
      "version": "4.2.2",
 | 
			
		||||
      "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": {
 | 
			
		||||
      "version": "1.1.3",
 | 
			
		||||
@@ -11807,6 +11808,7 @@
 | 
			
		||||
      "version": "2.4.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz",
 | 
			
		||||
      "integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==",
 | 
			
		||||
      "dev": true,
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "deepmerge": "^4.2.2"
 | 
			
		||||
      }
 | 
			
		||||
 
 | 
			
		||||
@@ -23,7 +23,6 @@
 | 
			
		||||
    "vue-autofocus-directive": "^1.0.4",
 | 
			
		||||
    "vue-cool-lightbox": "^2.6.9",
 | 
			
		||||
    "vue-infinite-loading": "^2.4.5",
 | 
			
		||||
    "vue-meta": "^2.4.0",
 | 
			
		||||
    "vue-router": "^3.4.9",
 | 
			
		||||
    "vue-vimeo-player": "^0.1.0",
 | 
			
		||||
    "vue-youtube-embed": "^2.2.2",
 | 
			
		||||
@@ -68,6 +67,7 @@
 | 
			
		||||
    "vue-jest": "^3.0.7",
 | 
			
		||||
    "vue-js-modal": "^2.0.0-rc.6",
 | 
			
		||||
    "vue-loader": "^15.9.5",
 | 
			
		||||
    "vue-meta": "^2.4.0",
 | 
			
		||||
    "vue-server-renderer": "^2.6.12",
 | 
			
		||||
    "vue-style-loader": "^4.1.2",
 | 
			
		||||
    "vue-template-compiler": "^2.6.12",
 | 
			
		||||
 
 | 
			
		||||
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							@@ -31,6 +31,9 @@ import router from 'vuejs/route'
 | 
			
		||||
// import * as Locales from 'assets/i18n/locales.json'
 | 
			
		||||
import { i18n, loadLanguageAsync } from 'vuejs/i18n'
 | 
			
		||||
 | 
			
		||||
import VueMeta from 'vue-meta'
 | 
			
		||||
Vue.use(VueMeta)
 | 
			
		||||
 | 
			
		||||
import VUserBlock from 'vuejs/components/Block/UserBlock'
 | 
			
		||||
import VMainContent from 'vuejs/components/Content/MainContent'
 | 
			
		||||
import VSearchBlock from 'vuejs/components/Block/SearchBlock'
 | 
			
		||||
@@ -273,6 +276,12 @@ import 'theme/assets/styles/main.scss'
 | 
			
		||||
      _v_main_content = new Vue({
 | 
			
		||||
        store,
 | 
			
		||||
        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 } })
 | 
			
		||||
      }).$mount('#' + id)
 | 
			
		||||
    }
 | 
			
		||||
 
 | 
			
		||||
@@ -7,18 +7,18 @@
 | 
			
		||||
      <ul>
 | 
			
		||||
        <li>
 | 
			
		||||
          <a
 | 
			
		||||
            @click.prevent="onPrev"
 | 
			
		||||
            href="#"
 | 
			
		||||
            v-if="prevnext.prev"
 | 
			
		||||
            :href="prevnext.prev.view_node"
 | 
			
		||||
            v-html="prevnext.prev.title"
 | 
			
		||||
            @click.prevent="onPrevNext(prevnext.prev.view_node)"
 | 
			
		||||
          />
 | 
			
		||||
        </li>
 | 
			
		||||
        <li>
 | 
			
		||||
          <a
 | 
			
		||||
            @click.prevent="onNext"
 | 
			
		||||
            href="#"
 | 
			
		||||
            v-if="prevnext.next"
 | 
			
		||||
            :href="prevnext.next.view_node"
 | 
			
		||||
            v-html="prevnext.next.title"
 | 
			
		||||
            @click.prevent="onPrevNext(prevnext.next.view_node)"
 | 
			
		||||
          />
 | 
			
		||||
        </li>
 | 
			
		||||
      </ul>
 | 
			
		||||
@@ -95,18 +95,18 @@
 | 
			
		||||
      <ul>
 | 
			
		||||
        <li>
 | 
			
		||||
          <a
 | 
			
		||||
            @click.prevent="onPrev"
 | 
			
		||||
            href="#"
 | 
			
		||||
            v-if="prevnext.prev"
 | 
			
		||||
            :href="prevnext.prev.view_node"
 | 
			
		||||
            v-html="prevnext.prev.title"
 | 
			
		||||
            @click.prevent="onPrevNext(prevnext.prev.view_node)"
 | 
			
		||||
          />
 | 
			
		||||
        </li>
 | 
			
		||||
        <li>
 | 
			
		||||
          <a
 | 
			
		||||
            @click.prevent="onNext"
 | 
			
		||||
            href="#"
 | 
			
		||||
            v-if="prevnext.next"
 | 
			
		||||
            :href="prevnext.next.view_node"
 | 
			
		||||
            v-html="prevnext.next.title"
 | 
			
		||||
            @click.prevent="onPrevNext(prevnext.next.view_node)"
 | 
			
		||||
          />
 | 
			
		||||
        </li>
 | 
			
		||||
      </ul>
 | 
			
		||||
@@ -142,13 +142,18 @@ export default {
 | 
			
		||||
      prevnext:{},
 | 
			
		||||
      nid:null,
 | 
			
		||||
      path: null,
 | 
			
		||||
      article:null,
 | 
			
		||||
      article:{},
 | 
			
		||||
      image_accroche: null,
 | 
			
		||||
      lightbox_items: null,
 | 
			
		||||
      loading:true,
 | 
			
		||||
      lightbox_index:null,
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  metaInfo () {
 | 
			
		||||
    return {
 | 
			
		||||
      title: this.article.title
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    ...mapState({
 | 
			
		||||
      items: state => state.Blabla.items
 | 
			
		||||
@@ -187,17 +192,6 @@ export default {
 | 
			
		||||
 | 
			
		||||
      if(this.path){
 | 
			
		||||
        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
 | 
			
		||||
@@ -205,10 +199,10 @@ export default {
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    getIndex(){
 | 
			
		||||
      console.log("Article getIndex");
 | 
			
		||||
      this.getItemIndex(this.nid).then((index) => {
 | 
			
		||||
      console.log("Article getIndex article.id:", this.article.id);
 | 
			
		||||
      this.getItemIndex(this.article.id).then((index) => {
 | 
			
		||||
        this.index = index
 | 
			
		||||
        // console.log('article index', index, this);
 | 
			
		||||
        console.log('article index', index, this);
 | 
			
		||||
        this.getPrevNextItems(index).then((pn) => {
 | 
			
		||||
          this.prevnext = pn
 | 
			
		||||
        })
 | 
			
		||||
@@ -218,13 +212,6 @@ export default {
 | 
			
		||||
      console.log('loadArticle')
 | 
			
		||||
      this.loading = true
 | 
			
		||||
 | 
			
		||||
      // let ast = gql`{
 | 
			
		||||
      //   article(id: ${this.nid}) {
 | 
			
		||||
      //     ...ArticleFields
 | 
			
		||||
      //   }
 | 
			
		||||
      // }
 | 
			
		||||
      // ${ articleFields }
 | 
			
		||||
      // `
 | 
			
		||||
      let ast = gql`{
 | 
			
		||||
        route(path: "${this.path}") {
 | 
			
		||||
          ...ArticleFields
 | 
			
		||||
@@ -232,7 +219,6 @@ export default {
 | 
			
		||||
      }
 | 
			
		||||
      ${ articleFields }
 | 
			
		||||
      `
 | 
			
		||||
 | 
			
		||||
      MGQ.post('', { query: print(ast)
 | 
			
		||||
      })
 | 
			
		||||
        .then(({ data:{data:{route}}}) => {
 | 
			
		||||
@@ -248,6 +234,18 @@ export default {
 | 
			
		||||
      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 = [];
 | 
			
		||||
@@ -296,24 +294,34 @@ export default {
 | 
			
		||||
 | 
			
		||||
      this.loading = false;
 | 
			
		||||
    },
 | 
			
		||||
    onNext(){
 | 
			
		||||
    onPrevNext(a){
 | 
			
		||||
      // 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({
 | 
			
		||||
        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 }
 | 
			
		||||
        params: { alias:alias }
 | 
			
		||||
        // query: { uuid: this.prevnext.next.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) {
 | 
			
		||||
      this.lightbox_index = index
 | 
			
		||||
    }
 | 
			
		||||
 
 | 
			
		||||
@@ -68,11 +68,14 @@ export default {
 | 
			
		||||
      dispatch('getItems')
 | 
			
		||||
    },
 | 
			
		||||
    getItemIndex ({ dispatch, commit, state }, nid) {
 | 
			
		||||
      console.log('getItemIndex nid', nid)
 | 
			
		||||
      return state.items.findIndex((e) => {
 | 
			
		||||
        return e.nid == nid
 | 
			
		||||
        // console.log('findIndex', e, nid);
 | 
			
		||||
        return e.nid === nid
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    getPrevNextItems ({ dispatch, commit, state }, index) {
 | 
			
		||||
      // TODO: preload prev and next items
 | 
			
		||||
      return {
 | 
			
		||||
        prev: state.items[index - 1],
 | 
			
		||||
        next: state.items[index + 1]
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user