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 @@