diff --git a/TRANS_HYPE/components/rightPanel/setupMenu.css b/TRANS_HYPE/components/rightPanel/setupMenu.css index 2dd22a9..0a6a406 100644 --- a/TRANS_HYPE/components/rightPanel/setupMenu.css +++ b/TRANS_HYPE/components/rightPanel/setupMenu.css @@ -29,7 +29,7 @@ display: inline-flex; flex-direction: row-reverse; z-index: 2; - font-size: 1.2vh; + font-size: x-small; right: 0%; writing-mode: vertical-lr; transform: rotate(0.5turn); @@ -39,15 +39,11 @@ #menu > li { color: #ffffff; - width: 4vh; + width: 25px; height: 20%; text-align: center; - line-height: 4vh; + line-height: 25px; font-weight: 500; - - -webkit-transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); - -ms-transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); - transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); } #menu > li > a { diff --git a/TRANS_HYPE/pages/archive_list/Area.css b/TRANS_HYPE/pages/archive_list/Area.css new file mode 100644 index 0000000..4e6ccff --- /dev/null +++ b/TRANS_HYPE/pages/archive_list/Area.css @@ -0,0 +1,26 @@ +.area_container { + position: relative; + display: flex; + flex-direction: row; + width: 100%; + /* background: rgb(20, 20, 20); */ +} + +.picture1 { + width: 50%; + object-fit: contain; + opacity: 0.5; + transform: translateY(50%); +} + +.picture2 { + width: 50%; + object-fit: contain; + opacity: 0.5; +} + +.description { + position: absolute; + left: 5%; + width: 40%; +} diff --git a/TRANS_HYPE/pages/archive_list/Area.js b/TRANS_HYPE/pages/archive_list/Area.js new file mode 100644 index 0000000..5e3860c --- /dev/null +++ b/TRANS_HYPE/pages/archive_list/Area.js @@ -0,0 +1,21 @@ +import { loadCSS } from "/TRANS_HYPE/utils/loadCSS.js"; +import Picture from "./Picture.js"; +import Description from "./Description.js"; + +export default function Area(area) { + loadCSS("/TRANS_HYPE/pages/archive_list/Area.css"); + const container = document.createElement("li"); + container.classList.add("area_container"); + + const picture1 = Picture(area.pic2); + const picture2 = Picture(area.pic3); + const description = Description(area); + + picture1.classList.add("picture1"); + picture2.classList.add("picture2"); + description.classList.add("description"); + + container.append(picture1, picture2, description); + + return container; +} diff --git a/TRANS_HYPE/pages/archive_list/Description.css b/TRANS_HYPE/pages/archive_list/Description.css new file mode 100644 index 0000000..159bd34 --- /dev/null +++ b/TRANS_HYPE/pages/archive_list/Description.css @@ -0,0 +1,17 @@ +.place_info { + font-family: "Noto Sans KR", sans-serif; + color: white; + + font-size: 1.2vw; + font-weight: 900; + line-height: 170%; + + word-break: keep-all; + z-index: 2; +} + +.interview { + font-size: 2vw; + font-weight: 900; + line-height: 170%; +} diff --git a/TRANS_HYPE/pages/archive_list/Description.js b/TRANS_HYPE/pages/archive_list/Description.js new file mode 100644 index 0000000..7e48c75 --- /dev/null +++ b/TRANS_HYPE/pages/archive_list/Description.js @@ -0,0 +1,18 @@ +import { loadCSS } from "/TRANS_HYPE/utils/loadCSS.js"; +export default function Description(area) { + loadCSS("/TRANS_HYPE/pages/archive_list/Description.css"); + + let descriptionContainer = document.createElement("div"); + descriptionContainer.classList.add("place_info"); + + descriptionContainer.innerHTML = ` +
${area.address_kr}
+
${area.address_eng}
+
${area.graffiti_size}
+
${area.graffiti_style}
+
${area.wall_size}
+

+
${area.discription}
+ `; + return descriptionContainer; +} diff --git a/TRANS_HYPE/pages/archive_list/Picture.css b/TRANS_HYPE/pages/archive_list/Picture.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/TRANS_HYPE/pages/archive_list/Picture.css @@ -0,0 +1 @@ + diff --git a/TRANS_HYPE/pages/archive_list/Picture.js b/TRANS_HYPE/pages/archive_list/Picture.js new file mode 100644 index 0000000..481d7e4 --- /dev/null +++ b/TRANS_HYPE/pages/archive_list/Picture.js @@ -0,0 +1,27 @@ +import { loadCSS } from "/TRANS_HYPE/utils/loadCSS.js"; + +export default function Picture(srcName) { + loadCSS("/TRANS_HYPE/pages/archive_list/Picture.css"); + const picture = document.createElement("img"); + + picture.src = getImgFilePath(320, srcName); + picture.srcset = ` + ${getImgFilePath(320, srcName)} 320w, + ${getImgFilePath(640, srcName)} 640w, + ${getImgFilePath(1024, srcName)} 1024w, + `; + picture.sizes = "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; + return picture; +} + +function getImgFilePath(width, srcName) { + const archivePicturesPath = "../../assets/archive_pictures/"; + switch (width) { + case 320: + return archivePicturesPath + "w320/" + srcName; + case 640: + return archivePicturesPath + "w640/" + srcName; + case 1024: + return archivePicturesPath + "w1024/" + srcName; + } +} diff --git a/TRANS_HYPE/pages/archive_list/Shortcut.css b/TRANS_HYPE/pages/archive_list/Shortcut.css new file mode 100644 index 0000000..c80c200 --- /dev/null +++ b/TRANS_HYPE/pages/archive_list/Shortcut.css @@ -0,0 +1,13 @@ +._shortcut > button { + border: none; + outline: none; + background-color: inherit; + cursor: pointer; + color: gray; + font-family: "Noto Sans KR", sans-serif; +} + +._shortcut > button:hover, +._shortcut > button:focus { + color: white; +} diff --git a/TRANS_HYPE/pages/archive_list/Shortcut.js b/TRANS_HYPE/pages/archive_list/Shortcut.js new file mode 100644 index 0000000..240f4c9 --- /dev/null +++ b/TRANS_HYPE/pages/archive_list/Shortcut.js @@ -0,0 +1,18 @@ +import { loadCSS } from "/TRANS_HYPE/utils/loadCSS.js"; + +export default function Shortcut(area, index, onClickShorcut) { + loadCSS("/TRANS_HYPE/pages/archive_list/Shortcut.css"); + const shortcut = document.createElement("li"); + const button = document.createElement("button"); + button.dataset.index = index; + + shortcut.appendChild(button); + shortcut.classList.add("_shortcut"); + + button.innerHTML = ` + ${area.address_kr} + `; + button.onclick = onClickShorcut; + + return shortcut; +} diff --git a/TRANS_HYPE/pages/archive_list/index.css b/TRANS_HYPE/pages/archive_list/index.css index 075b519..732f0fd 100644 --- a/TRANS_HYPE/pages/archive_list/index.css +++ b/TRANS_HYPE/pages/archive_list/index.css @@ -5,225 +5,36 @@ } body { - overflow: hidden; + /* overflow: hidden; */ background-color: black; } -.text { - font-family: "Noto Sans KR", sans-serif; - - color: white; - z-index: 2; - - -webkit-transition: color 500ms ease; - -ms-transition: color 500ms ease; - transition: color 500ms ease; -} - -#list_and_show { +.shortcut_list { position: absolute; - width: 100%; - height: 85%; - top: 15%; -} - -#area_list_container { - overflow: hidden; - position: absolute; - width: 30%; - height: 100%; - color: white; - z-index: 2; - left: 70%; - list-style-type: none; - -ms-overflow-style: none; - - /* border-left:solid 2px #FFFFFF; */ - - background-color: #000000; - - -webkit-transition: right 300ms cubic-bezier(0.6, 0, 0.4, 1); - -ms-transition: right 300ms cubic-bezier(0.6, 0, 0.4, 1); - transition: right 300ms cubic-bezier(0.6, 0, 0.4, 1); -} - -#area_list_container::-webkit-scrollbar { - display: none; -} - -#area_list { - position: absolute; - left: 0vh; - overflow: hidden; + width: 20%; + height: 70%; + right: 0; + margin-top: 15vh; overflow-y: scroll; - width: 100%; - height: 100%; - - list-style-type: none; - -ms-overflow-style: none; - - background-color: black; + > li { + margin: 10px 0; + } } -#area_list::-webkit-scrollbar { +.shortcut_list::-webkit-scrollbar { display: none; } -#area_list > li { - padding-top: 3vh; - padding-bottom: 5vh; - left: 0; - - width: 100%; - height: 5vh; - - /* border-left:solid 2px #FFFFFF; */ - /* border-right:solid 2px #FFFFFF; */ - - -webkit-transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); - -ms-transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); - transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1); -} - -.area_id { - color: black; - position: absolute; - left: 10vh; - font-weight: 900; - font-size: 1.5vw; - opacity: 0.5; -} - -.area_info { - position: absolute; - left: 2vh; - opacity: 0.5; -} - -.address_kr { - margin-top: 0.5vh; - font-weight: 400; - font-size: 1vw; -} - -.address_eng { - margin-top: 0.5vh; - font-weight: 400; - font-size: 1vw; -} - -#canvus_container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.clickable { - cursor: pointer; -} - -#hovering_canvas { - position: absolute; - width: 100%; - height: 100%; - z-index: 1; - top: 0; -} - -#virtual_map_2d { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - - margin-top: auto; - margin-left: auto; - margin-bottom: auto; - margin-right: auto; - - width: 100%; - height: 100%; - z-index: 1; - opacity: 0.1; -} - -#virtual_map_2d > img { - top: 0; - bottom: 0; - left: 0; - right: 0; - - margin-top: auto; - margin-left: auto; - margin-bottom: auto; - margin-right: auto; - +.area_list { position: absolute; + display: flex; + flex-direction: column; width: 100%; height: 100%; - z-index: 1; - filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(292deg) - brightness(108%) contrast(108%); - - -webkit-transition: opacity 100ms ease-out; - -ms-transition: opacity 100ms ease-out; - transition: opacity 100ms ease-out; -} - -#show { - position: absolute; - width: 70%; - height: 100%; - overflow: hidden; overflow-y: scroll; - - line-height: 170%; - -ms-overflow-style: none; } -#show::-webkit-scrollbar { +.area_list:-webkit-scrollbar { display: none; } - -#Place_info { - position: absolute; - font-size: 1.2vw; - font-weight: 900; - line-height: 170%; - left: 5%; - width: 50%; - word-break: keep-all; - z-index: 2; -} - -#discription { - font-size: 2vw; - font-weight: 900; - line-height: 170%; -} - -#Place_photo { - position: absolute; - right: 3%; - width: 80%; -} -#p01 { - width: 100%; - object-fit: contain; - opacity: 0.5; -} -#p02 { - width: 100%; - object-fit: contain; - opacity: 0.5; -} - -#p03 { - width: 100%; - object-fit: contain; - opacity: 0.5; -} diff --git a/TRANS_HYPE/pages/archive_list/index.html b/TRANS_HYPE/pages/archive_list/index.html index 97618ea..6210325 100644 --- a/TRANS_HYPE/pages/archive_list/index.html +++ b/TRANS_HYPE/pages/archive_list/index.html @@ -14,28 +14,7 @@ -
-
-
-
-
-
-
-
-
-
- -
- - - -
-
- -
- -
-
-
+ + diff --git a/TRANS_HYPE/pages/archive_list/index.js b/TRANS_HYPE/pages/archive_list/index.js index dbe315b..712a0c8 100644 --- a/TRANS_HYPE/pages/archive_list/index.js +++ b/TRANS_HYPE/pages/archive_list/index.js @@ -1,151 +1,55 @@ import { Place_table } from "../../db/database.js"; import { createHeader } from "/TRANS_HYPE/components/rightPanel/navigator.js"; +import Area from "./Area.js"; +import Shortcut from "./Shortcut.js"; class App { constructor() { document.body.prepend(createHeader()); - this.archivePicturesPath = "../../assets/archive_pictures/"; - this.title = document.querySelector("#title"); - this.area_list = document.querySelector("#area_list"); - this.area_list_container = document.querySelector("#area_list_container"); - - this.area_list_container.addEventListener("mouseover", () => { - // this.area_list_container.style.right = "4vh" - }); - this.area_list_container.addEventListener("mouseout", () => { - // this.area_list_container.style.right = "-32vh" + this.area_list = document.querySelector(".area_list"); + this.area_list.addEventListener("scroll", (e) => { + this.change_opacity(); }); - this.virtual_map_2d = document.querySelector("#virtual_map_2d"); - - this.listElements = []; - for (let area_id in Place_table) { - let li_elem = document.createElement("li"); - let area_id_elem = document.createElement("div"); - let area_info_elem = document.createElement("div"); - let address_kr_elem = document.createElement("div"); - let address_eng_elem = document.createElement("div"); + this.shortcut_list = document.querySelector(".shortcut_list"); - li_elem.setAttribute("id", area_id); - - area_id_elem.classList.add("area_id"); - area_info_elem.classList.add("area_info"); - address_kr_elem.classList.add("address_kr"); - address_eng_elem.classList.add("address_eng"); - - area_id_elem.innerHTML = area_id; - address_kr_elem.innerHTML = Place_table[area_id].address_kr; - address_eng_elem.innerHTML = - Place_table[area_id].address_eng + " Republic of Korea"; + const onClickShorcut = (e) => { + this.area_list_items[e.target.dataset.index].scrollIntoView({ + behavior: "smooth", + block: "center", + }); + }; - area_info_elem.append(address_kr_elem, address_eng_elem); - li_elem.append(area_id_elem, area_info_elem); + this.onClickShorcut = onClickShorcut.bind(this); - this.area_list.appendChild(li_elem); - this.listElements.push(li_elem); + let index = 0; + for (let area_id in Place_table) { + const area = Place_table[area_id]; + const shortcut = Shortcut(area, index, this.onClickShorcut); + this.shortcut_list.appendChild(shortcut); + this.area_list.appendChild(Area(area)); + index++; } - this.show = document.querySelector("#show"); - this.address_kr = document.querySelector("#address_kr"); - this.address_eng = document.querySelector("#address_eng"); - this.graffiti_size = document.querySelector("#graffiti_size"); - this.graffiti_style = document.querySelector("#graffiti_style"); - this.wall_size = document.querySelector("#wall_size"); - this.discription = document.querySelector("#discription"); - - this.add_listPageEvent(); - - this.container = document.querySelector("#canvus_container"); - - this.p01 = document.querySelector("#p01"); - this.p02 = document.querySelector("#p02"); - this.p03 = document.querySelector("#p03"); - - this.show_palce("P01"); + this.area_list_items = document.querySelectorAll(".area_list li"); window.onresize = this.resize.bind(this); this.resize(); } - add_listPageEvent() { - for (let value of this.listElements) { - value.addEventListener("mouseover", () => { - value.children[0].style.opacity = 1; - value.children[1].style.opacity = 1; - // value.style.paddingTop = "2vh"; - // value.style.paddingBottom = "2vh"; - value.style.background = "#101010"; - // console.log(document.querySelector("#" + value.id + "_2d_map")) - }); - value.addEventListener("mouseout", () => { - value.children[0].style.opacity = 0.5; - value.children[1].style.opacity = 0.5; - // value.style.paddingTop = "1vh"; - // value.style.paddingBottom = "1vh"; - value.style.background = "#000000"; - }); - value.addEventListener("click", (event) => { - this.show_palce(event.currentTarget.id); - }); - } - } - - show_palce(current_id) { - this.show.scroll(0, 0); - this.address_kr.innerHTML = Place_table[current_id].address_kr; - this.address_eng.innerHTML = Place_table[current_id].address_eng; - this.graffiti_size.innerHTML = - "Graffiti Size : " + Place_table[current_id].graffiti_size; - this.graffiti_style.innerHTML = - "Graffiti Style : " + Place_table[current_id].graffiti_style; - this.wall_size.innerHTML = - "Wall Size : " + Place_table[current_id].wall_size + "

"; - this.discription.innerHTML = Place_table[current_id].discription; - - this.p01.src = - this.archivePicturesPath + "w320/" + Place_table[current_id].pic2; - - this.p02.src = - this.archivePicturesPath + "w320/" + Place_table[current_id].pic3; - - this.p03.src = - this.archivePicturesPath + "w320/" + Place_table[current_id].pic1; - - this.p01.srcset = ` - ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic2} 320w, - ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic2} 640w, - ${ - this.archivePicturesPath + "w1024/" + Place_table[current_id].pic2 - } 1024w, - `; - - this.p02.srcset = ` - ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic3} 320w, - ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic3} 640w, - ${ - this.archivePicturesPath + "w1024/" + Place_table[current_id].pic3 - } 1024w, - `; - - this.p03.srcset = ` - ${this.archivePicturesPath + "w320/" + Place_table[current_id].pic1} 320w, - ${this.archivePicturesPath + "w640/" + Place_table[current_id].pic1} 640w, - ${ - this.archivePicturesPath + "w1024/" + Place_table[current_id].pic1 - } 1024w, - `; - - this.p01.sizes = - "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; - this.p02.sizes = - "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; - this.p03.sizes = - "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px"; + change_opacity() { + const texts = this.area_list.querySelectorAll( + ".place_info, .picture1, .picture2" + ); + const target = this.area_list.getBoundingClientRect().height / 2; + texts.forEach((text) => { + const { top, bottom } = text.getBoundingClientRect(); + text.style.opacity = String(100 - Math.abs(target - top) / 3) + "%"; + }); } resize() { - const width = this.container.clientWidth; - const height = this.container.clientHeight; + this.change_opacity(); } }