InnovationLab/public/js/indexPage.js

import getParams from './getParams.js';

index = function () {
	//private menbers
	let kolName; // 網址參數的kol
	let currentKol; //目前sroll到的kol
	let intro__tipTl;
	const kolMan = ['Yang', 'Hao', 'Drangadrang', 'Cookingdairy', 'Ku', 'Betty', 'Ralf', 'Chefchouchou', 'Albee', 'commute_Chang', 'commute_Li', 'commute_He','ordinary']
	const audio = document.querySelector('audio');

	//private methods
	function init() {
		console.log('index is loaded.');
		// 取得是哪位Kol
		if (getParams('kol') != null && kolMan.includes(getParams('kol'))) {
			kolName = getParams('kol')
		} else {
			kolName = 'ordinary' //預設kol
		}
		console.log("參數kol: "+kolName)

		if (getParams('share_id') != null || getParams('shareback') != null) {
			introLeavePage();
			$("#promoModalCenter").modal('show');
			console.log("share_id: "+getParams('share_id'))
			console.log("shareback: "+getParams('shareback'))
		}

		if (getParams('backIndexPage') != null) {
			introLeavePage();
			console.log("backIndexPage: "+getParams('backIndexPage'))
		}
		
		// 來自 BF Cache，若是則重新刷新頁面
		window.onpageshow = function(event) {
			if (event.persisted) {
				window.location.reload() 
				console.log("reload")
			}
		};

		// 暫時
		// introLeavePage();	

		createHtml();

		handler();
	}

	async function handler(){
		const intoPageHandler = await intoPage();
		const resizePageHandler = await resizePage();
		const aniIntro00Handler = await aniIntro00();
	}

	function resizePage(){
		let introMainH = 800;
		// let headerH = $(".header").height();
		let contentH = $(window).height();
		if (contentH < introMainH) {
			let scaleNum = contentH / introMainH;
			$(".indexWrapper .intro__container").css("transform", "scale(" + scaleNum+")");
			$(".intro__overlay").css("transform","scale(2)");
			// console.log(scaleNum)
		}
	}

	function aniIntro00(){
		gsap.set(".hamburger",{autoAlpha:0});
		gsap.set(".logo", { autoAlpha: 0 });
		// gsap.fromTo(".intro__title", { scale: 0.7 }, { duration: 1.5, autoAlpha: 1, scale: 1, ease: "elastic.out(1, 0.5)" });
		gsap.to(".intro__tip", { duration: 0.5, autoAlpha: 1, ease: "none", delay: 0.3});
		intro__tipTl = gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true, delay: 1.5 });
		intro__tipTl.to(".intro__tip", { duration: 0.5, autoAlpha: 0.5, ease: "none" })
		intro__tipTl.to(".intro__tip", { duration: 0.5, autoAlpha: 1, ease: "none"})
		setTimeout(() => {
			aniIntro01();
		}, 1000);
	}

	function aniIntro01(){
		let isAniIntro01 = false;
		let isLeaveIntro = false;
		let isSkipShow = false;
		$(".intro").click(function(){
			if (!isAniIntro01) {
				$(".intro__overlay").css("z-index","0");
				$(".intro__tip").css("opacity","0").css("visibikity","hidden");
				
				$(".intro__protect").css("color","#666666");

				intro__tipTl.kill();
				// gsap.to(".intro__tip", { duration: 0, autoAlpha: 0, ease: "none", delay: 0.3 });
				gsap.to(".intro__logo", { duration: 0.5, autoAlpha: 1 });
				gsap.to(".intro__title", { duration: 0.7, autoAlpha: 0, scale: 0.7, ease: "elastic.in(1, 0.6)" });
				gsap.to(".intro__text img", { duration: 0.5, y: 0, autoAlpha: 1, ease: "none", stagger: 0.3, delay: 3 });
				gsap.to(".intro__skip", { duration: 0.7, autoAlpha: 1, delay: 5 });

				$(".intro__volume").addClass('active');
				audio.play();

				audio.addEventListener("timeupdate",function(){
					// console.log(audio.currentTime)
					// if(audio.currentTime>6.38) {
					// 	if(!isSkipShow) {
					// 		gsap.to(".intro__skip", { duration: 0.7, autoAlpha: 1 });
					// 		isSkipShow = true;
					// 	}
					// }

					if(audio.currentTime>15.34) {
						if(!isLeaveIntro) {
							introLeavePage();
							isLeaveIntro = true
						}
					}
				})

				$(".intro__skip").click(function(e){
					e.preventDefault();
					introLeavePage();
					isLeaveIntro = true
				});

				// audio.addEventListener('ended',function(){
				// 	introLeavePage();
				// },false)
				isAniIntro01 = true;

				$(".intro__volume").click(function () {
					if ($(this).hasClass('active')) {
						$(this).removeClass('active');
						audio.muted = true;
					} else {
						$(this).addClass('active');
						audio.muted = false;
					}
				});
			}
		})
	}


	function intoPage(){
		gsap.to(".indexWrapper",{duration:1,autoAlpha: 1})
	}

	function introLeavePage(){
		console.log("introLeavePage");

		$('.index').css('display', 'block');
		gsap.to(".hamburger", { duration: 0.5, autoAlpha: 1 })
		gsap.to(".logo", { duration: 0.5, autoAlpha: 1 })

		// audio.pause();
		// audio.currentTime = 0;

		gsap.to('.intro', { duration: 0.5, autoAlpha: 0, 
			onComplete: function () {
				$(".indexWrapper .bg").fadeOut();
				$('.intro').css('display', 'none');
				gsap.to(".index", { duration: 0.7, autoAlpha: 1 })
				gsap.fromTo(".index__container", { scale: 1.5 }, { duration: 0.7, autoAlpha: 1, scale: 1 })
				gsap.fromTo(".index__title", { autoAlpha: 0, scale: 0.3, }, { duration: 0.8, scale: 1, autoAlpha: 1, ease: "back.inOut(2)"})
				// 找主婦
				inToCenter()
				setTimeout(() => {
					detectKol();
					inToIndexAni();
					bgParallax();
					multipleLink();
					indexLeavePage();
				}, 800);
				setTimeout(() => {
					if(kolName != 'ordinary'){
						goToKol();
					}
					detectAni();
				}, 1500);
				
			} 
		})
		
	}


	function createHtml(){
		// intro頁 kol人物
		// $(".intro__kol img").attr("src", "https://d1xzlli46wohoc.cloudfront.net/images/indexPage/kol-" + kolName +".png")
		// $(".intro__skip").attr("href","./recipe.html?kol="+kolName)

		// index頁 kol菜名
		for(let i=0;i<kolMan.length;i++) {
			$(".index__dishes").append(`
				<a href="./recipe.html?kol=${kolMan[i]}" class="index__dish" data-dish="${kolMan[i]}">
                	<img src="https://d1xzlli46wohoc.cloudfront.net/images/indexPage/dishname-${kolMan[i]}.png" alt="">
                </a>
			`);
			if(kolMan[i] == "ordinary") {
				$(".index__dishes a[data-dish='ordinary']").removeAttr("href");
			}
		}
	}

	// async function indexHandler(){
	// 	const toKol = await inToKol();
	// 	const detectScroll = await detectKol();
	// }

	// 找主婦
	function inToCenter(){
		let target = $(".index__slide[data-kol='ordinary']")

		let kolW = target.width();
		let kolLeft = target.offset().left
		let windowW = $(window).width();
		let space;
		if (kolW < windowW) {
			space = (windowW - kolW) / 2;
			// console.log(space)
			$(".index__kv").scrollLeft(kolLeft - space);
			// console.log(kolLeft - space)
		} else {
			space = (kolW - windowW) / 2;
			// console.log(space)
			$(".index__kv").scrollLeft(kolLeft + space);
			// console.log(kolLeft + space)
		}
	}

	// index移動至指定kol
	function goToKol(){
		let target = $(".index__slide[data-kol='" + kolName + "']")

		if (kolName.includes('commute')) {
			target = $(".index__slide[data-kol='commute']")
		}
		if (kolName.includes('Hao')) {
			target = $(".index__slide[data-kol='HaoYang']")
		}
		if (kolName.includes('Yang')) {
			target = $(".index__slide[data-kol='HaoYang']")
		}
		console.log(target)
		
		let kolW = target.width();
		let kolLeft = target.position().left
		if (kolName.includes('commute') || kolName.includes('Hao') || kolName.includes('Yang')) {
			kolW = $(".index__slide-item[data-kol='" + kolName + "']").width();
			kolLeft = kolLeft + $(".index__slide-item[data-kol='" + kolName + "']").position().left
		}
		let windowW = $(window).width();
		let space;
		if (kolW < windowW) {
			space = (windowW - kolW)/2;
			// console.log(space)
			$(".index__kv").animate({
				scrollLeft: kolLeft - space
			});
			// console.log(kolLeft - space)
		}else {
			space = (kolW - windowW) / 2;
			// console.log(space)
			$(".index__kv").animate({
				scrollLeft: kolLeft + space
			})
			// console.log(kolLeft + space)
		}
	}

	// 偵測中間KOL
	function detectKol(){
		currentKol = kolName;
		$(".index__kv").scroll(function(){
			let containerLeft = $(".index__kv").scrollLeft();
			let containerCenterStart = containerLeft + ($(window).width() / 2);
			// console.log("containerLeft: " + containerLeft)
			$(".index__slide").each(function(){
				let dataKol = $(this).data('kol');
				let target = $(this);
				let targetW = target.width();
				let targetLeft = target.position().left
				// console.log(dataKol + "-targetLeft: " + targetLeft);

				if (containerCenterStart > targetLeft && containerCenterStart < (targetLeft + targetW)) {
					currentKol = dataKol;
					// console.log(currentKol + "-最小: " + targetLeft + ", 最大: " + targetLeft + targetW)
					if (currentKol == 'commute' || currentKol == 'HaoYang') {

						target.find(".index__slide-item").each(function () {
							let childDataKol = $(this).data('kol');
							let childtarget = $(this);
							let childtargetW = childtarget.width();
							let childtargetLeft = childtarget.position().left
							let childStart = targetLeft + childtargetLeft
							let childEnd = targetLeft + childtargetLeft + childtargetW
							// console.log(childDataKol+" - childStart: " + childStart + ", childEnd: " + childEnd)

							if (containerCenterStart > childStart && containerCenterStart < childEnd) {
								currentKol = childDataKol;
								// console.log(currentKol + "-最小: " + targetLeft + ", 最大: " + targetLeft + targetW)
								// console.log("currentKol: " + currentKol)
							}
						});
					}
				}	
		
			});
			
		});
	}

	function inToIndexAni(){
		let $light = ".index__slide[data-kol='ordinary'] .index__light"
		gsap.to($light, { duration: 0.5, autoAlpha: 0.9 })
		let $allDish = ".index__dish"
		let $dish = ".index__dish[data-dish='ordinary']"
		gsap.to($allDish, { duration: 0, autoAlpha: 0, y: 20 })
		gsap.to($dish, { duration: 0.3, autoAlpha: 1, y: 0 });
	}

	// 定位動畫
	function detectAni(){
		
		let aniKol = "ordinary";
		let dishTl = gsap.timeline();

		$(".index__kv").on('scroll', function () {
			// console.log("aniKol: "+aniKol)
			// console.log("currentKol: " + currentKol)
			if (aniKol != currentKol) {
				// 上帝光動畫
				let $light = ".index__slide[data-kol='" + currentKol + "'] .index__light"
				let $elseLight = $(".index__slide").not(".index__slide[data-kol='" + currentKol + "']").find(".index__light")
				if (currentKol.includes('commute') || currentKol.includes('Hao') || currentKol.includes('Yang')) {
					$light = ".index__slide-item[data-kol='" + currentKol + "'] .index__light"
					$elseLight = $(".index__slide-item").not(".index__slide-item[data-kol='" + currentKol + "']").find(".index__light")
				}
				gsap.to(".index__light", { duration: 0.2, autoAlpha: 0 })
				gsap.to($light, { duration: 0.2, autoAlpha: 0.9, delay: 0.2 })
				gsap.to($elseLight, { duration: 0.2, autoAlpha: 0, delay: 0.2 })

				if (dishTl) {
					// 菜名動畫摧毀
					dishTl.kill();
				}
				// 菜名動畫
				let $allDish = ".index__dish"
				let $dish = ".index__dish[data-dish='" + currentKol + "']"
				let $elseDish = $(".index__dish").not(".index__dish[data-dish='" + currentKol + "']")
				dishTl = gsap.timeline();
				dishTl.to($allDish, { duration: 0.3, autoAlpha: 0, y: 20 })
				dishTl.to($dish, { duration: 0.5, autoAlpha: 1, y: 0 });
				dishTl.to($elseDish, { duration: 0.3, autoAlpha: 0, y: 20 })
				dishTl.fromTo($dish, { filter: "brightness(1)"}, { duration: 0.6, filter: "brightness(1.3)", ease: "none",yoyo: true, repeat: -1, delay: 0.5 });
				
				aniKol = currentKol;
				console.log("aniKol: "+aniKol)
			}111
			// console.log('scrollEnd')
		});
	}

	// 背景視差
	function bgParallax(){
		$(".index__kv").scroll(function(){
			let containerLeft = $(".index__kv").scrollLeft();
			let slidesWCenter = $(".index__slides").width() / 2
			let moveLeft = (34 - ((containerLeft - slidesWCenter)/80))
			// let containerTop = $(".index__kv").scrollTop();
			// let slidesHCenter = $(".index__slides").height() / 2
			// let moveTop = (50 + ((containerTop - slidesHCenter) / 10))
			$(".index__bg__img").css('background-position', moveLeft + '% top');
			// console.log(".index__kv scroll")
		});
	}

	// 多人組連結
	function multipleLink(){
		$(".index__kv").scroll(function(){
			if (currentKol == 'Yang') {
				$('.index__slide[data-kol="HaoYang"').find('a')
					.attr('href','./recipe.html?kol=Yang');
			}
			else if (currentKol == 'Hao') {
				$('.index__slide[data-kol="HaoYang"').find('a')
					.attr('href', './recipe.html?kol=Hao');
			}
			else if (currentKol == 'commute_Li') {
				$('.index__slide[data-kol="commute"').find('a')
					.attr('href', './recipe.html?kol=commute_Li');
			}
			else if (currentKol == 'commute_Chang') {
				$('.index__slide[data-kol="commute"').find('a')
					.attr('href', './recipe.html?kol=commute_Chang');
			}
			else if (currentKol == 'commute_He') {
				$('.index__slide[data-kol="commute"').find('a')
					.attr('href', './recipe.html?kol=commute_He');
			}
		});

	}

	function indexLeavePage(){
		$(".index__slide a,.index__dish").click(function(e){
			e.preventDefault();
			let targetHref = $(this).attr("href");
			// console.log(targetHref)
			if(targetHref != undefined) {
				gsap.to(".index__outer",{duration: 0.7, y:'-200px',ease: "expo.out"})
				gsap.to(".indexWrapper",{duration: 0.6, autoAlpha: 0, delay: 0.1, 
					onComplete: function(){
						location.href = targetHref;
					}})
			}
		});
	}

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

	//public
	return {

	};
};

var index = new index();