Refactored the scene script to extract the logic for loading sidebars and navbars into separate, modular files. This change enhances code maintainability and readability by compartmentalizing responsibilities and clarifying function boundaries. Now, `navbar.js` and `sidebar.js` handle the UI component rendering, allowing for easier updates and potential reuse. Adjusted conditional rendering logic to ensure exclusive navbar or sidebar presence, aligning UI behavior with design expectations. This commit signifies a step towards modular architecture in the frontend codebase, facilitating future expansion and modification.
81 lines
No EOL
2.4 KiB
JavaScript
81 lines
No EOL
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 }; |