123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314 |
- <template>
- <div class="loading" v-if="!article || loading">
- <span>{{ $t('default.Loading…') }}</span>
- </div>
- <article class="article" v-else>
- <nav class="prevnext top">
- <ul>
- <li>
- <a
- v-if="prevnext.prev"
- :href="prevnext.prev.view_node"
- v-html="prevnext.prev.title"
- @click.prevent="onPrevNext(prevnext.prev)"
- />
- </li>
- <li>
- <a
- v-if="prevnext.next"
- :href="prevnext.next.view_node"
- v-html="prevnext.next.title"
- @click.prevent="onPrevNext(prevnext.next)"
- />
- </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="cards-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
- v-if="prevnext.prev"
- :href="prevnext.prev.view_node"
- v-html="prevnext.prev.title"
- @click.prevent="onPrevNext(prevnext.prev)"
- />
- </li>
- <li>
- <a
- v-if="prevnext.next"
- :href="prevnext.next.view_node"
- v-html="prevnext.next.title"
- @click.prevent="onPrevNext(prevnext.next)"
- />
- </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:{},
- nid:null,
- path: 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
- })
- },
- created(){
- this.getArticle()
- },
- methods: {
- ...mapActions({
- getItems: 'Blabla/getItems',
- 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'})
- }
- },
- getIndex(){
- 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)
- 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)
- this.$router.push({
- name:`article`,
- params: { alias:alias, id: pn.nid }
- })
- },
- setLightboxIndex(index) {
- this.lightbox_index = index
- }
- },
- components: {
- Card
- },
- watch: {
- '$route' (to, from) {
- console.log('route change')
- this.getArticle()
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|