weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dropdowns now close when clicking outside of them

Browse Source
This commit is contained in:
Pax1601 2023-05-04 09:54:26 +02:00
parent e3b88d4e35
commit 7ecfc5afef
3 changed files with 16 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/controls/dropdown.ts
View File

@ -19,17 +19,18 @@ export class Dropdown {
this.setOptions(options);
}
this.#value.addEventListener( "click", ev => {
this.#element.classList.toggle( "is-open" );
this.#value.addEventListener("click", (ev) => {
this.#element.classList.toggle("is-open");
this.#clip();
});
this.#options.classList.add( "ol-scrollable" );
document.addEventListener("click", (ev) => {
if (!(this.#value.contains(ev.target as Node) || this.#options.contains(ev.target as Node) || this.#element.contains(ev.target as Node))) {
this.#element.classList.remove("is-open");
}
});
// Commented out since it is a bit frustrating, particularly when the dropdown opens towards the top and not to the bottom
//this.#element.addEventListener("mouseleave", ev => {
// this.#close();
//});
this.#options.classList.add( "ol-scrollable" );
}
setOptions(optionsList: string[])

36
client/src/index.ts
View File

@ -41,24 +41,24 @@ var unitDataTable: UnitDataTable;
var featureSwitches;
function setup() {
featureSwitches = new FeatureSwitches();
/* Initialize base functionalitites*/
/* Initialize base functionalitites */
map = new Map('map-container');
unitsManager = new UnitsManager();
missionHandler = new MissionHandler();
/* Panels */
unitInfoPanel = new UnitInfoPanel("unit-info-panel");
unitControlPanel = new UnitControlPanel("unit-control-panel");
connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
unitInfoPanel = new UnitInfoPanel("unit-info-panel");
unitControlPanel = new UnitControlPanel("unit-control-panel");
connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
//logPanel = new LogPanel("log-panel");
/* Popups */
infoPopup = new Popup("info-popup");
/* Unit data table */
unitDataTable = new UnitDataTable("unit-data-table");
/* AIC */
@ -75,7 +75,6 @@ function setup() {
atc.startUpdates();
}
new Dropdown( "app-icon", () => {} );
/* Setup event handlers */
@ -158,7 +157,6 @@ function setupEvents() {
/* Generic clicks */
document.addEventListener("click", (ev) => {
if (ev instanceof MouseEvent && ev.target instanceof HTMLElement) {
const target = ev.target;
if (target.classList.contains("olympus-dialog-close")) {
@ -183,11 +181,9 @@ function setupEvents() {
/* Keyup events */
document.addEventListener("keyup", ev => {
if ( keyEventWasInInput( ev ) ) {
return;
}
switch (ev.code) {
case "KeyL":
document.body.toggleAttribute("data-hide-labels");
@ -216,11 +212,9 @@ function setupEvents() {
/* Keydown events */
document.addEventListener("keydown", ev => {
if ( keyEventWasInInput( ev ) ) {
return;
}
switch (ev.code) {
case "KeyW":
case "KeyA":
@ -235,24 +229,6 @@ function setupEvents() {
}
});
/*
const unitName = document.getElementById( "unit-name" );
if ( unitName instanceof HTMLInputElement ) {
unitName.addEventListener( "change", ev => {
unitName.setAttribute( "disabled", "true" );
unitName.setAttribute( "readonly", "true" );
// Do something with this:
});
document.addEventListener( "editUnitName", ev => {
unitName.removeAttribute( "disabled" );
unitName.removeAttribute( "readonly" );
unitName.focus();
});
}
//*/
document.addEventListener( "closeDialog", (ev: CustomEventInit) => {
ev.detail._element.closest( ".ol-dialog" ).classList.add( "hide" );
});

4
client/views/unitcontrolpanel.ejs
View File

@ -16,7 +16,7 @@
<div class="slider-container flight-control-slider" id="airspeed-slider">
<dl class="ol-data-grid">
<dt>Speed</dt>
<dd class="flight-control-value" id="value">451kts</dd>
<dd class="flight-control-value" id="value"></dd>
</dl>
<input type="range" min="0" max="100" value="0" class="slider">
</div>
@ -24,7 +24,7 @@
<div class="slider-container flight-control-slider" id="altitude-slider">
<dl class="ol-data-grid">
<dt>Altitude</dt>
<dd class="flight-control-value" id="value">21,594ft</dd>
<dd class="flight-control-value" id="value"></dd>
</dl>
<input type="range" min="0" max="100" value="0" class="slider">
</div>