From 26733a4b841feed1bf79a79a55cc1e73779b4ac1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Wed, 22 Apr 2026 10:30:04 +0200 Subject: [PATCH] Remove UI module --- js/controllers/menu_controller.js | 33 ++++++++++++++++++++- js/ui.js | 49 ------------------------------- js/utils/environment.js | 6 ++-- scenes/ssgp/index.html | 9 ++++-- 4 files changed, 42 insertions(+), 55 deletions(-) delete mode 100644 js/ui.js diff --git a/js/controllers/menu_controller.js b/js/controllers/menu_controller.js index e516dec..7344f77 100644 --- a/js/controllers/menu_controller.js +++ b/js/controllers/menu_controller.js @@ -1,9 +1,12 @@ // Global ATON import { Controller } from "@hotwired/stimulus" import AppState from "../state.js"; +import { traverseOntology } from "../ontology.js"; const html = String.raw; const domParser = new DOMParser; +// TODO: hard-coded, but follows a convention... +const ontologyJsonPath = location.pathname + 'ontology.json'; export default class extends Controller { static targets = ['trigger', 'layers', 'ontology']; @@ -15,11 +18,12 @@ export default class extends Controller { * Open settings panel * @param {Event} event */ - toggleMenu(event) { + async toggleMenu() { ATON.UI.setSidePanelRight(); ATON.UI.showSidePanel({header: 'Menu'}); this.#buildMenuPanel(ATON.UI.elSidePanel); this.#buildLayersMenu(AppState.normalizedNodes, this.layersTarget); + this.#buildOntologyMenu(await traverseOntology(ontologyJsonPath), this.ontologyTarget); } /** * @param {Event} event @@ -75,4 +79,31 @@ export default class extends Controller { ); } } + /** + * Temporary implementation to show domains only + * @todo Don't rebuild it every time, use caching, return a container + * @param {Object} ontology The traversed ontology object (temp) + * @param {HTMLElement} tab Tab content element + */ + #buildOntologyMenu(ontology, tab) { + console.debug(ontology); + + const mainNode = tab.querySelector('#ontology-list'); + mainNode.textContent = ontology.ontology; + + let domainList = html` + + `; + + // Very fragile and ugly!! + mainNode.innerHTML += domainList; + domainList = tab.querySelector('#domains-list'); + + for(let domain of ontology.domains) { + const domainItem = html` +
  • ${domain.label}
    • + `; + domainList.innerHTML += domainItem; + } + } } diff --git a/js/ui.js b/js/ui.js deleted file mode 100644 index 63d29cb..0000000 --- a/js/ui.js +++ /dev/null @@ -1,49 +0,0 @@ -import AppState from "./state.js"; -import { traverseOntology } from "./ontology.js"; - -/** - * @module UI - */ -/** - * - * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector - */ -export function pauseAudio(triggerSelector) { - // What if more than one audio element is playing? - const audio = document.querySelector('audio'); - - if (audio) { - document.querySelectorAll(triggerSelector).forEach(el => { - el.addEventListener('click', () => audio.pause()); - }); - document.querySelector('.modal').addEventListener('blur', () => { - audio.pause(); - }); - } -} -/** - * @see traverseOntology - * @param {Object} ontology The traversed ontology object (temp) - * @param {HTMLElement} sidePanel ATON's side panel element - */ -function buildOntologyMenu(ontology, sidePanel) { - const list = document.createElement('ul'); - list.className = 'list-group'; - const mainNode = document.createElement('li'); - mainNode.className = 'list-group-item'; - mainNode.textContent = ontology.ontology; - - const domainList = document.createElement('ul'); - domainList.className = 'list-group'; - - for(let domain of ontology.domains) { - const domainItem = document.createElement('li'); - domainItem.textContent = domain.label; - domainItem.className = 'list-group-item'; - domainList.appendChild(domainItem); - } - - mainNode.appendChild(domainList); - list.appendChild(mainNode); - sidePanel.appendChild(list); -} \ No newline at end of file diff --git a/js/utils/environment.js b/js/utils/environment.js index 2876af5..8960133 100644 --- a/js/utils/environment.js +++ b/js/utils/environment.js @@ -59,18 +59,18 @@ export function createLightSlider(direction, label, range, step) { * @param {Array} range - The slider's range * @param {Number} step - The slider's step */ -export function createExposureSlider(label, range, step = 0.2) { +export function createExposureSlider(label, range, step = 0.05) { const currentVal = AppState.exposure; const exposureSlider = ATON.UI.createSlider({ range, label, - value: Number.parseFloat(currentVal).toPrecision(2), + value: Number.parseFloat(currentVal).toPrecision(1), oninput: val => { ATON.setExposure(val); AppState.exposure = val; - console.debug(ATON.getExposure()); + console.debug('Current exposure:', ATON.getExposure()); }, }); diff --git a/scenes/ssgp/index.html b/scenes/ssgp/index.html index faf60e0..07356db 100644 --- a/scenes/ssgp/index.html +++ b/scenes/ssgp/index.html @@ -134,7 +134,7 @@ @@ -142,7 +142,12 @@
    -
    +
    + +
      +
      • +
    +