InnovationLab/public/js/searchPage.js

searchPage = 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 currentTarget = "26"; // 目前的素人
	let scaleNum = 1;
	//private methods
	function init() {
		console.log('searchPage is loaded.');

		// safariHacks();
		getOrdinaryData()
	}

	function resizePage() {
		let introMainH = 667;
		// let headerH = $(".header").height();
		let contentH = $(window).height();
		if (contentH < introMainH) {
			scaleNum = contentH / introMainH;
			$(".search .search__kv__slides").css("transform", "scale(" + scaleNum + ")");
			$(".search .search__kv__dishes").css("transform", "scale(" + scaleNum + ")");
			console.log(scaleNum)
		}else {
			scaleNum = 1;
		}
	}

	function safariHacks() {
		let windowsVH = window.innerHeight / 100;
		document.querySelector('.search__kv').style.setProperty('--vh', windowsVH + 'px');
		window.addEventListener('resize', function () {
			document.querySelector('.search__kv').style.setProperty('--vh', windowsVH + 'px');
		});
	}

	function getOrdinaryData(){
		fetch(ordinaryUrl_left)
			.then(res => res.json())
			.then(data => {
				ordinaryData_left = data.map(item => (
					{
						index: item.index,
						id: item.id,
						name: item.name,
						picture: item.picture,
						text: item.text
					}
				))
				.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.map(item => (
							{
								index: item.index,
								id: item.id,
								name: item.name,
								picture: item.picture,
								text: item.text
							}
						))
						.sort((a, b) => {
							return a.index - b.index
						});
						ordinaryData = ordinaryData.concat(ordinaryData_right)
						console.log(ordinaryData)
					})
					.then(()=>{
						createOrdinaryHtml();
						
					})
					.then(() => {

						setTimeout(() => {
							initHandler();
						}, 400);

					})
			});
	}

	async function initHandler(){
		// const resizePageBuild = await resizePage();
		const inToCenterBuild = await inToCenter();
		const detectKolBuild = await detectKol();
		const detectAniBuild = await detectAni();
		const bgParallaxBuild = await bgParallax();
		const intoPageBuild = await intoPage();
	}

	function intoPage() {
		// console.log(".intoPage")
		gsap.to(".search", { duration: 0.3, autoAlpha: 1 })
	}

	function createOrdinaryHtml(){
		// 素人頭像html
		for (let i = 0; i < ordinaryData.length;i++) {
			$(".search__kv__slides").append(`
				<div class="search__kv__slide" data-ordinary="${ordinaryData[i].id}">
					<div class="search__kv__light"></div>
					<a class="search__kv__ordinary" href="./recipe_ordinary.html?ordinary=${ordinaryData[i].id}">
						<img src="./images/searchPage/kv-ordinary/${ordinaryData[i].picture}" alt="">
					</a>
					<a href="./recipe_ordinary.html?ordinary=${ordinaryData[i].id}" class="search__kv__basket">
						<img src="./images/searchPage/kv-basket.png" alt="">
					</a>
				</div>
			`);

			// 菜色名稱html
			$(".search__kv__dishes").append(`
				<a href="./recipe_ordinary.html?ordinary=${ordinaryData[i].id}" class="search__kv__dish" data-dish="${ordinaryData[i].id}"><span>民間料理救星 - ${ordinaryData[i].name}</span>${ordinaryData[i].text}</a>
			`);
		}
		
	}

	// 找中間素人
	function inToCenter() {
		let target = $(".search__kv__slide[data-ordinary='" + currentTarget+"']")

		let targetW = target.width();
		let targetLeft = target.position().left
		let windowW = $(window).width();
		let space;
		if (targetW < windowW) {
			space = (windowW - targetW) / 2;
			// console.log(space)
			$(".search__kv").scrollLeft(targetLeft - space);
			// console.log(targetLeft - space)
			// console.log("targetLeft: " + targetLeft)
		} else {
			space = (targetW - windowW) / 2;
			// console.log(space)
			$(".search__kv").scrollLeft(targetLeft + space);
			// console.log(targetLeft + space)
		}
	}

	// 偵測中間KOL
	function detectKol() {
		$(".search__kv").scroll(function () {
			let containerLeft = $(".search__kv").scrollLeft();
			let containerCenterStart = containerLeft + ($(window).width() / 2);
			// console.log("containerLeft: " + containerLeft)
			$(".search__kv__slide").each(function () {
				let dataOrdinary = $(this).data('ordinary');
				let target = $(this);
				let targetW = target.width();
				let targetLeft = target.position().left
				// console.log(dataOrdinary + "-targetLeft: " + targetLeft);

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

			});

		});
	}

	// 定位動畫
	function detectAni() {

		let aniKol = "";
		let dishTl = gsap.timeline();

		$(".search__kv").on('scroll', function () {
			// console.log("aniKol: "+aniKol)
			// console.log("currentTarget: " + currentTarget)
			if (aniKol != currentTarget) {
				// 上帝光動畫
				let $light = ".search__kv__slide[data-ordinary='" + currentTarget + "'] .search__kv__light"
				let $elseLight = $(".search__kv__slide").not(".search__kv__slide[data-ordinary='" + currentTarget + "']").find(".search__kv__light")
				gsap.to(".search__kv__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 = ".search__kv__dish"
				let $dish = ".search__kv__dish[data-dish='" + currentTarget + "']"
				let $elseDish = $(".search__kv__dish").not(".search__kv__dish[data-dish='" + currentTarget + "']")
				dishTl = gsap.timeline();
				dishTl.to($allDish, { duration: 0, autoAlpha: 0, scale: 1, ease: "none" })
				dishTl.to($dish, { duration: 0.5, autoAlpha: 1, scale: 1, ease: "none" });
				dishTl.to($elseDish, { duration: 0, autoAlpha: 0, scale: 1, ease: "none" })
				// dishTl.fromTo($dish, { filter: "brightness(1)" }, { duration: 0.6, filter: "brightness(1.3)", ease: "none", yoyo: true, repeat: -1, delay: 0.5 });

				aniKol = currentTarget;
				console.log("aniKol: " + aniKol)
			}
			// console.log('scrollEnd')
		});
	}

	// 背景視差
	function bgParallax() {
		let defautCenter = 49.1
		let offset = (defautCenter - (defautCenter * scaleNum)) * 0.1
		let currentCenter = defautCenter + offset
		let containerLeft = $(".search__kv").scrollLeft();
		let slidesWCenter = ($(".search__kv__slides").width() / 2)
		let scaleOffset = containerLeft - slidesWCenter
		$(".search__kv__bg__img").css('background-position', currentCenter + '% top');
		// console.log(defautCenter)
		// console.log(scaleNum)
		
		// console.log(containerLeft)
		// console.log(slidesWCenter)
		// console.log(containerLeft - slidesWCenter)
		setTimeout(() => {
			
			$(".search__kv").on("scroll",function () {
				containerLeft = $(".search__kv").scrollLeft();
				slidesWCenter = ($(".search__kv__slides").width() / 2) + scaleOffset
				let moveLeft = (currentCenter + ((containerLeft - slidesWCenter) / 200))
				// moveLeft = moveLeft.toFixed(0)
				// console.log(currentCenter)
				// console.log(containerLeft)
				// console.log(slidesWCenter)
				// console.log(containerLeft - slidesWCenter)
				// console.log(moveLeft)
				
				$(".search__kv__bg__img").css('background-position', moveLeft + '% top');
				// console.log(".width scroll")
			});
		}, 500);

	}

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

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

var searchPage = new searchPage();