Kumi
85c44f985d
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.
64 lines
No EOL
2.4 KiB
JavaScript
64 lines
No EOL
2.4 KiB
JavaScript
import { getScene, getCategory } from "../api";
|
|
|
|
// Function to add a navbar to the destination object
|
|
|
|
async function loadNavbar(scene_id, destination) {
|
|
getScene(scene_id).then((scene) => {
|
|
getCategory(scene.obj.category).then((category) => {
|
|
var nav = document.createElement("nav");
|
|
nav.setAttribute("class", "navbar navbar-expand-lg navbar-dark bg-dark");
|
|
nav.setAttribute("id", "sceneNavbar");
|
|
|
|
var container = document.createElement("div");
|
|
container.setAttribute("class", "container-fluid");
|
|
|
|
var dropdown = document.createElement("div");
|
|
dropdown.setAttribute("class", "dropdown");
|
|
|
|
var sceneSelector = document.createElement("button");
|
|
sceneSelector.setAttribute("class", "btn btn-secondary dropdown-toggle");
|
|
sceneSelector.setAttribute("type", "button");
|
|
sceneSelector.setAttribute("id", "sceneSelector");
|
|
sceneSelector.setAttribute("data-bs-toggle", "dropdown");
|
|
sceneSelector.setAttribute("aria-expanded", "true");
|
|
sceneSelector.textContent = "Select Scene";
|
|
|
|
var dropdownMenu = document.createElement("ul");
|
|
dropdownMenu.setAttribute("class", "dropdown-menu show");
|
|
dropdownMenu.setAttribute("aria-labelledby", "sceneSelector");
|
|
console.log(dropdownMenu);
|
|
|
|
category.obj.scenes.forEach((scene) => {
|
|
console.log(scene);
|
|
var sceneLink = document.createElement("a");
|
|
sceneLink.setAttribute("class", "dropdown-item");
|
|
sceneLink.setAttribute("href", "#");
|
|
sceneLink.textContent = scene.title;
|
|
sceneLink.addEventListener("click", function () {
|
|
loadScene(scene.id, -1, -1, -1, destination);
|
|
});
|
|
|
|
dropdownMenu.appendChild(sceneLink);
|
|
});
|
|
|
|
var sceneTitle = document.createElement("a");
|
|
sceneTitle.setAttribute("class", "navbar-brand");
|
|
sceneTitle.setAttribute("href", "#");
|
|
sceneTitle.setAttribute("id", "sceneTitle");
|
|
sceneTitle.textContent = scene.obj.title;
|
|
|
|
dropdown.appendChild(sceneSelector);
|
|
dropdown.appendChild(dropdownMenu);
|
|
console.log(dropdownMenu);
|
|
|
|
container.appendChild(dropdown);
|
|
container.appendChild(sceneTitle);
|
|
|
|
nav.appendChild(container);
|
|
|
|
destination.prepend(nav);
|
|
});
|
|
});
|
|
}
|
|
|
|
export { loadNavbar }; |