Update

SeeChen · Nov 13, 2024 · 498c069 · 498c069
1 parent 416ceff
commit 498c069
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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>