source for lucas.co
archive/main.js (5.2K)
1 import { data } from "./data.js"
2
3 console.log(data)
4
5 const clr_bg_on = "#3f3131"
6 const clr_bg_off = "#ffffff"
7 const clr_txt_on = "#ffffff"
8 const clr_txt_off = "#000000"
9 const side_ct = 4
10 const tab_ct = Object.keys(data.tabs).length
11 let ct_arr = [0, 0, 0, 0]
12 let sel_idx = 0
13 let tab_arr = []
14 let win_h = window.innerHeight
15 let win_w = window.innerWidth
16
17 // side clockwise, starting at top: 0, 1, 2, 3
18
19 loadPage()
20
21 function loadPage() {
22 //window.addEventListener("resize", function() {check_h()})
23 tab_init()
24 tab_format()
25 //tab_set(sel_idx)
26 }
27
28 //function check_h() {
29 // let win_w = window.innerWidth
30 // if(window_innerWidth != win_w) {
31 // win_w = window.innerWidth
32 // tab_format()
33 // }
34 //}
35
36 function img_get(i) {
37 let images = document.getElementsByTagName("img")
38
39 for(const img of img_arr)
40 img.remove()
41
42 let box = document.getElementById("box")
43 let urls = data.tabs["tab_" + i].img
44 let n = 0
45 for(let url of urls) {
46 let img = document.createElement("img")
47 img.src=url
48 img.id = "img_" + n
49 box.append(img)
50 n += 1
51 }
52 }
53
54 function img_format() {
55 let images = document.getElementsByTagName("img")
56 let n_images = images.length
57 let img_w = box_w * 0.4
58 let img_h = box_h * 0.4
59 for(img of images) {
60 img.style.width = img_w + "px"
61 img.style.height = img_h + "px"
62 img.style.left = 20 + "px"
63 img.style.top = (img_h - 20) + "px"
64 }
65 }
66
67 function tab_init() {
68 for(let i = 0; i < tab_ct; i++) {
69 const tab = document.createElement("div")
70 tab.idx = i
71 let side = i
72 if (side >= side_ct) {
73 side %= side_ct
74 side = (side_ct - 1) - side
75 side %= side_ct
76 }
77 tab.side = side
78 //tab.id = "tab_" + String(i)
79 tab.addEventListener("click", function() {tab_set(i)})
80 tab.addEventListener("mouseenter", function() {tab_enter(tab.idx)})
81 tab.addEventListener("mouseleave", function() {tab_exit(tab.idx)})
82 ct_arr[side] += 1
83 tab.id = "tab"
84 tab_arr.push(tab)
85 body.append(tab)
86 }
87
88 for(let i = 0; i < tab_ct; i++) {
89 const tab = tab_arr[i]
90 let label = data.tabs[String(i)].label
91 // vertical labels
92 //if(tab.side == 1 || tab.side == 3) {
93 // let new_label = ""
94 // for(const letter of label)
95 // new_label += letter + "\n"
96 // label = new_label
97 //}
98 tab.innerText = label
99 }
100 }
101
102 function tab_format() {
103 const type_size = win_h * 0.014
104
105 // box
106 const box = document.getElementById("box")
107 const box_h = win_h * 0.5
108 const box_w = win_w * 0.6
109 const box_x = win_w / 2 - box_w / 2
110 const box_y = win_h / 2 - box_h / 2
111 box.style.height = box_h + "px"
112 box.style.width = box_w + "px"
113 box.style.left = box_x + "px"
114 box.style.top = box_y + "px"
115 box.style.fontSize = type_size + "px"
116 box.style.backgroundColor = "#202020"
117
118 // tab
119 for (const tab of tab_arr) {
120 const style = tab.style
121
122 let height = win_h / 25
123 let width = win_h / 2
124 if (tab.side % 2 == 0) width *= win_w / win_h
125
126 let left = Math.sin(tab.side / side_ct * Math.PI * 2) * win_w / 4
127 left += (win_w / 2 - width / 2)
128
129 let top = Math.cos((tab.side + 2) / side_ct * Math.PI * 2) * win_h / 4
130 top += (win_h / 2 - height / 2)
131
132 tab.style.transform = "rotate(" + String(360 / side_ct * tab.side) + "deg)"
133 tab.style.transformOrigin = "center"
134 tab.style.backgroundColor = clr_bg_on
135 tab.style.fontSize = type_size + "px"
136 tab.style.left = String(left) + "px"
137 tab.style.top = String(top) + "px"
138 tab.style.height = String(height) + "px"
139 tab.style.width = String(width) + "px"
140 tab.style.borderTopLeftRadius = "20px"
141 tab.style.borderTopRightRadius = "20px"
142
143 }
144 }
145
146 function tab_enter(tab_idx) {
147 const tab = tab_arr[tab_idx]
148 for (const tab of tab_arr) {
149 if (tab_idx == tab.idx) {
150 tab.style.backgroundColor = clr_bg_on
151 tab.style.color = clr_txt_on
152 }
153 else {
154 tab.style.backgroundColor = clr_bg_off
155 tab.style.color = clr_txt_off
156 }
157 }
158 }
159
160 function tab_exit(idx) {
161 const tab = tab_arr[idx]
162 tab.style.backgroundColor = clr_bg_off
163 tab.style.color = clr_txt_off
164 }
165
166
167 function tab_sel(sel_idx) {
168 for (const tab of tab_arr) {
169 const style = tab.style
170 if(tab.idx == sel_idx) {
171 style.backgroundColor = clr_bg_on
172 style.color = clr_txt_on
173 //images(i)
174 }
175 else {
176 style.backgroundColor = clr_bg_off
177 style.color = clr_txt_off
178 }
179 }
180
181 //const description = document.getElementById("description")
182 //(description.innerText = data.tabs[tab_id]["body"])
183 }