72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
// Global ATON
|
|
import { Controller } from "@hotwired/stimulus"
|
|
import AppState from "../state.js";
|
|
import { createExposureSlider, createLightSlider } from "../utils/environment.js";
|
|
|
|
const html = String.raw;
|
|
const panelHeader = html`
|
|
<i class="bi bi-gear-fill me-1"></i> Impostazioni
|
|
`;
|
|
|
|
export default class extends Controller {
|
|
static targets = ['settings', 'fullscreen'];
|
|
|
|
connect() {
|
|
console.log('#toolbar controller connected');
|
|
}
|
|
/**
|
|
* Open settings panel
|
|
* @param {Event} event
|
|
*/
|
|
toggleSettings(event) {
|
|
ATON.UI.setSidePanelLeft();
|
|
ATON.UI.showSidePanel({header: panelHeader});
|
|
this.#buildSettingsPanel(ATON.UI.elSidePanel);
|
|
}
|
|
toggleFullscreen() {
|
|
/**
|
|
* @type {HTMLAnchorElement}
|
|
*/
|
|
const target = this.fullscreenTarget;
|
|
const icon = target.querySelector('i');
|
|
if (!document.fullscreenElement) {
|
|
document.body.requestFullscreen();
|
|
icon.classList.remove('bi-fullscreen');
|
|
icon.classList.add('bi-fullscreen-exit');
|
|
target.title = 'Esci da schermo intero';
|
|
} else {
|
|
document.exitFullscreen();
|
|
icon.classList.remove('bi-fullscreen-exit');
|
|
icon.classList.add('bi-fullscreen');
|
|
target.title = 'Attiva schermo intero';
|
|
}
|
|
}
|
|
/**
|
|
* Clone a <template> by id
|
|
* @param {String} id
|
|
* @returns {DocumentFragment}
|
|
*/
|
|
#cloneTemplate(id) {
|
|
return document.getElementById(id).content.cloneNode(true);
|
|
}
|
|
/**
|
|
* Create the left-side settings panel
|
|
* content
|
|
* @param {Element} panel
|
|
*/
|
|
#buildSettingsPanel(panel) {
|
|
const fragment = this.#cloneTemplate('tmpl-settings');
|
|
let sliderContainer = fragment.querySelector('[data-sliders-container]');
|
|
let exposureContainer = fragment.querySelector('[data-slider-exposure-container]');
|
|
|
|
['x', 'y', 'z'].forEach((axis, i) => {
|
|
const label = ['Asse X', 'Asse Y', 'Asse Z'][i];
|
|
sliderContainer.appendChild(createLightSlider(axis, label, [-2, 2], 0.1));
|
|
})
|
|
|
|
exposureContainer.appendChild(createExposureSlider('Valore', [0, 5]));
|
|
|
|
panel.appendChild(fragment);
|
|
}
|
|
}
|