From 498c069ad64a81ac2a9138bd1c529a8beac45e74 Mon Sep 17 00:00:00 2001 From: SeeChen <leeseechen@gmail.com> Date: Wed, 13 Nov 2024 22:10:15 +0800 Subject: [PATCH] Update --- CascadingStyleSheets/Travel/travel.css | 65 ++++++++++++++++++++++++++ JavaScript/Travel/travel.js | 38 +++++++++++++++ spa.html | 2 + 3 files changed, 105 insertions(+) diff --git a/CascadingStyleSheets/Travel/travel.css b/CascadingStyleSheets/Travel/travel.css index a781649..12c5615 100644 --- a/CascadingStyleSheets/Travel/travel.css +++ b/CascadingStyleSheets/Travel/travel.css @@ -12,6 +12,12 @@ --travel-CountryMapsBox-Object-width: 80vw; --travel-Traveled-List-font-size: var(--font-size-normal); + --travel-Traveled-List-Selected-Span-left: 0; + + --travel-ContentExpand-left: 0; + --travel-ContentExpand-right: 0; + --travel-ContentExpand-width: 10vw; + --travel-ContentExpand-bottom: calc(2.2 * var(--travel-Traveled-List-font-size)); --travel-btn-MapsBack: 5em; @@ -37,6 +43,11 @@ --travel-Traveled-List-font-size: var(--font-size-2em); + --travel-ContentExpand-left: auto; + --travel-ContentExpand-right: 5vw; + --travel-ContentExpand-width: auto; + --travel-ContentExpand-bottom: calc(2.1 * var(--travel-Traveled-List-font-size)); + --travel-btn-MapsBack: 6em; } } @@ -207,6 +218,47 @@ transform: translateY(0); } +#box_TravelPage #travel_ContentExpand { + + position: fixed; + display: flex; + + color: var(--font-color-normal); + font-size: var(--font-size-normal); + font-family: var(--fontface-content-3); + bottom: var(--travel-ContentExpand-bottom); + + left: var(--travel-ContentExpand-left); + right: var(--travel-ContentExpand-right); + + text-align: center; + width: var(--travel-ContentExpand-width); + + margin: auto; + + cursor: pointer; + + z-index: 12; +} + +#box_TravelPage #travel_ContentExpand span { + + padding: 0 1vw; + + transform: rotate(0); + + transition: transform 1s; +} + +#box_TravelPage #travel_ContentExpand span.contentExpand { + + padding: 0 1vw; + + transform: rotate(180deg); + + transition: transform 1s; +} + #box_TravelPage #travel_TraveledList { white-space: nowrap; @@ -294,6 +346,19 @@ background: rgba(88 ,88 ,88 ,1); } +#box_TravelPage #travel_TraveledList span.areaSelectedwithAniamtion { + + position: absolute; + + left: var(--travel-Traveled-List-Selected-Span-left);; + transition: left 1s; +} + +#box_TravelPage #travel_TraveledList span.areaSelected { + + left: 0 !important; +} + #box_TravelPage #travel_TraveledList_title { position: fixed; diff --git a/JavaScript/Travel/travel.js b/JavaScript/Travel/travel.js index 0431204..fc9f897 100644 --- a/JavaScript/Travel/travel.js +++ b/JavaScript/Travel/travel.js @@ -38,6 +38,13 @@ export const SeeChen_TravelPage = { obj.classList.add("MapIsHide"); }); + + document.querySelector("#travel_ContentExpand").addEventListener("click", (e) => { + + document.querySelectorAll("#travel_ContentExpand span").forEach(el => { + el.classList.toggle("contentExpand"); + }); + }); }, render: async () => { @@ -178,6 +185,33 @@ const travel_UpdateTraveledList = async ( eleID ) => { + if (!Object.keys(window.myData.travel.TravelList).includes(eleID) && eleID !== "World") { + + let traveledList = document.querySelector("#travel_TraveledList"); + let selectedArea = document.querySelector(`#${eleID}_span`); + + 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(#${eleID}_span)`).forEach( element => { + element.style.opacity = "0"; + }); + + selectedArea.classList.add("areaSelectedwithAniamtion"); + + setTimeout(() => { + + selectedArea.classList.add("areaSelected"); + }, 500); + + return; + } + let TraveledListName = eleID === "World" ? Object.keys(window.myData.travel.TravelList) : Object.keys(window.myData.travel.TravelList[eleID]); @@ -200,6 +234,7 @@ const travel_UpdateTraveledList = async ( let areaName = TraveledListName[i]; let a = document.createElement("span"); + a.id = `${areaName}_span`; a.classList.add("span_LoadingToShow"); a.textContent = window.globalValues.translateData.country[window.globalValues.language][areaName] @@ -225,6 +260,9 @@ const travel_MapsClick = async ( const { e, element, baseID, obj } = clickEvent; + console.log(document.querySelector("#Map_World").contentDocument.querySelector("#CN")); + console.log(element); + await travel_UpdateTraveledList(element.id); if (baseID === "Map_World") { diff --git a/spa.html b/spa.html index 03b4d1a..e9371df 100644 --- a/spa.html +++ b/spa.html @@ -83,6 +83,8 @@ </div> <p id="travel_btn_MapsBack" class="btn_Hide">back 返回</p> + + <p id="travel_ContentExpand"><span>⇧</span>Expand<span>⇧</span></p> <p id="travel_TraveledList_title">Traveled</p> <div id="travel_TraveledList" class="at_left"> <span>CHINA</span>