SHARE
TWEET

Untitled

a guest Sep 18th, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2. import Vue from 'vue'
  3. import jQuery from 'jquery'
  4. import 'slick-carousel'
  5. import 'slick-carousel/slick/slick-theme.scss'
  6. import 'slick-carousel/slick/slick.scss'
  7. import Artworks from '../services/Artworks'
  8. import PageQueue from '../stores/PageQueue'
  9.  
  10. export default {
  11.   name: 'oeuvre',
  12.  
  13.   components: {},
  14.  
  15.   data() {
  16.     return {
  17.       artwork: {
  18.         artist: {},
  19.         audios: null,
  20.         videos: null,
  21.         images: null,
  22.         similaires: null,
  23.         exhibition: {},
  24.       }
  25.     }
  26.   },
  27.  
  28.   created() {
  29.     window.scrollTo(0, 0)
  30.     this.loadArtworkFromRoute()
  31.   },
  32.  
  33.   methods: {
  34.     loadArtworkFromRoute() {
  35.       const id = this.$route.params.artworkId
  36.  
  37.       Artworks.byId(id).then(data => {
  38.         jQuery('#slickGallery').slick('unslick')
  39.         this.artwork = data
  40.  
  41.         Vue.nextTick(() => {
  42.           this.initGallerySlideshow()
  43.           this.initSlickButtons()
  44.         })
  45.       })
  46.     },
  47.  
  48.     hasArtist() {
  49.       if (Array.isArray(this.artwork.artist) && this.artwork.artist.length === 0) {
  50.         return false
  51.       }
  52.       return true
  53.     },
  54.  
  55.     initSlickButtons() {
  56.       jQuery('#slickButtons').slick({
  57.         arrows: true,
  58.         prevArrow: document.getElementById('arrow-left-categories'),
  59.         nextArrow: document.getElementById('arrow-right-categories'),
  60.         variableWidth: true,
  61.         dots: false,
  62.         infinite: false,
  63.         draggable: true,
  64.         speed: 500,
  65.         slidesToShow: 4,
  66.         responsive: [{
  67.           breakpoint: 1600,
  68.           settings: {
  69.             slidesToShow: 3
  70.           }
  71.         }, {
  72.           breakpoint: 1200,
  73.           settings: {
  74.             slidesToShow: 2
  75.           }
  76.         }, {
  77.           breakpoint: 700,
  78.           settings: {
  79.             slidesToShow: 1
  80.           }
  81.         }]
  82.       })
  83.     },
  84.  
  85.     initGallerySlideshow() {
  86.       jQuery('#slickGallery').slick({
  87.         arrows: false,
  88.         dots: true,
  89.         appendDots: document.getElementById('slickGalleryNav'),
  90.         infinite: true,
  91.         autoplay: true,
  92.         draggable: true,
  93.         pauseOnHover: false,
  94.         autoplaySpeed: 20000,
  95.         speed: 500,
  96.         slidesToShow: 3,
  97.         slidesToScroll: 1,
  98.         responsive: [{
  99.           breakpoint: 1700,
  100.           settings: {
  101.             slidesToShow: 2
  102.           }
  103.         }, {
  104.           breakpoint: 1100,
  105.           settings: {
  106.             slidesToShow: 1
  107.           }
  108.         }]
  109.       })
  110.     },
  111.   },
  112.  
  113.   computed: {
  114.     nextArtworkId() {
  115.       if (!this.artwork.id) return null
  116.       return PageQueue.getNext(this.artwork.id)
  117.     },
  118.     prevArtworkId() {
  119.       if (!this.artwork.id) return null
  120.       return PageQueue.getPrevious(this.artwork.id)
  121.     },
  122.     queueSourceUrl() {
  123.       return PageQueue.sourceUrl
  124.     },
  125.   },
  126.  
  127.   watch: {
  128.     '$route': function(newRoute, oldRoute) {
  129.       jQuery('html,body').animate({ scrollTop: 0 }, 300)
  130.       this.loadArtworkFromRoute()
  131.     }
  132.   },
  133.  
  134.   mounted() {
  135.  
  136.     // Fonction permettant de défiller d'un block à un autre à l'aide d'un clique
  137.     function scrollToBlock(depart, destination) {
  138.       jQuery(depart).on('click', function() {
  139.         jQuery('html, body').animate({
  140.           scrollTop: jQuery(destination).offset().top
  141.         }, 600, 'easeInOutExpo')
  142.       })
  143.     }
  144.  
  145.     scrollToBlock('#btnDesc', '#desc')
  146.     scrollToBlock('#btnBio', '#bio')
  147.     scrollToBlock('#btnAudio', '#audio')
  148.     scrollToBlock('#btnVideo', '#video')
  149.     scrollToBlock('#btnPhoto', '#photo')
  150.     scrollToBlock('#btnTech', '#tech')
  151.     scrollToBlock('#btnStyle', '#style')
  152.     scrollToBlock('#btnSimi', '#simi')
  153.  
  154.   }
  155. }
  156. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top