InnovationLab/public/js/recipePage.js

import getParams from './getParams.js';

recipe = function () {
	//private menbers
	let audioDom;
	let player
	const dataUrl = "./json/kolData.json";
	const kolMan = ['Yang', 'Hao', 'Drangadrang', 'Cookingdairy', 'Ku', 'Betty', 'Ralf', 'Chefchouchou', 'Albee', 'commute_Chang', 'commute_Li', 'commute_He', 'ordinary']
	let kolName; 
	let allData;
	let recipeData;
	let isMoreScroll = false;
	let isIngradiebtsScroll = false;

	//private methods
	function init() {
		console.log('recipe is loaded.');
		

		// 取得是哪位Kol
		if (getParams('kol') != null && kolMan.includes(getParams('kol'))){
			kolName = getParams('kol')
		}else {
			kolName = 'Ralf' // 預設kol
		}
		console.log(kolName)

		fetch(dataUrl)
			.then(res => res.json())
			.then(data => {
				allData = data;
				let getRecipe = data.filter(item => item.kol.id == kolName
				);
				recipeData = getRecipe[0];
				// console.log(recipeData)
			})
			.then(()=>{
				handler();
			});
	}

	async function handler(){
		const handleraudio = await audioStyle(); //初始化播放器
		const handlerHtml = await createHtml();
		// const handlerTouch = await detectTouch();
		const handlerInto = await intoPage();
	}

	function audioStyle(){
		audioDom = $("#audioPlayer")[0]
		player = new Plyr('#audioPlayer',{
            controls: [
                // 'restart',
                'play',
                'progress',
                'current-time',
                'duration',
                // 'mute',
                // 'volume',
            ],
        });
		setTimeout(function(){$(".recipe__teaching audio").css("opacity",1)},200)
		
		$(".plyr__progress__container").css("pointer-events","none");
		player.on('play', (event) => {
			$(".plyr__progress__container").css("pointer-events","auto");
		});
	}

	// 把生成的HTML顯示到介面上
	function createHtml() {
		// kv DOM
		$(".recipe__kv__dish").append(`
			<img src="https://d1xzlli46wohoc.cloudfront.net/images/recipePage/${recipeData.kv_img}" alt="">
		`)
		//食材保文
		if(kolName == 'Drangadrang') {
			$(".recipe__ingredients p").html(`
				*商品依各店庫存為主，如遇缺貨可自行更換商品或服務門市<br>*芒果為季節性商品，此料理可將芒果替換為香蕉、柳橙、鳳梨等水果或依喜好更換食材
			`)
		}
		if(kolName == 'commute_Chang') {
			$(".recipe__ingredients p").html(`
				*商品依各店庫存為主，如遇缺貨可自行更換商品或服務門市<br>*水果可依個人喜好添加
			`)
		}


		// 分享
		$(".recipe__btn-share").attr("href", "./share.html?kol=" + kolName)


		// let path = "./photograph.html?kol=" + kolName + "&openExternalBrowser=1"
		// console.log(path)
		$(".recipe__btn-filter").click(function(e){
			e.preventDefault();
			let path = "./photograph.html?kol=" + kolName + "&openExternalBrowser=1"
			location.href = path
			console.log(path)
		});

		//瀏覽其他名菜圖
		let elseData = allData.filter(item=>item.kol.id != kolName);
		// console.log(elseData)
		for(let i=0;i<elseData.length;i++){
			$(".recipe__container").append(`
				<a href="./recipe.html?kol=${elseData[i].kol.id}" class="recipe__else">
					<img class="recipe__else__dish" src="https://d1xzlli46wohoc.cloudfront.net/images/recipePage/${elseData[i].kv_img_s}" alt="">
					<img class="recipe__else__name" src="https://d1xzlli46wohoc.cloudfront.net/images/recipePage/${elseData[i].kv_img_s_name}" alt="">
				</a>
			`)
		}

		//料理標籤
		let tagData = recipeData.tag.split(',');
		// console.log(tagData)
		for(let i=0;i<tagData.length;i++) {
			$(".recipe__tag__list").append(`
				<a href="./search.html?search=${tagData[i]}" class="recipe__tag__item">${tagData[i]}</a>
			`)
		}

		let ctaUrl = getOrderURL(recipeData);
		$(".recipe__buy").attr("href",ctaUrl);
		$(".recipe__buy").click(function(e){
			e.preventDefault();
			player.pause();
			setTimeout(function(){
				location.href = ctaUrl
			},200)
			
		})

	}

	// 偵測上滑下滑
	function detectTouch(){
		var startX, startY, moveX, moveY;
		//here clientX, and clientY means X and Y coordinates
		function touchStart(e) {
			startX = e.touches[0].clientX;
			startY = e.touches[0].clientY;
		}

		function touchMove(e) {
			moveX = e.touches[0].clientX;
			moveY = e.touches[0].clientY;
		}
		function touchEnd() {
			if (startX + 100 < moveX) {
				console.log('right');
			} else if (startX - 100 > moveX) {
				console.log('left');
			}
			if (startY < moveY) {
				console.log('down');
				// $(".recipe__buy").css('bottom', '-29px')
			} else if (startY > moveY) {
				console.log('up');
				// $(".recipe__buy").css('bottom', '-49px')
			}
		}
		document.addEventListener('touchstart', touchStart,false);
		document.addEventListener('touchmove', touchMove, false);
		document.addEventListener('touchend', touchEnd, false);
	}

	// 偵測播放
	function detectPlay(){
		let headerH = $(".header").height();
		let teachingTop = $(".recipe__teaching").offset().top
		let isClick = false;
		
		$(".recipeWrapper .main").click(function(e){
			// console.log(e.target.className)
			if(!isClick) {
				let recipe__teachingT = $(".recipe__teaching").offset().top
				let windowScrollTop = $(window).scrollTop();
				// console.log("recipe__teachingT: "+recipe__teachingT)
				// console.log("windowScrollTop: "+windowScrollTop)
				
				if (e.target.className == 'recipe__buy__img' || e.target.className == 'recipe__btn-filter__img') {
					return false;
				}
				if(windowScrollTop>recipe__teachingT) {
					player.play();
				}else {
					player.play();
					$("html,body").animate({
						scrollTop: teachingTop - headerH
					})
				}

				$(".recipe__outer-ingredients").animate({
					scrollLeft: 0
				})
				isIngradiebtsScroll = true

				isClick = true;
			}
		});
	}

	// 一鍵下單動畫
	function buyCtaAni(){
		let buyCtaTl = gsap.timeline({ repeat: -1, repeatDelay: 3, delay: 1.5});
		buyCtaTl.to(".recipe__buy", {duration: 0.2,scale: 1, y:0, ease: "none" })
		buyCtaTl.to(".recipe__buy", { duration: 0.2,scale: 1.1, y:-10, ease: "none"})
		buyCtaTl.to(".recipe__buy", {duration: 0.2,scale: 1, y:0, ease: "none" })
		buyCtaTl.to(".recipe__buy", { duration: 0.2,scale: 1.1, y:-10, ease: "none" })
		buyCtaTl.to(".recipe__buy", {duration: 0.3,scale: 1, y:0, ease: "none" })
	}

	// 瀏覽更多名菜滑動
	function scrollAni(){
		let windowMoreH = $(window).height() / 2;
		let windowIngradientsH = $(window).height() / 2;
		let recipe__ingradientsT = $(".recipe__ingredients").offset().top
		let recipe__moreT = $(".recipe__more").offset().top
		let ingradientsH = recipe__ingradientsT - windowIngradientsH
		let moreH = recipe__moreT - windowMoreH
		let ingradientsOver = false;
		if($(".recipe__basket").width()>($(window).width() - 20)){
			$(".recipe__outer-ingredients").scrollLeft(200);
			ingradientsOver = true;
		}
		
		$(".recipe__container").scrollLeft(200);
		
		$(window).scroll(function(){
			if (ingradientsOver &&!isIngradiebtsScroll) {
				if ($(window).scrollTop() > ingradientsH) {
					$(".recipe__outer-ingredients").animate({
						scrollLeft: 0
					})
					isIngradiebtsScroll = true
					// console.log("isScroll")
				}
			}
			if (!isMoreScroll) {
				if ($(window).scrollTop() > moreH) {
					$(".recipe__container").animate({
						scrollLeft: 0
					})
					isMoreScroll = true
					// console.log("isScroll")
				}
			}
			// console.log($(window).scrollTop() > intoH)
		})
	}

	function getOrderURL(_kolData) {

		var _ingredientData = _kolData.ingredient;
		var resuleData = [];

		_ingredientData.forEach(element => {
			// console.log(element);
			var _result =  { "salepage_id": "", "sku_id": "", "qty": 1 };
			_result.salepage_id = element.salepage_id;
			_result.sku_id = element.sku_id;
			if(kolName == 'Chefchouchou' && element.salepage_id =="1587984") {
				_result.qty = 2
			}
			if(_result.sku_id !== null){
			resuleData.push(_result);
			}      
		});

		console.log(resuleData);

		var _utm = _kolData.kol.UTM;
		
		var _url = 'http://shop.pxmart.com.tw/v2/ShoppingCart/BatchInsert?openExternalBrowser=1&data=' + encodeURIComponent(JSON.stringify(resuleData)) + _utm;
		console.log(_url);

		return _url;    
	}


	function intoPage(){
		gsap.set(".recipeWrapper main",{y: 200})
		gsap.to(".recipeWrapper main",{y: 0,onComplete: function(){
			$(".recipeWrapper main").css("transform","none")
			buyCtaAni();
			scrollAni();
			detectPlay();
		}})
	}

	{
		$(document).ready(function () {
			init();
		});
	}

	//public
	return {
		intoPage: function(){
			intoPage();
		}
	};
};

var recipe = new recipe();

const swiper = new Swiper('.recipe__swiper .swiper', {
	// Optional parameters
	draggable: true,
	// loop: true,
	// If we need pagination
	pagination: {
		el: '.swiper-pagination',
		clickable: true
	}
});