From e58190fde82ddab86d997557a5f7c527603f6709 Mon Sep 17 00:00:00 2001 From: SeeChen Date: Fri, 15 Nov 2024 16:12:41 +0800 Subject: [PATCH] Update Travel Pages --- CascadingStyleSheets/Travel/travel.css | 175 ++++++++-- Data/Travel/TraveledList.json | 34 +- JavaScript/Index/index.js | 6 +- JavaScript/Travel/travel.js | 443 +++++++++++++++++-------- spa.html | 22 +- 5 files changed, 512 insertions(+), 168 deletions(-) diff --git a/CascadingStyleSheets/Travel/travel.css b/CascadingStyleSheets/Travel/travel.css index 0bb32b6..f491d05 100644 --- a/CascadingStyleSheets/Travel/travel.css +++ b/CascadingStyleSheets/Travel/travel.css @@ -19,16 +19,22 @@ --travel-ContentExpand-width: 1em; --travel-ContentExpand-bottom: calc(2.2 * var(--travel-Traveled-List-font-size)); - --travel-ContentExpand-Expanded-btn-right: 0; - --travel-ContentExpand-Expanded-btn-bottom: 0.25em; - --travel-ContentExpand-Expanded-TraveledList-top: 0.5em; - --travel-btn-MapsBack: 5em; --travel-before-scale-top: 0; --travel-before-scale-left: 0; --travel-before-scale-width: 50vw; --travel-before-scale-height: 50vh; + + --travel-Country-Story-height: 50vh; + + --travel-Story-Country-Name-font-size: var(--font-size-5em); + --travel-Story-Country-Name-top: 0.25em; + + --travel-Story-Country-Desc-margin: 1em; + + --travel-Story-Country-img-left: auto; + --travel-Story-Country-img-right: 0; } @media screen and (max-width: 750px) { @@ -52,11 +58,32 @@ --travel-ContentExpand-width: 1em; --travel-ContentExpand-bottom: calc(2.1 * var(--travel-Traveled-List-font-size)); - --travel-ContentExpand-Expanded-btn-right: calc(100vw / 3); - --travel-ContentExpand-Expanded-btn-bottom: 0.5em; - --travel-ContentExpand-Expanded-TraveledList-top: 0.01em; - --travel-btn-MapsBack: 6em; + + --travel-Country-Story-height: 30vh; + + --travel-Story-Country-Name-font-size: var(--font-size-3em); + --travel-Story-Country-Name-top: 0.4em; + + --travel-Story-Country-Desc-margin: 0.5em; + + --travel-Story-Country-img-left: 0; + --travel-Story-Country-img-right: 0; + } +} + +@keyframes travel_entrance_1 { + + from { + + transform: translateY(calc(1.5 * var(--home-my-name-margin))); + opacity: 0; + } + + to { + + transform: rotateY(0); + opacity: 1; } } @@ -257,16 +284,6 @@ #box_TravelPage #travel_ContentExpand.contentExpand { transform: rotateX(180deg) scaleX(3); - right: var(--travel-ContentExpand-Expanded-btn-right); - bottom: var(--travel-ContentExpand-Expanded-btn-bottom); - - width: calc(100vw / 3); - - box-sizing: border-box; - - border-top: 0.15em solid #888; - border-bottom: 0.15em solid #888; - border-radius: 0.1em; } div:has(> #travel_ContentExpand) { @@ -274,11 +291,11 @@ div:has(> #travel_ContentExpand) { background: #FFFFFF00; width: 100vw; - height: calc(100vh - var(--font-size-3em)); + height: 99vh; position: fixed; - top: calc(100vh - 1.1 * var(--font-size-3em)); + top: 101vh; transition: all 1s; } @@ -286,12 +303,111 @@ div:has(> #travel_ContentExpand) { div:has(> #travel_ContentExpand.contentExpand) { background: #FFFFFF80; - top: var(--font-size-3em); + top: 0; } -div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList { +div:has(> #travel_ContentExpand) #travel_TraveledStory { + + height: 90vh; + padding-top: var(--font-size-5em); + padding-bottom: var(--font-size-1em); + + box-sizing: border-box; + + overflow: hidden scroll; + + transition: all 1s; +} - top: var(--travel-ContentExpand-Expanded-TraveledList-top); +div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar { + display: none; +} + +#traveled_World { + opacity: 1; + + display: initial; + transition: 0.75s; +} + +#traveled_World.traveled_WorldHide { + opacity: 0; + transition: 0.5s; +} + +#travel_TraveledStory .travel_Country_Story { + + position: relative; + + height: var(--travel-Country-Story-height); + width: 95vw; + + margin: auto; + margin-bottom: var(--font-size-1em); + + border: 0.15em solid #CCC; + + animation: travel_entrance_1 1s linear; + animation-timeline: view(95% 0); + + overflow: hidden; + + cursor: pointer; +} + +#travel_TraveledStory .travel_Country_Story .travel_Story_Country_Name { + + position: absolute; + + text-shadow: 1px 1px 2px var(--bg-color); + + font-family: var(--fontface-title); + font-size: var(--travel-Story-Country-Name-font-size); + color: var(--font-color-title); + + top: var(--travel-Story-Country-Name-top); + left: var(--travel-Story-Country-Name-top); +} + +#travel_TraveledStory .travel_Country_Story .travel_Story_Country_Desc { + + position: absolute; + + width: 80%; + text-align: right; + + text-shadow: 1px 1px 2px var(--bg-color); + + color: var(--font-color-title); + font-size: var(--font-size-normal); + font-family: var(--fontface-art-2); + + right: var(--travel-Story-Country-Desc-margin); + bottom: var(--travel-Story-Country-Desc-margin); +} + +#travel_TraveledStory .travel_Country_Story img { + + position: absolute; + + width: 100%; + height: 100%; + + object-fit: cover; + object-position: center; + + filter: grayscale(0) blur(0); + + margin: auto; + + transition: filter 0.5s, transform 1s; +} + +#travel_TraveledStory .travel_Country_Story:hover img { + + filter: grayscale(1) blur(0.15em); + + transform: scale(1.1); } #box_TravelPage #travel_TraveledList { @@ -300,7 +416,7 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList { box-sizing: border-box; - position: absolute; + position: fixed; display: flex; font-size: var(--travel-Traveled-List-font-size); @@ -311,7 +427,7 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList { padding: 0 0.25em; overflow-x: scroll; - top: var(--travel-ContentExpand-Expanded-TraveledList-top); + bottom: 0; left: 0; right: 0; @@ -339,7 +455,7 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList { cursor: pointer; - transition: 0.25s; + transition: all 1s; } #box_TravelPage #travel_TraveledList span.span_LoadingToShow { @@ -386,12 +502,16 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList { position: absolute; left: var(--travel-Traveled-List-Selected-Span-left);; - transition: left 1s; + transition: left 1s, background 1s, color 1s; } #box_TravelPage #travel_TraveledList span.areaSelected { left: 0 !important; + + color: var(--bg-color); + background: var(--font-color-normal); + } #box_TravelPage #travel_TraveledList_title { @@ -429,6 +549,7 @@ div:has(> #travel_ContentExpand.contentExpand) #travel_TraveledList { transition: left 1s; cursor: pointer; + z-index: 15; } #travel_btn_MapsBack::before { diff --git a/Data/Travel/TraveledList.json b/Data/Travel/TraveledList.json index d3da370..091c1b4 100644 --- a/Data/Travel/TraveledList.json +++ b/Data/Travel/TraveledList.json @@ -1,6 +1,38 @@ { "CN": { - "BeiJing": {}, + "BeiJing": { + "img": [{ + "src": "", + "alt": "", + "city": "_city0_", + "labels": ["_test0_", "_test1_", "_test2_", "_test3_"] + }, { + "src": "", + "alt": "", + "city": "_city1_", + "labels": ["_test0_", "_test2_", "_test4_", "_test6_"] + }, { + "src": "", + "alt": "", + "city": "_city2_", + "labels": ["_test1_", "_test3_", "_test5_", "_test7_"] + }, { + "src": "", + "alt": "", + "city": "_city0_", + "labels": ["_test1_", "_test4_", "_test7_", "_test9_"] + }, { + "src": "", + "alt": "", + "city": "_city1_", + "labels": ["_test2_", "_test1_", "_test4_", "_test6_"] + }, { + "src": "", + "alt": "", + "city": "_city2_", + "labels": ["_test2_", "_test4_", "_test6_", "_test8_"] + }] + }, "ChongQing": {}, "FuJian": {}, "GuangDong": {}, diff --git a/JavaScript/Index/index.js b/JavaScript/Index/index.js index 77ee8a9..0c6a6a6 100644 --- a/JavaScript/Index/index.js +++ b/JavaScript/Index/index.js @@ -39,7 +39,9 @@ window.webpages = { window.myData = { travel: { - TravelList: {} + TravelList: {}, + LabelsMap: {}, + CityName: {} } } @@ -66,7 +68,7 @@ window.onload = async function() { await SeeChen_TravelPage.init(); SeeChen_TravelPage.registerEvents(); - window.webpages.loadingPage.updateProgress(50); + window.webpages.loadingPage.updateProgress(99); document.title = window.globalValues.translateData.idx[window.globalValues.language]._title_; diff --git a/JavaScript/Travel/travel.js b/JavaScript/Travel/travel.js index a07ae31..a712e19 100644 --- a/JavaScript/Travel/travel.js +++ b/JavaScript/Travel/travel.js @@ -6,14 +6,6 @@ export const SeeChen_TravelPage = { window.myData.travel.TravelList = await window.myTools.getJson("/Data/Travel/TraveledList.json"); await SeeChen_TravelPage.bindEvent(); - document.querySelector("#travel_TraveledList").addEventListener("scroll", (e) => { - window.eventBus.emit("traveledScroll", { e }); - }); - - document.querySelector("#travel_btn_MapsBack").addEventListener("click", (e) => { - window.eventBus.emit("travelMapsBtnClick", { e }); - }); - document.querySelector("#travel_CountryMapsBox").classList.add("MapCountryHide"); document.querySelectorAll("#travel_CountryMapsBox object").forEach(obj => { @@ -24,11 +16,17 @@ export const SeeChen_TravelPage = { document.querySelector("#travel_ContentExpand").classList.toggle("contentExpand"); - // const t = document.querySelector("div:has(> #travel_TraveledStory)"); - document.querySelector("#box_navBar").classList.toggle("navShow"); + + if (document.querySelector("#travel_ContentExpand").classList.contains("contentExpand")) { + window.router.route("/travel?expand=true"); + } else { + window.router.route("/travel"); + } }); + + await SeeChen_TravelPage_ImgLabels.buildRelationshipMap(); }, render: async () => { @@ -86,6 +84,43 @@ export const SeeChen_TravelPage = { targetMapId }); }); + obj_TraveledList.addEventListener("mouseover", (e) => { + + let [ _, baseMapId, targetMapId ] = e.target.id.split("_"); + window.eventBus.emit("mapMouseEnter", { + e, + baseMapId: `Map_${baseMapId}`, + targetMapId + }); + }); + obj_TraveledList.addEventListener("mouseout", (e) => { + + let [ _, baseMapId, targetMapId ] = e.target.id.split("_"); + window.eventBus.emit("mapMouseLeave", { + e, + baseMapId: `Map_${baseMapId}`, + targetMapId + }); + }); + + const travelCountryStory = document.querySelectorAll(".travel_Country_Story"); + travelCountryStory.forEach(countryStory => { + countryStory.addEventListener("click", (e) => { + window.eventBus.emit("mapMouseClick", { + e, + baseMapId: "Map_World", + targetMapId: countryStory.id.split("_")[1] + }); + }) + }); + + document.querySelector("#travel_TraveledList").addEventListener("scroll", (e) => { + window.eventBus.emit("traveledBottomScroll", { e }); + }); + + document.querySelector("#travel_btn_MapsBack").addEventListener("click", (e) => { + window.eventBus.emit("travelMapsBackBtnClick", { e }); + }); }, registerEvents: () => { @@ -96,9 +131,9 @@ export const SeeChen_TravelPage = { mapMouseEnter: SeeChen_TravelPage_MapsAction.mouseEnter, mapMouseLeave: SeeChen_TravelPage_MapsAction.mouseLeave, - travelMapsBtnClick: travel_MapsBtnClick, + travelMapsBackBtnClick: SeeChen_TravelPage_Click.mapBackBtn, - traveledScroll: traveled_Scroll + traveledBottomScroll: SeeChen_TravelPage_Traveled.bottomListScroll } Object.entries(travel_EventHandler).forEach(([event, handler]) => { @@ -156,180 +191,312 @@ const SeeChen_TravelPage_MapsAction = { const baseMap = document.querySelector(`#${baseMapId}`); const targetMap = baseMap.contentDocument.querySelector(`#${targetMapId}`); - await travel_UpdateTraveledList(baseMapId, targetMapId); + await SeeChen_TravelPage_Traveled.bottomListUpdate(baseMapId, targetMapId); if (baseMapId === "Map_World") { - travel_MapsClick_World(baseMap, targetMap); - } else {} - } -} + await window.router.route(`/travel/${targetMapId}`); + SeeChen_TravelPage_MapsAction.mapAnimation(baseMap, targetMap); + document.querySelector("#traveled_World").classList.add("traveled_WorldHide"); + await new Promise(r => setTimeout(r, 500)); + document.querySelector("#traveled_World").style.display = "none"; + } else { -const SeeChen_TravelPage_TraveledList = { + } + }, - updateList: async () => { + mapAnimation: async ( + baseMap, + targetMap + ) => { - } -} + sessionStorage.setItem("WorldMapsScrollLeft", document.querySelector("#travel_MapsBox").scrollLeft); -const traveled_Scroll = ( - scrollEvent -) => { + baseMap.classList.add("WorldMapsHide"); + document.querySelector(`#travel_CountryMapsBox`).classList.remove("MapCountryHide"); + document.querySelector(`#Map_${targetMap.id}`).classList.add("MapIsShow"); - const { e } = scrollEvent; - - const traveled_TraveledList = document.querySelector("#travel_TraveledList"); + let base_Rect = baseMap.getBoundingClientRect(); + let current_Rect = targetMap.getBoundingClientRect(); - traveled_TraveledList.classList.remove("at_left", "at_right"); - if (e.target.scrollLeft === 0) { - traveled_TraveledList.classList.add("at_left"); - } else if (traveled_TraveledList.scrollWidth <= 1.05 * (traveled_TraveledList.scrollLeft + traveled_TraveledList.clientWidth)) { + var mapPosition = { + "top": 0, + "left": 0, + "width": 0, + "height": 0 + } - traveled_TraveledList.classList.add("at_right"); + mapPosition["top"] = current_Rect.top + base_Rect.top; + mapPosition["left"] = current_Rect.left + base_Rect.left; + mapPosition["width"] = current_Rect.width; + mapPosition["height"] = current_Rect.height; + + document.documentElement.style.setProperty("--travel-before-scale-height", `${mapPosition["height"]}px`); + document.documentElement.style.setProperty("--travel-before-scale-width", `${mapPosition["width"]}px`); + document.documentElement.style.setProperty("--travel-before-scale-top", `${mapPosition["top"]}px`); + document.documentElement.style.setProperty("--travel-before-scale-left", `${mapPosition["left"]}px`); + + setTimeout(() => { + + document.querySelector(`#travel_CountryMapsBox`).classList.add("withAnimation"); + document.querySelector(`#travel_CountryMapsBox`).classList.add("afterScale"); + setTimeout(() => { + + baseMap.classList.add("WorldMapsHideDisplay"); + document.querySelector("#travel_btn_MapsBack").classList.remove("btn_Hide"); + }, 500); + }, 500); } } -const travel_MapsClick_World = ( - obj, - element -) => { +const SeeChen_TravelPage_Traveled = { - sessionStorage.setItem("WorldMapsScrollLeft", document.querySelector("#travel_MapsBox").scrollLeft); - - obj.classList.add("WorldMapsHide"); - document.querySelector(`#travel_CountryMapsBox`).classList.remove("MapCountryHide"); - document.querySelector(`#Map_${element.id}`).classList.add("MapIsShow"); - - let current_rect = element.getBoundingClientRect(); - let rect_2 = obj.getBoundingClientRect(); - - var worldPosition = { - 'top': 0, - 'left': 0, - 'width': 0, - 'height': 0 - } + bottomListScroll: ( + scrollEvent + ) => { - worldPosition['width'] = current_rect.width; - worldPosition['height'] = current_rect.height; - worldPosition['top'] = current_rect.top + rect_2.top; - worldPosition['left'] = current_rect.left + rect_2.left; + const { e } = scrollEvent; + const traveled_BottomTraveledList = document.querySelector("#travel_TraveledList"); - document.documentElement.style.setProperty("--travel-before-scale-height", `${worldPosition["height"]}px`); - document.documentElement.style.setProperty("--travel-before-scale-width", `${worldPosition["width"]}px`); - document.documentElement.style.setProperty("--travel-before-scale-top", `${worldPosition["top"]}px`); - document.documentElement.style.setProperty("--travel-before-scale-left", `${worldPosition["left"]}px`); + traveled_BottomTraveledList.classList.remove( + "at_left", + "at_right" + ); - setTimeout(() => { + if (e.target.scrollLeft === 0) { + traveled_BottomTraveledList.classList.add("at_left"); + } else if ( + traveled_BottomTraveledList.scrollWidth <= 1.05 * ( + traveled_BottomTraveledList.scrollLeft + traveled_BottomTraveledList.clientWidth + ) + ) { - document.querySelector(`#travel_CountryMapsBox`).classList.add("withAnimation"); - document.querySelector(`#travel_CountryMapsBox`).classList.add("afterScale"); - setTimeout(() => { - - obj.classList.add("WorldMapsHideDisplay"); - document.querySelector("#travel_btn_MapsBack").classList.remove("btn_Hide"); - }, 500); - }, 500); -} + traveled_BottomTraveledList.classList.add("at_right"); + } + }, -const travel_UpdateTraveledList = async ( - baseMapId, - eleID -) => { + bottomListUpdate: async ( + baseMapId, + targetId + ) => { - if (!Object.keys(window.myData.travel.TravelList).includes(eleID) && eleID !== "World") { + let baseID = baseMapId.split("_")[1]; - let traveledList = document.querySelector("#travel_TraveledList"); - let selectedArea = document.querySelector(`#span_${baseMapId.split("_")[1]}_${eleID}`); + if (!Object.keys(window.myData.travel.TravelList).includes(targetId) && targetId !== "World") { - let TraveledList_rect = traveledList.getBoundingClientRect(); - let selectedArea_rect = selectedArea.getBoundingClientRect(); + let traveledList = document.querySelector("#travel_TraveledList"); + let selectedArea = document.querySelector(`#span_${baseID}_${targetId}`); - document.documentElement.style.setProperty( - "--travel-Traveled-List-Selected-Span-left", - `${selectedArea_rect.left - TraveledList_rect.left + traveledList.scrollLeft - 2}px` - ); + if (selectedArea.classList.contains("areaSelected")) { - document.querySelectorAll(`#travel_TraveledList span:not(#span_${baseMapId.split("_")[1]}_${eleID}`).forEach( element => { - element.style.opacity = "0"; - }); + await window.router.route(`/travel/${baseID}`); - setTimeout( async () => { - selectedArea.classList.add("areaSelectedwithAniamtion"); - await new Promise(r => setTimeout(r, 50)); - selectedArea.classList.add("areaSelected"); - traveledList.scrollTo(0, 0); - }, 500); + setTimeout( async () => { - return; - } + selectedArea.classList.remove("areaSelected"); - let TraveledListName = eleID === "World" - ? Object.keys(window.myData.travel.TravelList) - : Object.keys(window.myData.travel.TravelList[eleID]); + await new Promise(r => setTimeout(r, 1250)); - const temp_Span = document.querySelector("#travel_TraveledList").querySelectorAll("span"); - temp_Span.forEach( element => { - element.classList.add("spanHide"); - }); + selectedArea.classList.remove("areaSelectedwithAniamtion"); + + document.querySelectorAll(`#travel_TraveledList span:not(#span_${baseID}_${targetId}`).forEach( element => { + element.style.opacity = "1"; + element.style.pointerEvents = "auto"; + }); + }, 500); + + return; + } - setTimeout( async () => { + await window.router.route(`/travel/${baseID}/${targetId}`); + let TraveledList_Rect = traveledList.getBoundingClientRect(); + let SelectedArea_Rect = selectedArea.getBoundingClientRect(); + + document.documentElement.style.setProperty( + "--travel-Traveled-List-Selected-Span-left", + `${SelectedArea_Rect.left - TraveledList_Rect.left + traveledList.scrollLeft - 2}px` + ); + + document.querySelectorAll(`#travel_TraveledList span:not(#span_${baseID}_${targetId}`).forEach( element => { + element.style.opacity = "0"; + element.style.pointerEvents = "none"; + }); + + setTimeout( async () => { + selectedArea.classList.add("areaSelectedwithAniamtion"); + await new Promise(r => setTimeout(r, 50)); + selectedArea.classList.add("areaSelected"); + traveledList.scrollTo(0, 0); + }, 500); + + return; + } + + let TraveledListName = targetId === "World" + ? Object.keys(window.myData.travel.TravelList) + : Object.keys(window.myData.travel.TravelList[targetId]); + + const temp_Span = document.querySelector("#travel_TraveledList").querySelectorAll("span"); temp_Span.forEach( element => { - document.querySelector("#travel_TraveledList").removeChild(element); + element.classList.add("spanHide"); }); - + setTimeout( async () => { + + temp_Span.forEach( element => { + document.querySelector("#travel_TraveledList").removeChild(element); + }); + + setTimeout( async () => { + + for (var i = 0; i < TraveledListName.length; i++) { + + let areaName = TraveledListName[i]; + + let a = document.createElement("span"); + a.id = `span_${targetId}_${areaName}`; + a.classList.add("span_LoadingToShow"); + a.textContent = + window.globalValues.translateData.country[window.globalValues.language][areaName] + || window.globalValues.translateData[`country${targetId}`][[window.globalValues.language]][areaName] + + document.querySelector("#travel_TraveledList").appendChild(a); + + await new Promise(r => setTimeout(r, 50)); + + setTimeout(() => { + a.classList.remove("span_LoadingToShow"); + }, 1500); + } + + }, 250); + }, 250); + }, +} - for (var i = 0; i < TraveledListName.length; i++) { +const SeeChen_TravelPage_ImgLabels = { - let areaName = TraveledListName[i]; + buildRelationshipMap: async () => { - let a = document.createElement("span"); - a.id = `span_${eleID}_${areaName}`; - a.classList.add("span_LoadingToShow"); - a.textContent = - window.globalValues.translateData.country[window.globalValues.language][areaName] - || window.globalValues.translateData[`country${eleID}`][[window.globalValues.language]][areaName] - - document.querySelector("#travel_TraveledList").appendChild(a); + const labelMap = {} + Object.entries(window.myData.travel.TravelList).forEach(([countryId, countryData]) => { - await new Promise(r => setTimeout(r, 50)); + labelMap[countryId] = new Set(); + window.myData.travel.CityName[countryId] = {}; + Object.entries(countryData).forEach(([provinceId, { img }]) => { - setTimeout(() => { - a.classList.remove("span_LoadingToShow"); - }, 1500); - } + window.myData.travel.CityName[countryId][provinceId] = []; + + labelMap[provinceId] = new Set(); + + labelMap[countryId].add(provinceId); + labelMap[provinceId].add(countryId); + img?.forEach(({ city, labels }) => { + + !window.myData.travel.CityName[countryId][provinceId].includes(city) + ? !window.myData.travel.CityName[countryId][provinceId].push(city) + : ""; + + if (!labelMap[city]) labelMap[city] = new Set(); + labelMap[countryId].add(city); + labelMap[provinceId].add(city); + labelMap[city].add(countryId).add(provinceId); + for (let label of labels) { + if (!labelMap[label]) labelMap[label] = new Set(); + labelMap[countryId].add(label); + labelMap[provinceId].add(label); + labelMap[city].add(label); + labelMap[label].add(countryId).add(provinceId).add(city); + for (let otherLabel of labels) { + label === otherLabel ? "" : labelMap[label].add(otherLabel); + } + } + }); + }); + }); + + Object.entries(labelMap).forEach(([key, values]) => { + window.myData.travel.LabelsMap[key] = Array.from(values); + }); + + console.log(window.myData.travel.LabelsMap); + console.log(window.myData.travel.CityName); + SeeChen_TravelPage_ImgLabels.filterLabel(["CN", "BeiJing", "_city0_", "_city1_", "MY"]); + }, + + filterLabel: ( + labels + ) => { + + const relatedSets = labels.map(label => { + const relatedLabel = window.myData.travel.LabelsMap[label]; + return new Set([label, ...relatedLabel]); + }); + console.log(relatedSets); + + const intersectedLabels = SeeChen_TravelPage_ImgLabels.getIntersection(relatedSets); + + console.log(intersectedLabels); + }, - }, 250); - }, 250); + getIntersection: ( + arrays + ) => { + if (arrays.length === 0 || arrays.length === 1) { + return arrays; + } + return arrays.reduce((acc, set) => acc.filter(x => set.has(x)), [...arrays[0]]); + } } -const travel_MapsBtnClick = async ( - clickEvent -) => { +const SeeChen_TravelPage_Click = { - const { e } = clickEvent; + mapBackBtn: async ( + clickEvent + ) => { - await travel_UpdateTraveledList("World", "World"); + const { e } = clickEvent; - document.querySelector(`#travel_CountryMapsBox`).classList.remove("afterScale"); - document.querySelector("#Map_World").classList.remove("WorldMapsHideDisplay"); - document.querySelector("#travel_MapsBox").scrollLeft = sessionStorage.getItem("WorldMapsScrollLeft"); - document.querySelector("#travel_btn_MapsBack").classList.add("btn_Hide"); + const selectedArea = document.querySelector(".areaSelected"); + if (selectedArea) { - setTimeout(() => { + let [ _, baseMapId, targetMapId ] = selectedArea.id.split("_"); + window.eventBus.emit("mapMouseClick", { + e, + baseMapId: `Map_${baseMapId}`, + targetMapId + }); + + return; + } + + document.querySelector("#traveled_World").style.display = "initial"; + await new Promise(r => setTimeout(r, 50)); + document.querySelector("#traveled_World").classList.remove("traveled_WorldHide"); + + await SeeChen_TravelPage_Traveled.bottomListUpdate("World", "World"); + + await window.router.route(`/travel`); + + document.querySelector(`#travel_CountryMapsBox`).classList.remove("afterScale"); + document.querySelector("#Map_World").classList.remove("WorldMapsHideDisplay"); + document.querySelector("#travel_MapsBox").scrollLeft = sessionStorage.getItem("WorldMapsScrollLeft"); + document.querySelector("#travel_btn_MapsBack").classList.add("btn_Hide"); - document.querySelector("#Map_World").classList.remove("WorldMapsHide"); - setTimeout(() => { - document.querySelector(`#travel_CountryMapsBox`).classList.remove("withAnimation"); - document.querySelector(`#travel_CountryMapsBox`).classList.add("MapCountryHide"); - document.querySelector(`.MapIsShow`).classList.remove("MapIsShow"); - }, 500); - }, 1000); + document.querySelector("#Map_World").classList.remove("WorldMapsHide"); + + setTimeout(() => { + document.querySelector(`#travel_CountryMapsBox`).classList.remove("withAnimation"); + document.querySelector(`#travel_CountryMapsBox`).classList.add("MapCountryHide"); + + document.querySelector(`.MapIsShow`).classList.remove("MapIsShow"); + }, 500); + }, 1000); + } } const travel_ChangeAreaName = ( @@ -337,6 +504,8 @@ const travel_ChangeAreaName = ( areaID ) => { + if (baseID === "Map_TraveledList") return; + baseID = baseID.split("_")[1].toUpperCase(); let areaName = window.globalValues.translateData.country[window.globalValues.language][areaID] || diff --git a/spa.html b/spa.html index edcdb11..d75c87a 100644 --- a/spa.html +++ b/spa.html @@ -92,7 +92,27 @@ MALAYSIA SINGAPORE -
+
+
+
+ +

CHINA

+

DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.

+
+
+ +

CHINA

+

DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.

+
+
+ +

CHINA

+

DescDescDescDescDesc DescDesc DescDescDesc DescDesc DescDesc.

+
+
+ +
+