InnovationLab/public/js/recipePage_ordinary.js

import getParams from './getParams.js';

recipePage_ordinary = function () {
	//private menbers
	const ordinaryUrl_left = "./json/ordinaryData_left.json";
	const ordinaryUrl_right = "./json/ordinaryData_right.json";
	let ordinaryData_left;
	let ordinaryData_right;
	let ordinaryData = [];
	let targetData;
	let ingredientAllData;
	let ordinaryId; 

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



		// 取得是哪位素人
		if (getParams('ordinary') != null && !isNaN(getParams('ordinary'))){
			ordinaryId = getParams('ordinary')
			
		}else {
			ordinaryId = 1 // 預設kol
		}
		// console.log(!isNaN(getParams('ordinary')))
		console.log("ordinaryId: "+ordinaryId)

		// 取得素人資料
		getOrdinaryData();
	}

	function getOrdinaryData() {
		fetch(ordinaryUrl_left)
			.then(res => res.json())
			.then(data => {
				ordinaryData_left = data.sort((a, b) => {
						return -1
					});
				ordinaryData = ordinaryData.concat(ordinaryData_left)
				// console.log(ordinaryData)
			})
			.then(() => {
				fetch(ordinaryUrl_right)
					.then(res => res.json())
					.then(data => {
						ordinaryData_right = data.sort((a, b) => {
								return a.index - b.index
							});
						ordinaryData = ordinaryData.concat(ordinaryData_right)
						// console.log(ordinaryData)
						let temData = ordinaryData.filter(item=>{
							return item.id == ordinaryId;
						})
						targetData = temData[0];
						console.log(targetData)
						getIngredientData();
					})
					.then(() => {
						createOrdinaryHtml();
						buyCtaAni();
					})
					.then(() => {
						setTimeout(() => {
							initHandler();
						}, 200);

					})
			});
	}

	function newsticker(){
		$(".newsticker").eocjsNewsticker({
			speed: 20,
			divider: '　　',
			type: 'static'
		});
	}

	function recipeModal(){
		$(".recipe__open").click(function(){
			$(".recipe__modal").css("z-index",20)
			gsap.to(".recipe__modal", {
				duration: 0.3, autoAlpha: 1, onComplete: function () {
					$("body").addClass("modal-open");
				}})
		});
		$(".recipe__modal .close").click(function(){
			gsap.to(".recipe__modal", { duration: 0.3, autoAlpha: 0, onComplete: function(){
				$(".recipe__modal").css("z-index", -1);
				$("body").removeClass("modal-open");
			} })
		});
	}

	async function initHandler(){
		// console.log("initHandler")
		const recipeModalHandler = await recipeModal();
		// const newstickerStart = await newsticker();
		// const handlerInto = await intoPage();
	}

	// 把生成的HTML顯示到介面上
	function createOrdinaryHtml() {
		// kv 素人濾鏡照或菜色照
		$(".recipe__kv__ordinary").append(`
			<img src="./images/recipePage_ordinary/dish/${targetData.kv_img}" alt="">
		`)

		// 食譜名稱
		$(".recipe__kv__dish").html(`
			<span>民間料理救星 - ${targetData.name}</span>${targetData.text}
		`);

		// 食譜步驟
		$(".recipe__box-step").html(targetData.step);

		//放大的食譜步驟
		$(".recipe__modal .modal__name .newsticker").html(targetData.text);

		$(".recipe__modal .modal__content").html(targetData.step);

		// 食材列表
		for (let i = 0; i < ingredientAllData.length;i++) {
			$(".recipe__box-ingredients").append(`
				<div class="ingredients__box">
					<div class="ingredients__name">${ingredientAllData[i].ingredient_name}</div><div class="ingredients__space"></div><div class="ingredients__unit">${ingredientAllData[i].ingredient_unit}</div>
				</div>
			`);
		}
		

		// 分享
		$(".recipe__btn-share").attr("href", "./share.html?ordinary=" + targetData.id)


		//料理標籤
		let tagData = [];
		let tag_1 = targetData.tag_1.split(",")
		let tag_2 = targetData.tag_2.split(",")
		let tag_3 = targetData.tag_3.split(",")
		let tag_4 = targetData.tag_4.split(",")
		if (tag_1.length > 1) {
			for (let i = 0; i < tag_1.length; i++) {
				tagData.push(tag_1[i])
			}
		}else {
			if (targetData.tag_1 != "") {
				tagData.push(targetData.tag_1)
			}
		}
		if (tag_2.length > 1) {
			for (let i = 0; i < tag_2.length; i++) {
				tagData.push(tag_2[i])
			}
		} else {
			if (targetData.tag_2 != "") {
				tagData.push(targetData.tag_2)
			}
		}
		if (tag_3.length > 1) {
			for (let i = 0; i < tag_3.length; i++) {
				tagData.push(tag_3[i])
			}
		} else {
			if (targetData.tag_3 != "") {
				tagData.push(targetData.tag_3)
			}
		}
		if (tag_4.length > 1) {
			for (let i = 0; i < tag_4.length; i++) {
				tagData.push(tag_4[i])
			}
		} else {
			if (targetData.tag_4 != "") {
				tagData.push(targetData.tag_4)
			}
		}
		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(ingredientAllData);
		$(".recipe__buy").attr("href",ctaUrl);
		$(".recipe__buy").click(function(e){
			e.preventDefault();
			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 buyCtaAni(){
		let buyCtaTl = gsap.timeline({ repeat: -1, repeatDelay: 3, delay: 0});
		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 getIngredientData(){
		let ingredientItem = []
		Object.entries(targetData).forEach(([key,value])=>{
			
			if (key.includes("ingredient") && value != "") {
				ingredientItem.push(value);
			}
		})
		// console.log(ingredientItem)

		ingredientAllData = ingredientItem.map(function(item){
			let itemArr = item.split(";")
			return {
				ingredient_name: itemArr[0],
				ingredient_unit: itemArr[1],
				salepage_url: itemArr[2],
				salepage_id: itemArr[3],
				sku_id: itemArr[4],
				qty: itemArr[5],
			}
		})
	}


	function getOrderURL(_data) {

		var _ingredientData = _data;
		var resuleData = [];

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

		console.log(resuleData);

		var _utm = "&utm_campaign=ordinary&utm_medium=ordinarybuy&utm_source=web";
		
		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();
		}})
	}

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

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

var recipePage_ordinary = new recipePage_ordinary();