Article.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <template>
  2. <div class="loading" v-if="!article || loading">
  3. <span>Loading ...</span>
  4. </div>
  5. <article class="article" v-else>
  6. <nav class="prevnext top">
  7. <ul>
  8. <li>
  9. <a
  10. v-if="prevnext.prev"
  11. :href="prevnext.prev.view_node"
  12. v-html="prevnext.prev.title"
  13. @click.prevent="onPrevNext(prevnext.prev.view_node)"
  14. />
  15. </li>
  16. <li>
  17. <a
  18. v-if="prevnext.next"
  19. :href="prevnext.next.view_node"
  20. v-html="prevnext.next.title"
  21. @click.prevent="onPrevNext(prevnext.next.view_node)"
  22. />
  23. </li>
  24. </ul>
  25. </nav>
  26. <div class="cols">
  27. <div class="col col-left">
  28. <section v-if="image_accroche" class="accroche">
  29. <figure>
  30. <img
  31. :src="image_accroche.url"
  32. :alt="image_accroche.alt"
  33. :title="image_accroche.title"
  34. @click="setLightboxIndex(0)"
  35. />
  36. </figure>
  37. </section>
  38. <section class="taxonomy">
  39. <div class="thesaurus">
  40. <ul>
  41. <li
  42. v-for="term in article.thesaurus" v-bind:key="term.id"
  43. >{{ term.name }}</li>
  44. </ul>
  45. </div>
  46. <div class="tags">
  47. <ul>
  48. <li
  49. v-for="term in article.tags" v-bind:key="term.id"
  50. >{{ term.name }}</li>
  51. </ul>
  52. </div>
  53. </section>
  54. <section v-if="article.showroom" class="showroom">
  55. <h2>{{ article.showroom.name }}</h2>
  56. <a class="mail" :href="'mail:'+article.showroom.field_public_email">
  57. {{ article.showroom.field_public_email }}</a>
  58. <br/>
  59. <a class="phone" :href="'tel:' + article.showroom.field_public_phone">
  60. {{ article.showroom.field_public_phone }}</a>
  61. </section>
  62. </div> <!-- //col-left -->
  63. <div class="col col-right">
  64. <section class="body" v-html="article.body"></section>
  65. <CoolLightBox
  66. :items="lightbox_items"
  67. :index="lightbox_index"
  68. :loop="true"
  69. srcName="url"
  70. @close="lightbox_index = null">
  71. </CoolLightBox>
  72. <div class="gallery-wrapper">
  73. <div
  74. class="image"
  75. v-for="(image, imageIndex) in lightbox_items"
  76. v-if="imageIndex > 0"
  77. :key="imageIndex"
  78. @click="setLightboxIndex(imageIndex)"
  79. :style="{ backgroundImage: 'url(' + image.thumb + ')' }"
  80. ></div>
  81. </div>
  82. <aside class="linked-materials">
  83. <h3 class="field__label">{{$t("materio.Linked Materials")}}</h3>
  84. <div class="card-list">
  85. <ul class="">
  86. <li v-for="node in article.linked_materials" v-bind:key="node.id">
  87. <Card :item="node" />
  88. </li>
  89. </ul>
  90. </div>
  91. </aside>
  92. </div> <!-- // col-right -->
  93. </div> <!-- // cols -->
  94. <nav class="prevnext bottom">
  95. <ul>
  96. <li>
  97. <a
  98. v-if="prevnext.prev"
  99. :href="prevnext.prev.view_node"
  100. v-html="prevnext.prev.title"
  101. @click.prevent="onPrevNext(prevnext.prev.view_node)"
  102. />
  103. </li>
  104. <li>
  105. <a
  106. v-if="prevnext.next"
  107. :href="prevnext.next.view_node"
  108. v-html="prevnext.next.title"
  109. @click.prevent="onPrevNext(prevnext.next.view_node)"
  110. />
  111. </li>
  112. </ul>
  113. </nav>
  114. </article>
  115. </template>
  116. <script>
  117. import router from 'vuejs/route'
  118. import store from 'vuejs/store'
  119. // import { JSONAPI } from 'vuejs/api/json-axios'
  120. import { REST } from 'vuejs/api/rest-axios'
  121. import { MGQ } from 'vuejs/api/graphql-axios'
  122. import { print } from 'graphql/language/printer'
  123. import gql from 'graphql-tag'
  124. // import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
  125. import articleFields from 'vuejs/api/gql/article.fragment.gql'
  126. // import qs from 'querystring-es3'
  127. import Card from 'vuejs/components/Content/Card'
  128. import { mapState, mapActions } from 'vuex'
  129. export default {
  130. name: "Article",
  131. router,
  132. store,
  133. props: ['item'],
  134. data(){
  135. return {
  136. index:-1,
  137. prevnext:{},
  138. nid:null,
  139. path: null,
  140. article:{},
  141. image_accroche: null,
  142. lightbox_items: null,
  143. loading:true,
  144. lightbox_index:null,
  145. }
  146. },
  147. metaInfo () {
  148. return {
  149. title: this.article.title
  150. }
  151. },
  152. computed: {
  153. ...mapState({
  154. items: state => state.Blabla.items
  155. })
  156. },
  157. created(){
  158. this.getArticle()
  159. },
  160. methods: {
  161. ...mapActions({
  162. getItems: 'Blabla/getItems',
  163. getItemIndex: 'Blabla/getItemIndex',
  164. getPrevNextItems: 'Blabla/getPrevNextItems'
  165. }),
  166. getArticle(){
  167. console.log(this.$route);
  168. // get the article uuid
  169. // if(this.$route.query.nid){
  170. // // we come from internal link with vuejs
  171. // // directly record uuid
  172. // this.nid = this.$route.query.nid
  173. //
  174. // }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
  175. // // we landed in an internal page
  176. // // get the uuid from drupalDeclouped, provided by materio_decoupled.module
  177. // this.nid = drupalDecoupled.entity_id
  178. // }
  179. if (this.$route.path) {
  180. // we come from internal link with vuejs
  181. this.path = this.$route.path
  182. } else {
  183. // we landed in an internal page
  184. this.path = window.location.pathname
  185. }
  186. if(this.path){
  187. this.loadArticle()
  188. }else{
  189. // if for any reason we dont have the uuid
  190. // redirect to home
  191. this.$route.replace('home')
  192. }
  193. },
  194. getIndex(){
  195. console.log("Article getIndex article.id:", this.article.id);
  196. this.getItemIndex(this.article.id).then((index) => {
  197. this.index = index
  198. console.log('article index', index, this);
  199. this.getPrevNextItems(index).then((pn) => {
  200. this.prevnext = pn
  201. })
  202. })
  203. },
  204. loadArticle(){
  205. console.log('loadArticle')
  206. this.loading = true
  207. let ast = gql`{
  208. route(path: "${this.path}", lang: "${drupalDecoupled.lang_code}") {
  209. ...ArticleFields
  210. }
  211. }
  212. ${ articleFields }
  213. `
  214. MGQ.post('', { query: print(ast)
  215. })
  216. .then(({ data:{data:{route}}}) => {
  217. console.log('loadArticle', route )
  218. this.parseDataGQL(route)
  219. })
  220. .catch(error => {
  221. console.warn('Issue with loadArticle', error)
  222. Promise.reject(error)
  223. })
  224. },
  225. parseDataGQL(article){
  226. console.log('parseDataGQL article', article)
  227. this.article = article
  228. // get the prev next items
  229. if(!this.items.length){
  230. // if items list not yet loaded preload them
  231. this.getItems().then(() => {
  232. // then get the index
  233. this.getIndex()
  234. })
  235. }else{
  236. // or directly get the index
  237. this.getIndex()
  238. }
  239. this.image_accroche = article.images[0]
  240. this.lightbox_items = [];
  241. // fill the lightbox
  242. for (var i = 0; i < article.images.length; i++) {
  243. article.images[i].thumb = article.images[i].style_articlecardmedium.url
  244. this.lightbox_items.push(article.images[i]);
  245. }
  246. // parse embeded videos pushing it in lightbox
  247. for (var i = 0; i < article.videos.length; i++) {
  248. let videoUrl = article.videos[i].url
  249. let provider_regex = /https:\/\/(www\.)?(?<provider>youtube|vimeo)\.com\/.+/;
  250. let match = provider_regex.exec(videoUrl)
  251. // console.log('provider', match.groups.provider);
  252. let video_id = null;
  253. let video_thumb = null;
  254. switch (match.groups.provider) {
  255. case 'vimeo':
  256. let vimeo_regex = /https:\/\/vimeo\.com\/(?<id>\d+)/;
  257. video_id = vimeo_regex.exec(videoUrl).groups.id || null;
  258. // TODO: get the vimeo thumb https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video
  259. video_thumb = "http://blogpeda.ac-poitiers.fr/ent-lyc/files/2015/06/Vimeo_icon_block.png"
  260. break;
  261. case 'youtube':
  262. let youtube_regex = /https:\/\/(www\.)?youtube\.com\/watch\?v=(?<id>.+)/;
  263. video_id = youtube_regex.exec(videoUrl).groups.id || null;
  264. video_thumb = "http://img.youtube.com/vi/"+video_id+"/0.jpg"
  265. break;
  266. }
  267. // console.log('video_id', video_id);
  268. this.lightbox_items.push({
  269. url: videoUrl,
  270. title: "",
  271. description: "",
  272. thumb: video_thumb
  273. });
  274. }
  275. // console.log('this.content.lightbox_items', this.lightbox_items);
  276. // update main page title
  277. this.$store.commit('Common/setPagetitle', article.title)
  278. this.loading = false;
  279. },
  280. onPrevNext(a){
  281. console.log('clicked on prev/next; a', a);
  282. let alias = a.replace(/^\/\D{2,3}\/blabla\//g, '')
  283. console.log('alias', alias);
  284. this.$router.push({
  285. name:`article`,
  286. params: { alias:alias }
  287. })
  288. },
  289. setLightboxIndex(index) {
  290. this.lightbox_index = index
  291. }
  292. },
  293. components: {
  294. Card
  295. },
  296. watch: {
  297. '$route' (to, from) {
  298. console.log('route change')
  299. this.getArticle()
  300. }
  301. }
  302. }
  303. </script>
  304. <style lang="scss" scoped>
  305. </style>