https://ii23.xyz/memos/smthouttanth/render_infopanel.js

1import { pb } from "../../pb/pb.js";
2
3let loading = true;
4
5const infoPanel_loader = document.getElementById("loader");
6const infoPanel_title = document.getElementById("infopanel-title");
7const infoPanel_synopsis = document.getElementById("infopanel-synopsis");
8const infoPanel_audiotitle = document.getElementById("infopanel-audiotitle");
9const infoPanel_audiosrc = document.getElementById("infopanel-audiosrc");
10const infoPanel_audioplayer = document.getElementById("infopanel-audioplayer");
11const infoPanel_imgs = document.getElementById("infopanel-gallery");
12const infoPanel_research = document.getElementById("infopanel-research");
13const infoPanel_linktoYT = document.getElementById("infopanel-linktoyt");
14const infoPanel_releaseDate = document.getElementById("infopanel-release");
15const infopanel_container = document.getElementById("infopanel-container");
16const infopanel_nav_btns = document.getElementById("infopanel-nav-btns");
17
18if (loading) {
19  infoPanel_audioplayer.classList.add("close");
20  infoPanel_imgs.classList.add("close");
21  infoPanel_research.classList.add("close");
22  infopanel_nav_btns.classList.add("close");
23  infopanel_container.classList.add("loader");
24}
25
26const fileToken = await pb.files.getToken();
27export const all3dObjects = await pb
28  .collection("smthouttanth_project_objects")
29  .getFullList({});
30
31export function loadProjectInfo(project) {
32  loading = false;
33  infopanel_container.classList.remove("loader");
34  infopanel_nav_btns.classList.remove("close");
35  infoPanel_title.textContent = project.project_title;
36  infoPanel_synopsis.innerHTML =
37    project.synopsis_1 +
38    `${project.synopsis_2 ? `<br/>` + project.synopsis_2 : ""}` +
39    `${project.synopsis_3 ? `<br/>` + project.synopsis_3 : ""}`;
40  if (project.audio_title) {
41    infoPanel_audioplayer.classList.remove("close");
42    infoPanel_audiotitle.textContent = project.audio_title + ":";
43    infoPanel_audiosrc.src = pb.files.getURL(project, project.audio_file, {
44      token: fileToken,
45    });
46    infoPanel_audioplayer.load();
47  } else {
48    infoPanel_audiotitle.classList.add("close");
49  }
50  infoPanel_linktoYT.href = project.link_to_YT;
51  infoPanel_linktoYT.textContent = "link to video";
52  infoPanel_linktoYT.classList.remove("close");
53  if (project.project_imgs.length != 0) {
54    infoPanel_imgs.classList.remove("close");
55    infoPanel_imgs.innerHTML = "<p>related imgs:</p>"; // Clear existing images
56    project.project_imgs.forEach((img) => {
57      const imgElement = document.createElement("img");
58      imgElement.src = pb.files.getURL(project, img, { token: fileToken });
59      infoPanel_imgs.appendChild(imgElement);
60    });
61  }
62
63  infoPanel_research.classList.remove("close");
64  infoPanel_research.innerHTML =
65    project.research_remarks + `<br/` + project.research_links;
66  infoPanel_releaseDate.innerHTML =
67    "release: " +
68    new Date(project.release_date).toLocaleDateString(undefined, {
69      year: "numeric",
70      month: "long",
71      day: "numeric",
72    });
73}
74
75let objectname;
76
77export async function loadIndividualObjInfo(objname) {
78  const indivObject = all3dObjects.find(
79    (obj) => obj.object_render_name == objname,
80  );
81
82  if (objectname != objname) {
83    objectname = objname;
84    infoPanel_title.textContent = indivObject.object_title;
85    infoPanel_synopsis.innerHTML =
86      indivObject.synopsis_1 +
87      `${indivObject.synopsis_2 ? `<br/>` + indivObject.synopsis_2 : ""}` +
88      `${indivObject.synopsis_3 ? `<br/>` + indivObject.synopsis_3 : ""}`;
89    infoPanel_audiotitle.classList.remove("close");
90    infoPanel_audioplayer.classList.remove("close");
91    infoPanel_audiotitle.textContent = indivObject.audio_title + ":";
92    infoPanel_audiosrc.src = pb.files.getURL(
93      indivObject,
94      indivObject.audio_file,
95      {
96        token: fileToken,
97      },
98    );
99    infoPanel_audioplayer.load();
100    infoPanel_linktoYT.href = indivObject.link_to_YT
101      ? indivObject.link_to_YT
102      : "";
103
104    const imgsHTML = [];
105    indivObject.project_imgs.forEach((img) => {
106      const imgElement = document.createElement("img");
107      imgElement.src = pb.files.getURL(indivObject, img, { token: fileToken });
108      imgsHTML.push(imgElement);
109    });
110    infoPanel_imgs.innerHTML = "";
111    for (let index = 0; index < imgsHTML.length; index++) {
112      const img = imgsHTML[index];
113      if (infoPanel_imgs.childElementCount == imgsHTML.length) {
114        return null;
115      } else {
116        infoPanel_imgs.appendChild(img);
117      }
118    }
119
120    infoPanel_research.innerHTML =
121      indivObject.research_remarks + `<br/` + indivObject.research_links;
122
123    infoPanel_linktoYT.classList.add("close");
124  }
125}