81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
|
import { getScene, getCategory } from "../api";
|
||
|
|
|
||
|
|
// Function to add a sidebar to the destination object
|
||
|
|
|
||
|
|
async function loadSidebar(scene_id, destination) {
|
||
|
|
getScene(scene_id).then((scene) => {
|
||
|
|
getCategory(scene.obj.category).then((category) => {
|
||
|
|
var sidebar = document.createElement("div");
|
||
|
|
sidebar.setAttribute("class", "collapse show");
|
||
|
|
sidebar.setAttribute("id", "sceneSidebar");
|
||
|
|
|
||
|
|
var p = document.createElement("div");
|
||
|
|
p.setAttribute("class", "p-4");
|
||
|
|
|
||
|
|
var h5 = document.createElement("h5");
|
||
|
|
h5.setAttribute("class", "font-weight-bold");
|
||
|
|
h5.textContent = "Scenes";
|
||
|
|
|
||
|
|
var ul = document.createElement("ul");
|
||
|
|
ul.setAttribute("class", "nav flex-column");
|
||
|
|
|
||
|
|
category.obj.scenes.forEach((scene) => {
|
||
|
|
var li = document.createElement("li");
|
||
|
|
li.setAttribute("class", "nav-item");
|
||
|
|
|
||
|
|
var a = document.createElement("a");
|
||
|
|
a.setAttribute("href", "#");
|
||
|
|
a.setAttribute("class", "nav-link");
|
||
|
|
a.textContent = scene.title;
|
||
|
|
a.addEventListener("click", function () {
|
||
|
|
loadScene(scene.id, -1, -1, -1, destination);
|
||
|
|
});
|
||
|
|
|
||
|
|
li.appendChild(a);
|
||
|
|
ul.appendChild(li);
|
||
|
|
});
|
||
|
|
|
||
|
|
p.appendChild(h5);
|
||
|
|
p.appendChild(ul);
|
||
|
|
|
||
|
|
var button = document.createElement("button");
|
||
|
|
button.setAttribute("class", "btn-close-sidebar");
|
||
|
|
button.setAttribute("type", "button");
|
||
|
|
button.setAttribute("id", "btnCloseSidebar");
|
||
|
|
button.textContent = "Close Sidebar";
|
||
|
|
|
||
|
|
button.addEventListener("click", function () {
|
||
|
|
toggleSidebar();
|
||
|
|
});
|
||
|
|
|
||
|
|
sidebar.appendChild(button); // TODO: Make it prettier before enabling.
|
||
|
|
sidebar.appendChild(p);
|
||
|
|
|
||
|
|
var reopenButton = document.createElement("button");
|
||
|
|
reopenButton.setAttribute("class", "btn-open-sidebar hide");
|
||
|
|
reopenButton.textContent = "Open Sidebar";
|
||
|
|
reopenButton.addEventListener("click", function () {
|
||
|
|
toggleSidebar();
|
||
|
|
});
|
||
|
|
|
||
|
|
destination.prepend(reopenButton);
|
||
|
|
|
||
|
|
destination.prepend(sidebar);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleSidebar() {
|
||
|
|
const sidebar = document.getElementById("sceneSidebar");
|
||
|
|
const reopenButton = document.querySelector(".btn-open-sidebar");
|
||
|
|
|
||
|
|
if (!sidebar.classList.contains("show")) {
|
||
|
|
sidebar.classList.add("show");
|
||
|
|
reopenButton.classList.add("hide");
|
||
|
|
} else {
|
||
|
|
sidebar.classList.remove("show");
|
||
|
|
reopenButton.classList.remove("hide");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { loadSidebar, toggleSidebar };
|