Skip to content

Commit

Permalink
Update Travel Pages Img
Browse files Browse the repository at this point in the history
  • Loading branch information
SeeChen committed Nov 18, 2024
1 parent 235dc0e commit 84cb5ba
Show file tree
Hide file tree
Showing 29 changed files with 186 additions and 123 deletions.
64 changes: 53 additions & 11 deletions CascadingStyleSheets/Travel/travel.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,27 @@
}
}

@keyframes travel_animation_1 {

0% {

transform: rotateY(90deg);
filter: opacity(0) grayscale(1) blur(1em);
}

50%,
70% {
transform: rotateY(0deg);
filter: opacity(1) grayscale(0) blur(0);
}

100% {
transform: rotateY(90deg);
filter: opacity(0) grayscale(1) blur(1em);
}

}

#box_TravelPage {

width: 100vw;
Expand Down Expand Up @@ -321,7 +342,7 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory {

position: relative;

height: calc(90vh - 2em);
height: 100vh;
padding-top: var(--font-size-5em);
padding-bottom: var(--font-size-1em);

Expand Down Expand Up @@ -500,6 +521,8 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {

#traveled_Area #traveled_Area_AreaList tr td.table_right span {

background: rgba(255, 255, 255, 0.5);

border: 0.15em solid var(--font-color-normal);
padding: 0.05em 1em;
border-radius: 1em;
Expand Down Expand Up @@ -545,17 +568,18 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {

overflow: hidden scroll;

padding-top: 12em;
padding-top: 50vh;

width: 100vw;
height: 100%;

z-index: 9;
z-index: 1;
}

#traveled_ImgArea > div {
width: var(--travel-Story-Img-Area-Box-width);
margin: auto;
padding-bottom: 80vh;

display: flex;
justify-content: center;
Expand All @@ -574,18 +598,23 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {
box-sizing: border-box;

max-height: 1000vh;
opacity: 1;

transition: all 1s;
transition: all 0.5s;

animation: travel_animation_1 1s linear;
animation-timeline: view();
}

#traveled_ImgArea img.test {
#traveled_ImgArea .traveled_story_img.no-in-choose-animation {
opacity: 0;
}
#traveled_ImgArea .traveled_story_img.no-in-choose {
max-height: 0;
width: 0;
margin: 0;
padding: 0;
max-height: 0;
position: absolute;
transform: scale(0);
/* display: inline; */
margin: 0;
display: inline;
}

#traveled_ImgArea::-webkit-scrollbar {
Expand Down Expand Up @@ -617,7 +646,13 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {

mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);

transition: mask 0.5s, bottom 1s;
transition: mask 0.5s, bottom 1s, bottom 1s;

z-index: 10;
}

#box_TravelPage #travel_TraveledList.view-hide {
bottom: -5em;
}

#box_TravelPage #travel_TraveledList.at_right {
Expand Down Expand Up @@ -715,6 +750,13 @@ div:has(> #travel_ContentExpand) #travel_TraveledStory::-webkit-scrollbar {
margin: auto auto 0.1em;

border-bottom: 0.05em solid #CCC;

transition: bottom 1s;
z-index: 9;
}

#box_TravelPage #travel_TraveledList_title.view-hide {
bottom: -5em;
}

#travel_btn_MapsBack {
Expand Down
45 changes: 40 additions & 5 deletions Data/Travel/TraveledList.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,62 @@
"city": "_dongcheng_",
"labels": ["_test0_", "_test1_", "_test2_", "_test3_"]
}, {
"src": "",
"src": "1.avif",
"alt": "",
"city": "_city1_",
"labels": ["_test0_", "_test2_", "_test4_", "_test6_"]
}, {
"src": "",
"src": "2.avif",
"alt": "",
"city": "_city2_",
"labels": ["_test1_", "_test3_", "_test5_", "_test7_"]
}, {
"src": "",
"src": "3.avif",
"alt": "",
"city": "_city0_",
"labels": ["_test1_", "_test4_", "_test7_", "_test9_"]
}, {
"src": "",
"src": "4.avif",
"alt": "",
"city": "_city1_",
"labels": ["_test2_", "_test1_", "_test4_", "_test6_"]
}, {
"src": "",
"src": "5.avif",
"alt": "",
"city": "_city2_",
"labels": ["_test2_", "_test4_", "_test6_", "_test8_"]
}, {
"src": "6.avif",
"alt": "",
"city": "_dongcheng_",
"labels": ["_test0_", "_test1_", "_test2_", "_test3_"]
}, {
"src": "7.avif",
"alt": "",
"city": "_city1_",
"labels": ["_test0_", "_test2_", "_test4_", "_test6_"]
}, {
"src": "8.avif",
"alt": "",
"city": "_city2_",
"labels": ["_test1_", "_test3_", "_test5_", "_test7_"]
}, {
"src": "9.avif",
"alt": "",
"city": "_city0_",
"labels": ["_test1_", "_test4_", "_test7_", "_test9_"]
}, {
"src": "10.avif",
"alt": "",
"city": "_city1_",
"labels": ["_test2_", "_test1_", "_test4_", "_test6_"]
}, {
"src": "11.avif",
"alt": "",
"city": "_city2_",
"labels": ["_test2_", "_test4_", "_test6_", "_test8_"]
}, {
"src": "12.avif",
"alt": "",
"city": "_city2_",
"labels": ["_test2_", "_test4_", "_test6_", "_test8_"]
Expand Down
File renamed without changes.
File renamed without changes.
Binary file added File/Image/Travel/CN/BeiJing/10.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/11.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/12.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/13.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/14.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/15.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/16.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/17.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/18.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/19.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/2.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/3.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/4.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/5.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/6.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/7.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/8.avif
Binary file not shown.
Binary file added File/Image/Travel/CN/BeiJing/9.avif
Binary file not shown.
8 changes: 7 additions & 1 deletion JavaScript/General/tools.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,11 @@ export const tools = {
countryMY: "/Language/Area/MY.json",
countrySG: "/Language/Area/SG.json",

cityCN: "/Language/Area/City/CN.json"
cityCN: "/Language/Area/City/CN.json",
cityMY: "/Language/Area/City/MY.json",
citySG: "/Language/Area/City/SG.json",

imageLabel: "/Language/Image/Label.json"
};

const translateEntries = await Promise.all(
Expand All @@ -99,6 +103,8 @@ export const tools = {
);

window.globalValues.translateData = Object.fromEntries(translateEntries);

console.log(window.globalValues.translateData);
},

}
65 changes: 55 additions & 10 deletions JavaScript/Travel/travel.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export const SeeChen_TravelPage = {
});

await SeeChen_TravelPage_ImgLabels.buildRelationshipMap();

},

render: async () => {
Expand Down Expand Up @@ -208,7 +207,11 @@ const SeeChen_TravelPage_MapsAction = {
document.querySelector("#traveled_World").style.display = "none";
} else {

document.querySelector("#travel_TraveledList_title").classList.toggle("view-hide");
document.querySelector("#travel_TraveledList").classList.toggle("view-hide");

if (window.myData.travel.SelectedLabel.length > 1) {

const toRemoveCity = traveled_AreaList.querySelectorAll("#table_city span");
const toRemoveLabel = traveled_AreaList.querySelectorAll("#table_label span");
toRemoveCity.forEach(element => {
Expand All @@ -220,11 +223,11 @@ const SeeChen_TravelPage_MapsAction = {
DisplayCityLabel = Array.isArray(DisplayCityLabel) ? DisplayCityLabel : Object.values(DisplayCityLabel).flat();
DisplayCityLabel.forEach(city => {

let label_city = document.createElement("span");
label_city.id = `LabelCity_${city}`;
label_city.classList.add("stay");
label_city.textContent = city;
document.querySelector("#table_city").appendChild(label_city);
let label_city = document.createElement("span");
label_city.id = `LabelCity_${city}`;
label_city.classList.add("stay");
label_city.textContent = city;
document.querySelector("#table_city").appendChild(label_city);
});
let DisplayLabelLabel = SeeChen_TravelPage_ImgLabels.filterLabel(window.myData.travel.SelectedLabel)
let LabelProvince = Object.keys(window.myData.travel.CityName[targetMapId] || window.myData.travel.CityName[window.myData.travel.SelectedLabel[0]]);
Expand All @@ -238,6 +241,31 @@ const SeeChen_TravelPage_MapsAction = {
label_label.textContent = label;
document.querySelector("#table_label").appendChild(label_label);
});

const img_area_to_show = document.querySelectorAll(".img_area");
img_area_to_show.forEach(element => {
element.querySelectorAll(".traveled_story_img").forEach(eleImg => {
element.removeChild(eleImg);
});
});
await new Promise(r => setTimeout(r, 1500));
const img_current_country_pro = window.myData.travel.TravelList[window.myData.travel.SelectedLabel[0]][targetMapId]["img"];
for (var i = 0; i < img_current_country_pro.length; i++) {
let img = document.createElement("img");
img.classList.add(
"traveled_story_img",
`Label-${window.myData.travel.SelectedLabel[0]}`,
`Label-${targetMapId}`,
`Label-${img_current_country_pro[i]["city"]}`
);
img_current_country_pro[i]['labels'].forEach(label => {
img.classList.add(`Label-${label}`);
});
img.loading = "lazy";
img.src = `/File/Image/Travel/${window.myData.travel.SelectedLabel[0]}/${targetMapId}/${img_current_country_pro[i]["src"]}`;

img_area_to_show[i % 2].appendChild(img);
}
}
}
},
Expand Down Expand Up @@ -429,6 +457,10 @@ const SeeChen_TravelPage_ImgLabels_Event = {
) => {

const { e } = clickEvent;

if (!e.target.id.startsWith("Label")) {
return;
}

e.target.classList.toggle("selected");

Expand Down Expand Up @@ -488,6 +520,23 @@ const SeeChen_TravelPage_ImgLabels_Event = {
}, 500);
}
});

document.querySelectorAll("#traveled_ImgArea .img_area img").forEach(img => {
const containAllLabel = window.myData.travel.SelectedLabel.every((label) =>
img.classList.contains(`Label-${label}`)
);
if (!containAllLabel) {
img.classList.add("no-in-choose-animation");
setTimeout(() => {
img.classList.add("no-in-choose");
}, 1000);
} else {
img.classList.remove("no-in-choose");
setTimeout(() => {
img.classList.remove("no-in-choose-animation");
}, 500);
}
});
}
}

Expand Down Expand Up @@ -535,10 +584,6 @@ const SeeChen_TravelPage_ImgLabels = {
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: (
Expand Down
Loading

0 comments on commit 84cb5ba

Please sign in to comment.