Slides.vue

<template>
	<main role="main">
		<router-link to="/" class="back">
			<svg class="svg-icon" viewBox="0 0 20 20">
				<path fill="none" d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"></path>
			</svg>Kembali
		</router-link>
		<div class="swiper-container main-slides" ref="mainSlides">
			<article class="slides swiper-wrapper">
				<slot></slot>
			</article>
			<nav class="nav-bar">
				<ul class="nav">
					<li v-show="isShowMore" class="nav__item animated fadeInRight" style="animation-delay: 400ms;">
						<a href="#" class="nav__link" @click.prevent="hideMore">
							<span :class="['nav__icon', 'nav__icon--'+icon('svg:icons/symbols.svg#back').type]" v-html="icon('svg:icons/symbols.svg#back').view()"></span>
							<span class="nav__text">Kembali</span>
						</a>
					</li>
					<template v-for="(slide, index) in slides">
						<template v-if="index > 3">
							<li v-show="(index !== 0) && isShowMore" :class="['nav__item', 'animated', 'fadeInRight', { 'is-active': activeIndex == (index-1) }]" :style="{ animationDelay: (index+1)*100+'ms' }">
								<a href="#" class="nav__link" @click.prevent="changeSlide(index-1)">
									<span :class="['nav__icon', 'nav__icon--'+icon(slide.icon).type]" v-html="icon(slide.icon).view()"></span>
									<span class="nav__text">{{ slide.title }}</span>
								</a>
							</li>
						</template>
						<template v-else>
							<li v-show="(index !== 0) && !isShowMore" :class="['nav__item', 'animated', 'fadeInRight', { 'is-active': activeIndex == (index-1) }]" :style="{ animationDelay: (index+1)*100+'ms' }">
								<a href="#" class="nav__link" @click.prevent="changeSlide(index-1)">
									<span :class="['nav__icon', 'nav__icon--'+icon(slide.icon).type]" v-html="icon(slide.icon).view()"></span>
									<span class="nav__text">{{ slide.title }}</span>
								</a>
							</li>
						</template>
					</template>
					<li v-show="!isShowMore" class="nav__item animated fadeInRight" style="animation-delay: 400ms;">
						<a href="#" class="nav__link" @click.prevent="showMore">
							<span :class="['nav__icon', 'nav__icon--'+icon('svg:icons/symbols.svg#more').type]" v-html="icon('svg:icons/symbols.svg#more').view()"></span>
							<span class="nav__text">Lainnya</span>
						</a>
					</li>
				</ul>
			</nav>
			<transition name="fade">
				<a v-show="showPrev" href="#" class="nav-button nav-button__previous" @click.prevent="previousSlide">
					<svg class="svg-icon" aria-hidden="true"><use xlink:href="icons/symbols.svg#angle-right"></use></svg>
				</a>
			</transition>
			<transition name="fade">
				<a v-show="showNext" href="#" class="nav-button nav-button__next" @click.prevent="nextSlide">
					<svg class="svg-icon" aria-hidden="true"><use xlink:href="icons/symbols.svg#angle-right"></use></svg>
				</a>
			</transition>
		</div>
	</main>
</template>

<script>
import Icon from './icon'

export default {
	data() {
		return {
			slides: [],
			swiper: null,
			showPrev: false,
			showNext: true,
			isShowMore: false
		}
	},
	computed: {
		swiperOptions() {
			return {
			}
		},
		activeIndex() {
			return this.swiper.activeIndex;
		},
		slide() {
			return this.slides[this.activeIndex+1];
		},
		isFirstSlide() {
			return this.activeIndex == 0;
		},
		isLastSlide() {
			return (this.activeIndex+1) == this.swiper.slides.length;
		},
		firstChildSlide() {
			return this.slides[this.activeIndex+1].firstSlide;
		},
		currentSlide() {
			return this.swiper.slides[this.activeIndex];
		}
	},
	methods: {
		icon(icon) {
			return new Icon(icon);
		},
		previousSlide() {
			if(!this.isFirstSlide && this.slide.isFirstSlide) {
				this.swiper.slidePrev();
			} else if(!this.slide.isFirstSlide) {
				this.slide.swiper.slidePrev();
			}
			this.toggleNav();
		},
		nextSlide() {
			if(!this.isLastSlide && this.slide.isLastSlide) {
				this.swiper.slideNext();
			} else if(!this.slide.isLastSlide) {
				this.slide.swiper.slideNext();
			}
			this.toggleNav();
		},
		toggleNav() {
			if(this.isFirstSlide && this.slide.isFirstSlide) {
				this.showPrev = false;
			} else {
				this.showPrev = true;
			}

			if(this.isLastSlide && this.slide.isLastSlide) {
				this.showNext = false;
			} else {
				this.showNext = true;
			}
		},
		showMore() {
			this.isShowMore = true;
		},
		hideMore() {
			this.isShowMore = false;
		},
		changeSlide(index) {
			 this.swiper.slideTo(index);
		},

		appearAnimation() {
			let elements = this.firstChildSlide.querySelectorAll('[data-appear-animation]');

			for (var i = 0; i < elements.length; i++) {
				var item = elements[i];

				let delay = (item.dataset.animationDelay) ? item.dataset.animationDelay : 100;
				if(delay > 1) item.style.animationDelay = delay+'ms';
				item.classList.add('animated');
				item.classList.add(item.dataset.appearAnimation);
			}
		},
		playVideo() {
			let video = this.currentSlide.querySelectorAll('video');
			for (var i = 0; i < video.length; i++) {
				var item = video[i];
				
				item.play();
	            item.firstChild.nodeValue = 'Pause';

				item.addEventListener('click', function () {
			        if (item.paused == false) {
			            item.pause();
			            item.firstChild.nodeValue = 'Play';
			        } else {
			            item.play();
			            item.firstChild.nodeValue = 'Pause';
			        }
			    });
			}
		}
	},

	created() {
		this.slides = this.$children;
	},

	mounted() {
		const self = this;
		this.swiper = new Swiper(this.$refs.mainSlides, this.swiperOptions);
		this.swiper.on('transitionStart', function (swiper) {
			self.appearAnimation();
			self.playVideo();

			if(self.activeIndex > 2) {
				self.isShowMore = true;
			} else {
				self.isShowMore = false;
			}
		});
	    this.swiper.disableTouchControl();
	},
}
</script>