quackscape/assets/js/scene/navbar.js
Kumi 85c44f985d
refactor(scene): modularize sidebar and navbar loading
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.
2024-03-16 11:16:26 +01:00

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 };